Releases: eBay/skin
@ebay/[email protected]
eBay Skin v7.1.0
Tabs, Notice & Breadcrumbs received DS6 visual updates. There are no breaking changes.
@ebay/[email protected]
eBay Skin v7.0.4
- Fixing IE menu width issue; (#588)
@ebay/[email protected]
eBay Skin v7.0.3
- Icon: added 3 missing classes and fixed base64 (#577)
@ebay/[email protected]
eBay Skin v7.0.2
- Hotfix for fake button visited color #570
@ebay/[email protected]
eBay Skin v7.0.1
- Critical fix for global header #566
@ebay/[email protected]
eBay Skin v7.0.0
This major version release adds several exciting new features & modules! The highlights being the new tooltip, infotip and tourtip, plus a new pill variant for button.
We've also been hard at work normalizing the last remaining markup, source code and documentation differences between DS4 and DS6 systems.
Going forward, anytime we make a change to the markup (or "bones") of a module, we will make the change across both design systems. We want to negate any differences in the markup, yet at the same time ensure the markup is just flexible enough to style in sufficiently different ways.
When you think about it, core widgets like buttons, menus, textboxes, etc. shouldn't ever deviate too wildly from their core purpose or look and feel anyhow.
Buttons. Round with holes in. Easy to style.
This now allows us to achieve our goal of not only letting apps upgrade more seamlessly between module revisions (look closely on the DS6 website and you'll now see these numbers at the end of each section), but also major design system revisions too.
You'll also see now that the Skin website for DS4 and DS6 are practically identical in their content. This is going to allow us to merge to a single website and do some pretty cool things! The fact that our content sections are now pulling from a single Jekyll source, also makes life vastly easier and less confusing for contributors.
Anyhow, on with the show!
Changelog
Be sure to read the notes below in full before upgrading. There is a lot of stuff to go over here, and so I will be keeping the banter to a minimum!
Adaptors
The skin-large adaptive Lasso flag has been removed. You can continue passing it, but it won't do anything. Styles for large screens are now included by default.
CDN users no longer need to download the additional skin-large.css. Styles for large screens are now included by default in skin.min.css.
Over the last few years we have seen that the delta for large screen CSS is very minuscule, and so the overhead of an adaptor is not worth it.
Button (breaking change, new features)
Button was reworked to better support text wrapping. In essence, our button now behaves more like a native HTML button in that the text will automatically wrap when a fixed width is applied.
Fixed height and truncation options were added, which are helpful for when trying to align several controls horizontally with equal heights.
Combo (breaking change)
The @ebay/skin/icon module was removed from this bundle.
Combobox (new features)
The readonly combobox had some issues with iOS and therefore we recommend that apps use the listbox module instead.
Combobox is being repurposed for the editable, autocomplete use case.
Grid (deprecated)
The flex box based grid system of DS4 era is now deprecated and removed from docs. We have left it available as an import for backwards compatibility. CDN users should continue to reference it from the 6.x urls.
We are deprecating this in anticipation of leveraging the CSS Grid Module (in conjunction with Flexbox).
Icon (breaking change)
A dozen or so icons were renamed to be more inline with the design system playbook. The following PR lists the new aliases, so be sure to update any references!
You'll also be pleased to know that those wildly popular notification icons from DS4, are now added to DS6. You can thank that man @pcanella
What's more, our CDN users will be glad to hear that the stylesheet containing all base64 data-urls has now been moved out to a separate download. This is a nice performance improvement if you only use foreground icons.
Iconfont (breaking change)
We deprecated icon fonts a long time back. But now this module is officially removed from the project. So long icon fonts!
Label (new for DS4!)
This module provides the ability to add a floating label to a textbox. Many thanks to @mkchang for back-porting this module to DS4!
Less (breaking change)
Skin has adopted the new, universal (i.e. cross-platform) colour system defined in the design system playbook.
The old, legacy color system names have been removed. We are working on providing a mapping from the old system to the new.
Notice (deprecation)
The term "priority" was changed to "attention". This aligns us with the design system playbook terminology.
Pill (new!)
Pill is a special "pill" shaped button, with some additional rules & behaviour regarding truncation and primary/secondary types.
Tooltip (new!)
The tooltip module adds 3 flavours of tooltip:
Tooltip itself is the classic desktop-like flavour of "tooltip". It is always applied to an interactive element (typically a button) and always appears on hover or focus.
Infotip is the standalone-button flavor of a "tooltip". When activated it expands the tip. It is activated only by tap, mouse-click, ENTER or SPACEBAR.
Tourtip is the system-activated flavor of a "tooltip". It is expanded by default. It must be explicitly dismissed by the user.
Contributors
- @ianmcburnie
- @seangates
- @DylanPiercey
- @mlrawlings
- @hramakumar
- @mkchang
- @pcanella
- @BhavinPatel04
- @msendlakowski
- @trg
And all the lovely design folk who are way too "cool" to hang out on GitHub ;-) Joe, Jeremy & Greg - you rock!
If I've missed anybody, please let me know!
CoreUI v2.0.0
Skin v7 has been impeccably timed to coincide with the release of CoreUI v2 - our library of Marko components. Take a look at the release notes and see the shameless extent of my copy & paste.
What's Next?
After such a mammoth release, we are now switching back to smaller, more bite-sized releases. In v7.1.0 we plan to update the DS6 Notice, Tabs and Switch to their latest, incremental designs from the Design System Playbook (nothing major, don't worry!).
We will also begin moving away from our tight-coupling with Lasso, to a more bundler-agnostic approach. This will allow easier integrations with the likes of Webpack, Rollup, etc.
@ebay/[email protected]
Skin v6.3.5
- Icon: addressed cascade order with foreground icons (#542)
@ebay/[email protected]
Skin v6.3.4
- Icon: changed module dependency order to fix css cascade (#539)
@ebay/[email protected]
Skin v6.3.3
Patched missing combobox, label, link and select entries in top-level browser.json (#507)
@ebay/[email protected]
Skin v6.3.2
Contains fix for icon size issue caused by bad cascade order (#495)