Button group > Explore variants for selected state
Description
Explore new opportunities to enhance how we handle selected states in button groups and could help establish more consistent styling patterns across our design system components. For example:
-
action.selected.*
design tokens - Button group
- Toggles
- Checkboxes
- Applied filters
- Tabs
This is a follow-up to gitlab-org/gitlab-ui!4976 (comment 2346052385)
In the mentioned MR from above we updated selected states in button groups to a variant which came out of our dark mode exploration:
Figma file
❖ View working file in Figma →
Checklist
Make sure the following are completed before closing the issue:
Assignee tasks:
Getting started:
- Title the issue using this structure "Figma > [Component name] - [Description]". For example, Figma > Badges - Fix icon override bug.
- Add the relevant component label. For example component:badge.
-
If you're making updates or breaking changes to any file of the Pajamas UI Kit, start with a branch of that file. Prefix the branch name with the issue, MR, or epic number, and add your GitLab username as the suffix. For example,
#860-table-component-updates-lvanc
. - When applicable, follow the components and annotation guidelines. If you have any questions, reach out to a Foundations designer.
- Update the link to the working file under the Figma link section.
-
If work was not done in a branch (a merged branch will automatically be archived), move your working file
to the shared Figma project:
- For Component library changes, move your file to the Component archive project.
- For all other changes, move your file to the Misc archive project.
- If you're a community contributor, please consider transferring ownership of your draft file to the maintainer so they can move it to our archive, along with its version history and comments.
Prior to review:
The purpose of these tasks is to ensure consistency with the rest of the components and to save time during the review process. When you are finished with your update, please go through the following clean-up tasks in Figma:
- Canvas: Make sure no hidden elements have been accidentally left behind. Use View > Show Outlines (⌘ + Y) to reveal invisible objects. Use View > Zoom to Fit (Shift + 1) to view all items on the page.
- Components: Make sure all components have correct names, properties, and descriptions along with external documentation links where applicable. View the components guides for details.
- Frames: Make spacing within and between frames consistent with components found on other pages.
- Layers: Make sure all your layers are correctly named and the order match visual from left to right. In the case of Auto Layout, Figma will determine layer order.
- Variants: Reorder variants in properties panel to match visual order. In the case of Auto Layout, Figma will determine layer order.
- Comments: Make sure all comments and discussion are resolved.
Requesting a review:
Ask a Foundations designer to review your design.
- Ensure the designer that will be reviewing your file has edit permissions in Figma.
- From the dropdown to the right of the file name, select "Request review".
- Then from the modal window, remember to include a description of the changes being made and select a reviewer from the right hand column. This description is used to generate the release notes and should follow the description format rules.
- Consider creating a new version (optional) titled "Review requested" in the history which will create a reference point in the file's history.
Once your file is in review, you should see a yellow "In review" badge to the right of the file name.
Post review:
Once the Reviewer and Maintainer have approved your update, consider the following tasks:- Follow the release process for publishing guidelines and be sure to add the update to the current release notes draft MR. Ask a Figma maintainer if you need help.
-
When applicable, add or update relevant documentation and create an MR with your changes using the
Documentation
MR template. If you do not have the capacity, create another issue using theComponent documentation
issue template so we don't forget about it. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling. -
When applicable, create a GitLab UI issue using the
Component
issue template to build or update the component code. Mark the new issue as related to this one. Bring the issue to your team planning session for prioritization and scheduling. -
Congrats, you made it! You can now close this issue.
Reviewer tasks:
See tasks:
- Review assignee's design and ensure that any breaking change has been accounted for. Specific design questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
- Make sure all layers are correctly named and organized.
- Stress test final component by changing the component's size, editing content, and changing any available variants and properties.
- Ensure component descriptions and external documentation links are clear and accurate.
- Approve assignee's design and mention them in this issue to let them know.
- Assign to a Figma maintainer for final review and merge (make sure they have edit permissions in Figma).
Maintainer tasks:
See tasks:
- Review and approve assignee’s changes. questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
- Consider adding a new version to the file's version history to indicate the state prior to merging the changes. The name of the version and description of the changes are saved in the file history and provide a meaningful reference point.
-
Merge the branch or add the changes or additions to the
target file.
- Ensure that all styles and components now belong to the target file.
- For changes to the Component library file, view the components in the Assets panel to ensure they align with the components guidelines.
- Ensure that the release process has been followed and notes are accounted for.