1799188 - Create a search input that matches the current design system

Status: NEW

(Toolkit :: UI Widgets, enhancement, P3)

Description

[Mark Striemer [:mstriemer]]

We currently have a search-textbox [1] element that is used in a few places, but is currently a XUL element. We should create an HTML version that matches the Design System [2] and our updated process for creating reusable components. It should be documented in Storybook.

While this bug is for the search input, that input is really a special case of the regular text input. It might make sense to create a text input instead and give it a search variant.

[1] https://searchfox.org/mozilla-central/source/toolkit/content/widgets/search-textbox.js
[2] https://www.figma.com/file/2ruSnPauajQGprFy6K333u/Desktop-Components?node-id=800%3A7534

Comment 1

[Tim Nguyen :ntim]

The main feature of search-textbox is the clear icon, which <input type="search"> + layout.forms.input-type-search.enabled provides. Not sure how useful are the other features of search-textbox, but depending on what you need, you might not need a custom element.

Comment 2

[omega judith]

i wanna try this out. outreachy applicant here

Comment 3

[Mark Striemer [:mstriemer]]

Thanks for your interest, however this bug is not ready for work at the moment. If you'd like to find a bug in the Firefox Desktop Frontend you can check https://codetribute.mozilla.org/projects/ff.

Comment 4

[Hanna Jones [:hjones]]

A Lit-based search input was added in bug 1826328 - this might make a good foundation for a reusable search input when we decide to tackle this: https://searchfox.org/mozilla-central/source/browser/components/firefoxview/fxview-search-textbox.mjs