feat(Tooltip): add inverse variant (#1984)

- support variants (default and inverse) - add tests and snapshots - also add background color treatments thru storybook config - add more chromatic delay to avoid some test jittering
chanzuckerberg · Jun 10, 2024 · d6ccc8d · d6ccc8d
1 parent cc16568
commit d6ccc8d
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 12 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -64,6 +64,7 @@ export const parameters = {
   },
   backgrounds: {
     values: [
+      // TODO: remove the following three when the last 1.0 components have been migrated
       {
         name: 'eds-color-neutral-white',
         value: '#ffffff',
@@ -76,6 +77,14 @@ export const parameters = {
         name: 'eds-color-neutral-700',
         value: '#21272D',
       },
+      {
+        name: 'background-utility-default-high-emphasis',
+        value: '#0F2163',
+      },
+      {
+        name: 'background-utility-inverse-high-emphasis',
+        value: '#FFFFFF',
+      },
     ],
   },
   badgesConfig: {

diff --git a/src/components/Tooltip/Tooltip-v2.module.css b/src/components/Tooltip/Tooltip-v2.module.css
@@ -12,11 +12,6 @@
   @media (prefers-reduced-motion) {
     transition: none;
   }
-
-  border-color: var(--eds-theme-color-background-utility-default-high-emphasis);
-  color: var(--eds-theme-color-text-utility-inverse);
-  background-color: var(--eds-theme-color-background-utility-default-high-emphasis);
-  --arrow-color: var(--eds-theme-color-background-utility-default-high-emphasis);
 }
 
 /**
@@ -106,3 +101,17 @@
   border-left-width: 0;
   left: -7px;
 }
+
+.tooltip--variant-default {
+  color: var(--eds-theme-color-text-utility-inverse);
+  border-color: var(--eds-theme-color-background-utility-default-high-emphasis);
+  --arrow-color: var(--eds-theme-color-background-utility-default-high-emphasis);
+  background-color: var(--eds-theme-color-background-utility-default-high-emphasis);
+}
+
+.tooltip--variant-inverse {
+  color: var(--eds-theme-color-text-utility-default-primary);
+  border-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
+  --arrow-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
+  background-color: var(--eds-theme-color-background-utility-inverse-high-emphasis);
+}
diff --git a/src/components/Tooltip/Tooltip-v2.stories.tsx b/src/components/Tooltip/Tooltip-v2.stories.tsx
@@ -51,7 +51,7 @@ export default {
     layout: 'centered',
     badges: ['intro-1.0', 'current-2.0'],
     chromatic: {
-      delay: 300,
+      delay: 500,
       diffThreshold,
       diffIncludeAntiAliasing: false,
     },
@@ -106,6 +106,16 @@ export const LongTriggerText: Story = {
   },
 };
 
+export const InverseVariant: Story = {
+  args: {
+    ...LeftPlacement.args,
+    variant: 'inverse',
+  },
+  parameters: {
+    backgrounds: { default: 'background-utility-default-high-emphasis' },
+  },
+};
+
 /**
  * Hover over the button to make the tooltip appear.
  */

diff --git a/src/components/Tooltip/Tooltip-v2.tsx b/src/components/Tooltip/Tooltip-v2.tsx
@@ -85,6 +85,12 @@ type TooltipProps = {
    * The content of the tooltip bubble.
    */
   text?: string;
+  /**
+   * The variant treatment for tooltips
+   *
+   * **Default is `"default"`**.
+   */
+  variant?: 'default' | 'inverse';
 } & TippyProps &
   HTMLAttributes<HTMLElement>;
 
@@ -106,6 +112,7 @@ export const Tooltip = ({
   duration = 200,
   placement = 'auto',
   text,
+  variant = 'default',
   ...rest
 }: TooltipProps) => {
   // Hides tooltip when escape key is pressed, following:
@@ -151,10 +158,16 @@ export const Tooltip = ({
     </Text>
   );
 
+  const tooltipClassNames = clsx(
+    styles['tooltip'],
+    variant && styles[`tooltip--variant-${variant}`],
+    className,
+  );
+
   // TODO: figure out why the modifiers don't seem to get applied
   return (
     <Tippy
-      className={clsx(styles['tooltip'], className)}
+      className={tooltipClassNames}
       content={textContent}
       duration={duration}
       placement={placement}

diff --git a/src/components/Tooltip/__snapshots__/Tooltip-v2.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip-v2.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<Tooltip /> (v2) BottomPlacement story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(0px, 12px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="bottom"
@@ -90,6 +90,59 @@ exports[`<Tooltip /> (v2) InteractiveDisabled story renders snapshot 1`] = `
 </body>
 `;
 
+exports[`<Tooltip /> (v2) InverseVariant story renders snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="p-8"
+    >
+      <div
+        aria-describedby="tippy-6"
+        class="fpo p-1"
+      >
+        Target Component
+      </div>
+    </div>
+  </div>
+  <div
+    data-tippy-root=""
+    id="tippy-6"
+    style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-12px, 0px);"
+  >
+    <div
+      class="tippy-box tooltip tooltip--variant-inverse"
+      data-animation="fade"
+      data-escaped=""
+      data-placement="left"
+      data-reference-hidden=""
+      data-state="visible"
+      role="tooltip"
+      style="max-width: 350px; transition-duration: 0ms;"
+      tabindex="-1"
+    >
+      <div
+        class="tippy-content"
+        data-state="visible"
+        style="transition-duration: 0ms;"
+      >
+        <div>
+          <span
+            class="text text--body-sm"
+            data-testid="tooltip-content"
+          >
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a erat eu augue consequat eleifend non vel sem. Praesent efficitur mauris ac leo semper accumsan.
+          </span>
+        </div>
+      </div>
+      <div
+        class="tippy-arrow"
+        style="position: absolute; top: 0px; transform: translate(0px, 3px);"
+      />
+    </div>
+  </div>
+</body>
+`;
+
 exports[`<Tooltip /> (v2) LeftPlacement story renders snapshot 1`] = `
 <body>
   <div>
@@ -110,7 +163,7 @@ exports[`<Tooltip /> (v2) LeftPlacement story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-12px, 0px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="left"
@@ -163,7 +216,7 @@ exports[`<Tooltip /> (v2) LongText story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(12px, 0px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="right"
@@ -216,7 +269,7 @@ exports[`<Tooltip /> (v2) LongTriggerText story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(12px, 0px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="right"
@@ -269,7 +322,7 @@ exports[`<Tooltip /> (v2) TopPlacement story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; min-width: 0px; position: absolute; left: 0px; top: 0px; margin: 0px; bottom: 0px; transform: translate(0px, -12px);"
   >
     <div
-      class="tippy-box tooltip"
+      class="tippy-box tooltip tooltip--variant-default"
       data-animation="fade"
       data-escaped=""
       data-placement="top"