nimble-search-text Component

[fredvisser]

💡 New Component

😯 Problem to Solve

SLE often uses nimble-table along with a text field that allows users to filter the rows of data in the table (see #1923). Instead of using a nimble-text-field, we should create a nimble-search-text component, so that it has the correct semantics and search IxD.

💁 Proposed Solution

• FAST component
• Other reference components:
  • Carbon
  • Lightning
  • Cauldron
  • Vibe

📋 Tasks

• [ ] nimble-search-text interaction design issue
• [ ] nimble-search-text interaction design spec
• [ ] nimble-search-text visual design issue
• [x] nimble-search-text visual design spec
• [ ] nimble-search-text spec
• [ ] nimble-search-text custom element
• [ ] nimble-search-text unit tests
• [ ] nimble-search-text Storybook tests
• [ ] nimble-search-text Storybook docs
• [ ] nimble-search-text Angular wrapper
• [ ] nimble-search-text Blazor wrapper
• [ ] Add to Angular example app
• [ ] Add to Blazor example app
• [ ] Update Component Status table in README and incubating status

[jattasNI]

Open questions:

• is this a new Nimble component or a configuration of the text field (which gets shared in an SLE shared library)?
• the text field icon is currently black instead of grey despite not being interactable. Is this a bug?
• is there a specific ARIA role for search that we should apply?
• "search" vs "filter" as the default terminology

Fred is working on SLE pattern documentation that will answer some of these but not all