eBay Skin v4.0.0
Skin is growing up fast! Version 4 already! This is a good time to point out that we expect this major version number to grow faster than it ever has done in the past. For two reasons:
- we are now using proper semantic versioning
- some ds6 updates cause a breaking change to existing markup (no, not because we are careless, but because we always look to refine our markup and take advantages of new HTML, ARIA and CSS features).
Therefore, going forward, we are no longer holding onto the notion of "Skin 2" or "Skin 3", etc. like we have done in the past. It's just "Skin" from now on. Skin. Got it?
As ever, you can always look through the relevant milestone or project for issue tracking.
Introducing eBayUI
First of all, for those of you on a Node.js and Marko stack, we are excited to shamelessly plug announce the arrival of our new eBayUI Core Components. These Marko components build on top of Skin's HTML and CSS foundations to provide all of the necessary server-side and client-side functionality and behaviour. It is still fairly early days, and we have many more components to add, so please do bear with us.
Remember, Skin will always continue to be a pure CSS framework, agnostic of and decoupled from frontend frameworks.
Breaking Changes
Here's the stuff we broke. We broke this stuff on purpose, of course. If you see anything broken that isn't on this list, please create an issue.
Listbox
Listbox has been replaced with two new components: Select and Combobox.
Select is identical to the old DS4 listbox experience: it gives a branded look and feel to the collapsed select element, but uses the native browser/device look and feel for it's expanded state.
The DS6 listbox has essentially just been renamed to combobox. Why? Because that's actually exactly what it is: a readonly combobox. It provides a platform to build a custom facade for a select's collapsed and expanded states. It also gives us a path forward to an editable combobox, to allow things like search fields with autocomplete.
Side-note: If the module listbox ever comes back into skin it will probably look and behave like the select tag does when it's multiple attribute is applied.
Menu
The menu now has growth behaviour by default. This makes a lot of sense, because usually the button text is short, but the menu item text is long.
Class, Variable & Mixin Cleanup
Every major release gives us an opportunity to clear out some dead wood that we deprecated a while ago. Here's what we removed:
.hijax-btn.faux-link.page-notice__cellmenu-mixins.less.menu__items--tray@marketsans-name
Most of the things that got removed were renamed to something else. More details are in #166.
Deprecations
There are no new deprecations in this release.
New Features
Here's all the exciting new stuff! We hope it's been worth the wait.
Combobox (DS6)
As mentioned above, we have a new combobox module that replaces the listbox module.
Dialog (DS6)
The dialog module has been updated for DS6 and also now takes advantage of some modern CSS and JS features.
Icons (DS6)
The Icon module has been updated with the first batch of new DS6 icons (more to come in next release).
Menu (DS6)
The menu module got a new borderless look (as did select and combobox!). Very chic.
Pagination (DS6)
The pagination module has been updated for DS6 and it's responsive capabilities much improved.
Select (DS6)
As mentioned above, we have a new select module that gives a branded look and feel to the collapsed state of this form control.
Finally...
A big shout out to our first time Skin contributors @sharma46bhawana and @DylanPiercey for their excellent work on pagination and dialog respectively.
Another first time contributor was @CestDiego who helped out with some crucial bug fixes!
Thank you to @RajaRamu for covering a lot of the ground work on the new DS6 icons. Raja can probably speak in base64 tongue by now.
Also a huge shout out to @seangates for plowing through a TONNE of work this release. Sean worked on new features (including sprucing up our new DS6 website) but also is not afraid to get stuck in and do some of the ugly work! Not visually ugly of course (this man has the eye of an artist), but you get what I mean.