Skip to content

v12.0.0
Compare
Choose a tag to compare
@agliga agliga released this 14 Jan 20:07
· 966 commits to master since this release
v12.0.0
6b479bc
This commit was signed with the committer’s verified signature. The key has expired.
austingardner Austin Gardner
GPG key ID: 1CD0883DD682280C
Expired
Learn about vigilant mode.

The Great Rounding

Introduction

This new major release (which came so close to the previous release) adds only a few changes, but these are important breaking changes that we decided needed a major release.

Breaking changes

Rounded elements by default #1298

The theme for this release as specified by the title is that all out elements are rounded. We have made all our elements to be rounded by default.
This is only in DS6
However, in order to support this release and allow people to go forward we have also provided a mechanism to allow users to opt out of the rounded elements.
Screen Shot 2021-01-14 at 11 49 51 AM
Screen Shot 2021-01-14 at 11 53 22 AM
Screen Shot 2021-01-14 at 11 50 13 AM

How to disable rounded #1298

In case you do not want to have rounded elements by default, we have added a new module. If you import @ebay/skin/rounded-off module this will override all rounded styles and show the default square ones.
Note Make sure this is the last module imported so that it will properly override all styles.

Textbox #1307, #1311, #1310

In the new design system textbox has been changed to no longer have an underline version. This new textbox supports a new fully rounded textbox element. By default this will be the new floating label textbox.
Screen Shot 2021-01-14 at 11 52 59 AM

However we have added a new module under @ebay/skin/legacy-textbox. This can be imported after textbox in order to show the old styles.

Rounded checkbox #1333

In line with all the rest of the changes, checkbox SVG is now rounded by default. However we have added a checkbox-square SVG (both for unchecked and checked, as well as regular and large). This square checkbox should be used in legacy pages as needed.
Screen Shot 2021-01-14 at 11 50 45 AM

Removed focus indicators for mouse users #1332

So when clicking a button this blue outline would show up. This was important for accessibility keyboard users to know where they were on a page. However for mouse users this would look strange to see a blue outline on an element. So now all our elements should not show a focus ring, unless they are focused by using a keyboard.

Other changes

  • Removed yarn support and switched to npm #1291 - This does not affect teams still using our code with yarn
  • Carousel images image treatment #1295 - Adds a mask over an image to make them blend in together nicely
  • RTL added to components that lacked it (#1309)
  • Added selector/locator API #1296
  • Button: set min-width (#1326)
Assets 2