Releases: eBay/skin
v13.2.0
What's Changed
- build: update github-pages gem by @ianmcburnie in #1589
- fix: carousel firefox now scrolls to last slide by @austingardner in #1594
- feat(image-treatment): ds evo updates #1451 by @austingardner in #1595
- feat(section-title): adjusted font size by @austingardner in #1592
- feat(icons): updated star icons, added star ratings by @austingardner in #1585
- fix(icon-button): proper colors for status icons by @austingardner in #1602
- feat(progress-stepper): updated to match new evo style by @agliga in #1606
- feat(listbox-button): added floating-label support by @agliga in #1607
Full Changelog: v13.1.1...v13.2.0
Contributors
Assets 2
v13.1.1
v12.6.12
57e6fde
austingardner
Austin Gardner
Fixes
- chore: dropped unnecessary id from ebay plus program badge (#1582)
Full Changelog: v12.6.11...v12.6.12
13.1.0
cb7d0f2
austingardner
Austin Gardner
v13.0.3
v13.0.2
v13.0.1
What's Changed
- build(deps): bump nokogiri from 1.11.6 to 1.12.5 by @dependabot in #1563
- fix(tabs): removed fake tabs --current modifier by @agliga in #1573
Full Changelog: v13.0.0...v13.0.1
Contributors
Assets 2
v13.0.0
Skin v13: Evolution
The Evolution Design System is the catalyst to synthesize previous design systems into a unified eBay experience across all platforms. This system raises the quality bar of UX and systems design while thoughtfully retaining what is most familiar to customers.
Yes, a new design system update is here. This latest incarnation is called "Evolution" and should be a fairly seamless update with minimal breaking changes to those pages currently running on DS6.5.
We hope you like the changes as much as we do! Please doff your cap to our very talented design crew.
Below, we will highlight some of the main changes. For a more exhaustive list of changes, please visit the 13.0.0 milestone page.
Market-Sans Strikes Back #1550
Yes, you read that right, Market Sans is back! Just like the Empire that we thought vanquished at the end of Episode IV, it would appear that Market-Sans went into hiding, rebuilt its giant moon base, hired a motley crew of bounty hunters and has re-established its own brand of law & order once again. What I'm trying to say is, in a sudden narrative twist, our core product is back to using Market Sans for all text, no matter what platform or size.
I do however have a feeling this may not be the last tale in the saga...
Okay, enough of all that, I've had my bit of fun, now let's get through the rest of these updates quickly and to the point!
p.s. the @font-family-market-sans variable was removed. You should no longer need to specify this anywhere in your code, as it is now the default. If you must, for whatever reason, use @font-family-default instead.
Button #1506
Evolution introduces a new "tertiary" button type:
A new "loading" state is also available. It can be applied to primary, secondary or tertiary buttons:
Icon Button #1477
Icon Button now has a grey circle background by default. This grey background can be disabled in certain cases (e.g. when on non-compatible background colors).
Before
After
Filters #1528 & #1534
The main change for filters is that checkboxes and radios now use color-text-primary instead of color-b4.
Keyboard focus outline was also changed (see #1534).
Before
After
Listbox-Button #1533
Listbox-Button pattern has being updated to include the "label" and value within the button itself.
Before
After
Notices (BREAKING) #1469 & #1569
In what appears to me to be a more streamlined, down-to-business approach, page notices lose their rounded, child-friendly edges; section notices change to a more uniform-grey background; celebration notice is removed.
The HTML structure has also changed. This is a breaking change (see #1569). Please refer to the documentation on our website for the new markup structure. In short, the H2 heading now wraps the first line of visible text, whereas previously it wrapped the SVG icon.
Before
After
Pagination #1435 & #1519
Pagination is simplified to use styling similar to tabs. The controls use the new icon button styling. Overflow variants account for pages between the first set and the last page. The first and last page are always visible.
Before
After
Floating Label / Select #1564
Floating Label was updated to support the Select form control.
Tabs #1436
Tabs have been updated to be lightweight and friendly. The two-line tab design is deprecated and active state is changed from blue to primary text grey.
Before
After
Textbox (and Combobox)
The textbox border/stroke has been darkened to improve contrast and overall accessibility.
Before
After
Typography #1446
A new "giant-3" level is the new king of the (type ramp) castle:
Badge #1516
Badge received some minor visual updates, including a smaller font and slight repositioning on Icon Button.
Window Notice (DEPRECATED)
The window notice was deprecated and removed from all documentation.
Other Breaking Changes
This section details other breaking changes introduced in addition to those mentioned in the Evolution section above. Be sure to read in full before upgrading!
Goodbye Internet Explorer #1428
This release marks the end of an era. It will come as little surprise, and no doubt much celebration, that we no longer support Internet Explorer in any shape or form.
It is with mixed emotions that I bid it farewell. IE has been a mainstay of my web development process since the first browser wars of the mid-late 90s. Yes, all the way back when Oasis and Blur were duking it out in their very own Battle of Britpop. However, what could have perhaps been a teary-eyed eulogy from me (had the plug been pulled several years sooner by MS) now only gives way to a mounting sense of freedom, relief and one very special, last salute...
Thanks, Liam.
DS4 & Legacy Skin Pack
For pages wishing to stubbornly persevere continue on DS4 (now affectionally, and somewhat condescendingly, known as "Legacy") there is a new "legacy-theme" module that you must include in order to maintain parity with the old DS4 look and feel.
If you are feeling adventurous, you can omit this module and opt into a kind of quasi-ds-six-point-five-evolution look and feel. Meaning, it will have the colour palette of DS4 but the look and feel of Evolution. The best example I can think of to demonstrate this is the page notice pattern. With the legacy-theme module included, page notices will continue to have a very DS4-like transparent background and solid border; whereas with the module omitted, page notices will have the newer, solid-color block scheme and no border.
In some upcoming major release we will be retiring the legacy edition of skin altogether and this module represents a significant milestone in that slow, ponderous death march journey. We encourage all teams to upgrade and be part of the evolution design system.
DS4 & Iconography #1429
Maintenance of legacy DS4 iconography SVGs has been discontinued. By default, both legacy and evolution will receive the same set of SVG icons.
Lightbox Dialog #1453
The alert & confirm variants have been moved out of the lightbox-dialog module...
v13.0.0
v13.0.0-0 13.0.0-0
v12.6.11
1d146ed
austingardner
Austin Gardner