v12 Release Notes

Changelog

v12 released 5th of May, and here are the release notes, and any notable changes are described.

The release includes, but not limited to features, documentation, refactoring and bug fixes. For any questions, please contact us!

This release is mainly a refactoring release, with few additions.

Components

We have renamed and extracted several components. The reasoning behind this is to make them easier to find, have a component name closer to what it does and what it does not and to leverage the footprint of the components when installed.

We have compared all of our components to other high end design systems and used them to align naming. Systems like Adobe Spectrum, Carbon Design System, Lightning Design System and Google Material.

Related workitem, Opens in new window

Button altered

Renamed Tertiary Button to Text Button.

Documentation

Extracted the Button Icon into new component, Icon Button.

Documentation

Icon button new

Component extracted from the Button Component.

Documentation

Card removed

Removed the Card component, since Card is a pattern. Extracted Editorial Card as a separate component.

Documentation

Screenshot of Editorial Card Component
Editorial Card Component

All of the Crosslink variations has been either removed or renamed.

To accomodate for this change, which is not just a "search and replace"-change, please follow the migration guide.

From the breaking change commit message:

Crosslinks have seized to exist. They are all extracted into separate
components.

Component extracted from the Crosslinks Component. Previously known as Studio Crosslink.

Documentation

Disclosure Card new

Component extracted from the Crosslinks Component. Previously known as Expandable Studio Crosslink.

Documentation

Shortcuts new

Component extracted from the Crosslinks Component. Previously known as Button Crosslink.

Documentation

Component extracted from the Crosslinks Component. Previously known as Crosslink List.

Documentation

Cube removed

The Cube Component is removed. It is basically a styled table.

Screenshot of Cube Component
Cube Component

From the breaking change commit message:

The cube component is now removed from the DS, it is just a styled
table. If you need guidance or help with the styling, contact us 😊

To accomodate for this change, which is not just a "search and replace"-change, please follow the migration guide.

Dropdown has been renamed to Dropdown Select

Documentation

Screenshot of Dropdown Select Component
Dropdown Select Component

Expandable renamed

Expandable has been renamed to Panel, since expandable is a pattern.

Documentation

Hero altered

  • Hero Navigation has been extracted to a separate component.
  • Hero without image has been extracted and renamed to Header.

Hero Navigation new

Component extracted from the Hero Component.

Documentation

Header new

Component extracted from the Hero Component.

Documentation

Input fields altered

The Input Fields component has been added as a dependency to these components

Input Label new

Component extracted from the Input Fields Component.

Documentation

The Input Label component has been added as a dependency to these components

Textarea new

Component extracted from the Input Fields Component.

Documentation

Numeric Stepper new

Component extracted from the Input Fields Component.

Documentation

The Menu Component has been removed. All of the Menu Component variants has been extracted and/or renamed:

To accomodate for this change, which is not just a "search and replace"-change, please follow the migration guide.

Component extracted from the Menu Component.

Documentation

Component extracted from the Menu Component.

Documentation

Accordion Menu extracted

Component extracted from the Menu Component.

Documentation

Tooltip Menu new

Component extracted from the Menu Component.

Documentation

Contextual Menu new

Component extracted from the Menu Component.

Documentation

Minimal Header renamed

Minimal Header is renamed to Global Minimal Header. (Global Footer, Global Header, Global Minimal Header.)

Documentation

Notification renamed

Notification has been renamed to Alert Banner.

Documentation

Popover altered

The Tooltip component has been extracted into a separate component.

Documentation

Tooltip new

Component extracted from the Button Component.

Documentation

Selection Controls removed

The Selection Controls Component has been removed. All of the variants has been extracted:

  • Radio button is extracted into a separate component.
  • Checkbox is extracted into a separate component.
  • Toggle is extracted into a separate component.

From the breaking change commit message:

Selection controls is no more. Has ceased to be. Bereft of life, it
rests in peace. This is an ex-component. The component is split into
Radio Buttons, Toggle Control and Checkbox

Radio Button new

Component extracted from the Selection Controls Component.

Documentation

Checkbox new

Component extracted from the Selection Controls Component.

Documentation

Toggle new

Component extracted from the Selection Controls Component.

Documentation

Teasers removed

The Teaser Component is removed, and the variants has been either removed or extracted and renamed:

  • Studio teaser has been removed in favour of the Studio variant of Navigational Card.
  • Lifestyle teaser has been extracted as a Lifestyle variant of Navigational Card.
  • Text teaser has been extracted as a Text variant of Navigational Card.

Documentation

From the breaking changes commit message:

Teasers are no more. It has been replaced with Lifestyle Navigational
Card, Text Navigational Card. Studio Teasers is gone, use Studio
Navigational Card instead, which is based on the old Studio Crosslinks

To accomodate for this change, which is not just a "search and replace"-change, please follow the migration guide.

Usp renamed

The USP Component is now renamed as Quick Facts.

Documentation

Blockquote new

Blockquote has been extracted from Core as a separate component.

Documentation

The table filters from Data Table has been extracted and renamed to Dropdown Filter.

Documentation

The Footer Component has been renamed to Global Footer. (Global Footer, Global Header, Global Minimal Header.)

Documentation

Design Tokens

We have revamped the Design Tokens we have, renamed and added new ones.

The former system used to create and manage Design Tokens was Theo, a system created by Salesforce. It worked for us in the beginning, but we needed some more control over the connections between the tokens.

We are now using Style Dictionary, from Amazon.

With the switch, it is now easier to maintain the Design Tokens and to cater to more frameworks, native and web.

Related workitem, Opens in new window

The Design Tokens are now named with this structure: CTISiS: Category, Type, Item, Sub item, State, like:

// category: color
// type: base
// item: light-blue
// sub item: 100
$color-base-light-blue-100

or

// category: size
// type: spacing
// item: 16
$size-spacing-16

The full documentation about the base of our Design Tokens are yet to be created, but we have reserved space for it.

We are also looking into how to document and visualize the connections between design tokens.

Screenshot of Design Token Flow
An example on how we can visualize the Design Token relations

Mixins

All of our mixins, both internal and external has now been renamed. All of the preprocessor mixins have the same naming, making it easier to identify.

The new structure is:

.a-selector
  IDS_TYPOGRAPHY_FontFamily_Sans()
  IDS_ICONS_Icon_Ui_Data_upload()
  +IDS_BREAKPOINT_MQ_ExtraSmall_Min()
    padding-left $size-spacing-32
    padding-right $size-spacing-88
  +IDS_BREAKPOINT_MQ_Smaller_Min()
    padding-left $size-spacing-40
    padding-right $size-spacing-96
  +IDS_BREAKPOINT_MQ_Medium_Min()
    line-height $size-line-height-32
.a-selector {
  @include IDS_TYPOGRAPHY_FontFamily_Sans;
  @include IDS_ICONS_Icon_Ui_Data_upload;
  @include IDS_BREAKPOINT_MQ_ExtraSmall_Min {
    padding-left: $size-spacing-32;
    padding-right: $size-spacing-88;
  }
  @include IDS_BREAKPOINT_MQ_Smaller_Min {
    padding-left: $size-spacing-40;
    padding-right: $size-spacing-96;
  }
  @include IDS_BREAKPOINT_MQ_Medium_Min {
    line-height: $size-line-height-32;
  }
}
.a-selector {
  .IDS_TYPOGRAPHY_FontFamily_Sans();
  .IDS_ICONS_Icon_Ui_Data_upload();
  .IDS_BREAKPOINT_MQ_ExtraSmall_Min({
    padding-left: @size-spacing-32;
    padding-right: @size-spacing-88;
  )};
  .IDS_BREAKPOINT_MQ_Smaller_Min({
    padding-left: @size-spacing-40;
    padding-right: @size-spacing-96;
  )};
  .IDS_BREAKPOINT_MQ_Medium_Min({
    line-height: @size-line-height-32;
  )};
}

All of the mixins are now prefixed with IDS_ (If Design System) and is followed by a capitalized component name TYPOGRAPHY_ to indicate where the mixin is created, and followed with a clear name of what the mixin does.

Related workitem, Opens in new window

Documentation Structure

We've done some changes in the information structure on the documentation site:

  • Page templates has been moved under resources
  • Changelog and News (release notes etc) is always in the left sidebar menu
  • Patterns is now a separate top level menu item
  • Develop is now moved under If Design System -> Develop
  • If Design System is a new top level item
  • Introduction and Getting Started is moved under If Design System
  • Foundation is a new top level item replacing Design
  • Design Token is a new top level item for documentation of usage and all of our design tokens.

AuthorAlexander Vassbotn Røyne-Helgesen
Contact us, Opens in new window