Merge pull request #84 from eBay/3.4.0

Merge 3.4.0 milestone branch into master
eBay · Mar 6, 2018 · c1ef964 · c1ef964
2 parents 42580a9 + ee48ca6
commit c1ef964
Show file tree

Hide file tree

Showing 47 changed files with 2,556 additions and 499 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -158,16 +158,32 @@ Please ensure your NPM registry is set correctly and that you are on the package
 
 Please follow the steps below to publish skin to NPM:
 
-1. Build files must be stamped with the new version number. Increment the version number in package.json by hand (e.g. do **not** use `npm version` because this will create a git tag while the build files are still stamped with the *old* version number!)
-1.	Run `npm run build`. This will update the top comment section of build files with the new version number. This is needed for legal.
-1. Revert the version number update you made to package.json in step 1.
-1. Commit the modified build files
-1. Merge the milestone branch into master branch in GitHub
-1. Switch to your local master branch and pull the changes
-1. Run `npm version` patch, minor or version. This will again update the version number in package.json but will also commit change and create a Git tag at the same time
-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. Build files must be stamped with the new version number. Increment the version number in `package.json` by hand (e.g. do **not** use `npm version` because this will create a git tag while the build files are still stamped with the *old* version number!)
+1. Run `yarn build`. This will update the top comment section of build files with the new version number. This is needed for legal.
+1. Revert the version number update you made to `package.json` in step 1.
+1. Update any documentation references to reflect the new CDN url.
+1. Commit the modified build files with message "Stamped files with vX.x.x" and push to origin.
+
+Next, move on to pre-release or final release instructions below.
+
+### Pre-Release
+
+Pre-releases are made directly from a milestone branch. Patch releases do not need a pre-release (proceed directly to final release section below).
+
+1. Run `npm version pre-minor` or `npm version pre-major`. This command will update the version number in `package.json`, commit the change locally, and create a Git tag at the same time.
+1. Push commit to origin.
+1. Run `npm publish --tags beta` to publish the package to NPM.
+
+### Final Release
+
+Final releases are always made from the master branch. Minor and major version releases **must** be preceded by a pre-release (see above).
+
+1. Merge the milestone branch into master branch in GitHub (via a pull request).
+1. Switch to your local master branch and pull the changes from origin.
+1. Run `npm version patch`, `npm version minor` or `npm version major`. This command will update the version number in `package.json`, commit the change locally and create a Git tag at the same time.
+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.
 
 **TIP:** If you need to do an update or hotfix to an older minor release, please see the Hotfix Release section further below.
 

diff --git a/dist/button/ds6/button.css b/dist/button/ds6/button.css
@@ -17,15 +17,8 @@ a.cta-btn {
   display: inline-block;
   text-decoration: none;
 }
-button.expand-btn[aria-expanded="true"] .expand-btn__icon {
-  -webkit-transform: rotate(180deg);
-          transform: rotate(180deg);
-}
-button.expand-btn[disabled] span.expand-btn__icon {
-  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%23c7c7c7%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
-}
 a.cta-btn {
-  background-color: #f5f5f5;
+  background-color: #ffffff;
   border-style: solid;
   border-width: 1px;
   color: #10299c;
@@ -34,7 +27,7 @@ a.cta-btn:focus,
 a.cta-btn:hover {
   background-color: #10299c;
   border-color: #10299c;
-  color: #f5f5f5;
+  color: #ffffff;
 }
 a.cta-btn:focus {
   outline: 0 none;
@@ -91,22 +84,33 @@ button.expand-btn,
 a.fake-btn--secondary {
   background-color: white;
   border: 1px solid #c7c7c7;
-  color: #006efc;
-}
-button.btn--secondary:focus,
-button.expand-btn:focus,
-a.fake-btn--secondary:focus,
-button.btn--secondary:hover,
-button.expand-btn:hover,
-a.fake-btn--secondary:hover {
-  border-color: #4295ff;
 }
 button.btn--secondary:active,
 button.expand-btn:active,
 a.fake-btn--secondary:active {
   border-color: #10299c;
   color: #10299c;
 }
+button.btn-secondary,
+a.fake-btn--secondary {
+  color: #006efc;
+}
+button.btn-secondary:focus,
+a.fake-btn--secondary:focus,
+button.btn-secondary:hover,
+a.fake-btn--secondary:hover {
+  border-color: #4295ff;
+}
+button.expand-btn {
+  color: #111820;
+}
+button.expand-btn[aria-expanded="true"] .expand-btn__icon {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+button.expand-btn[disabled] span.expand-btn__icon {
+  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%23c7c7c7%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
+}
 button.btn--secondary[disabled],
 button.expand-btn[disabled],
 button.btn--secondary[aria-disabled="true"],
@@ -251,7 +255,7 @@ svg.cta-btn__icon {
   margin-left: 8px;
 }
 span.expand-btn__icon {
-  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
+  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
   background-repeat: no-repeat;
   background-position-y: center;
   -ms-flex-negative: 0;

diff --git a/dist/dropdown/ds6/dropdown.css b/dist/dropdown/ds6/dropdown.css
@@ -9,6 +9,16 @@ span.fake-menu,
 span.listbox {
   display: inline-block;
 }
+.menu button.expand-btn--borderless,
+.fake-menu button.expand-btn--borderless {
+  border: 0;
+  padding-left: 0;
+  vertical-align: initial;
+}
+.menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu__items[role="menu"],
+.fake-menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu__items[role="menu"] {
+  top: 41px;
+}
 .menu .expand-btn[aria-expanded="true"],
 .fake-menu .expand-btn[aria-expanded="true"],
 .listbox .expand-btn[aria-expanded="true"] {
@@ -48,6 +58,7 @@ div.listbox__option[role^="option"],
 a.fake-menu__item,
 button.fake-menu__item {
   background-color: #ffffff;
+  border: 1px solid #ffffff;
   box-sizing: border-box;
   cursor: pointer;
   display: -webkit-inline-box;
@@ -74,21 +85,18 @@ button.fake-menu__item span:not([class*="listbox__status"]) {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-div.menu__item[role^="menuitem"]:focus,
-div.listbox__option[role^="option"]:focus,
-a.fake-menu__item:focus,
-button.fake-menu__item:focus,
 div.menu__item[role^="menuitem"]:hover,
 div.listbox__option[role^="option"]:hover,
 a.fake-menu__item:hover,
 button.fake-menu__item:hover {
-  background-color: #f5f5f5;
+  background-color: #e5e5e5;
 }
 div.menu__item[role^="menuitem"]:focus,
 div.listbox__option[role^="option"]:focus,
 a.fake-menu__item:focus,
 button.fake-menu__item:focus {
-  outline: 1px solid #c7c7c7;
+  background-color: #e5e5e5;
+  outline: none;
 }
 div.menu__item[role^="menuitem"]:active,
 div.listbox__option[role^="option"]:active,
@@ -116,6 +124,10 @@ a.fake-menu__item:not(:last-child),
 button.fake-menu__item:not(:last-child) {
   margin-bottom: 1px;
 }
+div.menu__item[role^="menuitem"][aria-checked="true"],
+div.listbox__option[role^="option"][aria-selected="true"] {
+  font-weight: bold;
+}
 div.menu__item[role^="menuitem"][aria-checked="true"] .menu__status,
 div.listbox__option[role^="option"][aria-selected="true"] .menu__status,
 div.menu__item[role^="menuitem"][aria-checked="true"] .listbox__status,
@@ -184,9 +196,6 @@ span.fake-menu__status {
   box-sizing: border-box;
   width: 100%;
 }
-.listbox:hover > .listbox__control > input {
-  border-color: #4295ff;
-}
 .listbox__control > input {
   background-color: #ffffff;
   border: 1px solid #c7c7c7;
@@ -197,7 +206,7 @@ span.fake-menu__status {
   font-size: 16px;
   height: 40px;
   padding: 0 16px;
-  text-shadow: 0 0 0 #006efc;
+  text-shadow: 0 0 0 #111820;
   vertical-align: middle;
   width: 100%;
 }
@@ -229,7 +238,7 @@ span.fake-menu__status {
   display: block;
 }
 span.listbox__arrow {
-  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
+  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
   background-repeat: no-repeat;
   background-position: right center;
   content: "";

diff --git a/dist/global/ds6/global.css b/dist/global/ds6/global.css
@@ -1,5 +1,5 @@
 body {
-  background-color: #f5f5f5;
+  background-color: #ffffff;
   color: #111820;
   font-family: "Helvetica Neue", Helvetica, Arial, Roboto, sans-serif;
   font-size: 0.875rem;

diff --git a/dist/grid/ds4/grid-full.css b/dist/grid/ds4/grid-full.css
@@ -1,5 +1,5 @@
 /*!
-Skin v3.3.2
+Skin v3.4.0
 Copyright 2017 eBay! Inc. All rights reserved.
 Licensed under the BSD License.
 https://github.com/eBay/skin/blob/master/LICENSE.txt"

diff --git a/dist/less/ds6/variables.less b/dist/less/ds6/variables.less
@@ -34,7 +34,7 @@
 @ds6-color-confirmation-background: @ds6-color-p032-green;
 @ds6-color-critical-text: @ds6-color-p013-red;
 @ds6-color-critical-background: @ds6-color-p011-red;
-@ds6-color-background-default: @ds6-color-g202-gray;
+@ds6-color-background-default: @ds6-color-g201-gray;
 @ds6-color-item-tile-background-visited: @ds6-color-g202-gray;
 @ds6-color-button-disabled-background: @ds6-color-g204-gray;
 @ds6-color-disabled: @ds6-color-g204-gray;

diff --git a/dist/less/mixins-common.less b/dist/less/mixins-common.less
@@ -6,8 +6,6 @@
 .clipped() {
     border: 0;
     clip: rect(1px, 1px, 1px, 1px);
-    -webkit-clip-path: inset(50%);
-    clip-path: inset(50%);
     height: 1px;
     overflow: hidden;
     padding: 0;
@@ -18,8 +16,6 @@
 
 .unclipped() {
     clip: auto;
-    -webkit-clip-path: none;
-    clip-path: none;
     height: auto;
     overflow: visible;
     white-space: normal;

diff --git a/dist/listbox/ds6/listbox.css b/dist/listbox/ds6/listbox.css
@@ -3,9 +3,6 @@
   box-sizing: border-box;
   width: 100%;
 }
-.listbox:hover > .listbox__control > input {
-  border-color: #4295ff;
-}
 .listbox__control > input {
   background-color: #ffffff;
   border: 1px solid #c7c7c7;
@@ -16,7 +13,7 @@
   font-size: 16px;
   height: 40px;
   padding: 0 16px;
-  text-shadow: 0 0 0 #006efc;
+  text-shadow: 0 0 0 #111820;
   vertical-align: middle;
   width: 100%;
 }
@@ -48,7 +45,7 @@
   display: block;
 }
 span.listbox__arrow {
-  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
+  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%278%27%20height%3D%275%27%3E%3Cpath%20fill%3D%22%2311820%22%20d%3D%22M0.758714126%2C0.14644663%20C0.585147774%2C-0.048815516%200.303741117%2C-0.0488155166%200.130174765%2C0.146446629%20C-0.0433915877%2C0.341708774%20-0.0433915882%2C0.658291264%200.130174763%2C0.85355341%20L3.68573029%2C4.85355339%20C3.85929664%2C5.04881554%204.1407033%2C5.04881554%204.31426965%2C4.85355339%20L7.86982523%2C0.853553392%20C8.04339159%2C0.658291247%208.04339159%2C0.341708758%207.86982524%2C0.146446611%20C7.69625889%2C-0.0488155358%207.41485223%2C-0.0488155372%207.24128588%2C0.146446608%20L3.99999997%2C3.79289322%20L0.758714126%2C0.14644663%20Z%22%3E%3C/path%3E%3C/svg%3E');
   background-repeat: no-repeat;
   background-position: right center;
   content: "";

diff --git a/dist/notice/ds4/notice-large.css b/dist/notice/ds4/notice-large.css
@@ -16,6 +16,9 @@ section.page-notice {
 .page-notice__status svg {
   margin-left: 16px;
 }
+.page-notice__status span {
+  margin-left: 16px;
+}
 .page-notice__cta,
 .flyout-notice__cta {
   margin-left: 16px;