@ebay/[email protected]

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/[email protected]

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:

1. we are now using proper semantic versioning
2. 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__cell
• menu-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/[email protected]

Skin v3.5.2

Hotfix for #132 (breadcrumbs)

@ebay/[email protected]

Skin v3.5.1

Hotfix for #121 (menu)

@ebay/[email protected]

Skin v3.5.0

Breaking Changes

None

Deprecations

None

New Features & Updates

Breadcrumbs

We have a new breadcrumbs module:

Page Notice

Dismissible page notice is now supported:

@ebay/[email protected]

Skin v3.4.0

Breaking Changes

None

Deprecations

• Class page-notice__cell has been deprecated in favor of page-notice__content.
• Class inline-notice__cell has been deprecated in favor of inline-notice__content.

Bug Fixes

• Performance issue with clip-path property of .clipped class #72

New Features

DS6 Notice Module (aka Alerts)

DS6 styles have been added for page notice and inline notice. Currently only fixed background svg is supported for icons. Inline SVG support will be added in future, along with flyout notices.

Updates

Global Module

DS6 page background color was updated from light gray to white.

Notice Module

DS4 markup has been updated to support a span tag with background SVG for the status icon. Inline SVG will continue to be supported (useful for custom svg).

Menu & Listbox

DS6 Menu and Listbox have been updated to reflect latest design system pattern:

A new borderless option was also added:

@ebay/[email protected]

Skin v3.4.0-0

This is a pre-release. Please help us out by installing and letting us know of any issues before our final release.

Breaking Changes

None

Deprecations

• Class page-notice__cell has been deprecated in favor of page-notice__content.
• Class inline-notice__cell has been deprecated in favor of inline-notice__content.

New Features

Global Module Updates

DS6 page background color was updated from light gray to white.

Notice Module Updates

DS4 markup has been updated to support a span tag with background SVG for the status icon. Inline SVG will continue to be supported (useful for custom svg).

DS6 styles have been added for page notice and inline notice. Currently only fixed background svg is supported for icons. Inline SVG support will be added in future, along with flyout notices.

Bug Fixes

None.

@ebay/[email protected]

Skin v3.3.2

Hotfix for issue #63

@ebay/[email protected]

Skin v3.3.1

Patch release that adds easier support for bold and secondary in type ramp.

Less:

Css:

@ebay/[email protected]

Skin v3.3.0

Breaking Changes

None.

Deprecations

None.

New Features

DS6 Typography

The DS6 typography is available as LESS mixins:

It is also available as CSS classes (useful for static sites):

DS6 Listbox (aka "select")

Before switching from DS4 listbox to DS6, know that the new DS6 version has some fundamental differences, which will not make for a seamless upgrade.

Unlike the DS4 listbox, the DS6 listbox is a fully customized widget (i.e. we do not display the browser's native overlay). This allows us to embed HTML inside of our listbox options, which is a common requirement for displaying graphics like international country flags.

Ultimately this means that the DS6 listbox now requires JavaScript. Watch this space for an announcement regarding a Marko listbox component.

Bug Fixes

None.