Merge pull request #30729 from backstage/bui-button-icon-search

BUI - Add startCollapsed prop on the SearchField component

docs-ui/src/content/components/search-field.mdx

@@ -7,6 +7,7 @@ import {
   searchFieldDefaultSnippet,
   searchFieldSizesSnippet,
   searchFieldDescriptionSnippet,
+  searchFieldCollapsibleSnippet,
 } from './search-field.props';
 import { PageTitle } from '@/components/PageTitle';
 import { Theming } from '@/components/Theming';
@@ -59,6 +60,18 @@ Here's a simple SearchField with a description.
   code={searchFieldDescriptionSnippet}
 />
 
+### Collapsible
+
+You can make the SearchField collapsible by setting the `startCollapsed` prop to `true`.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<SearchFieldSnippet story="StartCollapsed" />}
+  code={searchFieldCollapsibleSnippet}
+/>
+
 <Theming component="SearchField" />
 
 <ChangelogComponent component="search-field" />

docs-ui/src/content/components/search-field.props.ts

@@ -25,6 +25,10 @@ export const searchFieldPropDefs: Record<string, PropDef> = {
     type: 'string',
     required: true,
   },
+  startCollapsed: {
+    type: 'boolean',
+    default: 'false',
+  },
   ...classNamePropDefs,
   ...stylePropDefs,
 };
@@ -41,3 +45,5 @@ export const searchFieldSizesSnippet = `<Flex direction="row" gap="4">
 </Flex>`;
 
 export const searchFieldDescriptionSnippet = `<SearchField label="Label" description="Description" placeholder="Enter a URL" />`;
+
+export const searchFieldCollapsibleSnippet = `<SearchField startCollapsed />`;