Release notes
17.9
Published 2025-02-18
Additions
- Adds design status, an optional tool to manage design progress and milestones. Available to copy into your files for transparent status sharing.
- Adds duo-chat-new icon.
Changes
- Updates variables from design token library in banner, dropdown, and ❖ Link / Mention.
- File now included as part of the UI kit project. Library access remains unchanged.
- 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
- 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
- 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.
- 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.
- Illustrations now use design tokens to change color mode.
- Changes a stroke width to a variable to support dark theme.
Fixes
- Fixes neutral 50 and 100 chips in the color ramp that were using incorrect styles.
- Fixes ❖ Token 'states' instances.
Deprecations
- Deprecate constants no longer supported:
$t-indigo-gradient
,$alpha-dark-64
.
17.6
Published 2024-11-12
Additions
- Adds the following to replace deprecated versions:
- ❖ Alert:
- Uses latest buttons.
- ❖ Button group / actions:
- Uses latest buttons.
- ❖ Button group / options:
- Uses latest buttons.
- ❖ Drawer:
- Uses latest buttons.
- Lays the groundwork for slots.
- ❖ Progress bar:
- Adds support for variants.
- ❖ Modal:
- Uses latest buttons.
- Header property no longer optional.
- Footer cleanup.
- Mobile instance reflects dynamic header size and button wrapping.
- Adds ❖ Token and ❖ Filtered search token.
- Replaces deprecated ❖ Token with two components.
- Adds ❖ Dropdown list examples that use latest components and design tokens.
- ❖ Create label
- ❖ Create tag
- ❖ Pipeline
- ❖ Users
- ❖ Alert:
🚧 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.
- Adds: hash and multiple-choice that will be used to represent custom field types.
Changes
-
Breaking (medium): ❖ Toggle uses new dimensions.
-
Breaking (medium): Changes ❖ Pagination width, but overrides are maintained.
-
Breaking (medium): Change ❖ Broadcast message component structure to use a border rather than inner shadow to create bottom edge highlight.
-
Breaking (medium): Change ❖ Popover and instances to use design tokens. This update is likely to cause style overrides for content to be lost, for example setting blue for a link color.
-
Update forms components to use design tokens:
- Breaking (high): Refactor ❖ _Base Prefix and ❖ _Base Suffix to use latest button component.
- Refactor form element construction to use latest auto layout features.
- Refactor documentation and instances.
-
Applies design tokens to components, elements, and instances:
- ❖ Alert
- ❖ Accordion link text color and body content.
- ❖ Banner
- ❖ Broadcast message
- ❖ Date picker
- ❖ Dropdown
- ❖ Filtered search token
- ❖ Form group
- ❖ Inline link
- ❖ Modal
- ❖ Pagination
- ❖ Progress bar
- ❖ Table:
- Update ❖ Checkbox used in ❖ Header row and ❖ Body row.
- Update ❖ Button and ❖ Avatar used in ❖ _Base body cell.
- ❖ Toast
- Resets instance overrides.
- Adds shadow.
- ❖ Toggle
- ❖ Token
- ❖ Dropdown list examples
- ❖ Dropdown elements
- ❖ Dropdown base
- ❖ Form base
- ❖ Skeleton loader
- ❖ Tree connector
- Typography documentation
-
Changes ❖ Dropdown page layout and instances.
-
Changes ❖ UI link and ❖ Meta link blend mode to support dark mode.
-
Changes ❖ Mention link frame to use default Figma styles.
-
Adds shadow to ❖ Tooltip.
- Inherits
$neutral-*
color change from the component Library.
Fixes
- Fixes order of color chips in several color ramps.
- Fixes icon in ❖ Button instances.
- Fixes ❖ Alert background color.
- Fixes ❖ Tree instance.
- Updates ❖ Table instances to remove overrides.
Deprecations
- Deprecates the following components, replaced by new versions that use design tokens:
- ❖ Alert. Use ❖ Alert instead.
- ❖ Button group / Actions. Use ❖ Button group / Actions instead.
- ❖ Button group / Options. Use ❖ Button group / Options instead.
- ❖ Drawer. Use ❖ Drawer instead.
- ❖ Progress bar. Use ❖ Progress bar instead.
- ❖ Modal. Use ❖ Modal instead.
- ❖ Token. Use ❖ Token and ❖ Filtered search token instead.
- Deprecates some ❖ Dropdown list examples. Use ❖ Create label, ❖ Create tag, ❖ Pipeline, and ❖ Users instead.
- Deprecates navigation components, use navigation components in the patterns and page templates library instead.
- Deprecates merge request reports, use merge request reports in the patterns and page templates library instead.
- Deprecates ❖ Empty state. Empty state is now a pattern in the patterns and page templates file.
- Deprecates status (severity) because it's not part of the design system.
- Deprecates ❖ File uploader as there as no plans to include this in the design system.
Removals
- 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
- Adds ❖ Empty state search product examples.
- Adds icons: resize and thumbs-down.
Changes
- Changes shadows to use design tokens, changes shadow size and shape.
- Changes deprecated product icons to make them easier to recognize as deprecated.
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
- Adds icons: calendar-overdue, tanuki-ai-off.
- Adds illustrations: empty-cloud-md, empty-epic-add-md, empty-issues-add-md, empty-key-md, empty-labels-add-md, empty-organizations-add-md, empty-secure-add-md, empty-subgroup-add-md, empty-user-alert-md, empty-user-md, status-alert-md, status-alert-sm, status-fail-md, status-fail-sm, status-new-md, status-new-sm, status-nothing-md, status-nothing-sm, status-settings-md, status-settings-sm, status-success-md and status-success-sm.
- Breaking (high): Adds all-new ❖ Button. This powerhouse component unifies multiple button types, offering unprecedented flexibility and ease of use. Highlights include:
- Seamless switching between 12(!) styles.
- Four of your favorite button types - text, icon only, dropdown, and icon only dropdown.
- Built-in icon picker for lightning-fast customization ⚡️
- Breaking (high): Adds ❖ Split dropdown button, ❖ Emoji button, and ❖ Ellipsis button for specialized button needs. Full features detailed in the instances.
- Adds ❖ Sorting. While button-like in appearance, this component is purpose-built for sorting interactions, offering a distinct set of features tailored for this specific use case.
- Breaking (high): Adds ❖ Tab group. Choose the number of tabs, current tab, justification style, and more from the property panel of this completely rearchitected component. Need something else? This release also adds ❖ Tab item to allow you to go where tab group can't.
- Breaking (high): Adds ❖ Tree row, we've planted the seed for heirarchy by rethinking this component from the soil up. No longer do you need to leaf through multiple components to get to the root of it all. Stem spacing confusion by branching out with ❖ Tree connector. Just line it up to the top left for perfect spacing every time — treemendous!
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
- Breaking (high): Adds ❖ Badge. One size to rule them all! Also fixes an intermittent icon color bug.
- Breaking (high): Adds ❖ Breadcrumb. Loafs more useful options, much butter avatars, and go with the grain with new quick presets — it's the yeast we can do!
- Breaking (high): Adds ❖ Tooltip. New, shiny, informative. All the same features, but refactored to not use a base component.
- Adds icons: duo-chat, duo-chat-off, and entity-blocking.
- Adds illustrations: catalog-sm, empty-catalog-md, error-500-lg, error-502-lg, error-503-lg, and empty-secrets-md.
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
- Deprecates ❖ Breadcrumb. Use new ❖ Breadcrumb instead.
- Deprecates ❖ Badge. Use new ❖ Badge instead.
- Deprecates ❖ Tooltip. Use new ❖ Tooltip instead.
- Deprecates long-arrow icon. Use arrow-right instead.
- Deprecates merge-request-open and git-merge icons. Use merge-request instead.
- Deprecates folder-o icon. Use folder instead.
- Deprecates messages icon. Use bullhorn instead.
- Deprecates remove-all icon. Use remove instead.
- Deprecates task-done icon. Use todo-done instead.
- Deprecates tachometer icon. Use dashboard instead.
- Deprecates issue-blocked icon. Use entity-blocking or entity-blocked instead.
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
- Added ❖ Your work navigation.
- Added the following illustrations: commit-sm, wiki-sm, train-sm, scan-alert-sm and empty-train-md.
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
- Fix ❖ Broadcast message dismiss button visbility.
17.0
Published 2024-05-14
Additions
- Added Navigation components, including:
- Added an annotations and utilities library. The library is optional as it's not automatically enabled for everyone by default. It launches with ❖ Design token, which is a utility used to annotate where design tokens are used in a design. Expect more tools to help document and present design decisions to be added in upcoming milestones. Learn more about our upcoming plans for the UI kit.
Changes
- Added an additional property to the ❖ Navigation sub-component ❖ _Page to support different hover interactions.
Fixes
- Updated the min width in the ❖ Dropdown description to match code implementation.
- Corrected icon colors in ❖ Button components to match code implementation for all states.
- Updated the ❖ Navigation / Admin navigation to use the correct icons.
16.11
Published 2024-04-15
Additions
- Added the following icons: milestone, regular expression.
- Added the following illustrations: cloud-tanuki-sm, cloud-user-sm.
Changes
- Moved Button group components to their own page.
16.10
Published 2024-03-15
Additions
- Added ❖ Button group / Actions to support button group use cases with only actions.
- Added ❖ Button group / Options to support button group use cases with selectable items.
- Added the following illustrations: empty-environment-md, empty-commit-md, empty-private-md, empty-scan-alert-md, empty-service-desk-md, empty-user-settings-md, service-desk-sm.
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
- Updated the ❖ Popover description to match Pajamas (!3742) and default instance text to match GitLab UI (!3970).
- Breaking (medium): Updated ❖❖ Text/Multiline form element to display as four lines, up from one line.
- Added
Size: SM
,Type: Icon
andBadge: True
variants to ❖ Button / Selected to better support swapping with Default buttons. - Updated Table / _Base header cell sortable variants to use glyphs (↑, ↓) instead of icon buttons. The glyph color is the same as the text. More details in #1780.
- Updated ❖ Table Configuration: Sortable (on hover) instance cell background so that it doesn't reflect a color change on hover. More details in #1780.
Fixes
- Updated the sm tertiary dropdown ❖ Button icon from upload to chevron-down to appear as a dropdown.
Deprecations
- Deprecated ❖ Button Group.
- Use ❖ Button group / Actions for button group use cases with only actions.
- Use ❖ Button group / Options for button group use cases with selectable items.
16.9
Published 2024-02-12
Additions
- Added the following icons: dash-circle, partner-verified.
- Added the following illustrations: empty-job-failed-md, empty-job-manual-md, tanuki-ai-md, tanuki-ai-sm, empty-devops-sm.
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.
- Alert (⚠️ DEPRECATED), use ❖ Alert.
- Skeleton loader (⚠️ DEPRECATED), use ❖ Skeleton loader.
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
to1.5px
, reducing badge padding, and adding hover and focus instance examples.
16.7
Published 2023-12-19
Additions
- Added the following illustration: purchase-success-md
16.6
Published 2023-11-17
Additions
- Added x icon to replace the twitter icon.
- Added the following illustrations: empty-access-md, empty-chart-md, empty-dashboard-md, empty-devops-md, empty-epic-md, empty-geo-md, empty-job-canceled-md, empty-job-not-triggered-md, empty-job-pending-md, empty-job-scheduled-md, empty-job-skipped-md, add-user-sm, chart-bar-sm, chat-sm, cloud-check-sm, merge-requests-sm, milestone-sm, pipeline-sm.
Enhancements
- Improved organization of icons in the GitLab Product Icons file to align with a recent Pajamas update to document icon collections.
Changes
- Updated the twitter icon to use the new "X" logomark and renamed it to x. The name in the SVGs repo will remain unchanged for the time being so the visual can propagate more easily. Migration to the new x.svg icon is in progress.
- Updated the following issue-type icons to use the default stroke style: issue-type-enhancement, issue-type-feature-flag, issue-type-feature, issue-type-incident, issue-type-issue, issue-type-key-result, issue-type-maintenance, issue-type-objective, issue-type-requirements, issue-type-task, issue-type-test-case, issue-type-ticket.
- Updated the sort-lowest icon arrow direction.
- Minor changes to the line placement within the sort-lowest and sort-highest icons.
- Updated the default ❖ Banner background color from
white
to$gray-10
to offset it more from the background. - Updated the ❖ Banner illustration to use the
sm
size instead ofmd
.
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
- Added ❖ Deprecated component utility component, to mark variants as deprecated in a non-destructive way.
- Added ❖ Simple action list dropdown list example to make it faster to build flat and grouped action lists.
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
andIs selected:true
as this is not a possible combination. UseIs action:false
andIs selected:true
(most common), orIs action:true
andIs 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
- Improved instances for the alert, banner, drawer, dropdown, modal, and tooltip components to make it easier to understand options, behavior, and usage.
- Updated dropdown types to include more examples.
- Added extra characters to the GitLab Mono font test to make it easier to see when an old version of the font is loaded.
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 (high): New components created for headings. Existing skeleton loader heading variants have been deprecated.
- Paragraph variants (representing lines of text) updated:
- Added ❖ Text/Paragraph/1 line.
- Renamed ❖ Text/Paragraph/Short → ❖ Text/Paragraph/3 line.
- Renamed ❖ Text/Paragraph/Long → ❖ Text/Paragraph/5 line.
- Breaking (medium): Updated ❖ Text/Paragraph/3 line and ❖ Text/Paragraph/5 line to use paragraph spacing and visual weight.
- 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
- ❖ Alert (⚠️ DEPRECATED). Use ❖ Alert.
- Skeleton loader heading variants. Use latest ❖Skeleton loader variants.
Tab / Active (⚠️ DEPRECATED)
effect style. Use a bottom stroke instead.Tab / Hover (⚠️ DEPRECATED)
effect style. Use a bottom stroke instead.
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
- Added the following icons: catalog-checkmark, check-xs, close-xs
Changes
- Breaking (medium): All UI kit files updated to use
@gitlab/fonts
v1.3.0.- To use the fonts outside the GitLab organisation in Figma, download the fonts.
- The updated font versions have slightly different spacing between glyphs. When a components size is set by its content there can be a dimension change. The following components have been identified as seeing, in most instances, a ±1–4px width change.
- Badge
- ❖ Breadcrumb
- Button
- ❖ Form group when a prefix or suffix is present
- ❖ Label
- Link
- ❖ Pagination
- ❖ Severity status
- ❖Tabs
- ❖ Toast
- ❖ Token
- ❖ Tooltip
- 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.
- Updated styles:
- Font weight for all text styles updated to use
400
,600
or700
.- 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
- Changed styles:
- 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
- Navigation page and all components deprecated.
- Documentation markdown type scale file and library since type scales have been updated and will only exist in the 📙 Component library.
- Compact markdown type scale file and library since type scales have been updated and will only exist in the 📙 Component library.
16.1
Published 2023-06-19
Additions
- Added the following icons: quick-actions, markdown-mark, markdown-mark-solid, tanuki-ai
Enhancements
- Updated the following icons to improve optical sizing in relation to other icons: comment, comment-dots, comment-lines, comment-next, details-block, list-bulleted, list-numbered
Changes
- Changed avatar group User text inline instance to include user handle inline too in support of !3486.
Fixes
- Fixed the pixel alignment of the table icon.
- ❖ Menu item, ❖ _Base Sidebar/Flyout menu/Menu items, and stacked avatar instances use the correct badge component.
- ❖ _Base/Color swatch uses the correct checkbox component.
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.
- Badge (⚠️ DEPRECATED), use ❖ Badge
- Breadcrumb (⚠️ DEPRECATED), use ❖ Breadcrumb
- Dropdown (⚠️ DEPRECATED), use ❖ Dropdown
- Forms (⚠️ DEPRECATED), use Forms
- Segmented control (⚠️ DEPRECATED), use ❖ Button group
- Typography (⚠️ DEPRECATED), use Typography
16.0
Published 2023-05-22
Additions
- Added the following icons: cloud-pod, comment-lines, reply.
- Added the following illustrations: empty-labels-starred-md, empty-friends-md, empty-groups-md, empty-issues-md, empty-merge-requests-md, empty-pipeline-md, search-sm, secure-sm.
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
- Link components are available for all four link categories. A future update will add instructions for adding style overrides for inline use. Until then, copy the styles from the components, or reach out to a Foundations designer for help.
- ❖ Link / Inline text link
- ❖ Link / UI link
- ❖ Link / Meta link
- ❖ Link / Mention
- Added the cloud-terminal icon to represent workspace.
- Added the following illustrations: empty-snippets-md, empty-labels-md, empty-todos-md, empty-todos-all-done-md, empty-embed-panel-md, empty-projects-md, empty-projects-starred-md, empty-projects-deleted-md.
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
- ❖ Button / Link text overrides now persist when changing state.
Last updated at: