@ebay/skin 18.0.8 → 18.1.0

package/dist/textbox/textbox.css

@@ -199,6 +199,7 @@ textarea.textbox__control[readonly]:focus {
     text-decoration: underline;
 }
 
-.textbox--fluid {
+.textbox--fluid,
+.textbox--fluid .textbox__control {
     width: 100%;
 }

package/dist/toggle-button-group/toggle-button-group.css

@@ -9,7 +9,7 @@
     --row-list-toggle-buttons-sm: 2;
     --row-list-toggle-buttons-md: 3;
     --row-list-toggle-buttons-xl: 5;
-    --row-gallery-toggle-buttons-min: 1;
+    --row-gallery-toggle-buttons-min: 2;
     --row-gallery-toggle-buttons-xs: 2;
     --row-gallery-toggle-buttons-sm: 3;
     --row-gallery-toggle-buttons-md: 4;
@@ -20,6 +20,30 @@
     container: toggle-buttons-container/inline-size;
 }
 
+@supports not (contain: inline-size) {
+    @media (max-width: 320px) {
+        .toggle-button-group[data-columns-min="1"] ul {
+            grid-template-columns: repeat(1, 1fr);
+        }
+        .toggle-button-group[data-columns-min="2"] ul {
+            grid-template-columns: repeat(2, 1fr);
+        }
+        .toggle-button-group[data-columns-min="3"] ul {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+}
+@container toggle-buttons-container (inline-size < 320px) {
+    .toggle-button-group[data-columns-min="1"] ul {
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .toggle-button-group[data-columns-min="2"] ul {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .toggle-button-group[data-columns-min="3"] ul {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
 .toggle-button-group ul {
     display: grid;
     gap: var(--spacing-100);
@@ -43,12 +67,20 @@
     max-width: 100%;
     width: 100%;
 }
+.toggle-button-group--list-layout ul {
+    grid-template-columns: repeat(var(--row-list-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--list-layout .toggle-button {
     justify-content: left;
     max-width: 100%;
     min-width: auto;
 }
 
+.toggle-button-group--gallery-layout ul {
+    grid-template-columns: repeat(var(--row-gallery-toggle-buttons-min), 1fr);
+}
+
 .toggle-button-group--gallery-layout li {
     max-width: 100%;
 }

package/dist/tokens/evo-light.css

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

package/dist/utility/utility.css

@@ -92,6 +92,10 @@
     object-fit: contain;
 }
 
+.image-disabled {
+    filter: var(--color-media-disabled-filter);
+}
+
 .text-truncate {
     overflow: hidden;
     text-overflow: ellipsis;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "18.0.8",
+    "version": "18.1.0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [
@@ -9,7 +9,7 @@
         "Andrew Gliga <agliga4@gmail.com>",
         "Arthur Khachatryan <arthurk55@gmail.com>"
     ],
-    "homepage": "https://ebay.github.io/skin/",
+    "homepage": "https://opensource.ebay.com/skin/",
     "repository": {
         "type": "git",
         "url": "https://github.com/eBay/skin"
@@ -22,7 +22,7 @@
         "prepublishOnly": "node scripts gen",
         "postpublish": "node scripts clean",
         "build": "npm run build:css && npm run lint:js && npm run bundle && npm run build:site && npm run copy",
-        "build:css": "npm run lint:sass && rimraf dist && npm run bundle:css && npm run postcss && prettier dist --write && npm run lint:css",
+        "build:css": "npm run lint:sass && rimraf dist && npm run bundle:css && npm run postcss && node scripts/add-y-comments.js && prettier dist --write && npm run lint:css",
         "build:ci": "npm run build:css && npm run lint:js && npm run bundle && npm run copy",
         "build:jekyll": "node scripts/jekyll-config && bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
         "build:site": "npm run copy:svgToDocs && npm run build:jekyll",

package/scripts/add-y-comments.js

@@ -0,0 +1,33 @@
+// This is a hack added in order to allow the carousel to work in older parsers
+const fs = require("fs");
+const path = require("path");
+const currentDir = path.dirname(__dirname);
+const carousel = path.resolve(currentDir, "dist", "carousel");
+const carouselCSS = path.resolve(carousel, `carousel.css`);
+fs.readFile(carouselCSS, "utf8", function (err, data) {
+    if (err) {
+        return console.log(err);
+    }
+    const result = data
+        .replace(
+            /\@supports not (.|\n)+?\{/,
+            `@supports not /*!Y */
+      (
+            /*!Y */ (-webkit-scroll-snap-coordinate: 0 0) or /*!Y */
+            (-ms-scroll-snap-coordinate: 0 0) or /*!Y */
+            (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
+      ) {`,
+        )
+        .replace(
+            /\@supports \((.|\n)+?\{/,
+            `@supports (
+    /*!Y */ (-webkit-scroll-snap-coordinate: 0 0) or /*!Y */
+        (-ms-scroll-snap-coordinate: 0 0) or /*!Y */
+        (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
+) {`,
+        );
+
+    fs.writeFile(carouselCSS, result, "utf8", function (err) {
+        if (err) return console.log(err);
+    });
+});

package/scripts/develop-module_proper/code-generators/doc-generator.js

@@ -36,7 +36,6 @@ const getMainContent = (moduleId) => `
 
 const getMetadataContent = (moduleId) => `  ${moduleId}:
     ds-component: # module's relationship with the eBay Design System
-      group: # eBay Design System component group
       name: # eBay Design System component name
       version: # version of the eBay Design System component implemented in Skin
     status: # status, e.g. "beta", "deprecated", "in-progress"

package/src/sass/button/stories/button/base.stories.js

@@ -37,6 +37,18 @@ export const busy = () => `
 </button>
 `;
 
+export const busyLarge = () => `
+<button class="btn btn--large" aria-label="Busy">
+    <span class="btn__cell">
+        <span class="progress-spinner">
+            <svg class="icon icon--24" aria-hidden="true">
+                <use href="#icon-spinner-24"></use>
+            </svg>
+        </span>
+    </span>
+</button>
+`;
+
 export const formBusy = () => `
 <button class="btn btn--form" aria-label="Busy">
     <span class="btn__cell">

package/src/sass/details/details.scss

@@ -2,18 +2,20 @@
 @import "../mixins/private/token-mixins";
 
 summary.details__summary {
-    align-items: center;
-    box-sizing: border-box;
+    @include border-radius-token(expand-btn-border-radius, border-radius-50);
     @include color-token(
         details-summary-foreground-color,
-        color-foreground-accent
+        color-foreground-primary
     );
 
-    display: inline-block;
+    align-items: center;
+    box-sizing: border-box;
+    display: inline-flex;
+    font-size: var(--font-size-default);
+    font-weight: var(--font-weight-bold);
     list-style-position: inside;
     list-style-type: none; /* Remove details marker for non-webkit */
     padding: 12px 8px;
-    width: 100%;
 
     &::before {
         content: none;
@@ -24,14 +26,21 @@ summary.details__summary {
         display: none;
     }
 
-    &:hover,
-    &:focus {
-        color: var(--color-state-accent-hover);
+    &:focus,
+    &:hover {
+        background-color: var(--color-state-secondary-hover);
+        outline: 1;
+    }
+
+    &:active {
+        background-color: var(--color-state-secondary-active);
+        outline: 1;
     }
 }
 
 summary.details__summary--center {
-    text-align: center;
+    justify-content: center;
+    width: 100%;
 }
 
 summary.details__summary--small {
@@ -45,7 +54,7 @@ span.details__icon {
 
 /* progressive enhancement - override hidden SVG */
 span.details__icon[hidden] {
-    display: inline-block;
+    display: inline-flex;
 }
 
 details.details[open] {

package/src/sass/details/stories/cascade.stories.js

@@ -6,8 +6,8 @@ export const RTL = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--12" aria-hidden="true">
-                    <use href="#icon-chevron-down-12"></use>
+                <svg class="icon icon--16" aria-hidden="true">
+                    <use href="#icon-chevron-down-16"></use>
                 </svg>
             </span>
         </summary>
@@ -22,8 +22,8 @@ export const colour = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--12" aria-hidden="true">
-                    <use href="#icon-chevron-down-12"></use>
+                <svg class="icon icon--16" aria-hidden="true">
+                    <use href="#icon-chevron-down-16"></use>
                 </svg>
             </span>
         </summary>
@@ -38,8 +38,8 @@ export const fontSize = () => `
         <summary class="details__summary">
             <span class="details__label">Details</span>
             <span class="details__icon" hidden>
-                <svg class="icon icon--12" aria-hidden="true">
-                    <use href="#icon-chevron-down-12"></use>
+                <svg class="icon icon--16" aria-hidden="true">
+                    <use href="#icon-chevron-down-16"></use>
                 </svg>
             </span>
         </summary>

package/src/sass/details/stories/details.stories.js

@@ -5,8 +5,8 @@ export const closed = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--12" aria-hidden="true">
-                <use href="#icon-chevron-down-12"></use>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
     </summary>
@@ -19,8 +19,8 @@ export const open = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--12" aria-hidden="true">
-                <use href="#icon-chevron-down-12"></use>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
     </summary>
@@ -33,8 +33,8 @@ export const textSpacing = () => `
     <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--12" aria-hidden="true">
-                <use href="#icon-chevron-down-12"></use>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
     </summary>
@@ -47,8 +47,8 @@ export const centered = () => `
     <summary class="details__summary details__summary--center">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
-            <svg class="icon icon--12" aria-hidden="true">
-                <use href="#icon-chevron-down-12"></use>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
             </svg>
         </span>
     </summary>
@@ -59,6 +59,36 @@ export const centered = () => `
 export const small = () => `
 <details class="details" open>
     <summary class="details__summary details__summary--small">
+        <span class="details__label">Details</span>
+        <span class="details__icon" hidden>
+            <svg class="icon icon--16" aria-hidden="true">
+                <use href="#icon-chevron-down-16"></use>
+            </svg>
+        </span>
+    </summary>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</details>
+`;
+
+// Deprecated stories
+export const closed12pxIcon = () => `
+<details class="details">
+    <summary class="details__summary">
+        <span class="details__label">Details</span>
+        <span class="details__icon" hidden>
+            <svg class="icon icon--12" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </summary>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+</details>
+`;
+
+// Deprecated stories
+export const open12pxIcon = () => `
+<details class="details" open>
+    <summary class="details__summary">
         <span class="details__label">Details</span>
         <span class="details__icon" hidden>
             <svg class="icon icon--12" aria-hidden="true">

package/src/sass/icon/icon.scss

@@ -90,7 +90,7 @@ svg {
     }
 
     &.icon--disabled {
-        filter: var(--color-icon-disabled-filter);
+        filter: var(--color-media-disabled-filter);
     }
     &.icon--attention-filled {
         @include color-token(color-foreground-attention);

package/src/sass/phone-input/phone-input.scss

@@ -96,7 +96,7 @@
 
 .phone-input--disabled span.fflag,
 .phone-input--disabled svg.flag {
-    filter: var(--color-icon-disabled-filter);
+    filter: var(--color-media-disabled-filter);
 }
 
 .phone-input--disabled .textbox {

package/src/sass/progress-spinner/progress-spinner.scss

@@ -20,9 +20,9 @@
 }
 
 /* fixes wobble */
-.progress-spinner > svg.icon.icon--spinner-20,
-.progress-spinner > svg.icon.icon--spinner-24,
-.progress-spinner > svg.icon.icon--spinner-30 {
+.progress-spinner > svg.icon.icon--20,
+.progress-spinner > svg.icon.icon--24,
+.progress-spinner > svg.icon.icon--30 {
     height: inherit;
     margin: 0;
     max-height: inherit;

package/src/sass/textbox/stories/textbox.stories.js

@@ -59,8 +59,8 @@ export const errorWithValue = () => `
 `;
 
 export const fluid = () => `
-<div class="textbox">
-    <input class="textbox__control textbox__control--fluid" type="text" placeholder="placeholder text" />
+<div class="textbox textbox--fluid">
+    <input class="textbox__control" type="text" placeholder="placeholder text" />
 </div>
 `;
 

package/src/sass/textbox/textbox.scss

@@ -242,6 +242,7 @@ textarea.textbox__control[readonly]:focus {
     text-decoration: underline;
 }
 
-.textbox--fluid {
+.textbox--fluid,
+.textbox--fluid .textbox__control {
     width: 100%;
 }

package/src/sass/toggle-button-group/stories/gallery-layout-exceptions.stories.js

@@ -2,6 +2,123 @@ export default {
     title: "Skin/Toggle Button Group/Gallery Layout/Layouts Exceptions",
 };
 
+export const minContainer1button = () => `
+<div style="width: 240px; border: 1px dashed orange;">
+    <div class="toggle-button-group toggle-button-group--gallery-layout" data-columns-min="1">
+        <ul aria-label="Buttons">
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false">
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 30%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-profile-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+            <li>
+                <button type="button" class="toggle-button" aria-pressed="false"> 
+                    <span class="toggle-button__image-container">
+                        <span class="toggle-button__image" style="background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-square-pic.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-position: center 15%;">
+                        </span>
+                    </span>
+                    <span class="toggle-button__content">
+                        <span class="toggle-button__title">Gallery Layout Title</span>
+                        <span class="toggle-button__subtitle">Subtitle</span>
+                    </span>
+                </button>
+            </li>
+        </ul>
+    </div>
+</div>
+`;
+
 export const _320container1button = () => `
 <div style="width: 320px; border: 1px dashed orange;">
     <div class="toggle-button-group toggle-button-group--gallery-layout" data-columns-xs="1">