Merge pull request #399 from lifeomic/combo-box-tooltip-message

Add support for tooltip message in `<ComboBox`
lifeomic · Sep 15, 2023 · b5afd8e · b5afd8e
2 parents 2f7b5b9 + bb44692
commit b5afd8e
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 0 deletions.
diff --git a/src/components/Select/ComboBox.stories.tsx b/src/components/Select/ComboBox.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { StoryObj, StoryFn, Meta } from '@storybook/react';
+import { HelpCircle } from '@lifeomic/chromicons';
 
 import { ComboBox } from './ComboBox';
 import { SelectOption } from './SelectOption';
@@ -108,6 +109,22 @@ export const HelpMessage: Story = {
   },
 };
 
+export const TooltipMessage: Story = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: `Text to display on hover over a small icon. This should be
+  supplemental text to the label, typically an expanded description of the option.`,
+      },
+    },
+  },
+  args: {
+    icon: HelpCircle,
+    tooltipMessage: 'Tooltip Message',
+  },
+};
+
 export const InverseDark: Story = {
   render: Template,
   parameters: {

diff --git a/src/components/Select/ComboBox.test.tsx b/src/components/Select/ComboBox.test.tsx
@@ -4,6 +4,10 @@ import { fireEvent, waitFor, within } from '@testing-library/dom';
 import { renderWithTheme } from '../../testUtils/renderWithTheme';
 import * as React from 'react';
 import { press } from 'reakit-test-utils';
+import {
+  IconComponent,
+  testId as iconComponentTestId,
+} from '../../testUtils/IconComponent';
 
 const testId = 'ComboBox';
 const optionId = 'SelectOption';
@@ -413,3 +417,18 @@ test('it renders an inverse color * when the field is required', async () => {
     'ChromaSelect-required ChromaSelect-requiredInverse'
   );
 });
+
+test('it renders an icon when icon and tooltipMessage are provided', async () => {
+  const props = getBaseProps();
+  const { findByTestId } = renderWithTheme(
+    <ComboBox
+      {...props}
+      icon={IconComponent}
+      tooltipMessage="tooltipMessage"
+      data-testid={testId}
+    />
+  );
+
+  const icon = await findByTestId(iconComponentTestId);
+  expect(icon).toHaveClass('ChromaSelect-labelIcon');
+});
diff --git a/src/components/Select/ComboBox.tsx b/src/components/Select/ComboBox.tsx
@@ -21,6 +21,7 @@ import {
 import clsx from 'clsx';
 import FocusLock from 'react-focus-lock';
 import * as React from 'react';
+import { Tooltip } from '../Tooltip';
 
 const popoverVariants = {
   open: {
@@ -98,6 +99,8 @@ export interface ComboBoxProps
   value?: Array<string> | undefined;
   /** This property shows the required asterisk (*). Required validation needs to be implemented separately. */
   showRequiredLabel?: boolean;
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  tooltipMessage?: string;
 }
 
 /**
@@ -137,6 +140,7 @@ export const ComboBox: React.FC<ComboBoxProps> = ({
   fullWidth,
   hasError,
   helpMessage,
+  icon: Icon,
   id,
   label,
   secondaryLabel,
@@ -145,6 +149,7 @@ export const ComboBox: React.FC<ComboBoxProps> = ({
   placement,
   popoverAriaLabel,
   selectedOptionDisplay,
+  tooltipMessage,
   value,
   showRequiredLabel,
   ...rootProps
@@ -253,6 +258,22 @@ export const ComboBox: React.FC<ComboBoxProps> = ({
           </span>
         )}
         {label || ariaLabel}
+        {!!Icon && tooltipMessage && (
+          <Tooltip title={tooltipMessage}>
+            <span className={classes.tooltipContainer}>
+              <Icon
+                className={clsx(
+                  classes.labelIcon,
+                  color === 'inverse' && classes.labelIconInverse
+                )}
+                width={16}
+                height={16}
+                role="img"
+                aria-hidden
+              />
+            </span>
+          </Tooltip>
+        )}
         {secondaryLabel ? (
           <span
             className={clsx(