Release notes

17.0

Draft: 17.0 release notes

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: