carbon
carbon copied to clipboard
feat(search): search button is rendered at all times when `searchButton` prop is set FE-6078
fix #6581 fix #6597
BREAKING CHANGE: The threshold
prop has been removed as it no longer does anything in the
redesigned component
BREAKING CHANGE: The inputRef
is no more
Proposed behaviour
Implements new designs for Search
component. The button is now rendered at all times when the
searchButton
is set; expands the type of this prop to also accept string values which will support
more granular control over the text rendered in the button. Support for overriding the button text
via the locale provider has also been added. Updates have also been made to Link
and Menu
style
files to ensure the styling is correct when Search
is rendered in a Menu
. Styling targeting the
search input in menus has also been removed. These changes have also addressed the issue with
padding of MenuItem
components that render Search
.
Search redesign:
Fixes to menu:
Deprecated the inputRef
prop, consumers should use ref
in order to get a ref to the input
element.
Current behaviour
Designs support search Button appearing on focus or when there is a value in the input but disappearing when the user blurs, this creates issues for users tabbing to navigate as the DOM tries to focus the button that is no longer there.
Style regression with Search in Menu
Style regression with menu items and Search in MenuFullscreen
Checklist
- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [x] Screenshots are included in the PR if useful
- [x] Unit tests added or updated if required
- [x] Playwright automation tests added or updated if required
- [x] Storybook added or updated if required
- [x] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [x] Typescript
d.ts
file added or updated if required
QA
- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required