diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx index 1e603b792b..a0c380d96e 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBlock/ConditionBlock.tsx @@ -122,7 +122,7 @@ const ConditionBlock = (props: ConditionBlockProps) => { ); }; - const { icon, type, config, label }: Property = getCurrentConfig( + const { icon, type, config, label, description }: Property = getCurrentConfig( property ) as Property; @@ -277,8 +277,6 @@ const ConditionBlock = (props: ConditionBlockProps) => { )} - {/*
*/} - { data-name="propertyField" condition={condition} type={type} + description={description} onChange={onPropertyChangeHandler} > { wrapperClassName={`${blockClass}__close-condition-wrapper`} /> - {/*
*/} {manageActionButtons(conditionIndex, group.conditions) && ( { diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js index 17a6ed8d7c..59278e0fcb 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.test.js @@ -1684,6 +1684,43 @@ describe(componentName, () => { expect(screen.getByRole('button', { name: 'excl. if' })); }); + it('check description tooltip for property', async () => { + const inputConfig_ = JSON.parse(JSON.stringify(inputData)); + inputConfig_.properties[0].description = 'This is a tooltip'; + const user = userEvent.setup(); + render(); + + // add one condition + await act(() => userEvent.click(screen.getByText('Add condition'))); + + expect(screen.getByRole('option', { name: 'Continent' })); + + await act(() => + userEvent.click(screen.getByRole('option', { name: 'Continent' })) + ); + + expect(screen.getByRole('option', { name: 'is' })); + + await act(() => + userEvent.click(screen.getByRole('option', { name: 'is' })) + ); + + expect(screen.getByRole('option', { name: 'Africa' })); + + await act(() => + userEvent.click(screen.getByRole('option', { name: 'Africa' })) + ); + + const selectedItem = screen.getByRole('button', { name: 'Africa' }); + + expect(selectedItem); + //hover on property + await act(() => + user.hover(document.querySelector(`.${blockClass}__property-field`)) + ); + expect(screen.getByText('This is a tooltip')).toBeInTheDocument(); + }); + // keyboard navigation tests //for Non-Hierarchical variant it('add and remove conditions using keyboard', async () => { diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx index 63300d1051..77c8543cd0 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.tsx @@ -239,6 +239,7 @@ ConditionBuilder.propTypes = { 'time', 'custom', ]).isRequired, + description: PropTypes.string, //will be displayed on hover of property field config: PropTypes.shape({ options: PropTypes.arrayOf( PropTypes.shape({ diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts index daddf1e47a..493e22ae2f 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts @@ -125,6 +125,7 @@ export type Property = { id: string; label: string; icon?: CarbonIconType; + description?: string; } & ( | PropertyConfig['option'] | PropertyConfig['text'] diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx index ec6dea385b..34ab012ebe 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilderButton/ConditionBuilderButton.tsx @@ -30,6 +30,7 @@ interface ConditionBuilderButtonProps { isInvalid?: boolean; wrapperClassName?: string; tabIndex?: number; + description?: string; } export const ConditionBuilderButton = ({ @@ -48,8 +49,11 @@ export const ConditionBuilderButton = ({ isInvalid, wrapperClassName, tabIndex, + description, ...rest }: ConditionBuilderButtonProps) => { + const tooltipText = description || label; + const carbonPrefix = usePrefix(); const Button = () => { const dataName = rest['data-name'] ?? ''; @@ -81,9 +85,9 @@ export const ConditionBuilderButton = ({ ); }; - return hideLabel || showToolTip ? ( + return hideLabel || showToolTip || description ? ( ) => ReactNode; @@ -65,6 +66,7 @@ export const ConditionBuilderItem = ({ config, renderChildren, onChange, + description, ...rest }: ConditionBuilderItemProps) => { const popoverRef = useRef(null); @@ -236,6 +238,7 @@ export const ConditionBuilderItem = ({ } showToolTip={showToolTip} isInvalid={isInvalid} + description={description} {...rest} /> diff --git a/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js b/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js index eec003a83b..12984330ee 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js +++ b/packages/ibm-products/src/components/ConditionBuilder/assets/sampleInput.js @@ -492,6 +492,7 @@ export const inputData = { label: 'Continent', icon: Earth, type: 'option', + description: 'Continent', config: { options: [ {