Skip to content

FEAT: Add collapse and defaultCollapse props to MultiList and SingleList - #2339

Open
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:feat/list-collapse
Open

FEAT: Add collapse and defaultCollapse props to MultiList and SingleList#2339
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:feat/list-collapse

Conversation

@Talha12Shiekh

@Talha12Shiekh Talha12Shiekh commented Aug 3, 2026

Copy link
Copy Markdown

Proposed Changes

Adds built-in collapse/expand functionality to the inline list components (MultiList and SingleList) to resolve the feature request:

  1. collapse (Boolean prop, default: false): When set to true, enables collapsible panels for the filter. The title header is converted to an interactive toggle button with focus and keyboard support.
  2. defaultCollapse (Boolean prop, default: true): Determines the initial state of the collapsible filter when collapse is enabled.
  3. Keyboard & Toggle Interaction: Clicking the title or focusing and pressing Enter/Space toggles the visibility of the search input, list options, and load-more controls.
  4. Visual Indicator: Renders a clean arrow indicator ( / ) next to the title to represent open/closed states.
  5. A11y Compliance: The toggle header correctly uses role="button", tabIndex={0}, and dynamic aria-expanded attributes.
  6. Types & Component Contracts: Updated MultiList.d.ts and SingleList.d.ts definitions.

Linked Issues

Usage Example:

// Render as collapsed by default
<MultiList
  componentId="CategorySensor"
  dataField="category.keyword"
  title="Categories"
  collapse={true}
/>

// Render as expanded by default
<SingleList
  componentId="BrandSensor"
  dataField="brand.keyword"
  title="Brands"
  collapse={true}
  defaultCollapse={false}
/>

Checklist

  • Describe the proposed changes and how it'll improve the library experience.
  • Please make sure that there are no linting errors in the code.
  • Add a demo video/gif/screenshot to explain how did you test the fix.
  • If it is a global change, try to add any side effects that it could have.
  • Create a PR to add/update the docs (if needed) at here.
  • Create a PR to add/update the storybook (if needed) at here.

Improvements to the Library Experience

  • UI Flexibility: Fulfills feature request Add a collapse behavior on the filter #1470 by allowing developers to implement compact, collapsible sidebar filters natively without requiring bootstrap wrappers or complex custom components.

Side Effects

  • None. Default behavior remains unchanged (collapse defaults to false).

Testing

  • Built successfully using Babel (yarn build) without compilation or runtime syntax errors.

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 a collapse behavior on the filter

1 participant