Infotip: location fixes - Storybook examples (eBay#952)

Author: Sean Gates

src/components/components/ebay-tooltip-overlay/constants.js

@@ -8,80 +8,80 @@ exports.pointerStyles = {
         transform: 'translateX(16px) translateY(-50%)',
         left: '100%',
         right: 'auto',
-        top: '50%',
+        top: '0',
         bottom: 'auto'
     },
     'left-top': {
         transform: 'translateX(16px)',
         left: '100%',
         right: 'auto',
-        top: '-8px',
+        top: '-100%',
         bottom: 'auto'
     },
     'left-bottom': {
         transform: 'translateX(16px)',
         left: '100%',
         right: 'auto',
         top: 'auto',
-        bottom: '-8px'
+        bottom: '-10px'
     },
     'right': {
         transform: 'translateX(-16px) translateY(-50%)',
         left: 'auto',
         right: '100%',
-        top: '50%',
+        top: '0',
         bottom: 'auto'
     },
     'right-top': {
         transform: 'translateX(-16px)',
         left: 'auto',
         right: '100%',
-        top: '-8px',
+        top: '-100%',
         bottom: 'auto'
     },
     'right-bottom': {
         transform: 'translateX(-16px)',
         left: 'auto',
         right: '100%',
         top: 'auto',
-        bottom: '-8px'
+        bottom: '-50%'
     },
     'top': {
         transform: 'translateX(-50%)',
         left: '50%',
         right: 'auto',
-        top: 'calc(100% + 16px)',
+        top: 'calc(100% + 2px)',
         bottom: 'auto'
     },
     'top-left': {
-        left: '0px',
+        left: '-10px',
         right: 'auto',
-        top: 'calc(100% + 16px)',
+        top: 'calc(100% + 2px)',
         bottom: 'auto'
     },
     'top-right': {
         left: 'auto',
-        right: '0px',
-        top: 'calc(100% + 16px)',
+        right: '-10px',
+        top: 'calc(100% + 2px)',
         bottom: 'auto'
     },
     'bottom-right': {
         left: 'auto',
-        right: '0px',
+        right: '-10px',
         top: 'auto',
-        bottom: 'calc(100% + 16px)'
+        bottom: 'calc(100% + 12px)'
     },
     'bottom-left': {
-        left: '0px',
+        left: '-10px',
         right: 'auto',
         top: 'auto',
-        bottom: 'calc(100% + 16px)'
+        bottom: 'calc(100% + 12px)'
     },
     'bottom': {
         transform: 'translateX(-50%)',
         left: '50%',
         right: 'auto',
         top: 'auto',
-        bottom: 'calc(100% + 16px)'
+        bottom: 'calc(100% + 12px)'
     }
 };

src/components/ebay-infotip/examples/01-infotip/template.marko

@@ -1,4 +1,4 @@
-<ebay-infotip a11y-close-text="Dismiss infotip" aria-label="Important information">
+<ebay-infotip a11y-close-text="Dismiss infotip" aria-label="Important information" pointer="left-top">
     <ebay-infotip-heading>Important</ebay-infotip-heading>
     <ebay-infotip-content><p>This is some important info</p></ebay-infotip-content>
 </ebay-infotip>

src/components/ebay-infotip/examples/02-custom-icon/template.marko

@@ -1,4 +1,4 @@
-<ebay-infotip a11y-close-text="Dismiss infotip" aria-label="Important information" icon="settings">
+<ebay-infotip a11y-close-text="Dismiss infotip" aria-label="Important information" icon="settings" pointer="left-top">
     <ebay-infotip-heading>Important</ebay-infotip-heading>
     <ebay-infotip-content><p>This is some important info</p></ebay-infotip-content>
 </ebay-infotip>

src/components/ebay-infotip/examples/03-disabled/template.marko

@@ -1,4 +1,4 @@
-<ebay-infotip a11y-close-text="Dismiss infotip" aria-label="Important information" disabled>
+<ebay-infotip a11y-close-text="Dismiss infotip" aria-label="Important information" pointer="left-top" disabled>
     <ebay-infotip-heading>Important</ebay-infotip-heading>
     <ebay-infotip-content><p>This is some important info</p></ebay-infotip-content>
 </ebay-infotip>

src/components/ebay-infotip/examples/04-intotip-in-paragraph/template.marko

@@ -5,7 +5,7 @@
     </em>
     <p>
         Some paragraph content
-        <ebay-infotip a11y-close-text="Dismiss infotip" aria-label="Important information">
+        <ebay-infotip a11y-close-text="Dismiss infotip" aria-label="Important information" pointer="left-top">
             <ebay-infotip-heading>Important</ebay-infotip-heading>
             <ebay-infotip-content>This is some important info</ebay-infotip-content>
         </ebay-infotip>

src/components/ebay-infotip/template.marko

@@ -20,7 +20,7 @@
             <button
                 w-id="host"
                 w-preserve-attrs="aria-expanded,aria-controls,aria-describedby"
-                class="infotip__host icon-btn"
+                class="icon-btn infotip__host"
                 type="button"
                 disabled=data.disabled
                 aria-label=data.ariaLabel>

src/components/ebay-tooltip/test/location-styles.json

@@ -3,84 +3,84 @@
         "overlayTransform": "translateX(16px) translateY(-50%)",
         "overlayLeft": "100%",
         "overlayRight": "auto",
-        "overlayTop": "50%",
+        "overlayTop": "0px",
         "overlayBottom": "auto"
     },
     "left-top": {
         "overlayTransform": "translateX(16px)",
         "overlayLeft": "100%",
         "overlayRight": "auto",
-        "overlayTop": "-8px",
+        "overlayTop": "-100%",
         "overlayBottom": "auto"
     },
     "left-bottom": {
         "overlayTransform": "translateX(16px)",
         "overlayLeft": "100%",
         "overlayRight": "auto",
         "overlayTop": "auto",
-        "overlayBottom": "-8px"
+        "overlayBottom": "-10px"
     },
     "right": {
         "overlayTransform": "translateX(-16px) translateY(-50%)",
         "overlayLeft": "auto",
         "overlayRight": "100%",
-        "overlayTop": "50%",
+        "overlayTop": "0px",
         "overlayBottom": "auto"
     },
     "right-top": {
         "overlayTransform": "translateX(-16px)",
         "overlayLeft": "auto",
         "overlayRight": "100%",
-        "overlayTop": "-8px",
+        "overlayTop": "-100%",
         "overlayBottom": "auto"
     },
     "right-bottom": {
         "overlayTransform": "translateX(-16px)",
         "overlayLeft": "auto",
         "overlayRight": "100%",
         "overlayTop": "auto",
-        "overlayBottom": "-8px"
+        "overlayBottom": "-50%"
     },
     "top": {
         "overlayTransform": "translateX(-50%)",
         "overlayLeft": "50%",
         "overlayRight": "auto",
-        "overlayTop": "calc(100% + 16px)",
+        "overlayTop": "calc(100% + 2px)",
         "overlayBottom": "auto"
     },
     "top-left": {
         "overlayTransform": "",
-        "overlayLeft": "0px",
+        "overlayLeft": "-10px",
         "overlayRight": "auto",
-        "overlayTop": "calc(100% + 16px)",
+        "overlayTop": "calc(100% + 2px)",
         "overlayBottom": "auto"
     },
     "top-right": {
         "overlayTransform": "",
         "overlayLeft": "auto",
-        "overlayRight": "0px",
-        "overlayTop": "calc(100% + 16px)",
+        "overlayRight": "-10px",
+        "overlayTop": "calc(100% + 2px)",
         "overlayBottom": "auto"
     },
     "bottom-right": {
         "overlayTransform": "",
         "overlayLeft": "auto",
-        "overlayRight": "0px",
+        "overlayRight": "-10px",
         "overlayTop": "auto",
-        "overlayBottom": "calc(100% + 16px)"
+        "overlayBottom": "calc(100% + 12px)"
     },
     "bottom-left": {
         "overlayTransform": "",
-        "overlayLeft": "0px",
+        "overlayLeft": "-10px",
         "overlayRight": "auto",
         "overlayTop": "auto",
-        "overlayBottom": "calc(100% + 16px)"
+        "overlayBottom": "calc(100% + 12px)"
     },
     "bottom": {
         "overlayTransform": "translateX(-50%)",
         "overlayLeft": "50%",
         "overlayRight": "auto",
         "overlayTop": "auto",
-        "overlayBottom": "calc(100% + 16px)"
+        "overlayBottom": "calc(100% + 12px)"
     }
 }