carbon icon indicating copy to clipboard operation
carbon copied to clipboard

feat(search): search button is rendered at all times when `searchButton` prop is set FE-6078

Open edleeks87 opened this issue 1 year ago • 0 comments

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: image image image image image

image image image image

Fixes to menu: image image image

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 image

Style regression with menu items and Search in MenuFullscreen

image image

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

Additional context

Testing instructions

edleeks87 avatar Feb 20 '24 16:02 edleeks87