v11.0.0
Introduction
Skin v11 marks another significant step towards normalizing & unifying our DS4 and DS6 "skins" under a single design system language (internally referred to as "6.5").
DS6 is now rebranded as our "default" skin, and DS4 as our "legacy" skin (although we anticipate using the old and new names interchangeably for a little while longer yet).
We see the future of Skin as a token based system that can generate potentially multiple visual expressions (or skins) of the same design system language.
Breaking Changes
There are a significant amount of breaking changes in this release. Please read these notes in full before upgrading.
For detailed information, each section heading contains a link to the relevant issue or PR.
Page Background Colour #1136
The DS4 page background colour has changed from grey (#f5f5f5) to white.
We encourage all teams transitioning from the legacy design system to adopt this new background colour.
Page Font #1178
Both DS4 and DS6 have been updated to use Market Sans for titles only as per the design system language.
Arial is the new default font.
Button #1172
DS4 and DS6 buttons have been consolidated & aligned to the new design system language.
There are three types of button:
- default (basic/minimal style)
- primary
- secondary
There are two sizes:
- default (40px height)
- large (48px height)
DS4 button colours have not been changed.
DS4 button width has been changed.
All buttons (including dropdown buttons) now have the same default width.
These changes, and simplifications, should hopefully result in less confusion and fewer issues pertaining to button states and styles.
If you wish to retain the old, wider style of buttons, view PR #1277 for two simple ways to opt-in.
CTA Button #1172
Red & blue color variants of CTA-Button have been removed.
Checkbox & Radio #1179
Checkbox and radio button size is no longer driven by a CSS media query - it is now instead driven by SVG icon size (e.g. #icon-checkbox-unchecked vs #icon-checkbox-unchecked-large). The large, non-default size requires a modifier class (e.g. .checkbox--large).
Notice #1150
The first module to undergo a major overhaul is "notice". We have elevated each of the existing base classes to standalone modules:
The page-notice (https://ebay.github.io/skin/#page-notice) also underwent some structural changes (#1166). The heading element now wraps the visible text instead of the icon. Please refer to the skin documentation for markup requirements.
Tooltip #1168
Like the notice module, the tooltip base classes have also been elevated into standalone modules:
DS4 tooltips, infotips & tourtips have been aligned with the new "decibel-level" system. This means that DS4 borders, pointers & backgrounds are now more in line with DS6.
Dialog #1082
The dialog module has also been broken up into several modules:
These three modules complement the two other pre-existing dialogs:
Interesting fact: Toast dialog is currently the only non-modal dialog.
Over the past several releases we have worked hard to close the gap on dialog structural differences between DS4 and DS6. In this release, all dialog header structure & layout has been consolidated under a single system (#1171). Please refer to the Skin website to view markup requirements.
The mini-lightbox dialog underwent a minor structural change. The close button was moved before the title in the DOM. This ensures a better reading order for assistive technology (#1261).
Wizard Stepper f91e1f6
In v10, the "wizard-stepper" module was renamed to just stepper. The old name, all classes, and references have now been permanently removed.
Deprecations
Expand Button #1233
Primary and secondary variants have been phased out of the new design system language and removed from our documentation.
Misc Cleanup 226dc72
Old code that was previously deprecated has been removed. A list of significant removals will be posted here. Stay tuned...
New Features
Alert & Confirm Dialogs #1176 #1175
The lightbox-dialog has two special variants: alert and confirm (shown below).
Rounded Components #1268 #1266
Apply the class skin-experiment-rounded to the HTML body tag to opt into the experimental "rounded" look and feel. We anticipate this experiment to be the default look and feel from version 12 onward.
Dark Mode
Apply the class skin-experiment-dark-mode to the HTML body tag to opt into the experimental support for dark mode across all skin components.
Bug Fixes
For a list of all bugfixes, please reference the v11 milestone page
What's Next?
Forms are the last thing on our list to be updated to the new design system language. You can look forward to that in our next major release!
As ever, I finish by saying a big thank you to all those involved in the making of Skin v11!