feat(TooltipIcon): support renderIcon (#8612)

* feat(TooltipIcon): support `renderIcon` * docs(TooltipIcon): add `renderIcon` knob * chore: update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 10, 2021 · e4583e1 · e4583e1
1 parent 102f516
commit e4583e1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 15 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6471,7 +6471,6 @@ Map {
         "type": "oneOf",
       },
       "children": Object {
-        "isRequired": true,
         "type": "node",
       },
       "className": Object {
@@ -6506,6 +6505,19 @@ Map {
       "onMouseLeave": Object {
         "type": "func",
       },
+      "renderIcon": Object {
+        "args": Array [
+          Array [
+            Object {
+              "type": "func",
+            },
+            Object {
+              "type": "object",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "tooltipText": Object {
         "isRequired": true,
         "type": "node",

diff --git a/packages/react/src/components/TooltipIcon/TooltipIcon-story.js b/packages/react/src/components/TooltipIcon/TooltipIcon-story.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { Filter16 } from '@carbon/icons-react';
+import { Add16, AddFilled16, Filter16, Search16 } from '@carbon/icons-react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, select, text } from '@storybook/addon-knobs';
 import TooltipIcon from '../TooltipIcon';
@@ -25,12 +25,31 @@ const alignments = {
   'End (end)': 'end',
 };
 
-const props = () => ({
-  direction: select('Tooltip direction (direction)', directions, 'bottom'),
-  align: select('Tooltip alignment (align)', alignments, 'center'),
-  tooltipText: text('Tooltip content (tooltipText)', 'Filter'),
-  onClick: action('onClick'),
-});
+const icons = {
+  'Add (Add16 from `@carbon/icons-react`)': 'Add16',
+  'Add (Filled) (AddFilled16 from `@carbon/icons-react`)': 'AddFilled16',
+  'Filter (Filter16 from `@carbon/icons-react`)': 'Filter16',
+  'Search (Search16 from `@carbon/icons-react`)': 'Search16',
+};
+
+const iconMap = {
+  Add16,
+  AddFilled16,
+  Filter16,
+  Search16,
+};
+
+const props = () => {
+  const iconToUse = iconMap[select('Icon (icon)', icons, 'Filter16')];
+
+  return {
+    direction: select('Tooltip direction (direction)', directions, 'bottom'),
+    align: select('Tooltip alignment (align)', alignments, 'center'),
+    renderIcon: !iconToUse || iconToUse.svgData ? undefined : iconToUse,
+    tooltipText: text('Tooltip content (tooltipText)', 'Filter'),
+    onClick: action('onClick'),
+  };
+};
 
 export default {
   title: 'Components/TooltipIcon',
@@ -44,11 +63,7 @@ export default {
   },
 };
 
-export const Default = () => (
-  <TooltipIcon {...props()}>
-    <Filter16 />
-  </TooltipIcon>
-);
+export const Default = () => <TooltipIcon {...props()} />;
 
 Default.storyName = 'default';
 

diff --git a/packages/react/src/components/TooltipIcon/TooltipIcon.js b/packages/react/src/components/TooltipIcon/TooltipIcon.js
@@ -27,6 +27,7 @@ const TooltipIcon = ({
   onFocus,
   onMouseEnter,
   onMouseLeave,
+  renderIcon: IconElement,
   tooltipText,
   ...rest
 }) => {
@@ -132,7 +133,8 @@ const TooltipIcon = ({
         id={tooltipId}>
         {tooltipText}
       </span>
-      {children}
+      {IconElement && <IconElement />}
+      {!IconElement && children}
     </button>
   );
 };
@@ -148,7 +150,7 @@ TooltipIcon.propTypes = {
    * Specify an icon as children that will be used as the tooltip trigger. This
    * can be an icon from our Icon component, or a custom SVG element.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 
   /**
    * Specify an optional className to be applied to the trigger node
@@ -191,6 +193,11 @@ TooltipIcon.propTypes = {
    */
   onMouseLeave: PropTypes.func,
 
+  /**
+   * Function called to override icon rendering.
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
   /**
    * Provide the ARIA label for the tooltip.
    * TODO: rename this prop (will be a breaking change)