-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: correcting focus behavior of react-search #28241
fix: correcting focus behavior of react-search #28241
Conversation
emmayjiang
commented
Jun 16, 2023
- Polishes the appearances of react-search based on the selected size and appearance
- Add the appear-on-focus behavior to the contentAfter and dismiss icons
- Enables excluding contentAfter while still maintaining the dismiss button

📊 Bundle size report🤖 This report was generated against 64fb6d6be07cd309c26a49d6fa31ed60e7030c79 |
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 64fb6d6be07cd309c26a49d6fa31ed60e7030c79 (build) |
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit d6d4d53:
|
packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBoxStyles.styles.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good! Just some minor comments
packages/react-components/react-search/src/components/SearchBox/renderSearchBox.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBoxStyles.styles.ts
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBoxStyles.styles.ts
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/stories/SearchBox/SearchBoxDefault.stories.tsx
Show resolved
Hide resolved
/azp run Fluent UI React - PR and CI |
Azure Pipelines successfully started running 1 pipeline(s). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just two comments, then this looks good to go!
packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBoxStyles.styles.ts
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBoxStyles.styles.ts
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBoxStyles.styles.ts
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBox.tsx
Outdated
Show resolved
Hide resolved
packages/react-components/react-search/src/components/SearchBox/useSearchBoxStyles.styles.ts
Outdated
Show resolved
Hide resolved
…x/useSearchBox.tsx Co-authored-by: Sean Monahan <seanmonahan@microsoft.com>
…x/useSearchBoxStyles.styles.ts Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>
* master: Fixed bugs and added more stories to the Breadcrumb (microsoft#28267) refactor: Keep vanillajs code only where needed (microsoft#28278) fix: correcting focus behavior of react-search (microsoft#28241) Tooltip : updated tooltip styles (microsoft#28264)
* master: (95 commits) docs(react-drawer): improve drawer stories examples (microsoft#28283) bugfix: adds grid-template-columns to DialogBody styles to ensure grid template layout (microsoft#28272) Doc: Tree Infinite Scrolling (microsoft#28197) fix(react-card): infer a11y id from immediate header element (microsoft#28266) Fixed bugs and added more stories to the Breadcrumb (microsoft#28267) refactor: Keep vanillajs code only where needed (microsoft#28278) fix: correcting focus behavior of react-search (microsoft#28241) Tooltip : updated tooltip styles (microsoft#28264) applying package updates feat(react-tags): add styles for size (microsoft#28229) docs(react-dialog): update DialogTriggerOutsideDialog to include focus behavior (microsoft#28176) bugfix: Ensures dialog actions stretches on breakpoints (microsoft#28258) applying package updates fix: TableHeaderCell should not render button when not sortable (microsoft#28097) fix(react-file-type-icons): Map mhtml extension to html icon (microsoft#28112) Fix overlapping axis labels on smaller viewports (microsoft#28239) useArrowNavigationGroup grid-linear axis (microsoft#28253) applying package updates fix: Alert example missing aria-label for icon (microsoft#28234) Overflow divider fix (microsoft#28011) ...
* master: docs(react-drawer): best practices (microsoft#28040) docs(react-drawer): add missing documentation for Drawer stories (microsoft#28284) docs(react-drawer): improve type descriptions and fix TS circular references (microsoft#28282) docs(react-drawer): improve drawer stories examples (microsoft#28283) bugfix: adds grid-template-columns to DialogBody styles to ensure grid template layout (microsoft#28272) Doc: Tree Infinite Scrolling (microsoft#28197) fix(react-card): infer a11y id from immediate header element (microsoft#28266) Fixed bugs and added more stories to the Breadcrumb (microsoft#28267) refactor: Keep vanillajs code only where needed (microsoft#28278) fix: correcting focus behavior of react-search (microsoft#28241) Tooltip : updated tooltip styles (microsoft#28264)