Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.

  • By eBay
  • Last update: Dec 23, 2022
  • Comments: 16

This project is using Percy.io for visual regression testing.

Skin

Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.

Please visit the Skin website for all end-user documentation.

License

Skin is MIT licensed.

Install

Skin is available as the @ebay/skin package on NPM. Skin is also available on our CDN.

Versioning

Skin follows Semantic Versioning:

  1. MAJOR version when we make incompatible API changes,
  2. MINOR version when we add functionality in a backwards-compatible manner
  3. PATCH version when we make backwards-compatible bug fixes.

More detailed insight into our versioning process can be found in our contributing guide.

Releases

Please refer to our releases page to view the change log for current and past releases.

Please refer to our web archive for past examples and documentation.

Roadmap

Please refer to our projects page to see what's coming down the pipeline.

Browser Support

Please view our @ebay/browserslist-config to see which browsers we currently support.

SPOILER: we do not support IE10 or under.

Accessibility (A11Y)

We take accessibility very seriously. Very seriously indeed. Therefore all modules are built in accordance to the eBay MIND Patterns. These patterns, in turn, build on from the specifications provided by the WAI-ARIA Authoring Practices.

Issues

Please use our issues page to ask questions, report issues or submit feature requests.

To help track your issue, the Skin admins will assign it with a label from one or more issue categories.

Custom Bundler

Skin provides a command to create your own bundles for uploading to cdn. Use bin/generate-bundle.js in order to create separate bundles.

bin/generate-bundle.js list -> List available modules (used for the --modules argument)

bin/generate-bundle.js bundle ebay -> Create a bundle under the ebay folder

bin/generate-bundle.js bundle ebay --modules button carousel -> Create a bundle under the ebay folder with only button and carousel modules

bin/generate-bundle.js bundle ebay --scope-class ebay --scope-specificity 5 -> Create a bundle under the ebay folder with all CSS styles wrapped under .ebay.ebay.ebay.ebay.ebay {}

Developing & Contributing

Interested in contributing? Head over to our contributing guide for information on how to get started.

Contributions don't have to be code! They can be ideas, inspiration, discussion or filing bugs!

People

The original creator of Skin is Senthil Padmanabhan.

The current author and lead maintainer is Ian McBurnie.

List of all contributors.

Github

https://github.com/eBay/skin

Comments(16)

  • 1

    Allow button text to wrap

    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 image

    DS4 image

  • 2

    Add pill variant to button

    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

    screen shot 2018-09-05 at 3 51 35 pm
  • 3

    Migrates listbox class names to .select;

    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

    image image image

  • 4

    DS4 Icon Retrofit

    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

    image image image image

  • 5

    Fixes alignment of the select;

    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

    image

    After

    image

  • 6

    Docs: Define semantic versioning for CSS

    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.

  • 7

    Update to pagination for ds6 to work with ebayui-core

    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.

  • 8

    percy(chore): 1739 percy integration and storybook cleanup

    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
  • 9

    120 - icon

    Description

    DS6 icons

    References

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

    Screenshots

    screen shot 2018-04-09 at 9 20 49 pm screen shot 2018-04-09 at 9 21 02 pm
  • 10

    Charts

    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
  • 11

    Tooltip component changes

    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: image

    Infotip: image

    Tourtip:

    Button Callout: image

    Link callout: image

  • 12

    New Component - Option List

    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

  • 13

    fix(filter-menu-button): outline on safari

    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
  • 14

    filter-menu-button: Missing outline in first and last element in Safari

    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:

    ebay-filter-menu-button-bug

    ebay-filter-menu-button-bug-2

  • 15

    Bulk Edit Pattern

    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

    image

    image

    image

    image

  • 16

    build(deps): bump nokogiri from 1.13.9 to 1.13.10

    Bumps nokogiri from 1.13.9 to 1.13.10.

    Release notes

    Sourced from nokogiri's releases.

    1.13.10 / 2022-12-07

    Security

    • [CRuby] Address CVE-2022-23476, unchecked return value from xmlTextReaderExpand. See GHSA-qv4q-mr5r-qprj for more information.

    Improvements

    • [CRuby] XML::Reader#attribute_hash now returns nil on parse errors. This restores the behavior of #attributes from v1.13.7 and earlier. [#2715]

    sha256 checksums:

    777ce2e80f64772e91459b943e531dfef387e768f2255f9bc7a1655f254bbaa1  nokogiri-1.13.10-aarch64-linux.gem
    b432ff47c51386e07f7e275374fe031c1349e37eaef2216759063bc5fa5624aa  nokogiri-1.13.10-arm64-darwin.gem
    73ac581ddcb680a912e92da928ffdbac7b36afd3368418f2cee861b96e8c830b  nokogiri-1.13.10-java.gem
    916aa17e624611dddbf2976ecce1b4a80633c6378f8465cff0efab022ebc2900  nokogiri-1.13.10-x64-mingw-ucrt.gem
    0f85a1ad8c2b02c166a6637237133505b71a05f1bb41b91447005449769bced0  nokogiri-1.13.10-x64-mingw32.gem
    91fa3a8724a1ce20fccbd718dafd9acbde099258183ac486992a61b00bb17020  nokogiri-1.13.10-x86-linux.gem
    d6663f5900ccd8f72d43660d7f082565b7ffcaade0b9a59a74b3ef8791034168  nokogiri-1.13.10-x86-mingw32.gem
    81755fc4b8130ef9678c76a2e5af3db7a0a6664b3cba7d9fe8ef75e7d979e91b  nokogiri-1.13.10-x86_64-darwin.gem
    51d5246705dedad0a09b374d09cc193e7383a5dd32136a690a3cd56e95adf0a3  nokogiri-1.13.10-x86_64-linux.gem
    d3ee00f26c151763da1691c7fc6871ddd03e532f74f85101f5acedc2d099e958  nokogiri-1.13.10.gem
    
    Changelog

    Sourced from nokogiri's changelog.

    1.13.10 / 2022-12-07

    Security

    • [CRuby] Address CVE-2022-23476, unchecked return value from xmlTextReaderExpand. See GHSA-qv4q-mr5r-qprj for more information.

    Improvements

    • [CRuby] XML::Reader#attribute_hash now returns nil on parse errors. This restores the behavior of #attributes from v1.13.7 and earlier. [#2715]
    Commits
    • 4c80121 version bump to v1.13.10
    • 85410e3 Merge pull request #2715 from sparklemotion/flavorjones-fix-reader-error-hand...
    • 9fe0761 fix(cruby): XML::Reader#attribute_hash returns nil on error
    • 3b9c736 Merge pull request #2717 from sparklemotion/flavorjones-lock-psych-to-fix-bui...
    • 2efa87b test: skip large cdata test on system libxml2
    • 3187d67 dep(dev): pin psych to v4 until v5 builds in CI
    • a16b4bf style(rubocop): disable Minitest/EmptyLineBeforeAssertionMethods
    • See full diff in compare view

    Dependabot compatibility score

    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.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.