Releases: eBay/skin
v9.5.7
v10.1.1
v10.1.0
Enhancements
Checkbox and radio icons have been updated (they now have a much lighter stroke than previously). In addition, there is now more clarity around use of checkboxes and radios on large and small screens. The large size (24px) should be used on mweb, the default size (18px) should be used on desktop.
The menu button module has been updated with support for separators via the hr tag:
Deprecations
The following icons have been deprecated:
icon-checkbox-unchecked-smallicon-checkbox-checked-smallicon-radio-unchecked-smallicon-radio-checked-small
Going forward, please use the default or large sizes only. Checkbox and radio icons have also been removed from the table of icons, as they follow a different naming/sizing convention to other icons.
v9.5.6
Fixes:
- Spinner: spinner.svg is retrieved from non-secure url
v9.5.5
v10.0.0
@eBay/skin@10.0.0
This is a big release, containing several major breaking changes. Please make sure to read all notes below before upgrading.
If you want to get into the fine details of everything that was added, fixed or removed, please view the Skin v10.0.0 Milestone Page.
Default Design System Changes
The default design system is now DS6. Hurrah! You may have also already noticed that the Skin homepage has been flipped over, from DS4 to DS6, to mark this momentous occasion.
DS6 apps need do nothing. The flag that you have been passing is now a no-op and can be safely removed.
DS4 apps must pass a ds-4 flag via arc-webpack or Lasso, to remain opted into DS4 styles.
Background Icons Removed
Skin no longer supports background icons of any kind (i.e. icons that use a span tag). All background icons have been removed.
You must replace ALL instances of span tags with svg tags. The svg symbol must also be included on the same page, before the icon can be used.
This might be painful, but trust us, SVG tags are so much better.
Carousel Changes and Updates
The carousel has been updated to match the latest specifications from the design system playbook:
- Pagination dots are removed and replaced with a native scrollbar (appears on hover)
- A faded mask is added to the end of the default, continuous carousel
- A new DOM element is required,
carousel__viewport
Overall, we feel the carousel is now much simplified. I'd almost go as far as to say I like carousels again.
Extra Small & Extra Large Buttons Removed
In line with the design system playbook, Skin now supports only two sizes of button: default and large. All other sizes have been removed. If you need any other size of button (or form control), please push back on design.
If you are unable to migrate to the new button system, we recommend that you take a local copy of the old css before upgrading.
Pill Module Removed
Pills were deprecated in v9, and superseded by Filter Buttons. Pills were widely misused and abused, therefore the pill module has now been removed to prevent anybody else getting their hands on it and causing all kinds of bother.
If you are unable to get off the pills, we recommend that you seek professional help (from us) and/or maybe take a local copy of the old css before upgrading.
Icon-Font Module Removed
The icon-font module was deprecated a long, long time back (probably even pre-dating Brexit). It too has now been removed. If you find yourself still having to use Icon Fonts in the year 2020 then, like my British compatriots, you have my deepest sympathies.
Card & Grid Modules Removed
The card & grid modules were also deprecated a long time back. They have now been removed.
Watch this space as far as a grid system is concerned. With the imminent demise of Internet Explorer, we hope to be able to leverage modern CSS layout techniques to their full for the implementation of a modern grid system.
Global Module (DS4) Changes
The h1-h6 type ramp was deprecated a long time back in favour of the newer type ramp. We learned that there isn't really a "one size fits all" in terms of the h1-h6 styles, and that most apps override whatever defaults are put in place. These global styles have now been removed from DS4.
If you have not yet migrated to the new type ramp, and still need these old styles, we recommend taking a local copy before upgrading.
Utility Module Changes
Some utility classes were renamed & moved to the typography module:
- negative => negative-text
- positive => positive-text
- emphasis => emphasis-text
- disabled => disabled-text
The old instances are now deprecated and scheduled for removal.
The following classes were renamed with deprercated aliases left in place:
- truncate => text-truncate
- responsive-image => image-scale
- image-wrapper => image-center
- fluid-image => image-stretch
LESS Changes and Deprecations
A few colours were deprecated and are now scheduled for removal:
- @color-badge
- @color-critical-background
- @color-critical-text
Textbox Updates
The textbox now allows for actionable icons. That is to say, the icon can now be a button. This will prove useful for datepicker and combobox patterns.
Breadcrumb(s) and Tab(s) Renamed
It was a little bit weird that these names weren't plural. So we went ahead and renamed them. Please update your references, as the old aliases will be removed in v11.
New Storybook
This isn't quite finished yet, as we are still in the process of porting over and cleaning up existing tests, but here's a first sneak peak of our Storybook. Once finished we will add a link to it from the website.
Using storybook and isolated tests will allow us to integrate visual regression testing tools such as Percy.io.
What's Next
After a large release like this, we need to give everybody time to update. In the meantime, we will be releasing several much smaller, minor releases over the coming weeks and months that are primarily concerned at closing the final few gaps between Skin and Design System 6.5.
Finally
A big thank you to all those involved in the making of Skin 10!