Make button group its own page
Purpose
Elevate the button group component to its own Pajamas page and incorporate some of the UX guidance that currently exists under the deprecated segmented control page.
Background
- In Pajamas, the button group has historically been treated as a subset under the much larger button component.
- In GitLab UI, the button group is treated as a separate component with its own page.
- In the product, a button group has many different use cases, and with those comes accessibility considerations that have not been evaluated or documented.
- Due to the underlying component code, it was proposed that the segmented control be deprecated and current uses migrated to other components or patterns (there are still a few remaining instances in the product). Reference gitlab-org&7261 to learn more.
- @mle rightly brought up that the segmented control content in Pajamas matches UX intent, but having it noted as deprecated while not pointing to a reasonable alternative is confusing and doesn't deter use.
- Using "button group" as the name is the least disruptive because it aligns with the
GlButtonGroup
implementation, segmented control migration guidance, and is also a blanket term (abstraction) for the different types of button groups and attributes noted below. Keywords can be used in both Pajamas and Figma to help funnel queries to the button group. Likewise, documentation can unpack different aspects and uses further.
Types of button groups
- Related actions (buttons) or links that cause a page reload or redirect
- Actions (buttons) that toggle between a view or change in-page content without a page reload
In either type, one or more items can visually indicate a selected state, but it's not required for every use case. Depending on whether a button or link is used, and whether or not the page reloads, there are different accessibility considerations that will help ensure the intent and state are correctly communicated for assistive technology users.
This combination of uses and attributes makes what visually appears rather simple quite complex, and because of that a separate button group page would be advantageous.
Proposed tasks
-
Create a new button group page in Pajamas (!3774) -
Move current button group content (including Storybook example) and relevant segmented control content to the new page (!3774) -
Document different use cases and accessibility considerations (!3774) -
Update references throughout Pajamas to point to the new page (including old segmented control references) (!3774) -
Create a new group-level label for component:button-group
and apply to relevant issues and merge requests -
Move button group into its own page in the Pajamas UI Kit (Figma branch) -
Determine if updates need to happen in GitLab UI to make the component available for all use cases
Note: Although pagination is similar in appearance to a button group, the function is purely navigational and there are specific considerations that should be kept separate.