v16.5.0

What's Changed

• feat(lightbox-dialog): add expressive variant by @LuLaValva in #2090
• fix(segmented-button): fixed non-current buttons on dark mode by @ArtBlue in #2097
• feat(field): added character count by @agliga in #2098
• feat(toggle-button-group): new component by @ArtBlue in #2095

Full Changelog: v16.4.0...v16.5.0

v16.4.0

What's Changed

• fix(infotip,textbox): bugfixes on size and border by @agliga in #2067
• feat(button): added small height by @agliga in #2071
• feat(segmented-button): added large/small by @agliga in #2072
• feat(toggle-button): new component by @ArtBlue in #2061
• feat(icons): additions, deletions, modifications by @ArtBlue in #2083

Full Changelog: v16.3.0...v16.4.0

v16.3.0

What's Changed

• fix(floating-label): override inline transform during autofill by @LuLaValva in #2079
• v16.3.0 Release by @LuLaValva in #2081

Full Changelog: v16.2.1...v16.2.2

v16.2.1

What's Changed

• fix(dialog): fixed pre 14.1 Safari dialog display issues by @ArtBlue in #2074
• v16.2.1 by @ArtBlue in #2076

Full Changelog: v16.2.0...v16.2.1

v16.2.0

What's Changed

• feat: added avatar by @agliga in #2054
• feat: added segmented button by @agliga in #2058
• build(deps): bump engine.io from 6.4.1 to 6.4.2 by @dependabot in #2056
• build(deps): bump yaml from 2.2.1 to 2.2.2 by @dependabot in #2051
• v16.2.0 by @ArtBlue in #2065

Full Changelog: v16.1.0...v16.2.0

v16.1.0

What's Changed

• build(deps-dev): bump webpack from 5.75.0 to 5.76.0 by @dependabot in #2027
• docs: updated icon creation guide by @agliga in #2029
• fix(icons): adjusted/removed sizing overrides for icons by @ArtBlue in #2033
• feat: updated dialog to new sizes and constraints by @agliga in #2034
• feat(image-placeholder): added new module by @agliga in #2041
• feat: added bookmark and play filled icons by @agliga in #2045
• feat(page-grid): updated components to standard breakpoints by @ArtBlue in #2046
• feat(page-grid): recovered subgrid, updated docs by @ArtBlue in #2040
• feat: added scrim tokens by @agliga in #2043
• fix(icons): adjusted icons used in storybook by @ArtBlue in #2049
• build(deps): bump commonmarker from 0.23.7 to 0.23.9 by @dependabot in #2038
• build(deps): bump nokogiri from 1.13.10 to 1.14.3 by @dependabot in #2039
• v16.1.0 Release by @ArtBlue in #2048

Full Changelog: v16.0.0...v16.1.0

16.0.0

Major/Breaking Changes

CDN Source no longer available

We are no longer automatically uploading our source to a CDN. We used to upload it and have it avaiable for teams. The last source available is https://ir.ebaystatic.com/cr/v/c1/skin/v15.5.1/skin-full.min.css. We are no longer uploading this.
However, the script to generate these CDN files is still available and can be used to generate custom bundles.

New Icons and Old Icons Deprecation

All icons have been completely renamed and changed. If you are using Skin directly in your application, you will need to swap the old (removed icons) with the new icons with new names. You will also need to update your classes to reflect this. In the future we are planning on removing all icon specific classes and adding generic size classes.

Please refer to these spreadsheets to find the new icons that map to your old ones:

• Web Skin Icon Mapping
• Web Skin Payments Icons Mapping

Program badge module removed

Program badges have been merged within icons. All old program badges are now called legacy. For example program-badge-authenticity-guarantee is now called legacy-authenticity-guarantee-48-colored. We have new program badges which are part of the icon set. Please see the Web Skin Icon Mapping file above for the renames.

Page Grid breaking changes

1. Page width styles were moved from page-grid (inner element) to page-grid-container. This makes page-grid responsibly solely for the grid while page-grid-container handles the width.
2. Multiple css properties were renamed for simplification:

• --page-grid-gutter-width-small and --page-grid-gutter-width-large were simplified into a single property, --page-grid-outside-margins removing the size distinctions and allowing the sizing to be determined through media queries instead.
• --page-grid-col-width-small and --page-grid-col-width-large were simplified into a single property of --page-grid-column-widths removing the size distinctions and allowing the sizing to be determined through media queries instead.

New Features

Calendar & Date Textbox component

We have pulled the date textbox and calendar modules into skin. The calendar module may be used as a static display or as an interactive and/or navigable component, and the date textbox provides built-in styles for using the calendar as a date input.

Date Textbox

Calendar

New Icon Artboards

New icons were introduced in a previous release. In this major release, we added a few more icons and adjusted others.
Of noteworthy significance is that most of the new icons automatically include white space designed to provide better alignments with text and each other while the old icons were trimmed to include only the graphic. This means that in some circumstances, after this change you may have spacing issues in your application and may need to either remove your explicit spacing styling or add positive/negative margins to accommodate the particular spacing for those icons.

Page Grid

We have added new layouts for page grid. There are many more css properties were created/exposed to allow for better flexibility allowing teams to override various items as their needs require it. The full list of css properties available are as follows:

CSS Property	Description
--page-grid-number-cols	The number of columns - default 8 or 16.
--page-grid-column-gaps	The gaps between columns AKA horizontal gutters.
--page-grid-row-gaps	The gaps between rows AKA vertical gutters.
--page-grid-outside-margins	The outer left/right spacing around the grid container.
--page-grid-column-widths	The column widths that are typically calculated using the column widths and column gaps.
--page-grid-max-width	The maximum width the page is allowed to expand before stopping (exclusive of outside margins)

Though at times, various use cases may call for it, developer should be very careful overriding these as it can have detrimental effects.

Page grid example

What's Changed

• feat(date-picker): add date picker to skin by @LuLaValva in #1907
• feat: changed docs to use new icons and removed old icons by @agliga in #2006
• fix(filter-menu-button, filter-button): improve container contrast by @saiponnada in #2014
• fix(buttons): primary button progress spinners to match DS @ArtBlue in #2015
• feat: added program badge icons by @agliga in #2013
• chore(icons): renamed icons and changed refs by @agliga in #2018
• feat(page-grid): upgraded component by @ArtBlue in #2011
• feat(calendar): clipped text for static calendars by @LuLaValva in #2019
• docs(calendar): some mild re-jigging of wording and examples by @ianmcburnie in #2024
• feat(date-textbox): add spacing between textboxes by @LuLaValva in #2026
• feat: remove CDN by @agliga in #2025
• v16.0.0 Release by @ArtBlue in #2022

v15.5.1

What's Changed

• fix: changed expand-button import to button by @agliga in #2002
• fix(icons): Fix Complex Icons and Remove Dimensions by @ArtBlue in #2003

Full Changelog: v15.5.0...v15.5.1

v15.5.0

What's Changed

• fix(listbox-button): added invalid state to form by @agliga in #1984
• feat(icons): updated icons by @ArtBlue in #1988
• fix(button): added hover color and border color to secondary button by @agliga in #1990
• build(deps): bump activesupport from 6.0.5.1 to 6.0.6.1 by @dependabot in #1980
• 15.5.0 release by @agliga in #1994
• build(deps): bump ua-parser-js from 1.0.2 to 1.0.33 by @dependabot in #1993

Major icon update

After a long time coming, we have updated all our icons to match design system. We have a plentitude of new icons using the format icon-{icon-name}-{size}, like for example: icon-add-16 will be the add icon at 16 pixels.
All old icons are still present, but will be removed next major version. We plan on putting out an icon map where we show the old names and what new names they map out to. So stay tuned for that!

Full Changelog: v15.4.0...v15.5.0

v15.4.0

What's Changed

• chore(global): removed deprecated xlink in use tags by @ArtBlue in #1971
• fix(filter-menu-button): outline on safari by @agliga in #1968
• build(deps): bump nokogiri from 1.13.9 to 1.13.10 by @dependabot in #1954
• fix(page notice, section-notice): text alignment by @ArtBlue in #1974
• feat(listbox-button): added form variant by @ArtBlue in #1975
• build(deps): bump json5 from 1.0.1 to 1.0.2 by @dependabot in #1972
• build(deps): bump commonmarker from 0.23.6 to 0.23.7 by @dependabot in #1978
• 15.4.0 Release by @ArtBlue in #1979

Full Changelog: v15.3.0...v15.4.0