Skip to content

Add BBBSearch component — follow-up to BBBInput #35

@Arthurk12

Description

@Arthurk12

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request
    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions