diff --git a/packages/main/package.json b/packages/main/package.json index f0a5536e414..7e7170a6016 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -55,6 +55,10 @@ "types": "./dist/components/FilterBar/index.d.ts", "default": "./dist/components/FilterBar/index.js" }, + "./FilterBarSearchIcon": { + "types": "./dist/components/FilterBarSearchIcon/index.d.ts", + "default": "./dist/components/FilterBarSearchIcon/index.js" + }, "./FilterGroupItem": { "types": "./dist/components/FilterGroupItem/index.d.ts", "default": "./dist/components/FilterGroupItem/index.js" diff --git a/packages/main/src/components/FilterBar/FilterBar.mdx b/packages/main/src/components/FilterBar/FilterBar.mdx index 50950bcae7b..02e0a6bc1f0 100644 --- a/packages/main/src/components/FilterBar/FilterBar.mdx +++ b/packages/main/src/components/FilterBar/FilterBar.mdx @@ -1,12 +1,13 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components'; import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw'; import { Canvas, Description, Markdown, Meta } from '@storybook/addon-docs/blocks'; +import { FilterBarSearchIcon } from '../FilterBarSearchIcon'; import { FilterGroupItem } from '../FilterGroupItem'; import * as ComponentStories from './FilterBar.stories'; - +
@@ -407,6 +408,14 @@ const handleInput = (event) => { +## Trigger the search via the search icon + +By default, the search icon of the `search` input is decorative. To let users trigger the search by activating the search icon (in addition to pressing Enter in the input), pass the `FilterBarSearchIcon` subcomponent to the `icon` prop of the search input and wire its `onClick` handler. + +This is recommended when the "Go" button is displayed (`showGoOnFB`). The `FilterBarSearchIcon` is pre-controlled — you decide what "trigger search" means in its `onClick` handler. + + + {SubcomponentsSection} ## FilterGroupItem @@ -414,4 +423,9 @@ const handleInput = (event) => { +## FilterBarSearchIcon + + + +