chore(tooltip)!: rename childDisabled to childNotInteractive

chanzuckerberg · Sep 6, 2022 · 393b640 · 393b640
1 parent 8da8dbd
commit 393b640
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
@@ -50,9 +50,9 @@
 }
 
 /**
- * 1) When childDisabled is true and alignment is top or bottom
+ * 1) When childNotInteractive is true and alignment is top or bottom
  */
-.tooltip__child-disabled-wrapper--vertical {
+.tooltip__child-not-interactive-wrapper--vertical {
   /* Needed for the top and bottom alignment to work properly */
   display: inline-flex;
 }

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -143,7 +143,7 @@ export const Disabled: StoryObj<Args> = {
     >
       <Tooltip
         align="top"
-        childDisabled={true}
+        childNotInteractive={true}
         text={defaultArgs.text}
         visible={true}
       >
@@ -189,7 +189,7 @@ export const InteractiveDisabled: StoryObj<Args> = {
     >
       <Tooltip
         align="top"
-        childDisabled={true}
+        childNotInteractive={true}
         duration={args.duration}
         text={defaultArgs.text}
       >

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -23,13 +23,13 @@ type TooltipProps = {
    */
   children?: React.ReactElement;
   /**
-   * If the child being passed into the Tooltip via the `children` prop is disabled (e.g. a disabled button).
+   * If the child being passed into the Tooltip via the `children` prop is not interactive (e.g. a disabled button or an icon).
    *
    * Please note that spacing and placement styling will need to be added to a wrapper around the Tooltip,
-   * not on the button child inside the Tooltip, because there will be a wrapper around the button child. Example:
+   * not on the child component inside the Tooltip, because there will be a wrapper around the child. Example:
    * <div className="spacing-goes-here"><Tooltip text="Tooltip text"><Button disabled>Button text</Button></Tooltip></div>
    */
-  childDisabled?: boolean;
+  childNotInteractive?: boolean;
   /**
    * Custom classname for additional styles.
    *
@@ -104,7 +104,7 @@ type Plugin = Plugins[number];
 export const Tooltip = ({
   variant = 'light',
   align = 'top',
-  childDisabled,
+  childNotInteractive,
   className,
   duration = 200,
   text,
@@ -141,12 +141,12 @@ export const Tooltip = ({
   let children = rest.children;
   // Tippy only works on elements with a tabindex. If the child is disabled, we need to
   // wrap it in an element with a tabindex in order for it to work.
-  if (childDisabled) {
+  if (childNotInteractive) {
     children = (
       <span
         className={clsx(
           (align === 'bottom' || align === 'top') &&
-            styles['tooltip__child-disabled-wrapper--vertical'],
+            styles['tooltip__child-not-interactive-wrapper--vertical'],
         )}
         data-testid="disabled-child-tooltip-wrapper"
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex

diff --git a/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/components/Tooltip/__snapshots__/Tooltip.test.tsx.snap
@@ -118,7 +118,7 @@ exports[`<Tooltip /> Disabled story renders snapshot 1`] = `
     >
       <span
         aria-describedby="tippy-8"
-        class="tooltip__child-disabled-wrapper--vertical"
+        class="tooltip__child-not-interactive-wrapper--vertical"
         data-testid="disabled-child-tooltip-wrapper"
         tabindex="0"
       >
@@ -207,7 +207,7 @@ exports[`<Tooltip /> InteractiveDisabled story renders snapshot 1`] = `
         class="trigger--spacing-top trigger--spacing-left"
       >
         <span
-          class="tooltip__child-disabled-wrapper--vertical"
+          class="tooltip__child-not-interactive-wrapper--vertical"
           data-testid="disabled-child-tooltip-wrapper"
           tabindex="0"
         >