Release notes

16.4

Draft: 16.4 release notes

16.3

Published 2023-08-22

NOTE: When possible, links in the release notes will open in Figma's Dev Mode for faster inspection, and to prevent unwanted editing of objects when a user has edit permissions.

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: