Merge pull request #827 from eBay/9.1.0

eBay · Sep 12, 2019 · d532fbf · d532fbf
2 parents ebad8f7 + 9037bd2
commit d532fbf
Show file tree

Hide file tree

Showing 153 changed files with 4,431 additions and 2,304 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,3 @@
-_cdn
 _site
 docs
 .cache

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -195,7 +195,7 @@ Please ensure your NPM registry is set correctly and that you are on the package
 
 A pre-release is always made from a milestone branch.
 
-1. Run `npm version prepatch`, `npm version preminor`, or `npm version premajor`. This command will automatically:
+1. Run `npm version prepatch`, `npm version preminor`, or `npm version premajor`. If you need to increment an existing prerelease use `npm version prerelease`. This command will automatically:
     * update the version number in css build files
     * update the version number in `package.json`
     * commit all changes locally
@@ -219,6 +219,7 @@ A final release is always made from the master branch.
 1. Push commit to origin.
 1. Push the git tag to origin, e.g. `git push origin v3.1.0`.
 1. Run `npm publish` to publish the package to NPM.
+1. Publish the `/_cdn/skin/{version}` folder to the CDN.
 
 ### GitHub Release
 

diff --git a/dist/actionable/ds4/actionable.css b/dist/actionable/ds4/actionable.css
@@ -11,12 +11,12 @@ a.icon-link > svg {
 button.icon-btn,
 a.icon-link {
   background-color: transparent;
-  border: 0 none;
-  height: 32px;
+  border: 2px solid transparent;
+  height: 42px;
   margin: 0;
   padding: 0;
   vertical-align: text-bottom;
-  width: 32px;
+  width: 42px;
 }
 button.icon-btn:focus,
 a.icon-link:focus,
@@ -28,6 +28,7 @@ button.icon-btn svg,
 a.icon-link svg {
   color: #555;
   height: 100%;
+  position: relative;
 }
 button.icon-btn:active svg,
 a.icon-link:active svg {
@@ -47,21 +48,21 @@ a[aria-disabled="true"].icon-link svg {
 }
 button.icon-btn--badged,
 a.icon-link--badged {
+  overflow: visible;
   position: relative;
 }
 button.icon-btn--badged .badge,
 a.icon-link--badged .badge {
-  border: 2px solid;
-  border-color: #fff;
-  font-size: 0.75rem;
+  border: 2px solid #fff;
+  display: block;
   height: 24px;
-  left: 12px;
-  line-height: 1rem;
-  margin: auto;
+  left: 16px;
   min-width: 24px;
-  padding-top: 0;
+  padding-top: 2px;
+  pointer-events: none;
   position: absolute;
-  top: -8px;
+  text-align: center;
+  top: -2px;
   z-index: 1;
 }
 a.img-link[href]:hover,

diff --git a/dist/actionable/ds6/actionable.css b/dist/actionable/ds6/actionable.css
@@ -11,12 +11,12 @@ a.icon-link > svg {
 button.icon-btn,
 a.icon-link {
   background-color: transparent;
-  border: 0 none;
-  height: 32px;
+  border: 2px solid transparent;
+  height: 42px;
   margin: 0;
   padding: 0;
   vertical-align: text-bottom;
-  width: 32px;
+  width: 42px;
 }
 button.icon-btn:focus,
 a.icon-link:focus,
@@ -28,6 +28,7 @@ button.icon-btn svg,
 a.icon-link svg {
   color: #111820;
   height: 100%;
+  position: relative;
 }
 button.icon-btn:active svg,
 a.icon-link:active svg {
@@ -47,21 +48,21 @@ a[aria-disabled="true"].icon-link svg {
 }
 button.icon-btn--badged,
 a.icon-link--badged {
+  overflow: visible;
   position: relative;
 }
 button.icon-btn--badged .badge,
 a.icon-link--badged .badge {
-  border: 2px solid;
-  border-color: #fff;
-  font-size: 0.75rem;
+  border: 2px solid #fff;
+  display: block;
   height: 24px;
-  left: 12px;
-  line-height: 1rem;
-  margin: auto;
+  left: 16px;
   min-width: 24px;
-  padding-top: 0;
+  padding-top: 2px;
+  pointer-events: none;
   position: absolute;
-  top: -8px;
+  text-align: center;
+  top: -2px;
   z-index: 1;
 }
 a.img-link[href]:hover,

diff --git a/dist/badge/ds4/badge.css b/dist/badge/ds4/badge.css
@@ -8,14 +8,15 @@
   color: #fff;
   display: -webkit-inline-box;
   display: inline-flex;
+  font-family: "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
+  height: 20px;
   -webkit-box-pack: center;
           justify-content: center;
-  padding: 1px 7px 0;
-  vertical-align: middle;
-  white-space: nowrap;
-  font-size: 0.75em;
-  height: 20px;
   min-width: 20px;
+  padding: 1px 7px 0;
   position: relative;
-  top: calc(50% - 20px);
+  top: calc(50% - 18px);
+  white-space: nowrap;
 }
diff --git a/dist/badge/ds6/badge.css b/dist/badge/ds6/badge.css
@@ -8,14 +8,15 @@
   color: #fff;
   display: -webkit-inline-box;
   display: inline-flex;
+  font-family: "Market Sans", Arial, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  height: 20px;
   -webkit-box-pack: center;
           justify-content: center;
-  padding: 1px 7px 0;
-  vertical-align: middle;
-  white-space: nowrap;
-  font-size: 0.75em;
-  height: 20px;
   min-width: 20px;
+  padding: 1px 7px 0;
   position: relative;
-  top: calc(50% - 20px);
+  top: calc(50% - 18px);
+  white-space: nowrap;
 }
diff --git a/dist/breadcrumb/ds4/breadcrumb.css b/dist/breadcrumb/ds4/breadcrumb.css
@@ -1,13 +1,22 @@
 .breadcrumb {
-  margin: 16px 0;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  min-height: 16px;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
 }
 .breadcrumb ul {
+  display: -webkit-box;
+  display: flex;
   list-style-type: none;
   margin: 0;
+  min-width: 100%;
   padding: 0;
-}
-.breadcrumb li {
-  display: inline;
+  position: absolute;
+  right: 0;
+  top: -2px;
 }
 .breadcrumb li:not(:last-of-type)::after {
   background-repeat: no-repeat;
@@ -18,7 +27,7 @@
   width: 8px;
   background-size: 8px 8px;
   content: '';
-  margin: 0 4px 0 8px;
+  margin: 0 8px;
 }
 .breadcrumb button {
   background: none;

diff --git a/dist/breadcrumb/ds6/breadcrumb.css b/dist/breadcrumb/ds6/breadcrumb.css
@@ -1,24 +1,33 @@
 .breadcrumb {
-  margin: 16px 0;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  min-height: 16px;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
 }
 .breadcrumb ul {
+  display: -webkit-box;
+  display: flex;
   list-style-type: none;
   margin: 0;
+  min-width: 100%;
   padding: 0;
-}
-.breadcrumb li {
-  display: inline;
+  position: absolute;
+  right: 0;
+  top: -2px;
 }
 .breadcrumb li:not(:last-of-type)::after {
   background-repeat: no-repeat;
   display: inline-block;
   vertical-align: middle;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJpY29uLWNoZXZyb24tcmlnaHQiIHZpZXdCb3g9IjAgMCAxMCAxOCI+PHBhdGggZmlsbD0iIzExMTgyMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS4wMDYgMTguMDA0YTEgMSAwIDAgMS0uNzEtMS43MWw3LjMtNy4yOS03LjMtNy4yOWExLjAwMyAxLjAwMyAwIDEgMSAxLjQyLTEuNDJsOCA4YTEuMDAxIDEuMDAxIDAgMCAxIDAgMS40MmwtOCA4YTEgMSAwIDAgMS0uNzEuMjl6Ii8+PC9zdmc+');
+  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJpY29uLWNoZXZyb24tcmlnaHQiIHZpZXdCb3g9IjAgMCAxMCAxOCI+PHBhdGggZmlsbD0iIzc2NzY3NiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMS4wMDYgMTguMDA0YTEgMSAwIDAgMS0uNzEtMS43MWw3LjMtNy4yOS03LjMtNy4yOWExLjAwMyAxLjAwMyAwIDEgMSAxLjQyLTEuNDJsOCA4YTEuMDAxIDEuMDAxIDAgMCAxIDAgMS40MmwtOCA4YTEgMSAwIDAgMS0uNzEuMjl6Ii8+PC9zdmc+');
   height: 8px;
-  width: 6px;
-  background-size: 6px 8px;
+  width: 8px;
+  background-size: 8px 8px;
   content: '';
-  margin: 0 4px 0 8px;
+  margin: 0 8px;
 }
 .breadcrumb button {
   background: none;
@@ -46,6 +55,6 @@
 }
 @media screen and (-ms-high-contrast: white-on-black) {
   .breadcrumb li:not(:last-of-type)::after {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJpY29uLWNoZXZyb24tcmlnaHQtYmFzZTY0LWxpZ2h0IiB2aWV3Qm94PSIwIDAgMTAgMTgiPjxwYXRoIGZpbGw9IiNmZmZmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEuMDA2IDE4LjAwNGExIDEgMCAwIDEtLjcxLTEuNzFsNy4zLTcuMjktNy4zLTcuMjlhMS4wMDMgMS4wMDMgMCAxIDEgMS40Mi0xLjQybDggOGExLjAwMSAxLjAwMSAwIDAgMSAwIDEuNDJsLTggOGExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJpY29uLWNoZXZyb24tcmlnaHQiIHZpZXdCb3g9IjAgMCAxMCAxOCI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEuMDA2IDE4LjAwNGExIDEgMCAwMS0uNzEtMS43MWw3LjMtNy4yOS03LjMtNy4yOWExLjAwMyAxLjAwMyAwIDExMS40Mi0xLjQybDggOGExLjAwMSAxLjAwMSAwIDAxMCAxLjQybC04IDhhMSAxIDAgMDEtLjcxLjI5eiIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4=');
   }
 }
diff --git a/dist/checkbox/ds4/checkbox.css b/dist/checkbox/ds4/checkbox.css
@@ -31,17 +31,13 @@
   stroke-width: 0;
   vertical-align: middle;
   color: #767676;
-  height: 18px;
-  width: 18px;
 }
 .checkbox__control[type="checkbox"] {
   font-size: 100%;
-  height: 18px;
   margin: 0;
   opacity: 0;
   padding: 0;
   position: absolute;
-  width: 18px;
   z-index: 1;
 }
 .checkbox__control[type="checkbox"]:not(:checked) + .checkbox__icon svg.checkbox__checked {
@@ -67,9 +63,11 @@
   background-size: contain;
 }
 .checkbox__control[type="checkbox"]:checked + .checkbox__icon svg.checkbox__checked {
-  color: #0654ba;
   display: inline-block;
 }
+.checkbox__control[type="checkbox"]:checked:not([disabled]) + .checkbox__icon svg.checkbox__checked {
+  color: #0654ba;
+}
 .checkbox__control[type="checkbox"]:checked + .checkbox__icon svg.checkbox__unchecked {
   display: none;
 }
@@ -81,3 +79,11 @@
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMyAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgNC4yMzVBNC4yMzcgNC4yMzcgMCAwIDEgNC4yMzcgMGgxNC40ODJhNC4yMjggNC4yMjggMCAwIDEgNC4yMzcgNC4yMzV2MTUuNTI5YTQuMjM3IDQuMjM3IDAgMCAxLTQuMjM3IDQuMjM1SDQuMjM3QTQuMjI4IDQuMjI4IDAgMCAxIDAgMTkuNzY0VjQuMjM1em0zLjU3NyA4Ljk1NWw1LjI3OSA1LjEyOUwxOS4yMjkgOC4yNGwtMS45NzctMS45MjEtOC4xOTcgNy45NjUtMy4zMzItMy4yMzctMi4xNDYgMi4xNDN6Ii8+PC9zdmc+');
   }
 }
+.checkbox__control[type="checkbox"]:checked + .checkbox__icon svg.checkbox__checked {
+  color: #0654ba;
+}
+.checkbox__icon svg,
+.checkbox__control[type="checkbox"] {
+  height: 18px;
+  width: 18px;
+}