Releases: eBay/skin
@ebay/skin@3.5.0
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/skin@3.4.0
Skin v3.4.0
Breaking Changes
None
Deprecations
- Class
page-notice__cellhas been deprecated in favor ofpage-notice__content. - Class
inline-notice__cellhas been deprecated in favor ofinline-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/skin@3.4.0-0
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__cellhas been deprecated in favor ofpage-notice__content. - Class
inline-notice__cellhas been deprecated in favor ofinline-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/skin@3.3.2
Skin v3.3.2
Hotfix for issue #63
@ebay/skin@v3.3.1
Skin v3.3.1
Patch release that adds easier support for bold and secondary in type ramp.
Less:
Css:
@ebay/skin@v3.3.0
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.
@ebay/skin@3.2.0
Skin v3.2.0
Breaking Changes
None.
New Features
DS6
We have started to add some implementations of our new design system (aka DS6). Global, less (shown below), color, button and menu modules are now available.
For more information visit the DS6 page.
Expand Button
This new button is available in DS4 and DS6.
CTA Button
Another new button (well, it's actually a link, but don't get me started on that), for DS6 only, is the CTA button:
Menu Refinements
The new expand button has been integrated into Menu for DS4 and DS6. Inline SVG has also been replaced with background SVG (using a span element). Don't worry, existing button and inline SVG markup is still supported.
Custom Checkbox and Radio
Checkbox and Radio modules have been updated to support both custom color and custom icon via inline SVG.
Bug Fixes
None
@ebay/skin@3.1.0
Skin v3.1.0
Minor version update containing a few small, but important changes.
Breaking Changes
None
Backwards Compatible Changes
Background Color
The body background color has been lightened from #f0eeec to #f7f6f5.
See #4 for details.
Checkbox and Radio
The markup for checkbox and radio no longer requires inline SVG. The new, simpler markup uses an SVG data-uri as background image. Existing markup is unaffected (i.e. it shouldn't break).
Huge thanks to @pranavjha for the inspiration behind this improvement!
See #20 for more details.
DS6
Lots of ground work was laid for the new DS6 colors, typography and buttons, but unfortunately all are still awaiting design system sign off and so were pulled from the docs at the last minute.
Some DS6 mixins and variables are exposed via the @ebay/skin/less module, but as they are not yet signed off, any use will be at your own risk! We encourage you to hold off on using them for now.
ebay-font
Finally, @RajaRamu and @senthilp have been doing some great work improving our web font performance. If you are using eBay's custom Market Sans font, we strongly encourage you to use the ebay-font module.
For DS6, this module will be the only way for apps to opt-in to the Market Sans font.
See #8 and #22 for more details.
Bug Fixes
None.
Contributors
Thank you to the following individuals for their assistance:
If I've forgotten anyone, please let me know!
Ian McB.
@ebay/skin@3.0.0
Skin v3 - Open Source!
Yum!
(I humbly apologise for this tired old joke).
Breaking Changes (since v2.10.1)
A major version update, and going all "open-sauce", gave us the opportunity to clean up a few things, refactor code and simplify our build system where necessary. It also laid the foundations for supporting our exciting new design system (DS6) in parallel with the current system that we all know and love (DS4).
So, all in all, please pay extra careful attention to the following information and be sure to cross reference these notes with the documentation and code examples found on the Skin website.
Package Name Change
You may have noticed this one already. Yes, the package name has changed from skin-ebay to @ebay/skin. Holy birthday cake, Batman!
Yes, for reasons beyond our control, we could not continue with the old name when moving to the public NPM repository. We hope the new name looks just familiar enough to fill you with comfort. There is just one small gotcha to watch out for...
In order to support the newly scoped package name, users of eBay's internal NPM repository must add the following exception to their .npmrc file or .yarnrc file, respectively:
#.npmrc
@ebay:registry=https://registry.npmjs.org
#.yarnrc
"@ebay:registry" "https://registry.npmjs.org/"If you are not an eBay employee and/or are using the public NPM repository, then you can safely ignore this exception.
Removal of Normalize.css
For various reasons (which we won't go into here), we decided the timing was right to make a clean break with Normalize.css, and remove it as a dependency entirely.
Whilst we feel like we have accounted for most of the benefits of Normalize.css in our own code at a modular level, if you do notice anything unusual in your app, this change will be the most likely culprit.
Removal of Support for Font-Icons in Modules
Skin no longer provides "out of the box" support for font-icons in any of it's modules. For example, the down arrow icon in listbox, or the checkmark icon next to menu items. Inline SVG must be used for those instead.
The icon-font and all of it's icons do still remain however, and won't ever be removed for DS4. So you are free to use them for your own needs as you wish. Sure, it might make you feel a little bit dirty, but we won't judge you.
If you need a specific font-icon converting to SVG please create an issue, or better still, a PR containing the changes.
Removal of "skin-large" Class
First of all, the skin-large Lasso flag is still absolutely required for those apps on that stack leveraging an adaptive approach. The change discussed here is that the .skin-large classname is no longer required on the HTML body.
Instead of using a class to override the base rules with specificity (which felt like a sledgehammer tactic), we now rely on the natural cascade of the large rules appearing last in the CSS source order (with great mental willpower, I am avoiding another sauce joke).
Removal of Deprecated Modules
The previously deprecated alert, iconbutton and tile modules have now been permanently removed. If necessary, please refer to previous release notes for more info about the "whys" and "hows".
Listbox
The SVG icon now requires an additional span wrapper tag. The listbox__icon class moves from the SVG tag to the new span tag. The purpose of the new span tag is to prevent the SVG icon from appearing alongside the native HTML icon in a non-CSS state.
When the SVG tag natively supports the hidden attribute we can again reconsider this markup.
Tabs
Tab panels now require an additional tabs__cell child element. We made this change to better leverage CSS margin-collapse, and for consistency with other modules.
Dialog
Perhaps not so much a breaking change, but more of an "evolution", the dialog gutters and margins have been increased from 8px to 16px for large screens.
Pagination
The class pagination__list was renamed to pagination__items for consistency with tab and menu modules.
Documentation
For those of you who have made contributions to the Skin documentation in the past, notice that the documentation source has now moved to the docs folder. We can now leverage GitHub Pages directly from this folder without the need for a separate branch (the gh-pages branch is no longer used and is scheduled for deletion). This change has radically simplified the build process.
New Features
V3 also introduces a few new additions, which are described below.
Adaptive and Responsive CDN Support
The CDN now provides the following 3 files:
skin.min.css- the mobile-first styles for small screens up to 600px (adaptive)skin-large.min.css- the rules for 601px and over (adaptive)skin-full.min.css- small and large rules, with large rules wrapped in media query (responsive)
None of those files contain rules for the grid system. The grid system is considered large enough to be it's own separate entity and download.
Checkbox and Radio Custom Icon
Any SVG icon can now be used as the checked or unchecked state. We anticipate this might be useful in cases where checkboxes or radios are used 'under the hood' for multi-select or single-select use cases (e.g. interactive star rating).
Be careful though, not every icon is going to be suitable for this use case, and may not even be perceived as an interactive control. Great power and responsibility and all that.
Field Group
A new field-group helper class was added which leverages flex box to allow easy side-by-side layout of fluid field controls.
As with everything discussed in these notes, head over to the Skin website to view code examples and documentation.
What's Next?
Next up, we will begin adding some foundational rules and modules for the new design system (DS6) - such as type ramp and button. Head over to the milestones page if you'd like to get involved.
Release notes by Ian.