feat(Tooltip): add arrows

8base · Oct 11, 2019 · e2d59ab · e2d59ab
1 parent a68a459
commit e2d59ab
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 12 deletions.
diff --git a/...apshots__/tooltip-test-js-components-tooltip-with-click-trigger-open-1-snap.png b/...apshots__/tooltip-test-js-components-tooltip-with-click-trigger-open-1-snap.png
diff --git a/..._image_snapshots__/tooltip-test-js-components-tooltip-with-placement-1-snap.png b/..._image_snapshots__/tooltip-test-js-components-tooltip-with-placement-1-snap.png
diff --git a/e2e/__tests__/tooltip.test.js b/e2e/__tests__/tooltip.test.js
@@ -11,6 +11,13 @@ const SUITES = [
       const message = await iframe.waitForXPath('//*[contains(@class,"ignore-react-onclickoutside")]');
       await message.click();
     }),
+
+  baisy.suite('Components/Tooltip', 'with placement')
+    .addRootHeight(100)
+    .setEnhancer(async (iframe) => {
+      const clickBlock = await iframe.waitForXPath('//*[contains(text(),"Click Me")]');
+      await clickBlock.click();
+    }),
 ];
 
 

diff --git a/src/components/Tooltip/Tooltip.js b/src/components/Tooltip/Tooltip.js
@@ -4,7 +4,7 @@ import { Manager, Popper, Reference } from 'react-popper';
 import onClickOutside from 'react-onclickoutside';
 import { Portal } from 'react-portal';
 
-import { TooltipTargetTag, TooltipMessageTag } from './Tooltip.theme';
+import { TooltipTargetTag, TooltipMessageTag, TooltipArrowTag } from './Tooltip.theme';
 
 
 type RenderProps = {
@@ -47,7 +47,7 @@ const Tooltip: React$ComponentType<TooltipProps> = onClickOutside(
       defaultOpen: false,
       withPortal: true,
       trigger: 'hover',
-      tagName: 'span',
+      tagName: 'div',
       cursor: 'default',
     };
 
@@ -76,21 +76,20 @@ const Tooltip: React$ComponentType<TooltipProps> = onClickOutside(
       return (
         <PortalCondComponent>
           <Popper placement={ placement } eventsEnabled={ eventsEnabled } modifiers={ modifiers }>
-            { ({ ref, style, placement }) => (
+            { ({ ref, style, placement, arrowProps }) => (
               <If condition={ isOpen }>
                 <TooltipMessageTag
                   modifiers={ rest }
                   className="ignore-react-onclickoutside"
                   tagName="div"
                   insideRef={ ref }
                   data-placement={ placement }
+                  placement={ placement }
                   onClick={ (event: *) => event.stopPropagation() }
-                  style={{
-                    ...style,
-                    opacity: 1,
-                  }}
+                  style={ style }
                 >
                   { message }
+                  <TooltipArrowTag placement={ placement }insideRef={ arrowProps.ref } style={ arrowProps.style } />
                 </TooltipMessageTag>
               </If>
             ) }

diff --git a/src/components/Tooltip/Tooltip.stories.js b/src/components/Tooltip/Tooltip.stories.js
@@ -25,6 +25,28 @@ defaultStory.story = {
   name: 'default',
 };
 
+
+export const withPlacement = () => (
+  <div style={{ position: 'relative', top: '50px', left: '100px' }}>
+    <Tooltip trigger="click" placement="left" message="Left Tooltip">
+      <Tooltip trigger="click" placement="top" message="Top Tooltip">
+        <Tooltip trigger="click" placement="bottom" message="Bottom Tooltip">
+          <Tooltip trigger="click" placement="right" message="Right Tooltip">
+            <div style={{ width: '100px', height: '100px', border: '1px solid gray', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+              Click Me
+            </div>
+          </Tooltip>
+        </Tooltip>
+      </Tooltip>
+    </Tooltip>
+  </div>
+);
+
+withPlacement.story = {
+  name: 'with placement',
+};
+
+
 export const withClickTrigger = () => (
   <Tooltip trigger="click" message="It is trap! You was catched!">
     <Icon name="HelpCenter" />
@@ -57,7 +79,7 @@ export const withModifiers = () => (
       </a>
     }
     placement="right"
-    modifiers={{ offset: { offset: '0, -50%' }, flip: { enabled: false }}}
+    modifiers={{ offset: { flip: { enabled: false }}}}
   >
     <Icon name="HelpCenter" />
   </Tooltip>

diff --git a/src/components/Tooltip/Tooltip.theme.js b/src/components/Tooltip/Tooltip.theme.js
@@ -6,20 +6,80 @@ const name = 'tooltip';
 
 const [TooltipMessageTag, tooltipMessageTheme] = createThemeTag(`${name}Message`, ({ COLORS, SIZES }: *) => ({
   root: {
-    padding: '4px 8px',
-    backgroundColor: COLORS.BLACK,
+    // position: 'relative',
+    padding: '12px 16px',
+    backgroundColor: '#3D4751',
     color: COLORS.WHITE,
-    fontSize: SIZES.OVERLINE_2,
+    fontSize: SIZES.OVERLINE_1,
+    lineHeight: 1.8,
+    fontFamily: 'Poppins',
     borderRadius: SIZES.MAIN_BORDER_RADIUS,
     boxShadow: '2px 0 10px 0 rgba(0, 0, 0, 0.16)',
     zIndex: Z_INDEX.TOOLTIP,
   },
+
+  modifiers: {
+    placement: {
+      bottom: {
+        marginTop: '8px',
+      },
+      top: {
+        marginBottom: '8px',
+      },
+      right: {
+        marginLeft: '8px',
+      },
+      left: {
+        marginRight: '8px',
+      },
+    },
+  },
 }));
 
-const [TooltipTargetTag, themeTarget] = createThemeTag(`${name}Target`);
+const [TooltipArrowTag, tooltipArrowTheme] = createThemeTag(`${name}Arrow`, () => ({
+  root: {
+    position: 'absolute',
+    height: '0',
+    width: '0',
+    borderStyle: 'solid',
+  },
+
+  modifiers: {
+    placement: {
+      bottom: {
+        top: '-8px',
+        borderWidth: '0 4px 8px 4px',
+        borderColor: 'transparent transparent #3D4751 transparent',
+      },
+      top: {
+        bottom: '-8px',
+        borderWidth: '8px 4px 0 4px',
+        borderColor: '#3D4751 transparent transparent transparent',
+      },
+      right: {
+        left: '-8px',
+        borderWidth: '4px 8px 4px 0',
+        borderColor: 'transparent #3D4751  transparent transparent',
+      },
+      left: {
+        right: '-8px',
+        borderWidth: '4px 0 4px 8px',
+        borderColor: 'transparent transparent transparent #3D4751',
+      },
+    },
+  },
+}));
+
+
+const [TooltipTargetTag, themeTarget] = createThemeTag(`${name}Target`, {
+  root: {
+    display: 'inline-block',
+  },
+});
 
 const theme = {
   ...tooltipMessageTheme,
+  ...tooltipArrowTheme,
   ...themeTarget,
 };
 
@@ -28,4 +88,5 @@ export {
   theme,
   TooltipMessageTag,
   TooltipTargetTag,
+  TooltipArrowTag,
 };