@ebay/skin 17.0.1 → 17.1.0-0

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

@@ -68,10 +68,10 @@ label.floating-label__label--invalid {
   padding-top: 23px;
 }
 .floating-label .select select {
-  line-height: 52px;
+  line-height: 52px !important;
 }
 .floating-label .select--large select {
-  line-height: 60px;
+  line-height: 60px !important;
 }
 [dir="rtl"] label.floating-label__label {
   left: initial;

package/dist/icon/icon.css

@@ -2816,8 +2816,7 @@ svg.icon {
   vertical-align: middle;
 }
 svg.icon--disabled {
-  color: var(--color-foreground-disabled);
-  fill: currentColor;
+  filter: var(--color-icon-disabled-filter);
 }
 svg.icon--attention-filled-16,
 svg.icon--attention-filled-24 {

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

@@ -44,12 +44,12 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button button[aria-invalid="true"] {
   border-color: var(--listbox-button-invalid-border-color, var(--color-stroke-attention));
 }
-.listbox-button button.btn--form {
+.listbox-button:not(.listbox-button--error) button.btn--form {
   border-color: var(--listbox-button-border-color, var(--color-stroke-default));
 }
-.listbox-button button.btn--form:hover,
-.listbox-button button.btn--form:focus,
-.listbox-button button.btn--form:active {
+.listbox-button:not(.listbox-button--error) button.btn--form:hover,
+.listbox-button:not(.listbox-button--error) button.btn--form:focus,
+.listbox-button:not(.listbox-button--error) button.btn--form:active {
   border-color: inherit;
 }
 .listbox-button button.expand-btn--borderless,
@@ -71,11 +71,12 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button.listbox-button--form button {
   background-color: var(--listbox-button-background-color, var(--color-background-secondary));
   border-color: var(--listbox-button-border-color, var(--color-stroke-default));
+  color: var(--listbox-button-foreground-color, var(--color-foreground-primary));
 }
 .listbox-button.listbox-button--form button[disabled],
 .listbox-button.listbox-button--form button[aria-disabled="true"] {
   border-color: var(--listbox-button-disabled-border-color, var(--color-background-disabled));
-  color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-disabled));
+  color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-primary));
 }
 .listbox-button.listbox-button--form button:focus {
   background-color: var(--combobox-textbox-focus-background-color, var(--color-background-primary));
@@ -83,6 +84,10 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button.listbox-button--form button[aria-invalid="true"] {
   border-color: var(--listbox-button-invalid-border-color, var(--color-stroke-attention));
 }
+.listbox-button.listbox-button--error button:not(.btn--borderless) {
+  background-color: var(--listbox-button-background-color, var(--color-background-secondary));
+  border-color: var(--listbox-button-border-color, var(--color-stroke-attention));
+}
 .listbox-button .btn__label {
   color: var(--listbox-button-label-color, var(--color-foreground-secondary));
   margin-right: 3px;
@@ -90,6 +95,10 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button--expanded .btn__label {
   color: var(--listbox-button-label-color, var(--color-foreground-primary));
 }
+.listbox-button.listbox-button--error button .btn__label,
+.listbox-button.listbox-button--error button .btn__floating-label {
+  color: var(--listbox-button-label-color, var(--color-foreground-attention));
+}
 .listbox-button .btn__text {
   font-weight: bold;
   margin-right: auto;

package/dist/skeleton/skeleton.css

@@ -84,21 +84,21 @@ span.skeleton__image,
 span.skeleton__textbox {
   display: inline-block;
 }
-span.skeleton__avatar + span,
-span.skeleton__button + span,
-span.skeleton__text + span,
-span.skeleton__image + span,
-span.skeleton__textbox + span {
-  -webkit-margin-start: var(--spacing-100);
-          margin-inline-start: var(--spacing-100);
-}
-div.skeleton__avatar,
-div.skeleton__button,
-div.skeleton__text,
-div.skeleton__image,
-div.skeleton__textbox {
-  -webkit-margin-before: var(--spacing-150);
-          margin-block-start: var(--spacing-150);
+span.skeleton__avatar:not(:last-child),
+span.skeleton__button:not(:last-child),
+span.skeleton__text:not(:last-child),
+span.skeleton__image:not(:last-child),
+span.skeleton__textbox:not(:last-child) {
+  -webkit-margin-end: var(--spacing-100);
+          margin-inline-end: var(--spacing-100);
+}
+div.skeleton__avatar:not(:last-child),
+div.skeleton__button:not(:last-child),
+div.skeleton__text:not(:last-child),
+div.skeleton__image:not(:last-child),
+div.skeleton__textbox:not(:last-child) {
+  -webkit-margin-after: var(--spacing-150);
+          margin-block-end: var(--spacing-150);
 }
 .skeleton--elevated {
   --skeleton-background: var(--color-loading-fill-elevated);

package/dist/tokens/evo-light.css

@@ -172,4 +172,5 @@
         var(--color-ai-solid-green-subtle) 66%,
         var(--color-ai-solid-green-subtle) 100%
     );
+    --color-icon-disabled-filter: grayscale(1) opacity(0.25);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "17.0.1",
+    "version": "17.1.0-0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -69,7 +69,7 @@
         "@storybook/html": "^7.5.3",
         "@storybook/html-webpack5": "^7.5.3",
         "babel-loader": "^9.1.2",
-        "browser-sync": "^2.29.3",
+        "browser-sync": "^3.0.2",
         "btoa": "^1",
         "cross-env": "^7",
         "eslint": "^8.54.0",
@@ -119,11 +119,11 @@
         "prettier": "^3.1.0",
         "rimraf": "^5",
         "storybook": "^7.5.3",
-        "stylelint": "^15.6.2",
-        "stylelint-config-standard": "^34",
-        "stylelint-no-unsupported-browser-features": "^7",
+        "stylelint": "^16.1.0",
+        "stylelint-config-standard": "^36",
+        "stylelint-no-unsupported-browser-features": "^8",
         "stylelint-order": "^6",
-        "stylelint-prettier": "^4",
+        "stylelint-prettier": "^5",
         "svgo": "^3.0.4",
         "webpack": "^5.83.0",
         "webpack-cli": "^5.1.1",
@@ -152,5 +152,8 @@
     "lint-staged": {
         "*.{js,css,md,less,json}": "prettier --write",
         "*.{css,less}": "stylelint --config .stylelintrc"
+    },
+    "dependencies": {
+        "-": "^0.0.1"
     }
 }

package/src/less/avatar/avatar.less

@@ -1,10 +1,28 @@
 @import "../variables/variables.less";
 
+// These are temporary colors until we get the new palette
+@_avatar-teal-foreground-color: #002a69;
+@_avatar-teal-background-color: #84b4fb;
+@_avatar-light-teal-foreground-color: #07465a;
+@_avatar-light-teal-background-color: #44ccd5;
+@_avatar-green-foreground-color: #1b561a;
+@_avatar-green-background-color: #4ce160;
+@_avatar-lime-foreground-color: #4e4e0c;
+@_avatar-lime-background-color: #c1d737;
+@_avatar-yellow-foreground-color: #553b06;
+@_avatar-yellow-background-color: #ffbd14;
+@_avatar-orange-foreground-color: #562501;
+@_avatar-orange-background-color: #ff8806;
+@_avatar-pink-foreground-color: #4b112d;
+@_avatar-pink-background-color: #f79cc8;
+@_avatar-magenta-foreground-color: #3e135f;
+@_avatar-magenta-background-color: #cc9ef0;
+
 .avatar {
     align-items: center;
-    background-color: var(--color-marketing-teal-background-5);
+    background-color: @_avatar-teal-background-color;
     border-radius: 50%;
-    color: var(--color-marketing-teal-foreground-5);
+    color: @_avatar-teal-foreground-color;
     display: inline-flex;
     font-size: var(--font-size-large-2);
     font-weight: var(--font-weight-bold);
@@ -26,38 +44,43 @@
 }
 
 .avatar--teal {
-    background-color: var(--color-marketing-teal-background-5);
-    color: var(--color-marketing-teal-foreground-5);
+    background-color: @_avatar-teal-background-color;
+    color: @_avatar-teal-foreground-color;
 }
 
 .avatar--light-teal {
-    background-color: var(--color-marketing-teal-background-3);
-    color: var(--color-marketing-teal-foreground-3);
+    background-color: @_avatar-light-teal-background-color;
+    color: @_avatar-light-teal-foreground-color;
 }
 
 .avatar--green {
-    background-color: var(--color-marketing-green-background-3);
-    color: var(--color-marketing-green-foreground-3);
+    background-color: @_avatar-green-background-color;
+    color: @_avatar-green-foreground-color;
 }
 
 .avatar--lime {
-    background-color: var(--color-marketing-lime-background-4);
-    color: var(--color-marketing-lime-foreground-4);
+    background-color: @_avatar-lime-background-color;
+    color: @_avatar-lime-foreground-color;
 }
 
 .avatar--yellow {
-    background-color: var(--color-marketing-yellow-background-3);
-    color: var(--color-marketing-yellow-foreground-3);
+    background-color: @_avatar-yellow-background-color;
+    color: @_avatar-yellow-foreground-color;
 }
 
 .avatar--orange {
-    background-color: var(--color-marketing-orange-background-3);
-    color: var(--color-marketing-orange-foreground-3);
+    background-color: @_avatar-orange-background-color;
+    color: @_avatar-orange-foreground-color;
 }
 
 .avatar--magenta {
-    background-color: var(--color-marketing-magenta-background-4);
-    color: var(--color-marketing-magenta-foreground-4);
+    background-color: @_avatar-magenta-background-color;
+    color: @_avatar-magenta-foreground-color;
+}
+
+.avatar--pink {
+    background-color: @_avatar-pink-background-color;
+    color: @_avatar-pink-foreground-color;
 }
 
 .avatar--32,

package/src/less/eek/eek.less

@@ -6,7 +6,7 @@
 @eek-arrow-size: unit(sqrt(392), px);
 // These are custom colors not part of ebay palette
 @eek-rating-color-1: #00a650;
-@eek-rating-color-2: #adbd38;
+@eek-rating-color-2: #4dbd38;
 @eek-rating-color-3: #b3db18;
 @eek-rating-color-4: #fff200;
 @eek-rating-color-5: #fab20b;

package/src/less/field/field.less

@@ -90,9 +90,14 @@ div.field__group {
     margin-left: 8px;
 }
 
+.field__description .icon {
+    display: inline-block;
+    margin-right: var(--spacing-50);
+}
+
 // if using a div for description, it implies it's always at bottom of field
 div.field__description {
-    margin: 2px 0 0;
+    margin: var(--spacing-100) 0 0;
 }
 
 .field__row {

package/src/less/field/stories/stacked.stories.js

@@ -95,7 +95,7 @@ export const group = () => `
 
 export const descriptions = () => `
 <div class="field">
-    <label class="field__label field__label--stacked" for="field-descriptions-1">Field 1</label>
+    <label class="field__label field__label--stacked" for="field-descriptions-1">Textbox Field - Default</label>
     <div class="field__control textbox">
         <input aria-describedby="field-descriptions-1-description" class="textbox__control textbox__control--fluid" id="field-descriptions-1" type="text" />
     </div>
@@ -104,7 +104,7 @@ export const descriptions = () => `
     </div>
 </div>
 <div class="field">
-    <label class="field__label field__label--stacked" for="field-descriptions-2">Field 2</label>
+    <label class="field__label field__label--stacked" for="field-descriptions-2">Textbox Field - Confirmation</label>
     <div class="field__control textbox">
         <input aria-describedby="field-descriptions-2-description" class="textbox__control textbox__control--fluid" id="field-descriptions-2" type="text" />
     </div>
@@ -113,7 +113,7 @@ export const descriptions = () => `
     </div>
 </div>
 <div class="field">
-    <label class="field__label field__label--stacked" for="field-descriptions-3">Field 3</label>
+    <label class="field__label field__label--stacked" for="field-descriptions-3">Textbox Field - Information</label>
     <div class="field__control textbox">
         <input aria-describedby="field-descriptions-3-description" class="textbox__control textbox__control--fluid" id="field-descriptions-3" type="text" />
     </div>
@@ -122,12 +122,72 @@ export const descriptions = () => `
     </div>
 </div>
 <div class="field">
-    <label class="field__label field__label--stacked" for="field-descriptions-4">Field 4</label>
+    <label class="field__label field__label--stacked" for="field-descriptions-4">Textbox Field - Error</label>
     <div class="field__control textbox">
-        <input aria-describedby="field-descriptions-4-description" class="textbox__control textbox__control--fluid" id="field-descriptions-4" type="text" />
+        <input aria-describedby="field-descriptions-4-description" class="textbox__control textbox__control--fluid" id="field-descriptions-4" type="text" aria-invalid="true" />
     </div>
     <div class="field__description field__description--attention" id="field-descriptions-4-description">
+        <svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-attention-filled-16"></use>
+        </svg>
         <span>Field description - error</span>
     </div>
 </div>
+
+<span class="field">
+    <label class="field__label field__label--stacked" for="field-listbox-button-1">Listbox Button Field - Error</label>
+    <div class="field__control textbox">
+        <span class="listbox-button listbox-button--form listbox-button--error" data-makeup-auto-select="false">
+            <button class="btn btn--form" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox" aria-describedby="field-listbox-button-1-description">
+                <span class="btn__cell">
+                    <span class="btn__label">Color: </span>
+                    <span class="btn__text">-</span>
+                    <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                        <use href="#icon-chevron-down-12"></use>
+                    </svg>
+                </span>
+            </button>
+            <div class="listbox-button__listbox">
+                <div class="listbox-button__options" role="listbox">
+                    <div class="listbox-button__option" role="option">
+                        <span class="listbox-button__value">Red</span>
+                        <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                            <use href="#icon-tick-16"></use>
+                        </svg>
+                    </div>
+                    <div class="listbox-button__option" role="option">
+                        <span class="listbox-button__value">Blue</span>
+                        <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                            <use href="#icon-tick-16"></use>
+                        </svg>
+                    </div>
+                    <div class="listbox-button__option" role="option" aria-disabled="true">
+                        <span class="listbox-button__value">Yellow</span>
+                        <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                            <use href="#icon-tick-16"></use>
+                        </svg>
+                    </div>
+                    <div class="listbox-button__option" role="option">
+                        <span class="listbox-button__value">Green</span>
+                        <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                            <use href="#icon-tick-16"></use>
+                        </svg>
+                    </div>
+                </div>
+            </div>
+            <select id="field-listbox-button-1" hidden="" class="listbox__native">
+                <option value="1"></option>
+                <option value="2"></option>
+                <option value="3"></option>
+                <option value="4"></option>
+            </select>
+        </span>
+    </div>
+    <div class="field__description field__description--attention" id="field-listbox-button-1-description">
+        <svg class="icon icon--attention-filled-16" focusable="false" height="10" width="14" aria-hidden="true">
+            <use href="#icon-attention-filled-16"></use>
+        </svg>
+        <span>There was an error</span>
+    </div>
+</span>
 `;

package/src/less/floating-label/floating-label.less

@@ -91,12 +91,15 @@ label.floating-label__label--invalid {
     padding-top: 23px;
 }
 
+// We are setting line-height to important because WCAG specs allow setting 1.5 times the line height
+// If we do not set it to important, the line height will be overridden causing text-overlap
+// See https://github.com/eBay/skin/issues/2253
 .floating-label .select select {
-    line-height: 52px;
+    line-height: 52px !important;
 }
 
 .floating-label .select--large select {
-    line-height: 60px;
+    line-height: 60px !important;
 }
 
 // RTL

package/src/less/icon/icon.less

@@ -7,8 +7,7 @@ svg {
         .icon-base-mixin();
     }
     &.icon--disabled {
-        .color-token(color-foreground-disabled);
-        fill: currentColor;
+        filter: var(--color-icon-disabled-filter);
     }
     &.icon--attention-filled-16,
     &.icon--attention-filled-24 {

package/src/less/listbox-button/listbox-button.less

@@ -42,7 +42,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
     .border-color-token(listbox-button-invalid-border-color, color-stroke-attention);
 }
 
-.listbox-button button.btn--form {
+.listbox-button:not(.listbox-button--error) button.btn--form {
     .border-color-token(listbox-button-border-color, color-stroke-default);
 
     &:hover,
@@ -72,12 +72,13 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button.listbox-button--form button {
     .background-color-token(listbox-button-background-color, color-background-secondary);
     .border-color-token(listbox-button-border-color, color-stroke-default);
+    .color-token(listbox-button-foreground-color, color-foreground-primary);
 }
 
 .listbox-button.listbox-button--form button[disabled],
 .listbox-button.listbox-button--form button[aria-disabled="true"] {
     .border-color-token(listbox-button-disabled-border-color, color-background-disabled);
-    .color-token(listbox-button-disabled-foreground-color, color-foreground-disabled);
+    .color-token(listbox-button-disabled-foreground-color, color-foreground-primary);
 }
 
 .listbox-button.listbox-button--form button:focus {
@@ -88,6 +89,11 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
     .border-color-token(listbox-button-invalid-border-color, color-stroke-attention);
 }
 
+.listbox-button.listbox-button--error button:not(.btn--borderless) {
+    .background-color-token(listbox-button-background-color, color-background-secondary);
+    .border-color-token(listbox-button-border-color, color-stroke-attention);
+}
+
 .listbox-button .btn__label {
     .color-token(listbox-button-label-color, color-foreground-secondary);
     margin-right: 3px;
@@ -97,6 +103,11 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
     .color-token(listbox-button-label-color, color-foreground-primary);
 }
 
+.listbox-button.listbox-button--error button .btn__label,
+.listbox-button.listbox-button--error button .btn__floating-label {
+    .color-token(listbox-button-label-color, color-foreground-attention);
+}
+
 .listbox-button .btn__text {
     font-weight: bold;
     margin-right: auto;

package/src/less/listbox-button/stories/base.stories.js

@@ -287,3 +287,81 @@ export const longOption = () => `
     </div>
 </span>
 `;
+
+export const borderless = () => `
+<span class="listbox-button">
+    <button class="btn btn--borderless" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
+        <span class="btn__cell">
+            <span class="btn__label">Quantity: </span>
+            <span class="btn__text">1</span>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </button>
+    <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox" tabindex="0">
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">1</span>
+                <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">2</span>
+                <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">3</span>
+                <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+        </div>
+    </div>
+</span>
+`;
+
+export const floatingLabelSelected = () => `
+<span class="listbox-button">
+    <button class="btn btn--form btn--floating-label" style="min-width: 150px" aria-expanded="false" aria-haspopup="listbox">
+        <span class="btn__cell">
+            <span class="btn__floating-label">Color:</span>
+            <span class="btn__text">Blue</span>
+            <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </button>
+    <div class="listbox-button__listbox">
+        <div class="listbox-button__options" role="listbox" tabindex="0">
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Red</span>
+                <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option" aria-selected="true">
+                <span class="listbox-button__value">Blue</span>
+                <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Yellow</span>
+                <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+            <div class="listbox-button__option" role="option">
+                <span class="listbox-button__value">Green</span>
+                <svg class="icon icon--tick-16" focusable="false" height="10" width="14">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+        </div>
+    </div>
+</span>
+`;