Thanks to visit codestin.com
Credit goes to design.gitlab.com

Release notes

18.8

Published 2026-01-09

No major updates due to the 🎄 holidays.

This release updates the application chrome layout templates to reflect the latest visual refinements from the product.

Changelog

🔄 Changes

  • (Patterns & Page Templates): Application chrome adjustments:

    • Updates AI navigation width and spacing.
    • Adjusts GitLab Duo panel spacing at small breakpoint.

Contributors

Dan Mizzi-Harris, Jeremy Elder, Sascha Eggenberger

18.7

Published 2025-12-12

This release introduces application chrome layout templates to support full-page designs and adds visual refinements from the recent UI updates to core components.

Full highlights:

  • New application chrome pattern with three panel types (static, dynamic, and AI) for organizing complex interfaces.
  • Updated drawer and modal border radius styling.
  • New gitlab-credits icon for credit representation in the product.

Note: Application chrome is a new structural pattern for product interfaces—review the design assets to understand the panel system and its intended use cases.

💡 Figma tip: You can have split tabs in Figma and even have different file types, like Figma Design and FigJam, next to each other. Take a look at Figma's guide for details.

Changelog

➕ Additions

🔄 Changes

  • (Component Library): Updates the ❖ Drawer to use a border radius on the top left and bottom left, reflecting the changes introduced in Project Studio.
  • (Component Library): Updates the ❖ Modal to use an increased border radius, reflecting the changes introduced in Project Studio.

Contributors

Austin Regnery, Chad Lavimoniere, Dan Mizzi-Harris, Jeremy Elder, Nick Leonard, Sascha Eggenberger, Tim Noah

18.6

Published 2025-11-14

This release brings focused refinements to the UI kit with updates to the Single Stat component and several updated product icons. We've enhanced the Single Stat with a more flexible slot-based approach, added link and sparkline support, and introduced additional visualization options. Elsewhere, icon updates improve visual consistency across add/new actions.

Full highlights:

  • Enhanced Single Stat component with new slot-based architecture and expanded visualization options.
  • New passkey icon for authentication features.
  • Refined add/new icon sizing for better visual balance.
  • Various component fixes and deprecation cleanup.

Changelog

➕ Additions

  • (Patterns & Page Templates): Adds link to file diff shared asset.
  • (Patterns & Page Templates): Adds dashboard panel pattern.
  • (Product Icons): Adds passkey icon.

🚀 Enhancements

  • (Data Visualization): Adds ❖ Single stat component with a new slot-based approach that supports link options, additional icon choices, supplementary title text, and sparkline and progress bar visualizations for richer data presentation.

🔄 Changes

⚠️ Deprecations

  • (Data Visualization): Deprecates ❖ Single stat. Use new ❖ Single stat instead.

Contributors

Becka Lippert, Chad Lavimoniere, Dan Mizzi-Harris, Jeremy Elder, Julia Miocene, Sascha Eggenberger

18.5

Published 2025-10-10

Focus on radius, radius on focus, focus on utilities? Yes! This release brings refined visual consistency across components with updated border radii and introduces a more flexible focus ring system. We've also reorganized our utility libraries for better maintainability and discoverability.

Full highlights:

  • Visual refinements with updated border radii across 13+ components for a more modern, cohesive appearance throughout the design system.
  • A new, more versatile focus ring utility.
  • Better utility organization in dedicated files (UIK utilities, Annotations and utilities) for improved file performance and easier navigation.
  • Plenty of other cleanup to improve file organization while reducing circular dependencies.

💡 Figma tip: Okay, cheating a bit on this one, but head over to Figma Tips & Tricks to learn a few things directly from the source. Did you know about timed delays and overlays to simulate interactions in prototypes?

Changelog

➕ Additions

  • (Component Library): Adds Rounded lg variant to ❖ Focus ring.
  • (Component Library): Adds basic keyset pagination component.
  • (UIK utilities): Adds new UIK utilities library to contain utilities used to build the UI kit files. Don't use these in your designs.

🔄 Changes

  • (Component Library): Updates the border radius for the following components:
  • (Component Library): Updates ❖ Dropdown to remove panel and tip borders.
  • (Component Library): Updates all instances of the focus ring to use the new ❖ Focus ring utility component that includes a Rounded lg variant to support increases border radius for many components.
  • (Component Library): Updates Elevation page to be under the Foundations section to match the structure of the Pajamas site.
  • (Component Library): Migrates logo utilities away from this file into the GitLab Product Illustrations file, UI kit documentation and cover utilities to a dedicated UIK utilities file, and renames the page from "Utilities" to "Focus ring" to establish the pattern for more dedicated utility pages in the future.
  • (Component Library): Migrates utilities (cursors, spacers, layout blocks, placeholder image, and stickies) to the Annotations and utilities file.
  • (Annotations): The library is enabled by default in new R&D workspace design files, making it easier to reach for helpful utilities like stickies and cursors.
  • (Product Illustrations): Updates page organization to make categorization more clear.

⚠️ Deprecations

  • (Component Library): Deprecates pagination compact variant.
  • (Component Library): Deprecates focus ring as this used a removed sub component. Use new ❖ Focus ring.

🗑️ Removals

  • (Component Library): Removes spacing page as content was outdated and Spacing foundation content is the source of truth.
  • (Component Library): Removes layout section (placeholder page) as Layout is its own foundation concept.

Contributors

Dan Mizzi-Harris, Jeremy Elder, Libor Vanc, Michael Le

18.4

Published 2025-09-15

For this release we're keeping up with the times by adding a few AI-related icons and a new page template for paneled views. Data revealed that the data visualization elements needed some updates, so we've addressed those too. Lastly, this release included some other maintenance that keeps the UI kit assets up-to-date with code counterparts. And one more thing, AI features are now enabled in Figma, which unlocks some new capabilities and tools. Keep on!

Full highlights:

  • New paneled views page template for more flexible layouts.
  • AI product icons added: flow and agent-ai.
  • Updated data visualizations to use current component versions.
  • Various maintenance and fixes to restore missing components and broken style references.

💡 Figma tip: With the enablement of the AI features in Figma, you'll want to take a look at all of the capabilities!

Changelog

➕ Additions

  • (Design Tokens): As part of the release, the library is available in Figma Make and will be updated as part of the release from now on.
  • (Component Library): As part of the release, the library is available in Figma Make and will be updated as part of the release from now on.
  • (Patterns & Page Templates): Adds paneled views page template.
  • (Product Icons): Adds flow and agent-ai icons.

🔄 Changes

  • (Product Icons): Updates copy-to-clipboard icon to new design.

  • (Component Library): Breaking(medium): Set ❖ Toast width to hug and adds max width to variants. In some instances this will cause the toast to be ~20px wider with longer content.

  • (Component Library): Updates ❖ Drawer to use the gl-shadow-lg.

  • (Component Library): Changes Drawer example to better support scrim.

  • (Data Visualization): Breaking(medium): Updates pan and zoom to use the current version of ❖ Badge.

  • (Data Visualization): Breaking(medium): Updates mini pipeline graph to use the current version of ❖ Badge.

  • (Data Visualization): Updates contribution chart to no longer use deprecated layer style.

  • (Data Visualization): Updates mini pipeline graph instances to no longer use deprecated effect style.

  • (Data Visualization): Updates the line chart example to use the most recent versions of components.

🛠️ Fixes

  • (Data Visualization): Restores components used in the file that had been removed.
  • (Data Visualization): Removes style references to libraries that no longer exist.
  • (Data Visualization): Updates color chip to use the styles from the correct library.

⚠️ Deprecations

  • (Component Library): Deprecates muted badge (use ❖ neutral badge instead).
  • (Component Library): Deprecates the dashed button variant (use ❖ default button instead).
  • (Patterns & Page Templates): Deprecates legacy page templates and components.
  • (Product Icons): Deprecates 'duplicate' icon.

Contributors

Annabel Gray, Dan Mizzi-Harris, Jeremy Elder, Julia Miocene, Libor Vanc, Sascha Eggenberger

18.3

Published 2025-08-15

This release fixes library access issues (thanks for reporting Katie!) and adds some recent icon and illustration updates. We've resolved publishing settings that prevented some teams from accessing Annotations, Product Illustrations, and Patterns & Page Templates. Plus, a new icon, a new illustration, and a fix for a nasty icon bug that was breaking instance swapping.

Full highlights:

  • Annotations, Product Illustrations, and Patterns & Page Templates libaries now properly published to the whole GitLab Organization.
  • New empty-ai-catalog-md illustration for AI catalog empty states.
  • Fixed broken status icon rotation when instance swapping.
  • Update UI kit files to use the latest assets.

Changelog

➕ Additions

🔄 Changes

  • (Component Library): Use latest assets from the Design tokens and Product Illustrations libraries.
  • (Patterns & Page Templates): Use latest assets from the Product Illustrations library.
  • (Patterns & Page Templates): Unpublish components that were internal to the file.
  • (Patterns & Page Templates): Publish to GitLab (Organization), previously was only visible to members of the GitLab Product Design Figma team.
  • (Annotations): Publish to GitLab (Organization), previously was only visible to members of the GitLab Product Design Figma team.
  • (Product Illustrations): Publish to GitLab (Organization), previously was only visible to members of the GitLab Product Design Figma team.

🛠️ Fixes

  • (Product Icons): Fixes status icon rotation that impacted instance swapping.

Contributors

Annabel Gray, Dan Mizzi-Harris, Jeremy Elder, Julia Miocene, Libor Vanc, Nick Leonard, Sascha Eggenberger, Taylor Vanderhelm

18.2

Published 2025-07-11

We can't contain ourselves this release. Well actually, we can, now that we've added both the card and CRUD design assets to help designers structure content. Accessibility gets a boost with the addition of annotation assets, making it easier to communicate accessible design intent across your work. We've also enhanced link documentation with improved guidance, examples, and cross-component references. Elsewhere, visual refinements help maintain consistency with recent product changes.

Full highlights:

  • New card component for flexible content containers.
  • CRUD component with starter product examples.
  • Accessibility blueline annotation assets to help communicate accessibility details.
  • Comprehensive link documentation improvements.
  • Merge request reports refinements to match product changes.

💡 Figma tip: There are several ways to select layers, but one that's really helpful is being able to use the Select Layer menu to select those hard to find locked and hidden layers (on a trackpad use a two-finger click to reveal the Select Layers menu).

Changelog

➕ Additions

🔄 Changes

  • (Component Library): Updates link concepts, component documentation, and examples:
    • Adds link section under typography text styles with brief details about link use.
    • Adds more ❖ Link product examples.
    • Adds cross links between typography and link component pages.
    • Updates ❖ Link/Meta and ❖ Link/UI descriptions to include external link guidance.
  • (Patterns & Page Templates): Increase merge request reports border radius to match recent product changes along with additional border cleanup.

Contributors

Dan Mizzi-Harris, Graham Bachelder, Jeremy Elder, Julia Miocene, Libor Vanc

18.1

Published 2025-06-13

This release adds new highlight design tokens and animated product icon artifacts while cleaning up library dependencies and fixing deprecated components across the design system.

Changelog

➕ Additions

  • (Design tokens): Adds highlight.* design tokens. Use highlight design tokens to support drawing attention to matched results, identifying referenced elements, or visualizing relationships between content.

🔄 Changes

  • (Annotations): Detaches icons to remove library dependency.
    • Removes component library, design tokens, and product icons from enabled libraries in this file.
  • (Product Icons): Includes animated icon artifacts. These static shapes are used to construct animated icons. Animated icons are not currently available in Figma, see them in action in gitlab-ui.

🛠️ Fixes

Contributors

Dan Mizzi-Harris, Jeremy Elder, Julia Miocene, Libor Vanc, Mark Unthank, Sascha Eggenberger

18.0

Published 2025-05-12

This release brings important color updates across our UI kit. Since these changes affect nearly every component, you'll want to update your files as soon as possible.

We identified that highly saturated colors in our 600–950 range weren't performing optimally against dark surfaces. By reducing saturation in these specific values, we've significantly improved dark mode experiences.

Also, we've made design tokens easier to use in Figma. Semantic design tokens now appear first in the picker and color styles (chromatic, theme, and brand constants) have been moved to the Design token library.

Full highlights:

  • Reduce saturation in the 600–950 chromatic hue values in order to have the colors work better in dark mode against darker surfaces.
  • Reordered semantic design tokens to appear first in the style picker.
  • Updated dark mode styles for selected buttons.
  • Refined dropdown styles for improved visual hierarchy.

💡 Figma updates: Figma recently launched new products and features including changes to the editor UI. See everything announced at Config 2025 at config.new.

Changelog

➕ Additions

  • (Product Illustrations): Adds package-sm illustration.

🔄 Changes

  • (Design Tokens): Reduces saturation in the 600–950 chromatic hue values in order to have the colors work better in dark mode against darker surfaces.
  • (Design tokens): Moves constant color styles from 📙 Component library to Design tokens library.
  • (Component Library): Updates ❖ Button selected styles.
  • (Component Library): Updates ❖ Dropdown component styles.

🛠️ Fixes

  • (Product icons): Fixes face-neutral mouth color.

Contributors

Dan Mizzi-Harris, Ian Gloude, Jeremy Elder, Julia Miocene, Libor Vanc

17.11

Published 2025-04-11

In this release we're continuing the spring cleaning theme. April deprecations bring May implementations! With the latest batch of removals hopefully it's easier for you to find and implement the latest supported components. At the same time, it helps reduce our maintenance overhead so we can focus on future improvements. Here are the highlights from this release:

  • Deprecation removal: When things are deprecated we keep them around for a few milestones to give you time to migrate to the latest assets. We've had many things hanging around for too long and they've finally been ushered out. Some of these were rather large component sets so finding what you need in the component library should faster and more efficient.
  • Filter builder pattern: Copy and paste this new pattern to quickly mock up layouts that include filtering. If there's a pattern you'd like to see added, create an issue and ping the design system team to get started.

💡 Figma tip: Okay, so instead of highlighting something specific, here's a simple tip to keep up to date with all new features—check Figma's release notes. Sometimes features are apparent in the UI, and other times not so much. This is a great way to learn about them straight from the source. Stay tuned for more frequent feature releases as we near Figma's annual Config conference too.

Changelog

➕ Additions

🔄 Changes

  • (Data Visualization): Updates deprecated instances of buttons, dropdown, and tooltips to use the latest supported components.
  • (Component Library): Breaking(medium): Fix padding and clear button visibility for ❖ Text/Search in the Submit, Filled variant. Updating this component will cause the clear button to appear in some circumstances and disrupt some existing layouts.
  • (Product Icons): Updates "Issue types" category to "Work items" and renames icons with issue-type-* to work-item-*. This change has only been completed in Figma with updates the SVG library and product coming soon.

🛠️ Fixes

  • (Component Library): Fixes some dropdown list example descriptions that were incorrectly marked as deprecated.
  • (Component Library): Fixes emoji and ellipsis button variant descriptions by removing individual variant descriptions and relying on a single component description.

🗑️ Removals

  • (Data Visualization): Removes blank chart pages (bar, gauge, pie).
  • (Component Library): Removes deprecated avatar page and styles.
  • (Component Library): Removes deprecated button page.
  • (Component Library): Removes deprecated button group page.
  • (Component Library): Removes deprecated dropdown page and deprecated component variants.
  • (Component Library): Removes deprecated tooltip page.
  • (Component Library): Removes deprecated token page.
  • (Component Library): Removes deprecated tabs page and styles.

Contributors

Dan Mizzi-Harris, Jeremy Elder, Julia Miocene, Libor Vanc, Nick Brandt, Sascha Eggenberger

17.10

Published 2025-03-14

Spring is approaching in some parts of the world and we couldn't help but tidy up our release notes corner. This milestone marks our first step toward more engaging and helpful notes. Puns will be used. Changes will be logged. Credit will be given. Rest API assured we've got some automation in here for efficiency sake, but we're excited about the work and want to share that side of things with you too. With that, here are the highlights and particulars to pay attention to in this release.

  • Work items icons debut: Updates and additions to our product icons family. Is that a coffee cup or an issue icon? You don't have to worry anymore, it's a work item. More updates to come in the next milestone as well as updates in the SVGs library.
  • Modal Improvements: Don't dismiss the fixes that popped up this release, give them a go and let us know what other improvements you'd like to see.
  • Spring cleaning: Multiple deprecated items have been removed, making our library lighter and more maintainable so we have more time to write these highlights. Most, if not all, of these things have had replacements for some time, but if you need any help migrating to a new version or replacement reach out in Slack.
  • Contributors: We want to give credit to every one who contributes to the UI kit during the milestone. Inclusion is automated based on who created a branch that got merged and the maintainers who provide reviews and final merging. That doesn't cover everyone though, so we're trying to be mindful to add anyone we know to have contributed in a meaningful way. If you or someone you know contributed and got missed, just let us know and we'll be sure to make an update. Thank you for continuing to make these resources better with each release!

💡 Figma tip: You can now lock the aspect ratio when resizing elements on the canvas. This is helpful for maintaining the proportions of containers and media. Here's how to do it ↗︎

Changelog

➕ Additions

🔄 Changes

  • (Component Library): Updates instances of issue related icons with new designs from the product icons library.
  • (Data Visualization): Changes variables and components based on upstream library updates. Component updates are in instances and not published.
  • (Data Visualization): Changes color styles to use variables instead of hex values.
  • (Design Tokens): Updates icon variables to reference text counterparts where possible and the design token table to reflect the changes. Learn about the color changes in !4981.
  • (Patterns & Page Templates): Changes variables based on upstream library updates.
  • (Patterns & Page Templates): Migrates page template components to not use deprecated components.
  • (Product Icons): Updates issues, issue-new, and issue-type-issue icons with new design.
  • (Product Illustrations): Changes variables based on upstream library updates in a prior release.

🛠️ Fixes

  • (Component Library): Fixes ❖ Modal issues, including: add example content slot components; update component description to simplify and remove incorrect deprecated warning; and fix prop order.
  • (Data Visualization): Fixes some things that were broken after the 17.7 release due to library changes not propagating correctly.
  • (Patterns & Page Templates): Fixes problem where some page template components were published and had similar names to other components. Those components are no longer published and the names have been scoped to the page templates.

🗑️ Removals

  • (Component Library): Removes deprecated modal page and component.
  • (Component Library): Removes deprecated file uploader component and documentation.
  • (Component Library): Removes deprecated icon grids now that they've been added directly in the product icon file along with the remaining two deprecated grid styles.
  • (Component Library): Removes deprecated status page and components.
  • (Component Library): Removes deprecated progress bar page and components.
  • (Data Visualization): Removes transparent white 8% style in favor of alpha variable.

🤝 Contributors

Dan Mizzi-Harris, Emily Bauman, Jeremy Elder, Julia Miocene, Libor Vanc, Nick Brandt, Nick Leonard, Sascha Eggenberger

17.9

Published 2025-02-18

Additions

Annotations

  • Adds design status, an optional tool to manage design progress and milestones. Available to copy into your files for transparent status sharing.

Product icons (Figma)

Changes

Component library

Product illustrations (Figma)

  • File now included as part of the UI kit project. Library access remains unchanged.

Patterns & page templates

  • Patterns & page templates is now live. Containing shared global resources that includes components and design assets owned by feature teams, maintained in a shared space due to their wide usage. The file also contains globally useful abstractions and combinations that promote a more consistent UI. Published as the "Patterns and Page Templates" library, although many assets are only available as "sticker sheets" to copy/paste. Initial release includes:
    • Empty states
    • Merge request reports
    • Navigation

Removals

Component library

  • Removes the following deprecated component pages and assets because updated versions have been available for some time:
    • Alert (⚠️ DEPRECATED)
    • Banner (⚠️ DEPRECATED)
    • Drawer (⚠️ DEPRECATED)
    • Tree (⚠️ DEPRECATED)
  • Removes the following deprecated pattern pages and assets because new assets have been available for some time in the patterns & page templates file:
    • Empty states (⚠️ DEPRECATED)
    • Merge request reports (⚠️ DEPRECATED)
    • Navigation (⚠️ DEPRECATED)

17.8

Published 2025-01-10

Several small design token (variable) updates from the design tokens library.

17.7

Published 2024-12-17

Dark mode is now fully supported in the component library. All components have been updated to support both light and dark themes through color tokens, ensuring seamless switching between modes while maintaining accessibility standards. Create consistent dark theme experiences using system components and design tokens.

Changes

Component library

  • Updates red 300 style hex value to match red 300 design token constant.
  • Changes color styles to be linked to constant design tokens.
  • Update color style names to match constants in Figma.
  • Refactor Color page chips to show all transparencies.
  • Reset ❖ Popover and ❖ Accordion component styles to default.

Design tokens

  • The design tokens library is now out of beta and will be available by default for all new files created under the R&D workspace. Learn more in using design tokens in design.

Product illustrations (Figma)

  • Illustrations now use design tokens to change color mode.
  • Changes a stroke width to a variable to support dark theme.

Fixes

Component library

  • Fixes neutral 50 and 100 chips in the color ramp that were using incorrect styles.
  • Fixes ❖ Token 'states' instances.

Deprecations

Component library

  • Deprecate constants no longer supported: $t-indigo-gradient, $alpha-dark-64.

17.6

Published 2024-11-12

Additions

📙 Component library:

🚧 DRAFT: Patterns and page templates:

  • Adds navigation components, which were formerly in the component library.
  • Adds merge requests reports, which was formerly in the component library. Now a template that uses design tokens rather than a component for more flexible composition.
  • Adds empty state as a pattern, which was formerly in the component library.

Product icons:

Product illustrations:

Changes

📙 Component library:

Product illustrations:

Fixes

📙 Component library:

Deprecations

📙 Component library:

Removals

📙 Component library:

  • Removes empty "coming soon" pages.

Product illustrations (GitLab SVGs):

  • Removes: chart-empty-state, empty-dag-md, export-import, lock_promotion, manual_action, multi-editor_no_changes_empty, multi_file_editor_empty and web-ide_promotion.

17.5

Published 2024-10-11

Additions

Changes

Fixes

  • Fixes an issue where the thumbs-down icon would flip in component insertion.

Deprecations

  • Deprecates thumbs-down icon. Use new thumbs-down icon instead.

Removals

  • Removes illustrations: error-403, error-404, empty-serverless-lg, empty-escalation, empty-state-clusters, docker-empty-state, docker-error-state, deploy-board, Dependency-list-empty-state, analytics/no-access, productivity-analytics-empty-state, multi-editor_all_changes_committed_empty, and tracing.

17.4

Published 2024-09-16

Additions

Enhancements

  • You asked, we delivered. Avatars have more photo and new illustration profile picture options built in.

Changes

  • Breaking (medium): Changes some ❖ Badge properties to use Figma variables. Take care if using custom size overrides, such as those found in issue and pipeline statuses, as these will be reset.
  • Updated illustrations: empty-epic-md, empty-issues-md, empty-labels-md, empty-organizations-md, empty-secure-md, empty-subgroup-md and rocket-launch-md.
  • Updates ❖ Label, combining interactive states into a single property to match other components.
  • Updates Button components, Link components, ❖ Sorting, Tab components, and Tree components to use design tokens.
  • Updates deprecated component descriptions to link to current component version.

Fixes

  • Fixes old ❖ Code and Color chip component usage in instances.
  • Fixes Documentation utilities to use new ❖ Doc divider instead of the deprecated Divider that's from the deprecated navigation.

Deprecations

  • Deprecates Button components. Use new Button components instead. Components deprecated:
    • ❖ _Base Button
    • ❖ Button / Default
    • ❖ Button / Confirm
    • ❖ Button / Danger
    • ❖ Button / Loading
    • ❖ Button / Disabled
    • ❖ Button / Selected
    • ❖ Button / Dashed
    • ❖ Button / Emoji
    • ❖ Button / Link
  • Deprecates Tabs components. Use new ❖ Tab group component instead. Components deprecated:
    • ❖ Tab - Base
    • ❖ Fitted tab - Base
    • ❖ Fitted tab group - 3 up
    • ❖ Fitted tab group - 2 up
    • ❖ Fitted active
    • ❖ Fitted default
    • ❖ Tab group
    • ❖ Active
    • ❖ Hover
    • ❖ Default
  • Deprecates Tree components. Use new Tree components instead. Components deprecated:
    • ❖ Connector
    • ❖ Branch - Base
    • ❖ Row
  • Deprecates issue-block icon. Use new entity-blocked instead.

Removals

  • Removes Page layouts page that relied on the old navigation design.
  • Removes deprecated Navigation components and removes remaining usage from instances.
  • Removes deprecated Breadcrumb components and removes remaining usage from instances.
  • Removes deprecated Label components and removes remaining usage from instances.

17.3

Published 2024-08-08

Additions

Enhancements

  • Animates ❖ Spinner so it now spins in prototypes. Rotates component properties to use naming convention.

Changes

  • Updates tanuki-ai icon sparkles shape.
  • Updates comment, comment-next, comment-lines and comment-dots icons bubble shape.
  • Breaking (high): Updates avatar project/group fallback structure to prepare for dark mode. If you are the 1 person currently affected your letter overrides need to be reset.
  • Updates ❖ Label usage in the UI kit and adds instances.
  • Updates ❖ Badge, ❖ Breadcrumbs, ❖ Spinner, and ❖ Tooltip to use design tokens.

Fixes

  • Fixes color swatches on Color.

Deprecations

17.2

Published 2024-07-12

NOTE: Speed up common color decisions through our design tokens Figma library, now in open beta. Start using it today, and let us know what you think in the feedback issue .

Additions

  • Added ❖ Avatar. Component now includes multiple options for people, logo, and fallback states to chose from.
  • Added ❖ Avatar-labeled. The new avatar, but now includes text labels. Choose a stacked or inline label, with or without a sub-label, change the size or shape… the possibilities are (almost) endless.
  • Added ❖ Label. This new version of the component includes many long awaited features including: a remove button, a single place to change color, a single size, and options for lighter labels and darker labels. Happy labelling.
  • Added ❖ Profile navigation.
  • Added ❖ User settings navigation.
  • Added opt in Beta: Design tokens library file. Using design tokens as Figma variables is moving to open-beta following a successful invite-only pilot. In the future, color styles will be removed from the component library and these Figma variables will be updated to support dark mode.
  • Added the following icons: insert.
  • Added the following illustrations: empty-variables-md, variables-sm.svg.

Enhancements

  • Updated ❖ Banner to make illustrations easier to swap. Property names are now also more consistent with other components.

Changes

  • Updated Color foundation:
    • Renamed "gray" color ramp styles to "neutral", "white" to "neutral-0", and "black" to "neutral-1000" to align with design token work
    • Updated hex values for neutral 700–1000 (see #2751 for details)
    • Removed contrast ratios from color chips since they are present in Pajamas and plugins or native apps can also inspect ratios.
    • Other miscellaneous auto layout and layer naming improvements
  • Breaking (low): Remove hidden title layer from the Has title:false ❖ Alert variant.
  • Updated ❖ Alert, ❖ Avatar, ❖ Avatar-labeled, ❖ Banner, ❖ Label, and ❖ Focus ring to use design tokens.
  • Updated icons in GitLab Product Icons to not use styles from 📙 Component Library.
  • Note: As ❖ Focus ring, icons, and neutral colors are used in nearly every component, nearly every component was 'modified' in this release.

Deprecations

  • Deprecated ❖ Avatar. Use the new ❖ Avatar and ❖ Avatar-labeled instead.
  • Deprecated ❖ Breadcrumb. New version of component will have properties for:
    • number of page levels
    • show ellipsis button for narrow viewports
  • Deprecated ❖ Label. Use the new ❖ Label instead.
  • Deprecated Focus ring layer styles.

17.1

Published 2024-06-18

Additions

Changes

  • Change name of variable collection to Legacy. This collection intentionally left blank. This collection cannot be deleted due to a bug in Figma.
  • Change name of Navigation components to:
    • ❖ Project Navigation
    • ❖ Group Navigation
    • ❖ Admin Navigation

Fixes

17.0

Published 2024-05-14

Additions

Changes

  • Added an additional property to the ❖ Navigation sub-component ❖ _Page to support different hover interactions.

Fixes

16.11

Published 2024-04-15

Additions

Changes

16.10

Published 2024-03-15

Additions

Enhancements

  • Updated ❖ Dropdown behavior instances to include descriptions, update the option text to be more descriptive, and ensure the tip is centered in panel alignment.

Changes

Fixes

  • Updated the sm tertiary dropdown ❖ Button icon from upload to chevron-down to appear as a dropdown.

Deprecations

16.9

Published 2024-02-12

Additions

Removals

  • Removed a number of unused and out-of-date illustrations and replaced them with updated versions. Refer to these MRs for a full list: !991, !1005.
  • The following elements have been permanently removed to streamline future updates and limit the scope of upcoming design token work. All related pages, components, and styles are included in the removal. Please refer to the Figma file history if you need to retrieve an old design artifact.

16.8.1

Published 2024-01-29

NOTE: Special spooky update to address ghost changes (#1766) 👻

Changes

  • Non-visual and dependancy updates have been published for:
    • ❖ Alert (⚠️ DEPRECATED)
    • ❖ Banner
    • ❖ Breadcrumb
    • ❖ Broadcast message
    • ❖ Button / Default
    • ❖ Drawer
    • ❖ Dropdown
    • ❖ Option
    • ❖ Create label
    • ❖ Create tag
    • ❖ Extended
    • ❖ Icon list
    • ❖ Lables
    • ❖ Multiple groups
    • ❖ Pipeline
    • ❖ Simple action list
    • ❖ Simple option list
    • ❖ Users
    • ❖ Empty state
    • ❖ Drag & Drop (Square)
    • ❖ Markdown
    • ❖ Upload
    • ❖ MR widget
    • ❖ MR widget expand
    • ❖ Modal
    • ❖ Header (⚠️ DEPRECATED)
    • ❖ Popover
    • ❖ Body row
    • ❖ Header row
    • ❖ Table
    • ❖ Token

16.8

Published 2024-01-12

Additions

  • Added an additional, lighter color step (10) for all theme color styles as used in the navigation. For example, $t-blue-10 :: #E6ECF0. More details in !3871.
  • Added a small (16px) stacked avatar instance to support stacked avatars in list layouts. More details in !2441.
  • Added the following illustration: devops-sm.

Enhancements

  • Aligned the design spec for stacked avatars with the latest changes in !2441. Changes include using a mask instead of a border for the mask cutout effect, reducing the cutout effect from 2px to 1.5px, reducing badge padding, and adding hover and focus instance examples.

16.7

Published 2023-12-19

Additions

16.6

Published 2023-11-17

Additions

Enhancements

Changes

16.5

Published 2023-10-24

Additions

  • Added ❖ _Base/Dividing line for use in dropdown dividers. Removed an old link to a deprecated dividing line component as part of this change.

Enhancements

  • The following ❖ Empty state variants now reflow correctly when changing width:
    • Type=Full page, Breakpoint=xs-md
    • Type=Full page, Breakpoint=lg+
    • Type=Inline, Breakpoint=xs-md
  • ❖ Modal now has a size property, enabling faster selection of supported sizes.

Changes

  • Breaking (medium): Update ❖ Empty state to have maximum line length. Some instances might now be taller if text wraps.
  • Update ❖ Avatar identicons and text fallbacks to use the dynamic type scale.
  • Update ❖ Popover titles to use styles from the heading scale. Component now follows property naming guidelines.
  • Update Dropdown > ❖ Divider dropdown element color for consistent borders in dropdowns. Now uses ❖ _Base/Dividing line.
  • Update Utility > ❖ Divider documentation utility component, removing an old link to a deprecated navigation dividing line component.
  • Refactor ❖ Option to remove an unnecessary 2px spacing so that it's easier to align lists.

16.4

Published 2023-09-18

Additions

Changes

  • ❖ Option dropdown element has multiple changes:
    • Increase separation between actions and selectable options.
    • Add variants for all 'checked' option state and selected combinations, including prototyping features.
    • Update interactive state styles for checked options.
    • Add destructive and disabled state documentation. These states are not able to be added to the Figma component because of a technical limitation.
    • Property naming updated to match naming guidelines.
  • Update ❖ Footer dropdown element to make clear the buttons here are actions, not options.
  • Update ❖ Checkbox icons to match production.

Fixes

  • Fixed the ❖ Danger button tertiary hover and focus state background colors to use the correct style.

Deprecations

  • Deprecate multiple ❖ Option variants when Is action:true and Is selected:true as this is not a possible combination. Use Is action:false and Is selected:true (most common), or Is action:true and Is selected:false instead.

16.3

Published 2023-08-22

Additions

  • Added component-specific heading text styles for alert, banner, drawer, and modal. More details in #1652 and in the Changes section below.

Enhancements

Changes

  • Breaking (high): The ❖ Alert component title now has a dedicated text style that leverages the latest type scale updates. To accommodate this change, the component has been reworked to allow the title and body text to vertically align with the alert icon. The max-width variants have also been removed as they have low usage and weren't in line with current guidelines. The previous version of the alert has been deprecated, but will still be available for at least a milestone.
  • ❖Skeleton loader variants now reflect current heading and paragraph appearance.
  • Breaking (medium): ❖ Tooltip updated to use Figma's new max-width auto layout feature — no more manually controlling width using line-breaks or resizing the component! This update changes the position of existing tooltips if they are longer than 1 line.
  • Breaking (low): The ❖ Banner, ❖ Drawer, and ❖ Modal component titles now have dedicated text styles that leverage the latest type scale updates. As a result of these changes, component instances may change height and design elements may need to be repositioned within your design files. More details for the reason behind the change in !11014. New styles:
    • Component / Banner title (h2) / ≥xl breakpoint
    • Component / Banner title (h2) / ≥md breakpoint
    • Component / Drawer title (h2) / ≥xl breakpoint
    • Component / Drawer title (h2) / ≥md breakpoint
    • Component / Modal title (h2) / ≥xl breakpoint
    • Component / Modal title (h2) / ≥md breakpoint
  • The ❖ Tabs component now uses $blue-500 for the active state of a tab and box shadows were replaced with strokes. See #1669 for more details.
  • Layout renamed to Elevation to match documentation. Updated page layout to use recent documentation styles.
  • Avatar text style naming updated to match convention established in #1652.
  • Updated UI kit utilities:
    • Differentiated utility styles and components that help organize content within UI kit files from styles and components that are part of the system. Components will also be published as part of the 📙 Component library so they can be used in all UI kit files. More details in #1657.
    • Updated documentation utilities to help make inline documentation (within instances, examples, and documentation pages) more consistent and separate from the elements they address.
  • Separated heading styles from the type scale visual reference in Typography to avoid conflating the two. More details in #1658.

Deprecations

Removals

  • Tooltip > Max-width grid style removed. Use max-width auto layout rules built into ❖ Tooltip instead. (Sorry, this accidentally skipped the deprecation process.)

16.2

Published 2023-07-17

NOTE: Breaking (low): GitLab Figma Organization custom fonts updated to latest version of @gitlab/fonts 2023-07-13. Change applied automatically to all files. Investigations found no feasible way to make this change opt in. In some situations, editing text in existing files will require updating to use the latest type styles from the 📙 Component library .

Additions

Changes

  • Breaking (medium): All UI kit files updated to use @gitlab/fonts v1.3.0.
  • Breaking (medium): Type scale for UI heading elements updated. New scale optimized to create visual heirarchy across pages. Read the Pajamas type fundamentals and follow progress in the implementation epic.
    • Updated styles:
      • UI / Display / ≥xl breakpoint
      • UI / Display / ≥md breakpoint
      • UI / h1 / ≥xl breakpoint
      • UI / h1 / ≥md breakpoint
      • UI / h2 / ≥xl breakpoint
      • UI / h2 / ≥md breakpoint
      • UI / h3 / ≥xl breakpoint
      • UI / h3 / ≥md breakpoint
      • UI / h4 / ≥xl breakpoint
      • UI / h4 / ≥md breakpoint
      • UI / h5 / ≥xl breakpoint
      • UI / h5 / ≥md breakpoint
      • UI / h6 / ≥xl breakpoint
      • UI / h6 / ≥md breakpoint
    • The new heading type scale uses sizes smaller than the sizes used in the UI kit before. When a component size is set by its content there are some dimension changes. The following components have been identified as seeing, in most instances, a 1–8px height reduction.
  • Font weight for all text styles updated to use 400, 600 or 700.
    • Changed styles:
      • UI / Paragraph / Bold lg
      • UI / Paragraph / Bold
      • UI / Paragraph / Bold sm
      • Label / Bold
      • Label / Bold underlined
      • Label / Bold sm
      • Label / Bold sm underlined
      • Label / Mono bold
      • Label / Mono bold underlined
      • Label / Mono bold small
      • Label / Mono bold sm underlined
  • Optical weight and type settings changed for all text styles. Sans styles have the optical size manually set, and an updated list of enabled font features.

Fixes

  • Fix some dropdown instances using outdated text styles.
  • Fix issue where dropdown documentation would break outside its container.
  • Fix issue where the new fonts caused ❖ _Base Button group to break outside its container.

Deprecations

16.1

Published 2023-06-19

Additions

Enhancements

Changes

Fixes

Removals

  • The following have been permanently removed. This will help streamline future updates and limit the scope of upcoming type scale work. All related pages, components, and styles are included in the removal. See #1622 for details. Please refer to the Figma file history if you need to retrieve an old design artifact.

16.0

Published 2023-05-22

Additions

Enhancements

  • Added text properties to ❖ Link / UI link and ❖ Link / Mention allowing link content to be editable from the side bar.

Changes

  • Changed link component color for interactive states based on guidelines changes in !3327.
    • ❖ Link / Inline link
    • ❖ Link / UI link
    • ❖ Link / Meta link
    • ❖ Link / Mention
  • Changed heading style by adding "breakpoint" and clarifying the range in order to make it more clear that a heading size is chosen by breakpoint and not a preferred size.
  • Updated the following illustrations: empty-subgroup-md, rocket-launch-md.
  • Increased contrast for label instances that didn't meet 4.5:1.

Fixes

  • Breaking (medium): Fix height of ❖ Option component (part of dropdown). Options now resize correctly in prototypes. For existing uses, it's possible that each option will shift height by up to 4px. To migrate, check if dropdown sizing needs to be increased, and if not using auto layout ensure spacing between options is correct.
  • Made dropdown empty state example plain text instead of an option with states.
  • Removed bottom padding from last list items in some dropdown instances for proper padding within the panel after scrolling to the bottom.
  • The nested layer names of the following icons in the GitLab Product Icons file has been changed to "icon" in order to preserve color overrides:
    • stop
    • highlight
    • attention-solid
    • attention-solid-sm
  • The code icon has been recreated to correct it being flipped when used in a component.
  • Fixed the broken typescale code blocks.

15.11

Published 2023-04-18

Additions

Enhancements

  • Breaking (medium impact): ❖ Sidebar Type=Admin now includes CI/CD as an item, matching production. Sidebar color matches production.
    • Take care when updating as this change re-attached some components that had become detached, in some instances badges will appear in the sidebar where they were originally hidden.
  • Breaking (medium impact): ❖ Tooltip now resizes based on the content. Turn on the layout grid to view max-width guides with ⇧ + G or View > Layout Grids. Instances are updated to demonstrate max-width.
    • Take care when updating as in some circumstances the tip position might move a few pixels.
    • Also, custom sizing will be lost, but auto layout should resize the tooltip to the correct size.
  • Added a Gray variant for the ❖ Sticky utility component to match todos on the Pajamas website.
  • We’ve started improving component pages by including headings and descriptions. The descriptions match what’s in the component properties description field and the intent is to make them more visible. Sections are also being used to group frames, components, and instances in a way that doesn't impact component naming like a parent frame would (see Typography or Links for examples).

Changes

  • Breaking (low): Addition and removal content styles have been moved to a new ❖ Inline highlight component.
    • We expect existing instances to remain unchanged, but you will need to switch to the new component to make updates.
    • Take care when switching the component as text overrides may be lost.
  • Breaking (medium impact): ❖ Dropdown width has been decreased in support of the navigation updates. Upon updating locally the dropdown width will be 8px narrower and if you've used left or right (not centered or dynamic) tip placement it will reset to a default position. As part of the update several other resizing fixes and improvements have been made that aren't breaking changes.
  • Breaking (high impact): ❖ Breadcrumb current page now uses bold meta link style. The previous breadcrumb component has been deprecated, but will still be available for at least a milestone. In tests, swapping the component to use the new version kept all style and content overrides intact, but take care when swapping.
  • Buttons renamed to have a "Button /" prefix. Doing so makes them easier to locate when searching for a component. ❖ Button / Link description also points towards the ❖ Link / UI link components. Take care when choosing between a link (<a>) and a button (<button>).
    • ❖ Button / Default
    • ❖ Button / Confirm
    • ❖ Button / Danger
    • ❖ Button / Loading
    • ❖ Button / Disabled
    • ❖ Button / Selected
    • ❖ Button / Dashed
    • ❖ Button / Emoji count
    • ❖ Button / Link
    • ❖ Button / Button group
  • Inline highlight component is now ❖ Link / Mention. Existing styles have been expanded to support interactive styles, and inline and meta variants.
  • Icons page pointing to the GitLab Product Icons file has been removed since the icons file has existed separately for over two years and the notice is no longer needed.

Fixes

Last updated at: