Skip to content

feat(BBBSearch): add search component#39

Merged
Arthurk12 merged 1 commit into
bigbluebutton:developfrom
AtilaU19:task-35
Jun 18, 2026
Merged

feat(BBBSearch): add search component#39
Arthurk12 merged 1 commit into
bigbluebutton:developfrom
AtilaU19:task-35

Conversation

@AtilaU19

Copy link
Copy Markdown

What does this PR do?

Implements the BBBSearch component.

Features:

  • Built-in debounce (configurable, defaults to 500ms)
  • Clear button that bypasses debounce for immediate feedback
  • Loading spinner via isLoading prop (mutually exclusive with clear button)
  • Supports both uncontrolled (default) and controlled modes
  • Uses type="search" for improved browser and accessibility semantics
  • Accessible: aria-label, role="searchbox", keyboard-friendly clear button
  • Styled with library design tokens (palette, sizing, typography)

Notes
BBBSearch is intentionally kept free of any GraphQL/Apollo dependency. Loading state is passed in via isLoading, allowing the caller to derive it from a subscription, a query, or any other async source. This keeps the component reusable outside the BBB core.

Closes Issue(s)

Closes #35

@AtilaU19 AtilaU19 changed the base branch from main to develop June 10, 2026 15:19
Comment thread src/components/Search/component.tsx Outdated
Comment thread src/components/Search/component.stories.tsx
Comment thread src/components/Search/README.md
@AtilaU19 AtilaU19 changed the title feat(Search): add BBBSearch component feat(BBBSearch): add search component Jun 11, 2026
@Arthurk12

Arthurk12 commented Jun 12, 2026

Copy link
Copy Markdown
Member

@AtilaU19 Actually, there is one more place - which I've forgot to point in the previous review - that the BBBSearch has to be added:

entry: {
Accordion: './src/components/Accordion/index.ts',
Button: './src/components/Button/index.ts',
Checkbox: './src/components/Checkbox/index.ts',
Divider: './src/components/Divider/index.ts',
Hint: './src/components/Hint/index.ts',
Modal: './src/components/Modal/index.ts',
Navigation: './src/components/Navigation/index.ts',
Select: './src/components/Select/index.ts',
Spinner: './src/components/Spinner/index.ts',
TextAreaInput: './src/components/TextAreaInput/index.ts',
TextInput: './src/components/TextInput/index.ts',
Toggle: './src/components/Toggle/index.ts',
Typography: './src/components/Typography/index.ts',
index: './src/index.ts',

Add BBBSearch, a search input component with debounce, clear action,
and optional loading state indicator.

- Supports controlled mode (value + onChange) and uncontrolled mode
  (internal state + onSearch with configurable debounce, default 500ms)
- Clear button fires onSearch('') immediately, bypassing debounce
- Loading state replaces the clear button with a BBBSpinner
- Accepts inputRef for external focus control and autoFocus prop
- Accessible via aria-label and role="searchbox"
@Arthurk12 Arthurk12 merged commit 4b929ac into bigbluebutton:develop Jun 18, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add BBBSearch component — follow-up to BBBInput

2 participants