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:
- MAJOR version when we make incompatible API changes,
- MINOR version when we add functionality in a backwards-compatible manner
- 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.
Allow button text to wrap
Description
overflow
~,text-overflow
, andwhite-space
restrictions--fixed-height
modifier--truncated
modifierContext
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
anda
) 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
Add pill variant to button
Description
pill
variant to thebutton
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:
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, themargin-left
makes sense (and is part of the design spec).References
Specs: https://ebay.invisionapp.com/share/CWN9X1JF6MA#/screens/293357159 Closes: #69
Screenshots
Migrates listbox class names to .select;
Description
.listbox
classnames to.select
ebay-select
component.~ (see bullet 5 below)/base/select.less
::after
pseudo-element), requiring a slight markup changeContext
Needed for DS4 being supported in ebayui-core.
References
Fixes #222
Screenshots
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
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
After
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:
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.
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.
percy(chore): 1739 percy integration and storybook cleanup
Fixes #1739
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
.percy.yml
. It can be done but adding back inclusions for snapshots to make it additive and does not replace theinclude[]
list in.percy.yml
..percy.yml
and run snapshots with either ALL or only select stories via regex with the--include
CLI arg.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
120 - icon
Description
DS6 icons
References
Design - https://app.zeplin.io/project/5a742fd1f51a76f8651f2016/screen/5ac29323882d1f0d438f51ab Issue - https://github.com/eBay/skin/issues/120
Screenshots
Charts
Fixes #1909
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
Tooltip component changes
Description
DS6 tooltip component changes for below types:
Context
This will be new component for DS6 (Tooltip)
References
Fixes #111
Screenshots
Tooltip:
Infotip:
Tourtip:
Button Callout:
Link callout:
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
fix(filter-menu-button): outline on safari
Fixes #1967
Description
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
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:
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
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.
Changelog
Sourced from nokogiri's changelog.
Commits
4c80121
version bump to v1.13.1085410e3
Merge pull request #2715 from sparklemotion/flavorjones-fix-reader-error-hand...9fe0761
fix(cruby): XML::Reader#attribute_hash returns nil on error3b9c736
Merge pull request #2717 from sparklemotion/flavorjones-lock-psych-to-fix-bui...2efa87b
test: skip large cdata test on system libxml23187d67
dep(dev): pin psych to v4 until v5 builds in CIa16b4bf
style(rubocop): disable Minitest/EmptyLineBeforeAssertionMethodsDependabot 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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.