Skip to content

feat(GlListbox): add ability to reset selection

Paul Gascou-Vaillancourt requested to merge 1968-listbox-clear into main

What does this MR do?

This adds the ability to show a reset button in a listbox's header. The reset button only shows up if all those conditions are fulfilled:

  • The resetButtonLabel prop is provided. This is the only control the consumer has over the button. The button does not have a default label to enforce a properly translated a contextualized label to be provided, which in turns controls the button's rendering.
  • The headerText prop is provided. We do not allow a reset button to render without a header being set on the listbox. Each clearable listbox should therefore have a header that ideally describes its purpose.
  • Some items are selected. If the selection is empty, the reset button is hidden.

Screenshots

From http://1968-listbox-clear.34.140.25.101.nip.io/?path=/story/base-new-dropdowns-listbox--custom-list-item

With items selected Selection empty
Screen_Shot_2022-10-03_at_8.24.33_AM Screen_Shot_2022-10-03_at_8.24.49_AM

GitLab integration

Those changes are currently being leveraged in a select2 migration here: gitlab!98597 (merged).

Closes #1968 (closed)

Edited by Paul Gascou-Vaillancourt

Merge request reports