Description

• removed button ~overflow~, text-overflow, and white-space restrictions
• removed height restriction on all sizes
• added --fixed-height modifier
• added --truncated modifier
• fixed bug with dropdown arrow (I know, I know. But if I see it, I fix it. 🤷‍♂️ )

Note: there is currently an issue when icons are set after the buttons. I am not sure exactly what we want to do here, as we don't want to be adding additional markup for fixed-height buttons with icons.

Note: This is currently backwards compatible for markup, but if teams were relying on the overflow being hidden or truncated this would be a breaking change for them. It is my opinion that this is an extremely rare use case, as most teams use buttons where the content does not get truncated. Therefore, I think we can proceed with the minor version update. I am certainly willing to make it a major version update given our desire to adhere to the strictness of SEMVER.

Context

We want to now support multiline buttons just as the default HTML button does. We also want to provide a way to clearly specify a fixed height when necessary, to align the button to other form controls which currently have fixed heights.

I did have to fix some line heights for all buttons (button and a) to align the text when the --fixed-height modifier was used. I tested this across browsers and it worked very well.

References

Fixes #391

Screenshots

DS6

DS4

Description

• add pill variant to the button
• update docs

Context

Pills are very similar to buttons, with a few small differences. So I think it makes sense to keep it within the button component.

A few things I included that I wasn't sure about:

1. I included margin-left for adjacent pills. Although Skin is agnostic of the surroundings of the pill, the common use case is to have multiple pills in a row. In which case, the margin-left makes sense (and is part of the design spec).
2. I included the CSS multi-line truncation which is available in ~85% of browsers (https://caniuse.com/#feat=css-line-clamp), but is also known to be a bit buggy. We could leave this out of Skin, and just have apps be responsible for handling truncation themselves (or through eBayUI).

References

Specs: https://ebay.invisionapp.com/share/CWN9X1JF6MA#/screens/293357159 Closes: #69

Screenshots

Description

• Migrates all .listbox classnames to .select
• ~Updates for markup changes in the ebayui-core ebay-select component.~ (see bullet 5 below)
• Normalizes common selectors and rules into a /base/select.less
• Handles additional modifiers for DS6 select
• Supports both background and foreground SVG (removes the DS6 ::after pseudo-element), requiring a slight markup change

Context

Needed for DS4 being supported in ebayui-core.

References

Fixes #222

Screenshots

Description

DS4 icons are updated with variables and mixins. Allows DS4 background images and DS4 foreground images using inline SVG.

Context

Current DS4 icons use an icon font which has limitations for our new eBayUI components. This PR brings the DS4 components forward and in sync with the DS6 icons. It uses both foreground (inline) SVG as well as background SVG using Base64 encoded strings.

References

Closes #224

Screenshots

Description

This fixes some styles related to the inline view of the select component. It also adds a --small modifier for when the select needs to match the default font size.

Context

When placed inline with text, spans, or other inline content the select would position itself incorrectly.

References

Fixes #194

Screenshots

Before

After

We should better define semantic versioning as it pertains to HTML and CSS (reminder: skin does not provide any JavaScript). For example, changes to background and foreground colors. We need to strike a good balance between keeping users up to date with latest design system, but also avoiding any unpleasant surprises.

In the past we were restricted to a kind of hybrid semantic versioning approach, with only the minor and patch numbers to play with. I felt we did a pretty good job, even despite those restrictions. Now though we have major, minor and patch numbers to play with.

To clarify, we do not want to stray from the core values of semantic versioning, which are:

• MAJOR version when you make incompatible API changes,
• MINOR version when you add functionality in a backwards-compatible manner, and
• PATCH version when you make backwards-compatible bug fixes.

Rather we should clarify and document what constitutes a "bug fix" and "functionality" and "breaking changes" in HTML and CSS.

Documentation should be placed in README under "Versioning" section.

small pagination fix to make fluid and non fluid work in ds6 with ebayui-core

Description

a max of 8 items where showing up with the default usage. and responsive sizes where not hiding the correct items.

Context

fix to go along with changes to ebayui-core for 1.0.0 release.

Fixes #1739

• [ ] This PR contains CSS changes
• [x] This PR does not contain CSS changes

Description

Upgraded Percy CLI, added dedicated scripts for running snapshots for all stories as well as specific individual stories. I also cleaned out a couple of issues I found with stories.

Notes

1. There’s no good way to exclude stories from snapshot exclusion once stories are listed in .percy.yml. It can be done but adding back inclusions for snapshots to make it additive and does not replace the include[] list in .percy.yml.
2. The best approach to doing snapshots most flexibly via CLI is to not include any story in the .percy.yml and run snapshots with either ALL or only select stories via regex with the --include CLI arg.
3. More research will be needed to see if it’s possible to run snapshots selectively on github based on which components were modified in PR merges. At the moment, it does not appear to be possible.
4. Using an –include with a regex to run certain tests looks to be the best alternative: npm run snapshots:dry 'Button/Button/Primary'

Usage Notes

Snapshots will likely be ran by developers locally before pushing up changes. Once they are ran, Percy dashboard should be checked to ensure no unintended style changes have taken place. If there are intended style changes that have occurred, those should be reverted/fixed. Once the set of new local changes is final and in scope with the changes related to the issue, the snapshot run will need to be marked as the canonical version against which future updates are compared.

Build Modes

Running snapshots has two modes for all variations - build mode and dry mode.

Build mode creates snapshots for stories, uploads the snapshots to Percy and created a new Percy build for the purposes of making comparisons to previous visual builds.

Dry mode runs through snapshots (mainly for the purpose of verifying which stories will be captured) but does not upload the snapshots and does not create a Percy build.

Run All Snapshots

Build mode: npm run snapshots:all Dry mode: npm run snapshots:all:dry

Run Specific Snapshot(s)

Single build mode: npm run snapshots 'Button/Button/Primary' Multiple build mode: npm run snapshots 'Button/Button/Primary,Icon/'

Single dry mode: npm run snapshots:dry 'Button/Button/Primary' Multiple dry mode: npm run snapshots:dry 'Button/Button/Primary,Icon/'

Checklist

• [x] I verify the build is in a non-broken state
• [x] I verify all changes are within scope of the linked issue

• [x] I regenerated all CSS files under dist folder
• [x] I tested the UI in all supported browsers
• [x] I tested the UI in dark mode and RTL mode
• [x] I added/updated/removed Storybook coverage as appropriate

Description

DS6 icons

References

Design - https://app.zeplin.io/project/5a742fd1f51a76f8651f2016/screen/5ac29323882d1f0d438f51ab Issue - https://github.com/eBay/skin/issues/120

Screenshots

Fixes #1909

• [x] This PR contains CSS changes
• [ ] This PR does not contain CSS changes

Description

adding a handful of tokens for light and dark for data viz colors, as well as updating magenta 3 to match the design team brand colors.

added the donut-chart and chart-legend including documentation.

Notes

The new tokens will support a set of ebayui-core chart components that are still in the works.

Screenshots

Checklist

• [x] I verify the build is in a non-broken state
• [x] I verify all changes are within scope of the linked issue

• [x] I regenerated all CSS files under dist folder
• [x] I tested the UI in all supported browsers
• [ ] I did a visual regression check of the components impacted by doing a Percy build and approved the build
• [x] I tested the UI in dark mode and RTL mode
• [x] I added/updated/removed Storybook coverage as appropriate

Description

DS6 tooltip component changes for below types:

• Tooltip (on-click & focusout)
• Infotip (on-click & actionable)
• Tourtip (displayed by default on the page & actionable)

Context

This will be new component for DS6 (Tooltip)

References

Fixes #111

Screenshots

Tooltip:

Infotip:

Tourtip:

Button Callout:

Link callout:

Option list is a single & multi selection pattern that provides a more visual emphasis on the choices available. This documentation provides layout, behavior and content guidance for when and how to use an option list component.

Figma Link

Fixes #1967

• [X] This PR contains CSS changes
• [ ] This PR does not contain CSS changes

Description

• Fixed issue by adding a transform: translateZ(0);. What is happening is the parent element has overflow hidden. In safari, the child will have the outline cutoff and hidden because of that. If we pop the child element on higher z index (but using translate), it shows correctly.

Checklist

• [X] I verify the build is in a non-broken state
• [X] I verify all changes are within scope of the linked issue
• [X] I regenerated all CSS files under dist folder
• [X] I tested the UI in all supported browsers
• [X] I did a visual regression check of the components impacted by doing a Percy build and approved the build
• [X] I tested the UI in dark mode and RTL mode
• [X] I added/updated/removed Storybook coverage as appropriate

Description:

The issue is only happening on Safari : https://opensource.ebay.com/ebayui-core/?path=/story/buttons-ebay-filter-menu-button--standard, the focus outline is missing in the first and last element of the menu.

Analisys:

@agliga Mentioned this: "The issue is with the overflow hidden and border radius. That transform should pull it out into another layer."

This code fixes the issue: .filter-menu-button__items { transform: translateZ(0); }

Evidence:

Documentation & guidance for bulk editing. Bulk edit is a pattern for actions that may be performed on multiple items within a table or list. Once the user selects at least one item or enters edit mode, the bulk action bar appears at the top of the section with options.

FigmaLINK

Bumps nokogiri from 1.13.9 to 1.13.10.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.