Structure and slots for SearchBox, using Input as a slot

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

@@ -33,6 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@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,13 +1,24 @@
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { Input } from '@fluentui/react-input';
 
 export type SearchBoxSlots = {
-  root: Slot<'div'>;
+  // Root of the component, wrapping the inputs
+  root: NonNullable<Slot<typeof Input>>;
+
+  // Element before the input text, within the input border
+  contentBefore?: Slot<'span'>;
+
+  // 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

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

@@ -12,5 +12,19 @@ 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} />;
+
+  return (
+    <slots.root
+      {...slotProps.root}
+      contentBefore={slots.contentBefore && <slots.contentBefore {...slotProps.contentBefore} />}
+      contentAfter={
+        slots.contentAfter && (
+          <slots.contentAfter {...slotProps.contentAfter}>
+            {slotProps.contentAfter.children}
+            {slots.dismiss && <slots.dismiss {...slotProps.dismiss} />}
+          </slots.contentAfter>
+        )
+      }
+    />
+  );
 };

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { Input } from '@fluentui/react-input';
 import type { SearchBoxProps, SearchBoxState } from './SearchBox.types';
 
 /**
@@ -12,17 +13,25 @@ import type { SearchBoxProps, SearchBoxState } from './SearchBox.types';
  * @param ref - reference to root HTMLElement of SearchBox
  */
 export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLElement>): SearchBoxState => {
+  const { contentBefore, dismiss, contentAfter, ...inputProps } = props;
+
   return {
     // TODO add appropriate props/defaults
     components: {
       // TODO add each slot's element type or component
-      root: 'div',
+      root: Input,
+      contentBefore: 'span',
+      dismiss: 'span',
+      contentAfter: 'span',
+    },
+
+    // TODO add appropriate slots
+    root: {
+      type: 'search',
+      ...inputProps,
     },
-    // TODO add appropriate slots, for example:
-    // mySlot: resolveShorthand(props.mySlot),
-    root: getNativeElementProps('div', {
-      ref,
-      ...props,
-    }),
+    contentBefore: resolveShorthand(contentBefore),
+    dismiss: resolveShorthand(dismiss, { required: true }),
+    contentAfter: resolveShorthand(contentAfter, { required: true }),
   };
 };

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

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

yarn.lock

@@ -23109,7 +23109,7 @@ semver@7.3.4:
   dependencies:
     lru-cache "^6.0.0"
 
-semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@~7.3.0, semver@^7.3.8:
+semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@~7.3.0:
   version "7.3.8"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
   integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
@@ -23121,7 +23121,6 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semve
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-
 send@0.17.2:
   version "0.17.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"