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 ? (