feat(Tooltip)!: remove deprecated props (#1861)

- remove `align` prop, in place of the better-named `placement` prop This has been marked as deprecated for a while now, so cleaning up the code associated with this. In order to address in a consuming project, you can replace `align` with `placement` in all use cases (this was happening internally already). - remove `variant` prop The prop was used for a partially-implemented handling of light/dark mode, and had been marked as deprecated. Removing now, making usage of the light token values as the current, and only, option. - clean up documentation, stoybook config, and test snapshots
chanzuckerberg · Feb 27, 2024 · d444607 · d444607
1 parent cbf59d9
commit d444607
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 81 deletions.
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -158,7 +158,6 @@ export const Slider = ({
       />
       {tooltip && (
         <Tooltip
-          align="top"
           appendTo="parent"
           hideOnClick={false}
           offset={({ reference }) => {
@@ -172,6 +171,7 @@ export const Slider = ({
             // offsets the tooltip relative to the position and size of the thumb
             return [(ratio - 0.5) * (reference.width - thumbSize), 0];
           }}
+          placement="top"
           reference={ref}
           text={tooltip}
           touch="hold"

diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
@@ -17,6 +17,11 @@
   @media (prefers-reduced-motion) {
     transition: none;
   }
+
+  border-color: var(--eds-theme-color-border-neutral-default);
+  color: var(--eds-theme-color-text-neutral-default);
+  background-color: var(--eds-theme-color-background-neutral-subtle);
+  --arrow-color: var(--eds-theme-color-border-neutral-default);
 }
 
 /**
@@ -33,23 +38,6 @@
   padding-top: var(--eds-size-1);
 }
 
-/**
- * Color Variants
- */
-.tooltip--light {
-  border-color: var(--eds-theme-color-border-neutral-default);
-  color: var(--eds-theme-color-text-neutral-default);
-  background-color: var(--eds-theme-color-background-neutral-subtle);
-  --arrow-color: var(--eds-theme-color-border-neutral-default);
-}
-
-.tooltip--dark {
-  border-color: var(--eds-theme-color-body-background-inverted);
-  color: var(--eds-theme-color-text-neutral-default-inverse);
-  background-color: var(--eds-theme-color-body-background-inverted);
-  --arrow-color: var(--eds-theme-color-body-background-inverted);
-}
-
 /**
  * Add arrows
  */

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -27,12 +27,6 @@ export default {
   component: Tooltip,
   args: defaultArgs,
   argTypes: {
-    align: {
-      table: {
-        // Marking deprecated props / controls as disabled
-        disable: true,
-      },
-    },
     text: {
       control: {
         type: 'text',
@@ -48,12 +42,6 @@ export default {
         defaultValue: { summary: 'top' },
       },
     },
-    variant: {
-      table: {
-        // Marking deprecated props / controls as disabled
-        disable: true,
-      },
-    },
   },
   parameters: {
     layout: 'centered',

diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
@@ -4,13 +4,10 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import * as TooltipStoryFile from './Tooltip.stories';
-import consoleWarnMockHelper from '../../../jest/helpers/consoleWarnMock';
 
 const { Interactive, InteractiveDisabled } = composeStories(TooltipStoryFile);
 
 describe('<Tooltip />', () => {
-  const warnMock = consoleWarnMockHelper();
-
   generateSnapshots(TooltipStoryFile, {
     // Tippy renders tooltip as a child of <body> and hence is why baseElement needs to be targetted
     getElement: (wrapper) => {
@@ -41,12 +38,4 @@ describe('<Tooltip />', () => {
     await user.keyboard('{Escape}');
     expect(screen.queryByTestId('tooltip-content')).not.toBeInTheDocument();
   });
-
-  it('should display warning message when attempting to use dark variant', () => {
-    render(<Interactive variant="dark" />);
-    expect(warnMock).toHaveBeenCalledTimes(1);
-    expect(warnMock).toHaveBeenCalledWith(
-      'The dark variant is deprecated and will be removed in an upcoming release. Please use the default light variant instead.',
-    );
-  });
 });
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -7,17 +7,6 @@ import styles from './Tooltip.module.css';
 
 // Full list of Tippy props: https://atomiks.github.io/tippyjs/v6/all-props/
 type TooltipProps = {
-  /**
-   * Where the tooltip should be placed in relation to the element it's attached to.
-   *
-   * Tippy also supports 'top-start', 'top-end', 'right-start', 'right-end', etc,
-   * but our CSS currently only supports the 4 main sides.
-   *
-   * This is deprecated. Please use `placement` instead.
-   *
-   * @deprecated
-   */
-  align?: 'top' | 'right' | 'bottom' | 'left';
   /**
    * The element or ref to append the tooltip to.
    * Defaults to the body element.
@@ -79,11 +68,6 @@ type TooltipProps = {
    * The content of the tooltip bubble.
    */
   text?: React.ReactNode;
-  /**
-   * Whether the tooltip has a light or dark background.
-   * @deprecated
-   */
-  variant?: 'light' | 'dark';
   /**
    * Whether the tooltip is always visible or always invisible.
    *
@@ -108,24 +92,13 @@ type Plugin = Plugins[number];
  *
  */
 export const Tooltip = ({
-  variant = 'light',
-  align = 'top',
   childNotInteractive,
   className,
   duration = 200,
-  placement,
+  placement = 'top',
   text,
   ...rest
 }: TooltipProps) => {
-  if (variant === 'dark' && process.env.NODE_ENV !== 'production') {
-    console.warn(
-      'The dark variant is deprecated and will be removed in an upcoming release. Please use the default light variant instead.',
-    );
-  }
-
-  // TODO: when removing `align`, remove this line and set `placement={placement}` below
-  const intendedPlacement = placement ?? align;
-
   // Hides tooltip when escape key is pressed, following:
   // https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc
   const hideOnEsc: Plugin = {
@@ -172,15 +145,10 @@ export const Tooltip = ({
   return (
     <Tippy
       {...rest}
-      className={clsx(
-        styles['tooltip'],
-        variant === 'light' && styles['tooltip--light'],
-        variant === 'dark' && styles['tooltip--dark'],
-        className,
-      )}
+      className={clsx(styles['tooltip'], className)}
       content={textContent}
       duration={duration}
-      placement={intendedPlacement}
+      placement={placement}
       plugins={[hideOnEsc]}
     >
       {children}

diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`<Tooltip /> BottomPlacement story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(0px, 10px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="bottom"
@@ -118,7 +118,7 @@ exports[`<Tooltip /> LeftPlacement story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; right: 0px; transform: translate(-10px, 0px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="left"
@@ -179,7 +179,7 @@ exports[`<Tooltip /> LongText story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="right"
@@ -239,7 +239,7 @@ exports[`<Tooltip /> LongTriggerText story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; transform: translate(10px, 0px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="right"
@@ -300,7 +300,7 @@ exports[`<Tooltip /> TopPlacement story renders snapshot 1`] = `
     style="pointer-events: none; z-index: 9999; visibility: visible; position: absolute; left: 0px; top: 0px; margin: 0px; bottom: 0px; transform: translate(0px, -10px);"
   >
     <div
-      class="tippy-box tooltip tooltip--light"
+      class="tippy-box tooltip"
       data-animation="fade"
       data-escaped=""
       data-placement="top"