Skip to content

16.0.0
Compare
Choose a tag to compare
@ArtBlue ArtBlue released this 30 Mar 17:22
· 391 commits to master since this release
v16.0.0
bc0162a
This commit was signed with the committer’s verified signature.
agliga Andrew Gliga
GPG key ID: FD35EBA26D67798D
Learn about vigilant mode.

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:

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

Screen Shot 2023-03-30 at 10 18 30 AM

Calendar

Screen Shot 2023-03-30 at 10 17 15 AM

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

Screen Shot 2023-03-30 at 10 21 11 AM

What's Changed

Contributors

ianmcburnie, ArtBlue, and 3 other contributors
Assets 2
Loading