Skip to content

FEAT: Add showOnlyOneOption prop to list and dropdown list components (#1451) - #2341

Open
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:feat/list-show-only-one-option
Open

FEAT: Add showOnlyOneOption prop to list and dropdown list components (#1451)#2341
Talha12Shiekh wants to merge 1 commit into
appbaseio:nextfrom
Talha12Shiekh:feat/list-show-only-one-option

Conversation

@Talha12Shiekh

Copy link
Copy Markdown

Proposed Changes

Adds a new boolean prop showOnlyOneOption to dynamic list and dropdown list components to allow developers to conditionally hide filters when they do not offer choice (e.g. have only 1 option or 0 options):

  1. Conditional Hiding: When showOnlyOneOption is set to false, the component automatically renders null if the options count is less than or equal to 1.
  2. Components Supported:
    • MultiList
    • SingleList
    • MultiDropdownList
    • SingleDropdownList
  3. Types & Prop Contracts: Added showOnlyOneOption prop definition in each component's propTypes, defaultProps, and type declarations (.d.ts).

Linked Issues

Usage Example:

// Hide the filter if only 1 option (or 0 options) is returned from the Elasticsearch aggregation
<MultiList
  componentId="CategorySensor"
  dataField="category.keyword"
  showOnlyOneOption={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

  • Smarter UI Design: Prevents displaying redundant and useless search filters that only have a single selectable option, saving screen real estate and improving user experience.

Side Effects

  • None. Default behavior remains unchanged (showOnlyOneOption defaults to true).

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.

Hide component when only 1 option is available

1 participant