Make it easier to correctly style footer content in GlCollapsibleListbox

Currently footer buttons in GlCollapsibleListbox need to be styled ad hoc in order to render as designed.

Even the Storybook example styles the footer like this:

  • A wrapping element that applies padding
  • A gap between each button
  • Left-aligning each button's text
  • Applying block prop to each button

In gitlab-org/gitlab!129722 (comment 1525359297) and gitlab-org/gitlab!129722 (comment 1525359319) it was noticed that each use of the GlCollapsibleListbox might get this slightly wrong, which means eventually we'd have slightly inconsistent GlCollapsibleListboxs across GitLab.

Ideally, no additional styling would need to be added, and the buttons would render correctly.

Possible solutions

  • Provide a footer container with the correct padding/gap
  • Provide GlCollapsibleListboxFooterButton components for this use case.
  • ???
Edited by Mark Florian