Update component:breadcrumb based on navigation redesign
Description
To support the Overhaul the core navigation experience (&9044) the breadcrumb component needs to be updated.
Design
-
Create a branch in Figma for this updated component → #1533-breadcrumb-component-updates-aregnery
-
Create issue to update breadcrumb
component in📙 Component library in Figma → gitlab-org/gitlab-services/design.gitlab.com#1533 (closed) -
Add guideline to Pajamas around the line separator below the breadcrumb. → gitlab-org/gitlab-services/design.gitlab.com!3241 (merged) -
Update guideline in Pajamas for the chevron to be replaced by /
→ gitlab-org/gitlab-services/design.gitlab.com!3241 (merged) -
Add guidelines in Pajamas for when to have an avatar appear in the breadcrumb
Engineering
-
Add support for opt-in avatar on every step of ... (#391 - closed) -
Modify font weights and colors -
Replace chevron-right
svg with slash typeface character/
($gray-200) -
Change bottom line separator to be matchRemove bottom border and extra padding$gray-100
#dcdcde
instead of$gray-200
#bfbfc3
Figma file
Checklist
Make sure the following are completed before closing the issue:
-
Assign the correct component label to this issue. -
Create an MR with the additions or updates needed. -
Be sure to get your MR reviewed by a FE/UX Foundations designer. -
When applicable, create an MR in Pajamas to update the demos. If you do not have capacity to complete the demos, create an issue in Pajamas and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one. -
When applicable, create an MR in Pajamas to update the component status. -
When applicable, create an issue in Pajamas using the "Component Documentation" issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. -
When applicable, create an issue in Pajamas using the "Figma update" issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. -
When introducing a major or breaking change, communicate the changes within the Engineering Week in Review. -
🎉 Congrats, you made it! You can now close this issue.
Edited by Jeremy Elder