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.

#278

Button

Removed support for IE9 and IE10. You may see some alignment issues in these browsers.

#252

Normalized the names (e.g. default, regular, primary, etc) across DS4 and DS6. Please check your button modifier classes are correct after upgrading!

#268

Checkbox

DS4 markup was changed, and simplified, to match that of DS6.

#253

Dialog

The DS4 markup was changed to be more in line with DS6.

#308

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.

#257

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.

#295

Radio

DS4 markup was changed, and simplified, to match that of DS6.

#256

Switch

There were some slight changes to DS4 markup.

#281

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.