UI kit > Refactor badge
Description
Refactor Badge the badge component to:
- Make it easier to use
- Simpler construction
Extend the badge component to:
- Contain states (see forms as an example)
Original proposal
The originally proposed solution is not the best solution as Figma doesn't surface nested component properties. As a result the most important properties would be hidden on a sub-layer. Our hypothesis is these properties on sublayers would not be found by Figma users. Quick user testing n=1
of an advanced Figma user increased confidence in this hypothesis.
Originally proposed solution
Simplify the matrix:
Simplify using the component:
- Variant using existing variants
- Text editable as a component property
- Text visibility using Boolean
- Icon visibility using Boolean (following options only display when icon = true)
- Icon size using existing variants
- Icon src using instance swap
Support states:
- TBC
Work completed
Badges are extended use additional component properties, all accessible from first click
- Variant: (Neutral muted|Neutral|Info|Success|Warning|Danger|Tier)
- Badge size: (Small|Medium|Large)
- State: (Default|Hover|Focus|Active)
- Icon: (None|12px|16px)
- Icon (12px): (Instance swap)
- Icon (16px): (Instance swap)
- Label: (true|false)
- Label content: (Text)
Notes
- Icon overrides are not retained when switching between 12px and 16px versions. This will prevent icons accidentally being using at the wrong scale.
- Some properties are conditional. For example, the icon instance swap won't be available if
Icon: None
is selected, and the Tier variant can only use the tier icon.
⚠ This is a breaking change. Existing badge components have been moved to the DEPRECATED section.
Component updates
The following components still need to be updated to use the new badge. Please add yourself to the table, create a new branch, migrate the badge components, then assign to a maintainer for review.
Out of scope
- Pipeline badges
Updating components that reference badges will be tackled in follow up issues. Is tackled using the table above.
Questions
- Were there any further thoughts on including fields for designers to define some of the non-visual attributes? As examples
aria-label
andsr-only
.
Figma file
❖ View working file in Figma →
Badge style construction
Here's the 'formula' used for badge colours.
Only interactive badges — badges with a href
— have hover/focus/active states.
State | Formula | Example (info) |
---|---|---|
Default | background: $color-100 stroke: none icon: $color-500 label: $color-700
|
background: $blue-100 stroke: none icon: $blue-500 label: $blue-700
|
:hover |
background: $color-100 stroke: 1px $color-200 solid icon: $color-600 label: $color-800
|
background: $blue-100 stroke: 1px $blue-200 solid icon: $blue-600 label: $blue-800
|
:focus |
background: $color-100 stroke: none icon: $color-600 label: $color-800 focus ring: true
|
background: $blue-100 stroke: none icon: $blue-600 label: $blue-800 focus ring: true
|
:active |
background: $color-200 stroke: none icon: $color-700 label: $color-900 focus ring: true
|
background: $blue-200 stroke: none icon: $blue-700 label: $blue-900 focus ring: true
|
Neutral muted
Exception is neutral muted, which follows the same pattern but with different starting values
Only interactive badges — badges with a href
— have hover/focus/active states.
State | Example (neutral muted) |
---|---|
Default | background: $color-50 stroke: none icon: $color-400 label: $color-500
|
:hover |
background: $color-50 stroke: 1px $color-200 solid icon: $color-500 label: $color-600
|
:focus |
background: $color-50 stroke: none icon: $color-500 label: $color-600 focus ring: true
|
:active |
background: $color-100 stroke: none icon: $color-600 label: $color-700 focus ring: true
|
Checklist
Make sure the following are completed before closing the issue:
Assignee tasks:
Getting started:
-
If you’re making updates or breaking changes to an existing component in the Pajamas UI Kit, start with a branch of the UI kit. 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 our structure, building, 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 below. -
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: Where applicable, make sure all components have updated descriptions and have external documentation links. -
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: Remove the default dashed purple stroke, border radius, and padding from all variants. -
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.
If any of these tasks are unclear, see the Table component for reference.
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.
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 or Maintainer has approved your update, consider the following tasks:-
If it’s a new pattern or a significant change, add an agenda item to the next UX weekly call to inform the team. -
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 and approve assignee’s design. 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. Let the assigning know that their changes have been approved by mentioning them in this issue. -
Assign to a Figma maintainer for final review (make sure they have edit permissions in Figma). -
Ask a Foundations designer to review your design (ensure 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. -
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 our asset library structure guidelines.
-
-
When applicable, publish any library changes along with a clear commit message.