refactor(react): update Tooltip to latest (#9997)

* chore(tooltip): clean-up * test(react): add tests for tooltip * chore(react): update styles for popover, tooltip stories * test(react): update popover test to use open * fix(styles): update transform styles for rounding error * feat(react): update PopoverContent to use React.forwardRef * test: update snapshots * Update packages/react/src/components/Tooltip/next/Tooltip.stories.js Co-authored-by: Taylor Jones <[email protected]> * docs(react): update popover story controls support Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Nov 10, 2021 · 62e5210 · 62e5210
1 parent 40f3768
commit 62e5210
Show file tree

Hide file tree

Showing 18 changed files with 401 additions and 1,040 deletions.
diff --git a/packages/carbon-react/__tests__/index-test.js b/packages/carbon-react/__tests__/index-test.js
@@ -198,8 +198,6 @@ Array [
   "ToolbarSearch",
   "ToolbarTitle",
   "Tooltip",
-  "TooltipDefinition",
-  "TooltipIcon",
   "UnorderedList",
   "VStack",
   "unstable_Heading",

diff --git a/packages/carbon-react/src/components/Tooltip/Tooltip.stories.js b/packages/carbon-react/src/components/Tooltip/Tooltip.stories.js
diff --git a/packages/carbon-react/src/components/Tooltip/index.js b/packages/carbon-react/src/components/Tooltip/index.js
diff --git a/packages/carbon-react/src/index.js b/packages/carbon-react/src/index.js
@@ -128,9 +128,6 @@ export {
   ToolbarOption,
   ToolbarDivider,
   ToolbarSearch,
-  Tooltip,
-  TooltipDefinition,
-  TooltipIcon,
   UnorderedList,
   SkeletonText,
   SkeletonPlaceholder,
@@ -199,6 +196,7 @@ export {
   unstable_HStack as HStack,
   unstable_Stack as Stack,
   unstable_VStack as VStack,
+  unstable_Tooltip as Tooltip,
   unstable_Popover as Popover,
   unstable_PopoverContent as PopoverContent,
 } from 'carbon-components-react';

diff --git a/packages/components/src/components/tooltip/_tooltip.scss b/packages/components/src/components/tooltip/_tooltip.scss
@@ -721,24 +721,6 @@
   }
 }
 
-/// Tooltip styles for v11
-/// @access private
-/// @group tooltip
-@mixin tooltip-next {
-  .#{$prefix}--tooltip {
-    display: inline-block;
-    position: relative;
-  }
-
-  .#{$prefix}--tooltip-content {
-    padding: $carbon--spacing-05;
-  }
-}
-
 @include exports('tooltip') {
-  @if feature-flag-enabled('enable-2021-release') {
-    @include tooltip-next;
-  } @else {
-    @include tooltip;
-  }
+  @include tooltip;
 }
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9007,6 +9007,7 @@ Map {
   },
   "unstable_usePrefix" => Object {},
   "unstable_Popover" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "align": Object {
         "args": Array [
@@ -9063,8 +9064,10 @@ Map {
         "type": "bool",
       },
     },
+    "render": [Function],
   },
   "unstable_PopoverContent" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "children": Object {
         "type": "node",
@@ -9073,6 +9076,7 @@ Map {
         "type": "string",
       },
     },
+    "render": [Function],
   },
   "unstable_HStack" => Object {
     "$$typeof": Symbol(react.forward_ref),
@@ -9135,5 +9139,49 @@ Map {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
+  "unstable_Tooltip" => Object {
+    "propTypes": Object {
+      "align": Object {
+        "args": Array [
+          Array [
+            "top",
+            "top-left",
+            "top-right",
+            "bottom",
+            "bottom-left",
+            "bottom-right",
+            "left",
+            "left-bottom",
+            "left-top",
+            "right",
+            "right-bottom",
+            "right-top",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "defaultOpen": Object {
+        "type": "bool",
+      },
+      "description": Object {
+        "type": "node",
+      },
+      "enterDelayMs": Object {
+        "type": "number",
+      },
+      "label": Object {
+        "type": "node",
+      },
+      "leaveDelayMs": Object {
+        "type": "number",
+      },
+    },
+  },
 }
 `;
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -217,6 +217,7 @@ Array [
   "unstable_ProgressBar",
   "unstable_Section",
   "unstable_Stack",
+  "unstable_Tooltip",
   "unstable_TreeNode",
   "unstable_TreeView",
   "unstable_VStack",

diff --git a/packages/react/src/components/Popover/__tests__/Popover-test.js b/packages/react/src/components/Popover/__tests__/Popover-test.js
@@ -10,6 +10,16 @@ import React from 'react';
 import { Popover, PopoverContent } from '../../Popover';
 
 describe('Popover', () => {
+  it('should support a ref on the outermost element', () => {
+    const ref = jest.fn();
+    const { container } = render(
+      <Popover open ref={ref}>
+        <PopoverContent>test</PopoverContent>
+      </Popover>
+    );
+    expect(ref).toHaveBeenCalledWith(container.firstChild);
+  });
+
   it('should support custom rendering with the `as` prop', () => {
     const { container } = render(
       <Popover as="article" open data-testid="test">
@@ -38,6 +48,14 @@ describe('Popover', () => {
   });
 
   describe('PopoverContent', () => {
+    it('should support a ref on the popover-content element', () => {
+      const ref = jest.fn();
+      const { container } = render(
+        <PopoverContent ref={ref}>test</PopoverContent>
+      );
+      expect(ref).toHaveBeenCalledWith(container.firstChild.firstChild);
+    });
+
     it('should support a custom class name on the popover content', () => {
       render(
         <PopoverContent className="test" data-testid="test">

diff --git a/packages/react/src/components/Popover/index.js b/packages/react/src/components/Popover/index.js
@@ -10,18 +10,19 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 
-function Popover({
-  align = 'bottom',
-  as: BaseComponent = 'div',
-  caret = true,
-  className: customClassName,
-  children,
-  dropShadow = true,
-  highContrast = false,
-  light = false,
-  open,
-  ...rest
-}) {
+const Popover = React.forwardRef(function Popover(props, ref) {
+  const {
+    align = 'bottom',
+    as: BaseComponent = 'div',
+    caret = true,
+    className: customClassName,
+    children,
+    dropShadow = true,
+    highContrast = false,
+    light = false,
+    open,
+    ...rest
+  } = props;
   const prefix = usePrefix();
   const className = cx({
     [`${prefix}--popover-container`]: true,
@@ -35,11 +36,11 @@ function Popover({
   });
 
   return (
-    <BaseComponent {...rest} className={className}>
+    <BaseComponent {...rest} className={className} ref={ref}>
       {children}
     </BaseComponent>
   );
-}
+});
 
 Popover.propTypes = {
   /**
@@ -106,17 +107,20 @@ Popover.propTypes = {
   open: PropTypes.bool.isRequired,
 };
 
-function PopoverContent({ className, children, ...rest }) {
+const PopoverContent = React.forwardRef(function PopoverContent(
+  { className, children, ...rest },
+  ref
+) {
   const prefix = usePrefix();
   return (
     <div {...rest} className={`${prefix}--popover`}>
-      <div className={cx(`${prefix}--popover-content`, className)}>
+      <div className={cx(`${prefix}--popover-content`, className)} ref={ref}>
         {children}
       </div>
       <span className={`${prefix}--popover-caret`} />
     </div>
   );
-}
+});
 
 PopoverContent.propTypes = {
   /**

diff --git a/packages/react/src/components/Popover/next/story.scss b/packages/react/src/components/Popover/next/story.scss
@@ -79,6 +79,10 @@
   border: 1px solid theme.$border-subtle;
 }
 
+.playground-trigger svg {
+  fill: theme.$background-inverse;
+}
+
 .popover-title {
   @include type.type-style('productive-heading-01');
   margin-bottom: spacing.$spacing-01;