Or you can import @ebay/skin/icon/background to receive CSS for background icons (i.e. the <span> tag). Please be aware that the amount of CSS imported for background icons is significantly larger than for foreground (~80kb uncompressed).

Apps using @ebay/skin/icon will be unaffected, as that module continues to bring in all icon related CSS.

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 :-)

Assets 2

13 Nov 21:11

ianmcburnie

v6.1.0

cf02371

@eBay/[email protected]

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.

Assets 2

28 Sep 18:31

ianmcburnie

v6.0.0

d413cc1

@ebay/[email protected]

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