Is your feature request related to a problem? Please describe.
Search and filter functionality is needed in several parts of the application. Without a dedicated component, each area implements its own solution, leading to visual and behavioral inconsistencies.
A search field follows the same pattern as BBBInput (text input + inline action button), with the addition of search-specific behavior: a search/clear button, optional debounce, and proper accessibility semantics for a search field. This makes BBBSearch a natural follow-up to the BBBInput component (see issue #34), reusing its foundation rather than reimplementing it.
Describe the solution you'd like
Create a BBBSearch component built on top of BBBInput that adds search-specific behavior: a search icon, a clear button when the field has content, and optional built-in debounce. BBBInput must be implemented first as a prerequisite.
Describe alternatives you've considered
Use BBBTextInput with custom props to simulate a search field. This works but loses semantics and forces the consumer to recreate search behavior (icon, clear, debounce) on every usage. It also bypasses the inline button pattern already established by BBBInput.
Affected component(s)
BBBSearch (new component), BBBInput (prerequisite — issue #34 )
Proposed API / Usage Example
// Simple search
<BBBSearch
placeholder="Search participants..."
onSearch={(term) => filterParticipants(term)}
/>
// With configurable debounce
<BBBSearch
placeholder="Search messages..."
debounce={300}
onSearch={(term) => searchMessages(term)}
/>
// Controlled
<BBBSearch
value={searchTerm}
onChange={setSearchTerm}
onClear={() => setSearchTerm('')}
placeholder="Filter..."
/>
Additional context
This issue should only be addressed after BBBInput (#34 ) is complete, as BBBSearch is intended to be built on top of it. Consider supporting type="search" on the underlying HTML element for better accessibility and browser integration.
Is your feature request related to a problem? Please describe.
Search and filter functionality is needed in several parts of the application. Without a dedicated component, each area implements its own solution, leading to visual and behavioral inconsistencies.
A search field follows the same pattern as BBBInput (text input + inline action button), with the addition of search-specific behavior: a search/clear button, optional debounce, and proper accessibility semantics for a search field. This makes BBBSearch a natural follow-up to the BBBInput component (see issue #34), reusing its foundation rather than reimplementing it.
Describe the solution you'd like
Create a BBBSearch component built on top of BBBInput that adds search-specific behavior: a search icon, a clear button when the field has content, and optional built-in debounce. BBBInput must be implemented first as a prerequisite.
Describe alternatives you've considered
Use BBBTextInput with custom props to simulate a search field. This works but loses semantics and forces the consumer to recreate search behavior (icon, clear, debounce) on every usage. It also bypasses the inline button pattern already established by BBBInput.
Affected component(s)
BBBSearch (new component), BBBInput (prerequisite — issue #34 )
Proposed API / Usage Example
Additional context
This issue should only be addressed after BBBInput (#34 ) is complete, as BBBSearch is intended to be built on top of it. Consider supporting type="search" on the underlying HTML element for better accessibility and browser integration.