diff --git a/src/components/Select/ComboBox.stories.tsx b/src/components/Select/ComboBox.stories.tsx index 9aa8cfaa..524546a4 100644 --- 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 index 014eb6a6..eab4f996 100644 --- 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( + + ); + + const icon = await findByTestId(iconComponentTestId); + expect(icon).toHaveClass('ChromaSelect-labelIcon'); +}); diff --git a/src/components/Select/ComboBox.tsx b/src/components/Select/ComboBox.tsx index 20ee0530..5025f593 100644 --- 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 | undefined; /** This property shows the required asterisk (*). Required validation needs to be implemented separately. */ showRequiredLabel?: boolean; + icon?: React.ComponentType>; + tooltipMessage?: string; } /** @@ -137,6 +140,7 @@ export const ComboBox: React.FC = ({ fullWidth, hasError, helpMessage, + icon: Icon, id, label, secondaryLabel, @@ -145,6 +149,7 @@ export const ComboBox: React.FC = ({ placement, popoverAriaLabel, selectedOptionDisplay, + tooltipMessage, value, showRequiredLabel, ...rootProps @@ -253,6 +258,22 @@ export const ComboBox: React.FC = ({ )} {label || ariaLabel} + {!!Icon && tooltipMessage && ( + + + + + + )} {secondaryLabel ? (