Skin v3 - Open Source!
Yum!
(I humbly apologise for this tired old joke).
Breaking Changes (since v2.10.1)
A major version update, and going all "open-sauce", gave us the opportunity to clean up a few things, refactor code and simplify our build system where necessary. It also laid the foundations for supporting our exciting new design system (DS6) in parallel with the current system that we all know and love (DS4).
So, all in all, please pay extra careful attention to the following information and be sure to cross reference these notes with the documentation and code examples found on the Skin website.
Package Name Change
You may have noticed this one already. Yes, the package name has changed from skin-ebay to @ebay/skin. Holy birthday cake, Batman!
Yes, for reasons beyond our control, we could not continue with the old name when moving to the public NPM repository. We hope the new name looks just familiar enough to fill you with comfort. There is just one small gotcha to watch out for...
In order to support the newly scoped package name, users of eBay's internal NPM repository must add the following exception to their .npmrc file or .yarnrc file, respectively:
#.npmrc
@ebay:registry=https://registry.npmjs.org
#.yarnrc
"@ebay:registry" "https://registry.npmjs.org/"If you are not an eBay employee and/or are using the public NPM repository, then you can safely ignore this exception.
Removal of Normalize.css
For various reasons (which we won't go into here), we decided the timing was right to make a clean break with Normalize.css, and remove it as a dependency entirely.
Whilst we feel like we have accounted for most of the benefits of Normalize.css in our own code at a modular level, if you do notice anything unusual in your app, this change will be the most likely culprit.
Removal of Support for Font-Icons in Modules
Skin no longer provides "out of the box" support for font-icons in any of it's modules. For example, the down arrow icon in listbox, or the checkmark icon next to menu items. Inline SVG must be used for those instead.
The icon-font and all of it's icons do still remain however, and won't ever be removed for DS4. So you are free to use them for your own needs as you wish. Sure, it might make you feel a little bit dirty, but we won't judge you.
If you need a specific font-icon converting to SVG please create an issue, or better still, a PR containing the changes.
Removal of "skin-large" Class
First of all, the skin-large Lasso flag is still absolutely required for those apps on that stack leveraging an adaptive approach. The change discussed here is that the .skin-large classname is no longer required on the HTML body.
Instead of using a class to override the base rules with specificity (which felt like a sledgehammer tactic), we now rely on the natural cascade of the large rules appearing last in the CSS source order (with great mental willpower, I am avoiding another sauce joke).
Removal of Deprecated Modules
The previously deprecated alert, iconbutton and tile modules have now been permanently removed. If necessary, please refer to previous release notes for more info about the "whys" and "hows".
Listbox
The SVG icon now requires an additional span wrapper tag. The listbox__icon class moves from the SVG tag to the new span tag. The purpose of the new span tag is to prevent the SVG icon from appearing alongside the native HTML icon in a non-CSS state.
When the SVG tag natively supports the hidden attribute we can again reconsider this markup.
Tabs
Tab panels now require an additional tabs__cell child element. We made this change to better leverage CSS margin-collapse, and for consistency with other modules.
Dialog
Perhaps not so much a breaking change, but more of an "evolution", the dialog gutters and margins have been increased from 8px to 16px for large screens.
Pagination
The class pagination__list was renamed to pagination__items for consistency with tab and menu modules.
Documentation
For those of you who have made contributions to the Skin documentation in the past, notice that the documentation source has now moved to the docs folder. We can now leverage GitHub Pages directly from this folder without the need for a separate branch (the gh-pages branch is no longer used and is scheduled for deletion). This change has radically simplified the build process.
New Features
V3 also introduces a few new additions, which are described below.
Adaptive and Responsive CDN Support
The CDN now provides the following 3 files:
skin.min.css- the mobile-first styles for small screens up to 600px (adaptive)skin-large.min.css- the rules for 601px and over (adaptive)skin-full.min.css- small and large rules, with large rules wrapped in media query (responsive)
None of those files contain rules for the grid system. The grid system is considered large enough to be it's own separate entity and download.
Checkbox and Radio Custom Icon
Any SVG icon can now be used as the checked or unchecked state. We anticipate this might be useful in cases where checkboxes or radios are used 'under the hood' for multi-select or single-select use cases (e.g. interactive star rating).
Be careful though, not every icon is going to be suitable for this use case, and may not even be perceived as an interactive control. Great power and responsibility and all that.
Field Group
A new field-group helper class was added which leverages flex box to allow easy side-by-side layout of fluid field controls.
As with everything discussed in these notes, head over to the Skin website to view code examples and documentation.
What's Next?
Next up, we will begin adding some foundational rules and modules for the new design system (DS6) - such as type ramp and button. Head over to the milestones page if you'd like to get involved.
Release notes by Ian.