Release notes

16.1

Draft: 16.1 release notes

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: