@ebay/skin 15.0.0 → 15.1.0-1

package/dist/filter-menu-button/filter-menu-button.css

@@ -167,6 +167,18 @@ span.filter-menu-button__radio svg.icon--radio-checked {
 .filter-menu-button__item:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
+.filter-menu-button__item:disabled,
+.filter-menu-button__item[aria-disabled="true"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu-button__item:disabled span > svg,
+.filter-menu-button__item[aria-disabled="true"] span > svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu-button__item:disabled:hover,
+.filter-menu-button__item[aria-disabled="true"]:hover {
+  background-color: inherit;
+}
 .filter-menu-button__item:hover {
   background-color: var(--color-state-primary-hover);
 }
@@ -215,6 +227,18 @@ button.filter-menu-button__footer {
 button.filter-menu-button__footer:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
+button.filter-menu-button__footer:disabled,
+button.filter-menu-button__footer[aria-disabled="true"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu-button__footer:disabled span > svg,
+button.filter-menu-button__footer[aria-disabled="true"] span > svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu-button__footer:disabled:hover,
+button.filter-menu-button__footer[aria-disabled="true"]:hover {
+  background-color: inherit;
+}
 button.filter-menu-button__footer:focus,
 button.filter-menu-button__footer:hover {
   background-color: var(--color-state-primary-hover);

package/dist/floating-label/floating-label.css

@@ -23,9 +23,18 @@ label.floating-label__label {
   width: calc(100% - 40px);
   z-index: 1;
 }
+.floating-label--opaque label.floating-label__label {
+  background-color: var(--floating-label-background-color, var(--color-background-secondary));
+  padding-top: 3px;
+  top: -3px;
+  width: calc(100% - 40px);
+}
 label.floating-label__label--focus {
   color: var(--color-background-inverse);
 }
+.floating-label--opaque label.floating-label__label--focus {
+  background-color: var(--floating-label-focus-background-color, var(--color-background-primary));
+}
 .floating-label--large label.floating-label__label {
   transform: scale(0.75, 0.75) translate(0, 3px);
 }
@@ -42,6 +51,9 @@ label.floating-label__label--animate {
 label.floating-label__label--disabled {
   color: var(--floating-label-disabled-color, var(--color-foreground-disabled));
 }
+.floating-label--opaque label.floating-label__label--disabled {
+  background-color: var(--floating-label-disabled-background-color, var(--color-background-secondary));
+}
 label.floating-label__label--invalid {
   color: var(--floating-label-invalid-color, var(--color-foreground-attention));
 }

package/dist/fullscreen-dialog/fullscreen-dialog.css

@@ -42,6 +42,9 @@
   align-self: center;
   flex: 1 1 auto;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .fullscreen-dialog__header > :last-child:not(:only-child) {
   margin-left: 16px;

package/dist/inline-notice/inline-notice.css

@@ -13,7 +13,7 @@ span.inline-notice {
   margin-top: 4px;
 }
 .inline-notice p {
-  margin: 4px 0;
+  margin: 3px 0;
 }
 .inline-notice a,
 .inline-notice button.fake-link {

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -41,6 +41,9 @@
   align-self: center;
   flex: 1 1 auto;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .lightbox-dialog__header > :last-child:not(:only-child) {
   margin-left: 16px;

package/dist/listbox/listbox.css

@@ -47,6 +47,12 @@ div.listbox__option[role="option"]:hover {
 div.listbox__option[role="option"]:active {
   font-weight: bold;
 }
+div.listbox__option[role="option"]:disabled,
+div.listbox__option[role="option"][aria-disabled="true"] {
+  color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
+}
 span.listbox__value {
   overflow: hidden;
   text-overflow: ellipsis;

package/dist/listbox-button/listbox-button.css

@@ -56,6 +56,17 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button button.btn--borderless[aria-expanded="true"] ~ .listbox-button__listbox {
   top: 41px;
 }
+.listbox-button .btn__label {
+  color: var(--listbox-button-label-color, var(--color-foreground-secondary));
+  margin-right: 3px;
+}
+.listbox-button--expanded .btn__label {
+  color: var(--listbox-button-label-color, var(--color-foreground-primary));
+}
+.listbox-button .btn__text {
+  font-weight: bold;
+  margin-right: auto;
+}
 .listbox-button__options[role="listbox"]:focus .listbox-button__option--active[role="option"] {
   background-color: var(--color-state-primary-hover);
 }
@@ -103,6 +114,12 @@ div.listbox-button__option[role="option"]:hover {
 div.listbox-button__option[role="option"]:active {
   font-weight: bold;
 }
+div.listbox-button__option[role="option"]:disabled,
+div.listbox-button__option[role="option"][aria-disabled="true"] {
+  color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
+}
 div.listbox-button__option[role="option"]:first-child {
   border-top-left-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
   border-top-right-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
@@ -127,3 +144,8 @@ span.listbox-button__value {
   margin-left: 0;
   margin-right: 8px;
 }
+[dir="rtl"] .listbox-button .btn__label {
+  color: var(--listbox-button-label-color, var(--color-foreground-secondary));
+  margin-left: 3px;
+  margin-right: 0;
+}

package/dist/menu/menu.css

@@ -88,6 +88,8 @@ a.fake-menu__item:not([href]),
 button.fake-menu__item[disabled],
 div.menu__item[role^="menuitem"][aria-disabled="true"] {
   color: var(--menu-menuitem-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
 }
 div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-small {
   opacity: 1;

package/dist/page-notice/page-notice.css

@@ -86,9 +86,12 @@ span[role="region"].page-notice {
   grid-row: 1;
   text-align: right;
 }
-/* support legacy 6.5 notice with heading + paragaphs */
 .page-notice__main p {
   font-size: 0.875rem;
+  margin: 2px 0 0;
+}
+/* support legacy 6.5 notice with heading + paragaphs */
+.page-notice__main .page-notice__title ~ p {
   margin: 4px 0 0;
 }
 p.page-notice__cta {

package/dist/panel-dialog/panel-dialog.css

@@ -45,6 +45,9 @@
   align-self: center;
   flex: 1 1 auto;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .panel-dialog__header > :last-child:not(:only-child) {
   margin-left: 16px;

package/dist/section-notice/section-notice.css

@@ -2,22 +2,25 @@
   background-color: var(--section-notice-default-background-color, var(--color-background-secondary));
   border-radius: var(--section-notice-border-radius, var(--border-radius-50));
   font-size: 0.875rem;
-  justify-content: flex-start;
   margin: 8px 0;
   padding: 16px;
 }
 div[role="region"].section-notice,
 section.section-notice {
-  display: flex;
+  display: grid;
+  grid-template-columns: 32px auto auto auto;
 }
 span[role="region"].section-notice {
-  display: inline-flex;
+  display: grid;
 }
 .section-notice__title {
   font-size: 0.875rem;
   font-weight: normal;
   margin: 0;
 }
+.section-notice__cta a {
+  white-space: nowrap;
+}
 /* legacy version with separate bold heading */
 .section-notice__title:not(:only-child) {
   font-weight: bold;
@@ -38,27 +41,38 @@ span[role="region"].section-notice {
 .section-notice a:hover {
   color: var(--section-notice-foreground-color, var(--color-foreground-primary));
 }
+.section-notice .icon {
+  vertical-align: top;
+}
 .section-notice__header {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding-right: 12px;
+  grid-column: 1;
+  grid-row: 1;
+  height: 16px;
+  padding-right: 16px;
 }
-.section-notice__main,
-.section-notice__footer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+.section-notice__main {
+  grid-column: 2;
+  grid-row: 1;
+  padding-right: 16px;
 }
 .section-notice__footer {
-  flex-shrink: 0;
-  margin-left: auto;
-  padding-left: 0;
-  width: auto;
+  grid-column: 4;
+  grid-row: 1;
+  justify-self: end;
 }
-/* support legacy 6.5 notice with heading + paragaphs */
 .section-notice__main p {
   font-size: 0.875rem;
+  margin: 0;
+}
+p.section-notice__cta {
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: start;
+  margin-right: 16px;
+  margin-top: 16px;
+}
+/* support legacy 6.5 notice with heading + paragaphs */
+.section-notice__main .section-notice__title ~ p {
   margin: 4px 0 0;
 }
 /* LARGE SCREEN ADJUSTMENTS */
@@ -68,6 +82,14 @@ span[role="region"].section-notice {
     flex-wrap: nowrap;
     margin: 16px 0;
   }
+  p.section-notice__cta {
+    grid-column: 4;
+    grid-row: 1;
+    justify-self: end;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-right: 16px;
+  }
   .section-notice__footer {
     margin-top: 0;
     padding-left: 16px;
@@ -78,8 +100,16 @@ span[role="region"].section-notice {
   padding-right: 0;
 }
 [dir="rtl"] .section-notice__footer {
+  justify-self: start;
   margin-left: initial;
   margin-right: auto;
   padding-left: initial;
   padding-right: 0;
 }
+[dir="rtl"] .section-notice__main {
+  padding-right: 0;
+}
+[dir="rtl"] p.page-notice__cta {
+  margin-left: 16px;
+  padding-left: 16px;
+}

package/dist/tourtip/tourtip.css

@@ -33,6 +33,7 @@ span.tourtip__mask {
   display: flex;
   padding: 8px 16px;
   word-break: break-word;
+  flex-wrap: wrap;
 }
 .tourtip__cell a {
   color: var(--tourtip-foreground-color, var(--color-foreground-primary));
@@ -42,6 +43,7 @@ span.tourtip__mask {
 }
 .tourtip__content {
   flex-grow: 1;
+  flex-basis: 0;
 }
 .tourtip__content p {
   margin: 0;
@@ -59,6 +61,7 @@ button.tourtip__close {
   padding: 0;
   white-space: nowrap;
   width: 32px;
+  outline-offset: -2px;
 }
 button.tourtip__close > svg {
   fill: currentColor;
@@ -143,6 +146,31 @@ span.tourtip__heading {
 .tourtip--expanded .tourtip__overlay {
   display: block;
 }
+.tourtip__footer {
+  align-items: center;
+  display: flex;
+  justify-content: end;
+  margin-top: 16px;
+  width: 100%;
+}
+.tourtip__footer > button:not(:last-child),
+.tourtip__footer > a:not(:last-child) {
+  margin-right: 8px;
+}
+.tourtip__footer > .fake-link,
+.tourtip__footer > a {
+  color: var(--color-foreground-primary);
+  text-decoration: none;
+}
+.tourtip__footer > .fake-link:hover:not(:disabled),
+.tourtip__footer > a:hover:not(:disabled) {
+  color: var(--color-foreground-primary);
+  text-decoration: underline;
+}
+.tourtip__index {
+  color: var(--tourtip-index-color, var(--color-foreground-secondary));
+  flex: 1;
+}
 @media (min-width: 601px) {
   .tourtip__overlay {
     max-width: 400px;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "15.0.0",
+    "version": "15.1.0-1",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -48,31 +48,32 @@
         "verify": "node scripts verify",
         "version": "node scripts/jekyll-config && npm run build:storybook && npm run build && git add -A dist docs",
         "transpile": "babel docs/src/js --out-dir docs/_babel",
-        "snapshots": "npx gulp runSnapshots --stories $STORIES",
-        "snapshots:dry": "npx gulp runSnapshots --dry yes --stories $STORIES",
-        "snapshots:execute": "percy storybook ./docs/storybook --include",
-        "snapshots:execute:dry": "percy storybook ./docs/storybook --dry-run --include",
-        "snapshots:all": "percy storybook ./docs/storybook --include '.*'",
-        "snapshots:all:dry": "percy storybook --dry-run ./docs/storybook --include '.*'",
+        "build:snapshots": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 build-storybook -o ./.storybook-percy",
+        "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
+        "snapshots:dry": "npm run build:snapshots && npx gulp runSnapshots --dry yes --stories $STORIES",
+        "snapshots:execute": "npm run build:snapshots && percy storybook ./.storybook-percy --include",
+        "snapshots:execute:dry": "percy storybook ./.storybook-percy --dry-run --include",
+        "snapshots:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
+        "snapshots:all:dry": "npm run build:snapshots && percy storybook --dry-run ./.storybook-percy --include '.*'",
         "storybook": "npm run copy:assetsToStorybook && cross-env STORYBOOK_DS=6 start-storybook -s ."
     },
     "devDependencies": {
         "@babel/cli": "^7.18.10",
-        "@babel/core": "^7.18.13",
-        "@babel/preset-env": "^7.18.10",
-        "@commitlint/cli": "^17.0.2",
-        "@commitlint/config-conventional": "^17.0.2",
-        "@ebay/browserslist-config": "^2.2.0",
-        "@percy/cli": "^1.10.0",
+        "@babel/core": "^7.19.1",
+        "@babel/preset-env": "^7.19.1",
+        "@commitlint/cli": "^17.1.2",
+        "@commitlint/config-conventional": "^17.1.0",
+        "@ebay/browserslist-config": "^2.4.1",
+        "@percy/cli": "^1.10.4",
         "@percy/storybook": "^4.3.1",
-        "@storybook/builder-webpack5": "^6.5.10",
-        "@storybook/html": "^6.5.10",
-        "@storybook/manager-webpack5": "^6.5.10",
+        "@storybook/builder-webpack5": "^6.5.12",
+        "@storybook/html": "^6.5.12",
+        "@storybook/manager-webpack5": "^6.5.12",
         "babel-loader": "^8.2.5",
         "browser-sync": "^2.27.10",
         "btoa": "^1",
         "cross-env": "^7",
-        "eslint": "^8.22.0",
+        "eslint": "^8.24.0",
         "eslint-config-ebay": "^1",
         "eslint-config-prettier": "^8",
         "eslint-plugin-prettier": "^4",
@@ -116,21 +117,20 @@
         "mkdirp": "^1",
         "ncp": "^2",
         "npm-run-all": "^4",
-        "percy": "~0.28.1",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^7.0.0",
         "prettier": "^2.7.1",
         "rimraf": "^3",
-        "stylelint": "^14.11.0",
+        "stylelint": "^14.12.1",
         "stylelint-config-prettier": "^9",
         "stylelint-config-standard": "^28",
-        "stylelint-no-unsupported-browser-features": "^5.0.1",
+        "stylelint-no-unsupported-browser-features": "^5.0.4",
         "stylelint-order": "^5",
         "stylelint-prettier": "^2",
         "svgo": "^2.7.0",
         "webpack": "^5.74.0",
         "webpack-cli": "^4.10.0",
-        "winston": "^3.7.2",
+        "winston": "^3.8.2",
         "xmlserializer": "^0.6.1",
         "yargs": "^17.5.1"
     },

package/src/less/drawer-dialog/drawer-dialog.less

@@ -16,6 +16,10 @@
     .dialog-header-content();
 }
 
+.drawer-dialog__header .fake-link {
+    text-decoration: none;
+}
+
 .drawer-dialog__handle {
     background-color: transparent;
     border: none;
@@ -30,12 +34,12 @@
 
 // Added :after class in order to increase parent hit box
 .drawer-dialog__handle::after {
-    .background-color-token(dialog-handle-color, color-foreground-secondary);
-    border-radius: 5px;
+    .background-color-token(dialog-handle-color, color-stroke-default);
+    border-radius: 3px;
     content: "";
     display: block;
-    height: 3px;
-    width: 20px;
+    height: 2px;
+    width: 24px;
 }
 
 .drawer-dialog__main {
@@ -61,7 +65,8 @@
 }
 
 // inherits from .icon-btn
-button.drawer-dialog__close {
+// Added icon button selector so it doesn't override fake-link
+button.icon-button.drawer-dialog__close {
     background-color: transparent;
     border: 0;
     height: auto;