Skin v6.1
The general theme of this release is... COLOUR! No... COLOR! Oh... you know what I mean ;-)
Yes, in Skin 6.1, all modules have been updated to the new brand palette. Yipee!
Here's a quick example.
Really savour those deliciously vibrant reds, greens, and blues!
To see the new brand palette in it's entirety, scroll down to the bottom of these notes.
Oh, and give @seangates a high five next time you see him for all of this astounding new palette work!
Breaking Changes
None. Because it's a minor release, of course. Can't catch us out.
New Features
In addition to the new palette overhaul, we have a few new things to show off.
Badge
We have added the design system's new badge module. It is primarily used in icon buttons and menu items, but below is an example of it in "standalone" mode.
A badge is a visual indicator added to an element to convey quantity, newness or both. Badges are intended to remind a user of previous actions taken, or to alert them of new actions that they should consider.
Thank you to @agliga for helping out with this contribution!
Listbox
The listbox is (yet) another type of dropdown. It is intended as a progressive enhancement of the native HTML select tag. In a nutsell, it allows for nested HTML (for things like country flags), whereas the select tag doesn't.
Some of you may be thinking, "Isn't that what the readonly combobox is for?". Yes, you are right. The readonly combobox can do this too, but the listbox pattern has much better support on iOS.
Enhancements
As ever, we've updated and enhanced a few modules too, without any breaking changes.
Color
In DS4 the colors were only available via LESS variables. This module makes them available as classes, which is useful for static sites with no preprocessor.
This color module was already available for DS6. This update brings parity to DS4.
Combobox
The combobox documentation was rejigged to better support and explain the editable combobox use case. An editable combobox is generally used with an autocomplete pattern.
The readonly case is being moved aside in favour of the new listbox pattern (see above).
Dialog
More breakpoints were added for large screens to make better use of screen real estate.
Example before of iPad landscape:
Example after of iPad landscape:
LESS
As mentioned above, we have a new brand palette in DS6. The LESS module has been updated to reflect this:
Bug Fixes
As always, we fixed some bugs.
What Next?
We are already hard at work on version 7. We are reworking buttons from the ground up to better support text wrapping and "pill" styled buttons. Tooltips and flyout notices are also being reworked to align with the new design system.