Structure and slots for SearchBox, using Input as a slot

packages/react-components/react-search/etc/react-search.api.md

@@ -4,12 +4,9 @@
 
 ```ts
 
-import type { ComponentProps } from '@fluentui/react-utilities';
-import type { ComponentState } from '@fluentui/react-utilities';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/// <reference types="react" />
+
 import * as React_2 from 'react';
-import type { Slot } from '@fluentui/react-utilities';
-import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSearchBox_unstable: (state: SearchBoxState) => JSX.Element;
@@ -21,15 +18,17 @@ export const SearchBox: ForwardRefComponent<SearchBoxProps>;
 export const searchBoxClassNames: SlotClassNames<SearchBoxSlots>;
 
 // @public
-export type SearchBoxProps = ComponentProps<SearchBoxSlots> & {};
+export type SearchBoxProps = ComponentProps<SearchBoxSlots>;
 
 // @public (undocumented)
 export type SearchBoxSlots = {
-    root: Slot<'div'>;
+    root: NonNullable<Slot<typeof Input>>;
+    dismiss?: Slot<'span'>;
+    contentAfter?: Slot<'span'>;
 };
 
 // @public
-export type SearchBoxState = ComponentState<SearchBoxSlots>;
+export type SearchBoxState = ComponentState<SearchBoxSlots> & Pick<InputState, 'size'> & Required<Pick<SearchBoxProps, 'disabled'>>;
 
 // @public
 export const useSearchBox_unstable: (props: SearchBoxProps, ref: React_2.Ref<HTMLElement>) => SearchBoxState;

packages/react-components/react-search/package.json

@@ -33,6 +33,8 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-icons": "^2.0.196",
+    "@fluentui/react-input": "^9.4.16",
     "@fluentui/react-jsx-runtime": "9.0.0-alpha.6",
     "@fluentui/react-theme": "^9.1.8",
     "@fluentui/react-utilities": "^9.9.2",

packages/react-components/react-search/src/components/SearchBox/SearchBox.types.ts

@@ -1,17 +1,25 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { Input, InputState } from '@fluentui/react-input';
 
 export type SearchBoxSlots = {
-  root: Slot<'div'>;
+  // Root of the component, wrapping the inputs
+  root: NonNullable<Slot<typeof Input>>;
+
+  // Last element in the input, within the input border
+  dismiss?: Slot<'span'>;
+
+  // Element after the input text, within the input border
+  contentAfter?: Slot<'span'>;
 };
 
 /**
  * SearchBox Props
  */
-export type SearchBoxProps = ComponentProps<SearchBoxSlots> & {};
+export type SearchBoxProps = ComponentProps<SearchBoxSlots>;
 
 /**
  * State used in rendering SearchBox
  */
-export type SearchBoxState = ComponentState<SearchBoxSlots>;
-// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from SearchBoxProps.
-// & Required<Pick<SearchBoxProps, 'propName'>>
+export type SearchBoxState = ComponentState<SearchBoxSlots> &
+  Pick<InputState, 'size'> &
+  Required<Pick<SearchBoxProps, 'disabled'>>;

packages/react-components/react-search/src/components/SearchBox/renderSearchBox.tsx

@@ -1,6 +1,8 @@
 /** @jsxRuntime classic */
 /** @jsx createElement */
+/** @jsxFrag React.Fragment */
 
+import * as React from 'react';
 import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import type { SearchBoxState, SearchBoxSlots } from './SearchBox.types';
@@ -12,5 +14,17 @@ export const renderSearchBox_unstable = (state: SearchBoxState) => {
   const { slots, slotProps } = getSlotsNext<SearchBoxSlots>(state);
 
   // TODO Add additional slots in the appropriate place
-  return <slots.root {...slotProps.root} />;
+  const rootSlots = {
+    contentAfter: slots.contentAfter && {
+      ...slotProps.contentAfter,
+      children: (
+        <>
+          {slotProps.contentAfter.children}
+          {slots.dismiss && <slots.dismiss {...slotProps.dismiss} />}
+        </>
+      ),
+    },
+  };
+
+  return <slots.root {...slotProps.root} {...rootSlots} />;
 };

packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { mergeCallbacks, resolveShorthand, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+import { Input } from '@fluentui/react-input';
+import type { SearchBoxProps, SearchBoxState } from './SearchBox.types';
+import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
+
+/**
+ * Create the state required to render SearchBox.
+ *
+ * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,
+ * before being passed to renderSearchBox_unstable.
+ *
+ * @param props - props from this instance of SearchBox
+ * @param ref - reference to root HTMLElement of SearchBox
+ */
+export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLElement>): SearchBoxState => {
+  const { size = 'medium', disabled = false, contentBefore, dismiss, contentAfter, ...inputProps } = props;
+
+  const [value, setValue] = useControllableState({
+    state: props.value,
+    defaultState: props.defaultValue,
+    initialState: '',
+  });
+
+  const state: SearchBoxState = {
+    components: {
+      root: Input,
+      dismiss: 'span',
+      contentAfter: 'span',
+    },
+
+    root: {
+      type: 'search',
+      input: {}, // defining here to have access in styles hook
+      value,
+
+      contentBefore: resolveShorthand(contentBefore, {
+        defaultProps: {
+          children: <SearchRegular />,
+        },
+        required: true, // TODO need to allow users to remove
+      }),
+
+      ...inputProps,
+
+      onChange: useEventCallback(ev => {
+        const newValue = ev.target.value;
+        props.onChange?.(ev, { value: newValue });
+        setValue(newValue);
+      }),
+    },
+    dismiss: resolveShorthand(dismiss, {
+      defaultProps: {
+        children: <DismissRegular />,
+        role: 'button',
+        'aria-label': 'clear',
+      },
+      required: true,
+    }),
+    contentAfter: resolveShorthand(contentAfter, { required: true }),
+
+    disabled,
+    size,
+  };
+
+  const onDismissClick = useEventCallback(mergeCallbacks(state.dismiss?.onClick, () => setValue('')));
+  if (state.dismiss) {
+    state.dismiss.onClick = onDismissClick;
+  }
+
+  return state;
+};

packages/react-components/react-search/src/components/SearchBox/useSearchBoxStyles.styles.ts

@@ -1,33 +1,72 @@
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
 import type { SearchBoxSlots, SearchBoxState } from './SearchBox.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
 
 export const searchBoxClassNames: SlotClassNames<SearchBoxSlots> = {
   root: 'fui-SearchBox',
-  // TODO: add class names for all slots on SearchBoxSlots.
-  // Should be of the form `<slotName>: 'fui-SearchBox__<slotName>`
+  dismiss: 'fui-SearchBox__dismiss',
+  contentAfter: 'fui-SearchBox__contentAfter',
 };
 
 /**
  * Styles for the root slot
  */
-const useStyles = makeStyles({
-  root: {
-    // TODO Add default styles for the root element
+const useRootClassName = makeResetStyles({
+  // removes the WebKit pseudoelement styling
+  '::-webkit-search-decoration': {
+    display: 'none',
   },
+  '::-webkit-search-cancel-button': {
+    display: 'none',
+  },
+});
 
-  // TODO add additional classes for different states and/or slots
+const useDismissClassName = makeResetStyles({
+  boxSizing: 'border-box',
+  color: tokens.colorNeutralForeground3, // "icon color" in design spec
+  display: 'flex',
+  // special case styling for icons (most common case) to ensure they're centered vertically
+  // size: medium (default)
+  '> svg': { fontSize: '20px' },
+});
+
+const useDismissStyles = makeStyles({
+  disabled: {
+    color: tokens.colorNeutralForegroundDisabled,
+  },
+  // Ensure resizable icons show up with the proper font size
+  small: {
+    '> svg': { fontSize: '16px' },
+  },
+  medium: {
+    // included in useDismissClassName
+  },
+  large: {
+    '> svg': { fontSize: '24px' },
+  },
 });
 
 /**
  * Apply styling to the SearchBox slots based on the state
  */
 export const useSearchBoxStyles_unstable = (state: SearchBoxState): SearchBoxState => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(searchBoxClassNames.root, styles.root, state.root.className);
+  const { size, disabled } = state;
+
+  const DismissClassName = useDismissClassName();
+  const DismissStyles = useDismissStyles();
+
+  state.root.input!.className = mergeClasses(useRootClassName(), state.root.className);
 
-  // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+  if (state.dismiss) {
+    state.dismiss.className = mergeClasses(
+      searchBoxClassNames.dismiss,
+      DismissClassName,
+      disabled && DismissStyles.disabled,
+      DismissStyles[size],
+      state.dismiss.className,
+    );
+  }
 
   return state;
 };

packages/react-components/react-search/stories/SearchBox/SearchBoxDefault.stories.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
 import { SearchBox, SearchBoxProps } from '@fluentui/react-search';
 
-export const Default = (props: Partial<SearchBoxProps>) => <SearchBox {...props} />;
+import { FilterRegular } from '@fluentui/react-icons';
+
+export const Default = (props: Partial<SearchBoxProps>) => <SearchBox {...props} contentAfter={<FilterRegular />} />;