fix(tooltip): ensure tooltip is not hidden in storybook (#5304)

* docs(tooltip): ensure tooltip is not hidden in storybook * docs(tooltip): adjust positioning * fix(tooltip): update tooltip positioning logic for l/r
carbon-design-system · Feb 10, 2020 · b8c1e1c · b8c1e1c
1 parent 5822571
commit b8c1e1c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js
@@ -38,15 +38,13 @@ const props = {
     triggerText: text('Trigger text (triggerText)', 'Tooltip label'),
     tabIndex: number('Tab index (tabIndex in <Tooltip>)', 0),
     renderIcon: React.forwardRef((props, ref) => (
-      <div
-        style={{
-          width: '10px',
-          height: '10px',
-          borderRadius: '5px',
-          background: 'red',
-        }}
-        ref={ref}
-      />
+      <div ref={ref}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+          <path d="M8.5 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z" />
+          <path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z" />
+          <path fill="none" d="M0 0h16v16H0z" />
+        </svg>
+      </div>
     )),
   }),
   customIconOnly: () => ({
@@ -58,6 +56,13 @@ const props = {
   }),
 };
 
+const containerStyles = {
+  height: 'calc(100vh - 6rem)',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+
 Tooltip.displayName = 'Tooltip';
 
 function UncontrolledTooltipExample() {
@@ -91,7 +96,7 @@ storiesOf('Tooltip', module)
   .add(
     'default (bottom)',
     () => (
-      <div style={{ marginTop: '2rem' }}>
+      <div style={containerStyles}>
         <Tooltip {...props.withIcon()} tooltipBodyId="tooltip-body">
           <p id="tooltip-body">
             This is some tooltip text. This box shows the maximum amount of text
@@ -120,7 +125,7 @@ storiesOf('Tooltip', module)
   .add(
     'no icon',
     () => (
-      <div style={{ marginTop: '2rem' }}>
+      <div style={containerStyles}>
         <Tooltip {...props.withoutIcon()}>
           <p>
             This is some tooltip text. This box shows the maximum amount of text
@@ -147,9 +152,9 @@ storiesOf('Tooltip', module)
     }
   )
   .add(
-    'custom icon',
+    'render custom icon',
     () => (
-      <div style={{ marginTop: '2rem' }}>
+      <div style={containerStyles}>
         <Tooltip {...props.customIcon()}>
           <p>
             This is some tooltip text. This box shows the maximum amount of text
@@ -178,7 +183,7 @@ storiesOf('Tooltip', module)
   .add(
     'only custom icon',
     () => (
-      <div style={{ marginTop: '2rem' }}>
+      <div style={containerStyles}>
         <Tooltip {...props.customIconOnly()}>
           <p>
             This is some tooltip text. This box shows the maximum amount of text

diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js
@@ -94,15 +94,15 @@ const getFloatingPosition = ({
   return {
     [DIRECTION_LEFT]: () => ({
       left: refLeft - width + scrollX - left,
-      top: refCenterVertical - height / 2 + scrollY + top,
+      top: refCenterVertical - height / 2 + scrollY + top - 9,
     }),
     [DIRECTION_TOP]: () => ({
       left: refCenterHorizontal - width / 2 + scrollX + left,
       top: refTop - height + scrollY - top,
     }),
     [DIRECTION_RIGHT]: () => ({
       left: refRight + scrollX + left,
-      top: refCenterVertical - height / 2 + scrollY + top,
+      top: refCenterVertical - height / 2 + scrollY + top + 3,
     }),
     [DIRECTION_BOTTOM]: () => ({
       left: refCenterHorizontal - width / 2 + scrollX + left,