Releases: eBay/skin
@eBay/skin@6.2.0
Skin v6.2
Just a small release this time round, with one new "feature" and a bug fix.
We added a skin-icon-opt-out flag to the combo bundle (#460). This allows apps to opt out of receiving the entire set of icon related classes when using that bundle. This is a stop-gap temporary measure until v7 (#457).
We fixed a bug with textbox icon placement for RTL languages (#458). Thank you @rachelvillamin!
That's it! See you back here for version 7 :-)
@eBay/skin@6.1.0
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.
@ebay/skin@6.0.0
eBay Skin v6.0.0
Some quick context around these changes:
There was a time when we thought that DS4 (design system v4) was dead. DS6 (design system v6) was being ushered in at breakneck pace. Everyone needed it "yesterday". The DS4 codebase was put into maintenance mode and all efforts were directed towards the new DS6 look and feel in Skin.
The markup in the new DS6 codebase began to deviate from the DS4 markup for three key reasons:
- As a result of pattern changes (e.g new elements added, or elements removed)
- To take advantage of new HTML tags or attributes
- To fix some mistakes or tech debt
Fast forward in time, and it turns out that DS4 is in fact not dead yet. We needed to quickly usher it out of maintenance mode and bring it back in line with DS6.
For us to realistically maintain two design systems, and provide a seamless upgrade path, the deviations in markup that had occurred would need to be corrected.
This version of Skin aims to "normalize" the markup for the vast majority of modules. We want the markup to be exactly the same (or, failing that, as close as possible), whatever the design system, for our core modules. As a result, it contains a large amount of breaking changes, especially for DS4 pages.
Breaking Changes
Nearly every module received some markup modifications. Usually quite minor, rather than wholesale changes, and that actually might make some of the things we did harder to spot. Rather than try and list every minute change in detail here, we recommend that you compare the old documentation examples with the new examples, by visiting skin's website archive. Relevant PR links are also included to assist you with further information below.
There were a LOT of changes, but I'm going to try and keep this list as concise of a summary as I can. If you have any questions or concerns, or need help upgrading, please contact us via the Slack channel.
Breadcrumb
Some minor markup changes occurred in DS6. This module was also ported back to DS4.
Button
Removed support for IE9 and IE10. You may see some alignment issues in these browsers.
Normalized the names (e.g. default, regular, primary, etc) across DS4 and DS6. Please check your button modifier classes are correct after upgrading!
Checkbox
DS4 markup was changed, and simplified, to match that of DS6.
Dialog
The DS4 markup was changed to be more in line with DS6.
Icon
DS4 markup and classnames updated to match that of DS6. The icon-font based classes are no longer supported! We are 100% SVG now.
Less
Many variables and mixins have now been prefixed with ds4- or ds6-. If you are using our Less module, please update your references accordingly.
Listbox
This DS4 module was renamed as the "select" module. Listbox no longer exists in this version.
Pagination
The responsive layout improvements that were made in the DS6 version have been ported back to DS4. Therefore if you have a DS4 page containing the pagination module, it's behaviour will change somewhat.
Radio
DS4 markup was changed, and simplified, to match that of DS6.
Switch
There were some slight changes to DS4 markup.
Fixes & Enhancements
I don't think it's possible to capture ALL of the bug fixes and clean-up that went into v6 (thanks Sean, Michael, Dylan, Yoni & co), but I will try to capture the main items here.
Breadcrumbs
Now supports buttons for pure client-side/spa behaviour.
Button
Added support for small expand button.
Fixed background colour of secondary disabled buttons.
Combobox
This module was made available in DS4.
Field
This module is now available in DS6.
Global
Removed cursor pointer for all non-links.
Icon
Added play and pause icons.
Added pointer-events: none for all inline/foreground SVGs
Pagination
Add support for button tag and pure client-side (Ajax) behaviour.
Select
This DS6 module was ported back to DS4, replacing the Listbox module.
Switch
We made this module available in DS6
Tabs
Tabs are now available in DS6.
Added support for text wrapping
@ebay/skin@5.1.0
eBay Skin v5.1.0
Time is pressing, and so this time around our release notes are straight to the point, with no nonsense. Yes, you heard me, absolutely no nonsense. We simply don't have time to be scouring the web for amusing pictures for your pleasure, it's not some kind of circus you know...
What's New
Here's a list of the new stuff we added.
DS6 Textbox
New textbox module for DS6.
Floating Label
New label module which can be used to augment the DS6 textbox with a floating label.
Menu
Added the primary and secondary modifiers to DS6 menu.
Added support for foreground SVG for the expand button.
Link Module
A new link module was added to DS6 to provide some standardization around the design system's concept of "Nav Links" and "Action Links".
Bug Fixes
Here's a list of the stuff we fixed.
Windows High Contrast Mode
All DS6 modules have had their icons updated to support windows high contrast mode.
Example before:
Example after fix:
Note that the icon module itself has not yet been fixed/updated for WHCM. This is planned for v6.0.0. We recommend using foreground SVG wherever possible, rather than background SVG, as it works great in WHCM.
Select
Some vertical alignment issues with the select and adjacent text label were fixed.
Thank You
- @PrashantAshok for his time, patience and dedication on the DS6 Textbox and Label modules
- @seangates (resident SVG icon meister) our high contrast mode users will surely be appreciating his effort in creating high contrast versions of our modules.
- @anfengi for her first contribution to Skin! Thank you An!
What's Next?
The big one! Version 6. It's going to be chock full of updates for DS4 and DS6 alike. It really is going to be smashing. We have a few surprises in store too and, and ...
...oh, okay.
@ebay/skin@5.0.2
eBay Skin v5.0.2
Bug fixes for select, combobox and pagination:
@ebay/skin@5.0.1
eBay Skin v5.0.1
Bug fixes for checkbox and radio: #208
@ebay/skin@5.0.0
eBay Skin v5.0.0
Hot on the heels of v4, we have another major version upgrade for you.
1. Breaking Changes
Here's the stuff we broke. We broke this stuff on purpose, of course. Just like Ken and Ryu in that Streetfighter bonus stage (unless you were rubbish at that bit, like I was).
If you see anything broken that isn't on this list, please create an issue.
Checkbox & Radio
There is a breaking change if you were using the DS4 checkbox and/or radio and passing the skin-ds6 flag to your app. This is because we added new DS6 checkbox & radio modules (see below for details) which will now instantly replace your DS4 based UI (which might not be what you want). There is another breaking change, in terms of markup structure, if you were using the custom checkbox and radios.
We could have maybe gone with a minor version update for this, but we erred on the side of caution and stuck to our guns regarding following proper semantic versioning.
Anyway, it's just a number, right?
2. What's New
Here's the exciting new stuff! With actual screenshots! No need for images of retro memorabilia in this section.
Checkbox
We now have a DS6 checkbox, using our fancy new DS6 icons! The color and icon is fully customizable.
Radio
Likewise we also have a new, fully customizable DS6 radio button! Always use it in groups of course.
Icon
Several new icon sets were added, as well as new icons added to existing sets (not all shown below).
3. Bug Fixes
There are almost too many awesome screenshots of bugs being "fixed", in a retro manner, that I had to go and have a little lie down. Maybe next time. Anyway, here's the stuff that got fixed.
- Menu: incorrect font on fake menu button #83
- Combobox/Select: using transparent background for borderless modifiers #198
- Pagination: some page indexes are blue and some are black #188
- Website: add skin-ds6 Lasso flag instructions to DS6 website #182
- Website: update DS6 info with a link to the CDN #173
- Menu: down arrow is moved to the right when no label #128
- Breadcrumbs: flexbox seems to be redundant on root element #133
- Icon: re-encode the checkbox-unchecked background icon #179
- Less: @ds6-typography-small-secondary is set to incorrect color #176
- Dialog: Default margin bottom of 15vh not working in safari. #162
- Button: Multi-line CTA wraps outside of button area #122
- Dialog: Default margin bottom of 15vh not working in safari #162
- Update menu icons with new "bolder" stroke versions #79
4. Thank You
@PrashantAshok for his first major contributions to Skin! Every time you click on a DS6 checkbox and radio, a small deposit will be made to his offshore bank account (unless you have JavaScript disabled, of course).
@DylanPiercey and @sharma46bhawana for chiming in with bug fixes.
@hramakumar and @bhoomisatasiya for relentlessly tracking down issues and bugs like two possessed terminators (somebody please photoshop that).
@seangates for his tireless dedication and patience with icons. Not only did he integrate our new icon sets, but he went into minute, pixel-by-pixel detail for all existing icons, cleaning and fixing them up good and proper. It's this attention to detail and polish in our UI that will delight our users. But wait, not only that, but he went and painstakingly documented the SVG icon creation process too. I took a quick snap over his shoulder while he was hard at work:
Ho! Ho!
Finally, thanks to anybody else who's little face does not show up on the 5.0.0 milestone page (which is where my aging memory gleans this information from). Especially all the design folk working hard behind the scenes!
5. The Skin Archive
Did you know that you can go back in time and view old versions of the Skin website? Well, yes, yes you can - using the Skin Archive. Great Scott! Make sure you come back to the future though.
Until next time!
@ebay/skin@4.0.0
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.
@ebay/skin@3.5.2
Skin v3.5.2
Hotfix for #132 (breadcrumbs)
@ebay/skin@3.5.1
Skin v3.5.1
Hotfix for #121 (menu)