diff --git a/change/@fluentui-react-combobox-eae93813-cc10-40eb-9645-8d1ad072f062.json b/change/@fluentui-react-combobox-eae93813-cc10-40eb-9645-8d1ad072f062.json new file mode 100644 index 0000000000000..ce3109dbfc5a4 --- /dev/null +++ b/change/@fluentui-react-combobox-eae93813-cc10-40eb-9645-8d1ad072f062.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: make Option's checkIcon slot render conditionally", + "packageName": "@fluentui/react-combobox", + "email": "seanmonahan@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-combobox/src/components/Option/Option.test.tsx b/packages/react-components/react-combobox/src/components/Option/Option.test.tsx index 5c624414516f3..3115ba10f80b7 100644 --- a/packages/react-components/react-combobox/src/components/Option/Option.test.tsx +++ b/packages/react-components/react-combobox/src/components/Option/Option.test.tsx @@ -5,6 +5,7 @@ import { ListboxContext } from '../../contexts/ListboxContext'; import { Option } from './Option'; import type { OptionProps } from './Option.types'; import { isConformant } from '../../testing/isConformant'; +import { optionClassNames } from './useOptionStyles'; describe('Option', () => { isConformant({ @@ -222,4 +223,26 @@ describe('Option', () => { expect(setActiveOption).toHaveBeenCalledTimes(1); expect(setActiveOption).toHaveBeenCalledWith(optionData); }); + + describe('checkIcon slot', () => { + it('renders the `checkIcon` slot by default', () => { + render( + , + ); + + expect(document.querySelector(`.${optionClassNames.checkIcon}`)).toBeTruthy(); + }); + + it('should not render the `checkIcon` slot when passed `null`', () => { + render( + , + ); + + expect(document.querySelector(`.${optionClassNames.checkIcon}`)).toBeFalsy(); + }); + }); }); diff --git a/packages/react-components/react-combobox/src/components/Option/renderOption.tsx b/packages/react-components/react-combobox/src/components/Option/renderOption.tsx index 42775a2bb3ca3..9d2b459fce6b5 100644 --- a/packages/react-components/react-combobox/src/components/Option/renderOption.tsx +++ b/packages/react-components/react-combobox/src/components/Option/renderOption.tsx @@ -10,7 +10,7 @@ export const renderOption_unstable = (state: OptionState) => { return ( - + {slots.checkIcon && } {slotProps.root.children} );