Skip to content

v8.0.0
Compare
Choose a tag to compare
@agliga agliga released this 07 Oct 15:00
· 625 commits to master since this release
v8.0.0
fdeeb46
This commit was signed with the committer’s verified signature.
agliga Andrew Gliga
GPG key ID: DF0595A37703A1FB
Learn about vigilant mode.

A new Evolution

New look and feel

This change marks a new look and feel to our existing code. The largest changes is to add support for evolution which changes a lot of components and they way they were. This is just the first step in this new change, many more are planned to come!
Most of the changes in ebayui were to support the changes in skin for supporting Evolution. However, we do have some notable fixes which we have done.

Storybook rework (#1494 #1483)

Our storybook has always been the place where people go to see examples of code we have written. Now, storybook has become our goto for documentation as well. Usually we would direct teams to read our readme's, but now in storybook we have full documentation and code examples built in! We also have full toggle support where users can just turn on/off different arguments in order to see the way things change in components

Here are some examples of the toggles

props

And here's an example of the full documentation we have

Screen Shot 2021-10-07 at 8 04 40 AM

And finally here's one showcasing all the events being triggered

events
As we move forward, we will begin to deprecate our readme's in the code repo. For now we left them in but we will be phasing them out.

Drop IE11 support (#1386)

Since IE11 has been officially discontinued from being a supported browser, we too have removed all the support in ebayui for IE11. This means our bundle sizes will be much smaller, since we don't need all the polyfills to support all the good things IE11 lacks. We remove core-js pure and moved to using ES5 primatives, like Object.assign or Array.forEach

Migrator changes

When we first added migrators, we only supported Marko 4, since marko 5 was still in early release stages. However since marko 5 has picked up more traction, we have added migrators both for marko 4, and marko 5, which gives teams who use this project a much easier time to upgrade to the latest version.

Button changes

Our beloved <ebay-button> (which I believe was our first component too!) has gone through a lot of changes. We felt like this component, which should be so simple, has gotten to be overly bloated.
So we have decided to split up button into separate components. These components are based on the variant attribute (which should be auto migrated to the newer versions)

Button split (#1412)

<ebay-button> still remains the same beloved button as we all know. It still has priority and all the favorite arguments. It can even take a href to become a fake-link
Screen Shot 2021-10-06 at 9 05 35 AM

Icon button

The first split is <icon-button> This new button only support having icons. It does still take similar arguments as <ebay-button>, but a much smaller amount. Arguments, like fluid, or transparent do not make sense in this case, but we kept others like href to make it a fake-button
Screen Shot 2021-10-06 at 9 06 47 AM

Fake link

The final split is to make a <fake-link>. While this feels and acts like a link, it is actually a button underneath. This one does not accept an href since an href is what a link has normally. Rather this emits a click event, so that things can be manipulated on a page but it does look like a link.
Looks like a link, can act like a link, but in reality is a button
Screen Shot 2021-10-06 at 9 08 57 AM

Button loading state (#1468)

Another change for button is actually having a new loading state. We added a body-state argument in order to allow a loading button
Here it is in action with the new storybook changes
loading

Infotip/tooltip/tourtip changes (#1508)

Normally, we control the state of the infotip. However, as time is going on, many teams requested control of the infotip open/closed state. We did have a way to expose methods on the component but as time went on, it seems much more natural to expose an open attribute.
So we did so! We now have an open/close attribute for all these components. By not passing in that attribute (or setting it as null), it uses the default behavior. But passing it then triggers it in that state and allows you to control if it's open or not. Interacting with it still opens and closes as usual.
Here's an example
tooltip

Select floating label (#1528)

Since we were lacking a floating label for select only element (we have it for combobox), we added support for ebay-select to show floating label.
Here's an example
select

Other breaking changes (#1233)

  • ebay-infotip: renamed a11y-close-text to a11y-close-button-text
  • ebay-details: renamed type to alignment
  • ebay-page-notice: renamed a11y-text to a11y-icon-text
  • ebay-listbox-button: changed auto keyboard selection to manual keyboard selection by default

Other misc fixes

  • support jestdom #1526
  • Report text for video is not passed correctly #1533
  • ebay-infotip icon is regular size when it should be small #1524
  • ebay-fake-menu: Disabled link is not clear #1480
  • breadcrumbs : "current" item should not be in tab order #1477

Future

We will continue to update components to support evolution in the upcoming minor releases.

Assets 2