fix(Dropdown): allow expandIcon to be null (#30339)

microsoft · Jan 17, 2024 · 06421bb · 06421bb
1 parent b56e712
commit 06421bb
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 3 deletions.
diff --git a/change/@fluentui-react-combobox-cddae570-a33b-4aa0-a960-7b80d45ee4fc.json b/change/@fluentui-react-combobox-cddae570-a33b-4aa0-a960-7b80d45ee4fc.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: allow expandIcon to be null",
+  "packageName": "@fluentui/react-combobox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-combobox/etc/react-combobox.api.md b/packages/react-components/react-combobox/etc/react-combobox.api.md
@@ -80,7 +80,7 @@ export type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & C
 // @public (undocumented)
 export type DropdownSlots = {
     root: NonNullable<Slot<'div'>>;
-    expandIcon: Slot<'span'>;
+    expandIcon?: Slot<'span'>;
     clearButton?: Slot<'button'>;
     button: NonNullable<Slot<'button'>>;
     listbox?: Slot<typeof Listbox>;

diff --git a/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts b/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts
@@ -13,7 +13,7 @@ export type DropdownSlots = {
   root: NonNullable<Slot<'div'>>;
 
   /* The dropdown arrow icon */
-  expandIcon: Slot<'span'>;
+  expandIcon?: Slot<'span'>;
 
   /* The dropdown clear icon */
   clearButton?: Slot<'button'>;

diff --git a/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx b/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx
@@ -18,7 +18,7 @@ export const renderDropdown_unstable = (state: DropdownState, contextValues: Dro
       <ComboboxContext.Provider value={contextValues.combobox}>
         <state.button>
           {state.button.children}
-          <state.expandIcon />
+          {state.expandIcon && <state.expandIcon />}
         </state.button>
         {state.clearButton && <state.clearButton />}
         {state.listbox &&