feat(react-cap-theme): add react-combobox components (#648)

Co-authored-by: EnricoGianoglio <egianoglio@microsoft.com>

Author: GianoglioEnrico

change/@fluentui-contrib-react-cap-theme-d963b118-5dff-48e8-9c7a-a99724185c4e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add react-combobox components",
+  "packageName": "@fluentui-contrib/react-cap-theme",
+  "email": "egianoglio@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-cap-theme/.storybook/preview.tsx

@@ -20,6 +20,9 @@ const capTheme: Record<keyof Theme & keyof CAPTokens, string> = {
   colorNeutralStroke4Hover: '#e0e0e0',
   colorNeutralStroke4Pressed: '#d6d6d6',
   colorNeutralStroke4Selected: '#ebebeb',
+  colorNeutralForeground5: '#616161',
+  colorNeutralForeground5Hover: '#242424',
+  colorNeutralForeground5Pressed: '#242424',
 };
 
 const preview: Preview = {

packages/react-cap-theme/src/capStyleHooks.ts

@@ -67,6 +67,11 @@ import type {
 } from '@fluentui/react-carousel';
 import { useCheckboxStyles } from './components/react-checkbox';
 import type { CheckboxState } from './components/react-checkbox';
+import {
+  useComboboxStyles,
+  useDropdownStyles,
+} from './components/react-combobox';
+import type { ComboboxState, DropdownState } from './components/react-combobox';
 import {
   useDialogActionsStyles,
   useDialogBodyStyles,
@@ -213,6 +218,9 @@ export const CAP_STYLE_HOOKS: NonNullable<
   useCompoundButtonStyles_unstable: (state) => {
     return useCompoundButtonStyles(state as CompoundButtonState);
   },
+  useComboboxStyles_unstable: (state) => {
+    return useComboboxStyles(state as ComboboxState);
+  },
   useDialogActionsStyles_unstable: (state) => {
     return useDialogActionsStyles(state as DialogActionsState);
   },
@@ -242,6 +250,9 @@ export const CAP_STYLE_HOOKS: NonNullable<
   useDrawerHeaderTitleStyles_unstable: (state) => {
     return useDrawerHeaderTitleStyles(state as DrawerHeaderTitleState);
   },
+  useDropdownStyles_unstable: (state) => {
+    return useDropdownStyles(state as DropdownState);
+  },
   useImageStyles_unstable: (state) => {
     return useImageStyles(state as ImageState);
   },

packages/react-cap-theme/src/components/react-combobox/components/Combobox/Combobox.types.ts

@@ -0,0 +1,54 @@
+import type {
+  ComboboxProps as BaseProps,
+  ComboboxSlots as BaseSlots,
+  ComboboxState as BaseState,
+} from '@fluentui/react-combobox';
+import type {
+  ComponentProps,
+  ComponentState,
+  Slot,
+} from '@fluentui/react-utilities';
+
+/**
+ * Slot configuration for the Combobox component.
+ * Adds the SP-specific contentBefore slot. The listbox slot is inherited
+ * from Fluent and restyled in `useComboboxStyles`.
+ * @alpha
+ */
+export type ComboboxSlots = BaseSlots & {
+  /**
+   * Element before the input text, e.g. an icon or avatar.
+   */
+  contentBefore?: Slot<'span'>;
+};
+
+/**
+ * Properties for configuring the Combobox component.
+ * @alpha
+ */
+export type ComboboxProps = ComponentProps<
+  Pick<ComboboxSlots, 'contentBefore'>
+> &
+  Omit<BaseProps, 'color'> & {
+    /**
+     * The color variant.
+     *
+     * - 'brand' (default): Primary emphasis using brand colors.
+     * - 'neutral': Secondary emphasis using neutral colors.
+     *
+     * @default 'brand'
+     */
+    // FIXME: Must not graduate to beta. Style implementation references Fluent tokens directly.
+    // `color` and `NeutralThemeProvider` solve the same brand/neutral switching problem at different
+    // levels of the stack with no defined interaction. Graduating locks in an API contract that may
+    // need to change once a proper token-based theming approach is defined.
+    color?: 'neutral' | 'brand';
+  };
+
+/**
+ * State used in rendering the Combobox component.
+ * @alpha
+ */
+export type ComboboxState = ComponentState<ComboboxSlots> &
+  Omit<BaseState, 'components'> &
+  Required<Pick<ComboboxProps, 'color'>>;