[Search] add search api how to guide + search bar custom placeholder (#7535)

plugins/search/api-report.md

@@ -79,7 +79,11 @@ export const searchApiRef: ApiRef<SearchApi>;
 // Warning: (ae-missing-release-tag) "SearchBar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const SearchBar: ({ className, debounceTime }: Props) => JSX.Element;
+export const SearchBar: ({
+  className,
+  debounceTime,
+  placeholder,
+}: Props) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "SearchBarNext" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -87,9 +91,11 @@ export const SearchBar: ({ className, debounceTime }: Props) => JSX.Element;
 export const SearchBarNext: ({
   className,
   debounceTime,
+  placeholder,
 }: {
   className?: string | undefined;
   debounceTime?: number | undefined;
+  placeholder?: string | undefined;
 }) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "SearchContextProvider" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

plugins/search/src/components/SearchBar/SearchBar.stories.tsx

@@ -45,3 +45,20 @@ export const Default = () => {
     </MemoryRouter>
   );
 };
+
+export const CustomPlaceholder = () => {
+  return (
+    <MemoryRouter>
+      {/* @ts-ignore (defaultValue requires more than what is used here) */}
+      <SearchContext.Provider value={defaultValue}>
+        <Grid container direction="row">
+          <Grid item xs={12}>
+            <Paper style={{ padding: '8px 0' }}>
+              <SearchBar placeholder="This is a custom placeholder" />
+            </Paper>
+          </Grid>
+        </Grid>
+      </SearchContext.Provider>
+    </MemoryRouter>
+  );
+};

plugins/search/src/components/SearchBar/SearchBar.test.tsx

@@ -65,6 +65,26 @@ describe('SearchBar', () => {
 
     await waitFor(() => {
       expect(screen.getByRole('textbox', { name })).toBeInTheDocument();
+      expect(
+        screen.getByPlaceholderText('Search in Mock title'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('Renders with custom placeholder', async () => {
+    render(
+      <ApiProvider apis={apiRegistry}>
+        <SearchContextProvider initialState={{ ...initialState }}>
+          <SearchBar placeholder="This is a custom placeholder" />
+        </SearchContextProvider>
+        ,
+      </ApiProvider>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByPlaceholderText('This is a custom placeholder'),
+      ).toBeInTheDocument();
     });
   });
 

plugins/search/src/components/SearchBar/SearchBar.tsx

@@ -89,9 +89,14 @@ export const SearchBarBase = ({
 type Props = {
   className?: string;
   debounceTime?: number;
+  placeholder?: string;
 };
 
-export const SearchBar = ({ className, debounceTime = 0 }: Props) => {
+export const SearchBar = ({
+  className,
+  debounceTime = 0,
+  placeholder,
+}: Props) => {
   const { term, setTerm } = useSearch();
   const [value, setValue] = useState<string>(term);
 
@@ -113,6 +118,7 @@ export const SearchBar = ({ className, debounceTime = 0 }: Props) => {
       value={value}
       onChange={handleQuery}
       onClear={handleClear}
+      placeholder={placeholder}
     />
   );
 };