From 174c6d2421a00cf0998515b13248e1a60efc86fc Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Wed, 12 Jul 2023 10:11:42 -0700 Subject: [PATCH 1/4] add missing documentation --- .../react-search-preview/README.md | 2 +- .../stories/SearchBox/SearchBoxBestPractices.md | 6 ++++++ .../stories/SearchBox/SearchBoxDescription.md | 14 ++++++++++++++ 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-search-preview/README.md b/packages/react-components/react-search-preview/README.md index 335db2d647142..cae1148077784 100644 --- a/packages/react-components/react-search-preview/README.md +++ b/packages/react-components/react-search-preview/README.md @@ -4,7 +4,7 @@ These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. -SearchBox allows the users to access information with ease, providing flexibility and the ability to clear and filter the input to provide the best experience. +The `SearchBox` component allows the users to access information with ease, providing flexibility and the ability to clear and filter the search. ### Usage diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxBestPractices.md b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxBestPractices.md index 08ff8ddeeb5f8..06ea62631c828 100644 --- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxBestPractices.md +++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxBestPractices.md @@ -2,4 +2,10 @@ ### Do +- **Consider wrapping `SearchBox` in a role="search" container for top-level site or app search fields.** This role exposes the search field as a landmark, and makes it easier to find for screen reader users. It should not be used unless the SearchBox is the primary search area for the entire site or app. + +- **Consider using `SearchBox` with underline or outline appearances.** When the contrast ratio against the immediate surrounding color is less than 3:1, consider using underline or outline styles which has a bottom border stroke. But please ensure the color of bottom border stroke has a sufficient contrast which is greater than 3 to 1 against the immediate surrounding. + ### Don't + +- **Don't place `SearchBox` on a surface which doesn't have a sufficient contrast.** The colors adjacent to the input should have a sufficient contrast. Particularly, the color of input with filled darker and lighter styles needs to provide greater than 3 to 1 contrast ratio against the immediate surrounding color to pass accessibility requirements. diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md index e69de29bb2d1d..6f5ab6ca8aae3 100644 --- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md +++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md @@ -0,0 +1,14 @@ + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { SearchBox } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product + +The `SearchBox` component allows the users to access information with ease, providing flexibility and the ability to clear and filter the search. From 898b72d37f684b0bb9cd78e750245abe1f35c5df Mon Sep 17 00:00:00 2001 From: Emma Jiang <31319479+emmayjiang@users.noreply.github.com> Date: Wed, 12 Jul 2023 16:45:30 -0700 Subject: [PATCH 2/4] Update packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md Co-authored-by: Sarah Higley --- .../stories/SearchBox/SearchBoxDescription.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md index 6f5ab6ca8aae3..01822476627d4 100644 --- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md +++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxDescription.md @@ -4,7 +4,7 @@ > > ```jsx > -> import { SearchBox } from '@fluentui/react-components/unstable'; +> import { SearchBox } from '@fluentui/react-search-preview'; > > ``` > From 919e46173fa67084a7be4ff6495f28c157cff0fc Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Wed, 12 Jul 2023 12:34:59 -0700 Subject: [PATCH 3/4] small styles story fixes --- .../stories/SearchBox/SearchBoxAppearance.stories.tsx | 1 - .../stories/SearchBox/SearchBoxSize.stories.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxAppearance.stories.tsx b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxAppearance.stories.tsx index 8004f2a097222..e240f9371c181 100644 --- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxAppearance.stories.tsx +++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxAppearance.stories.tsx @@ -6,7 +6,6 @@ const useStyles = makeStyles({ base: { display: 'flex', flexDirection: 'column', - maxWidth: '490px', }, filledLighter: { backgroundColor: tokens.colorNeutralBackgroundInverted, diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxSize.stories.tsx b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxSize.stories.tsx index ee8c755689e37..835b71ea1785e 100644 --- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxSize.stories.tsx +++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxSize.stories.tsx @@ -6,7 +6,6 @@ const useStyles = makeStyles({ root: { display: 'flex', flexDirection: 'column', - maxWidth: '400px', }, fieldWrapper: { ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge), From 174d6cb427bbdf0490dc5694f7bd9b5898935ed2 Mon Sep 17 00:00:00 2001 From: Emma Jiang Date: Wed, 12 Jul 2023 13:06:39 -0700 Subject: [PATCH 4/4] small styles story fixes --- .../stories/SearchBox/SearchBoxContentBeforeAfter.stories.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxContentBeforeAfter.stories.tsx b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxContentBeforeAfter.stories.tsx index f59786f527279..6774d618e334e 100644 --- a/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxContentBeforeAfter.stories.tsx +++ b/packages/react-components/react-search-preview/stories/SearchBox/SearchBoxContentBeforeAfter.stories.tsx @@ -7,8 +7,6 @@ const useStyles = makeStyles({ root: { display: 'flex', flexDirection: 'column', - // Prevent the example from taking the full width of the page (optional) - maxWidth: '400px', }, fieldWrapper: { ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalMNudge),