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.
Button altered
Renamed Tertiary Button to Text Button.
Extracted the Button Icon into new component, Icon Button.
Icon button new
Component extracted from the Button Component.
Card removed
Removed the Card component, since Card is a pattern. Extracted Editorial Card as a separate component.
Crosslinks removed
All of the Crosslink variations has been either removed or renamed.
- Studio Crosslink has been extracted and renamed to Navigational Card, studio variant.
- Lifestyle Crosslink has been removed.
- Expandable Studio Crosslink has been extracted and renamed to Disclosure Card.
- Button Crosslink has been renamed and extracted to Shortcuts.
- Crosslink List has been renamed and extracted to Link List.
From the breaking change commit message:
Crosslinks have seized to exist. They are all extracted into separate
components.Navigational Card new
Component extracted from the Crosslinks Component. Previously known as Studio Crosslink.
Disclosure Card new
Component extracted from the Crosslinks Component. Previously known as Expandable Studio Crosslink.
Shortcuts new
Component extracted from the Crosslinks Component. Previously known as Button Crosslink.
Link List new
Component extracted from the Crosslinks Component. Previously known as Crosslink List.
Cube removed
The Cube Component is removed. It is basically a styled table.
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 😊Dropdown renamed
Dropdown has been renamed to Dropdown Select
Expandable renamed
Expandable has been renamed to Panel, since expandable is a pattern.
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.
Header new
Component extracted from the Hero Component.
Input fields altered
- Label has been renamed and extracted to Input Label.
- Textarea has been extracted as a separate component.
- Numeric Stepper has been extracted as separate component.
The Input Fields component has been added as a dependency to these components
Input Label new
Component extracted from the Input Fields Component.
The Input Label component has been added as a dependency to these components
Textarea new
Component extracted from the Input Fields Component.
Numeric Stepper new
Component extracted from the Input Fields Component.
Menu removed
The Menu Component has been removed. All of the Menu Component variants has been extracted and/or renamed:
- Application Menu is renamed and extracted to Dropdown Menu.
- List Menu is renamed and extracted to Sidebar Menu.
- Accordion Menu is extracted as a separate component.
- Context Menu is renamed and extracted to Tooltip Menu.
- Overflow Menu is renamed and extracted to Contextual Menu.
Dropdown Menu new
Component extracted from the Menu Component.
Sidebar Menu new
Component extracted from the Menu Component.
Accordion Menu extracted
Component extracted from the Menu Component.
Tooltip Menu new
Component extracted from the Menu Component.
Contextual Menu new
Component extracted from the Menu Component.
Minimal Header renamed
Minimal Header is renamed to Global Minimal Header. (Global Footer, Global Header, Global Minimal Header.)
Notification renamed
Notification has been renamed to Alert Banner.
Popover altered
The Tooltip component has been extracted into a separate component.
Tooltip new
Component extracted from the Button Component.
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 CheckboxRadio Button new
Component extracted from the Selection Controls Component.
Checkbox new
Component extracted from the Selection Controls Component.
Toggle new
Component extracted from the Selection Controls Component.
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.
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 CrosslinksUsp renamed
The USP Component is now renamed as Quick Facts.
Blockquote new
Blockquote has been extracted from Core as a separate component.
Dropdown filter new
The table filters from Data Table has been extracted and renamed to Dropdown Filter.
Footer renamed
The Footer Component has been renamed to Global Footer. (Global Footer, Global Header, Global Minimal Header.)
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.
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-100or
// category: size
// type: spacing
// item: 16
$size-spacing-16The 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.
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.
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.