@ebay/skin 16.9.2 → 17.0.0

package/src/less/image-placeholder/image-placeholder.less

@@ -1,4 +1,9 @@
+@import "../variables/variables.less";
+@import "../mixins/private/token-mixins.less";
+
 svg.image-placeholder {
+    .color-token(color-foreground-primary);
+    fill: currentColor;
     height: inherit;
     width: inherit;
 }

package/src/less/infotip/infotip.less

@@ -15,9 +15,6 @@ span.infotip {
     .background-color-token(infotip-background-color, color-background-primary);
     .color-token(infotip-foreground-color, color-foreground-primary);
     display: none;
-    left: 0 - 6px;
-    margin-top: var(--spacing-200);
-    position: absolute;
 }
 
 .infotip__mask {
@@ -42,8 +39,6 @@ span.infotip__mask {
     .background-color-token(infotip-background-color, color-background-primary);
 
     .pointer-base();
-    .pointer-top();
-    .pointer-center();
 }
 
 .infotip__pointer--top-left {

package/src/less/infotip/stories/infotip.stories.js

@@ -32,7 +32,7 @@ export const expanded = () => `
             <use href="#icon-information-16"></use>
         </svg>
     </button>
-    <div class="infotip__overlay">
+    <div class="infotip__overlay" style="left: calc(50% - 16px); right: auto; top: calc(100% + 8px); bottom: auto;">
         <span class="infotip__pointer infotip__pointer--top-left"></span>
         <div class="infotip__mask">
             <div class="infotip__cell">
@@ -87,7 +87,7 @@ export const paragraphExpanded = () => `
                 <use href="#icon-information-16"></use>
             </svg>
         </button>
-        <span class="infotip__overlay">
+        <span class="infotip__overlay" style="left: calc(50% - 16px); right: auto; top: calc(100% + 8px); bottom: auto;">
             <span class="infotip__pointer infotip__pointer--top-left"></span>
             <span class="infotip__mask">
                 <span class="infotip__cell">

package/src/less/mixins/private/bubble-mixins.less

@@ -8,9 +8,13 @@
 .bubble(@border-radius-value: border-radius-50) {
     .border-radius-token(bubble-border-radius, @border-radius-value);
 
+    display: none;
     filter: var(--bubble-filter);
     font-size: 14px;
+    left: 0;
     max-width: 344px;
+    position: absolute;
+    top: 0;
     // kick in hardware acceleration for GPU processing - fixes issues with filter/display reflow/repaint
     transform: scale3d(1, 1, 1);
     width: max-content;

package/src/less/mixins/private/button-mixins.less

@@ -1,5 +1,4 @@
-@button-height-xsmall: 32px; // Rename to small after next major version
-@button-height-small: 40px; // Deprecated, use regular instead
+@button-height-small: 32px; // Rename to small after next major version
 @button-height-regular: 40px;
 @button-height-large: 48px;
 @button-padding-vertical-small: 6px;

package/src/less/mixins/private/token-mixins.less

@@ -6,6 +6,14 @@
     @{property}: var(~"--@{component-token}", var(~"--@{product-token}"));
 }
 
+.background-token(@token) {
+    .customPropertyToken(background-color, @token);
+}
+
+.background-token(@component-token, @product-token) {
+    .customPropertyToken(background, @component-token, @product-token);
+}
+
 .background-color-token(@token) {
     .customPropertyToken(background-color, @token);
 }

package/src/less/progress-stepper/progress-stepper.less

@@ -122,17 +122,6 @@ hr.progress-stepper__separator {
     );
 }
 
-// DEPRECATED remove progress-stepper__item--current in next major version
-.progress-stepper__item--attention[aria-current]
-    ~ hr.progress-stepper__separator,
-.progress-stepper__items--current
-    .progress-stepper__item[aria-current]
-    ~ hr.progress-stepper__separator {
-    .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
-
-    background-image: none;
-}
-
 .progress-stepper__text > * {
     margin: 0;
 }
@@ -171,19 +160,6 @@ hr.progress-stepper__separator {
     );
 }
 
-// DEPRECATED remove progress-stepper__item--current in next major version
-.progress-stepper--vertical
-    .progress-stepper__item--attention[aria-current]
-    ~ hr.progress-stepper__separator,
-.progress-stepper--vertical
-    .progress-stepper__items--current
-    .progress-stepper__item[aria-current]
-    ~ hr.progress-stepper__separator {
-    .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
-
-    background-image: none;
-}
-
 .progress-stepper--vertical .progress-stepper__items {
     display: block;
 }
@@ -228,16 +204,6 @@ hr.progress-stepper__separator {
             @_progress-stepper-active-gradient
         );
     }
-    // stylelint-enable no-descending-specificity
-
-    // DEPRECATED remove progress-stepper__item--current in next major version
-    .progress-stepper__items--current
-        .progress-stepper__item[aria-current]
-        ~ hr.progress-stepper__separator {
-        .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
-
-        background-image: none;
-    }
 
     .progress-stepper--vertical
         .progress-stepper__item[aria-current]

package/src/less/select/select.less

@@ -35,7 +35,7 @@ span.select {
 }
 
 .select--large select {
-    font-size: var(--font-size-18);
+    font-size: var(--font-size-medium);
     height: 48px;
 }
 

package/src/less/skeleton/skeleton.less

@@ -0,0 +1,208 @@
+@import "../variables/variables.less";
+@import "../mixins/private/button-mixins.less";
+@import "../mixins/private/token-mixins.less";
+
+.skeleton {
+    container-name: skeleton-container;
+    container-type: inline-size;
+    cursor: progress;
+    width: 100%;
+}
+
+.skeleton__avatar,
+.skeleton__button,
+.skeleton__text,
+.skeleton__image,
+.skeleton__textbox {
+    .background-token(skeleton-background, color-loading-fill);
+    width: 100%;
+}
+
+// TODO: Need to swap these with component css variables and expose it instead
+.skeleton__avatar {
+    border-radius: var(--avatar-border-radius, 50%);
+    height: 48px;
+    width: 48px;
+}
+
+.skeleton__button {
+    border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
+    height: @button-height-regular;
+}
+
+.skeleton__button--small {
+    border-radius: var(--btn-border-radius, calc(@button-height-small / 2));
+    height: @button-height-small;
+}
+
+.skeleton__button--large {
+    border-radius: var(--btn-border-radius, calc(@button-height-large / 2));
+    height: @button-height-large;
+}
+
+.skeleton__text {
+    border-radius: var(--text-border-radius, 3px);
+    height: 16px;
+    width: calc(100% - var(--spacing-300));
+}
+
+.skeleton__text::after {
+    height: 16px;
+    margin-top: calc(16px + var(--spacing-100));
+}
+
+.skeleton__text--large {
+    height: 24px;
+}
+
+.skeleton__text--large::after {
+    height: 24px;
+    margin-top: calc(24px + var(--spacing-100));
+}
+
+.skeleton__text--multiline {
+    margin-bottom: var(--spacing-300);
+    position: relative;
+    width: calc(100% - var(--spacing-300));
+}
+
+.skeleton__text--multiline::after {
+    background: inherit;
+    content: "";
+    position: absolute;
+    width: calc(100% - var(--spacing-700));
+}
+
+.skeleton__text--large.skeleton__text--multiline {
+    margin-bottom: var(--spacing-400);
+}
+
+.skeleton__textbox {
+    .border-radius-token(textbox-border-radius, border-radius-50);
+    height: 48px;
+}
+
+.skeleton__image {
+    .border-radius-token(image-border-radius, border-radius-50);
+    height: 100%;
+    max-width: initial;
+}
+
+// TODO: Use aspect-ratio : 1 / 1 to set as square when we have browser support, till then
+// using pseudo element to set as square
+.skeleton__image::after {
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+}
+
+span.skeleton__avatar,
+span.skeleton__button,
+span.skeleton__text,
+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 {
+    margin-inline-start: var(--spacing-100);
+}
+
+div.skeleton__avatar,
+div.skeleton__button,
+div.skeleton__text,
+div.skeleton__image,
+div.skeleton__textbox {
+    margin-block-start: var(--spacing-150);
+}
+
+.skeleton--elevated {
+    --skeleton-background: var(--color-loading-fill-elevated);
+}
+
+@media screen and (max-width: @_screen-size-SM) {
+    .skeleton {
+        --skeleton-background: var(--color-loading-shimmer);
+    }
+    .skeleton--elevated {
+        --skeleton-background: var(--color-loading-shimmer-elevated);
+    }
+}
+
+.skeleton--purple {
+    --skeleton-background: var(--color-loading-ai-gradient-purple-subtle);
+}
+
+.skeleton--green {
+    --skeleton-background: var(--color-loading-ai-gradient-green-subtle);
+}
+
+.skeleton--blue {
+    --skeleton-background: var(--color-loading-ai-gradient-blue-subtle);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    @keyframes loading-frames {
+        0% {
+            background-position: 0% 0%;
+        }
+        50% {
+            background-position: 45% 0%;
+        }
+        100% {
+            background-position: 90% 0%;
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .skeleton__avatar,
+    .skeleton__button,
+    .skeleton__text,
+    .skeleton__image,
+    .skeleton__textbox {
+        /*  setting animation-iteration-count to 6 (5000/833ms)    */
+        /*  so it does not exceed 5s per WCAG 2.2.2    */
+        animation:
+            fade-in 500ms forwards,
+            loading-frames 833ms 667ms linear 6;
+        animation-fill-mode: both;
+        background-size: 200%;
+    }
+}
+
+// A progressive enhancement to make the skeleton image rounded
+@container skeleton-container (width > 79px) {
+    .skeleton__image {
+        .border-radius-token(image-border-radius, border-radius-100);
+    }
+}
+
+[dir="rtl"] {
+    .skeleton__avatar,
+    .skeleton__button,
+    .skeleton__text,
+    .skeleton__image,
+    .skeleton__textbox {
+        animation-direction: normal, reverse;
+    }
+
+    .skeleton__text--multiline::after {
+        left: var(--spacing-700);
+    }
+}

package/src/less/skeleton/stories/base.stories.js

@@ -0,0 +1,56 @@
+export default { title: "Skin/Skeleton/Base" };
+
+export const avatar = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__avatar"></div>
+    </div>`;
+
+export const button = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__button"></div>
+    </div>`;
+
+export const buttonSmall = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__button skeleton__button--small"></div>
+    </div>`;
+
+export const buttonLarge = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__button skeleton__button--large"></div>
+    </div>`;
+
+export const textSmall = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__text "></div>
+    </div>`;
+
+export const textLarge = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__text skeleton__text--large"></div>
+    </div>`;
+
+export const textSmallMultiLine = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__text  skeleton__text--multiline"></div>
+    </div>`;
+
+export const textLargeMultiLine = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__text skeleton__text--large skeleton__text--multiline"></div>
+    </div>`;
+
+export const textBox = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__textbox"></div>
+    </div>`;
+
+export const smallImage = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__image" style="height: 75px; width: 75px;"></div>
+    </div>`;
+
+export const image = () =>
+    `<div class="skeleton" role="img" aria-label="loading">
+        <div class="skeleton__image" style="height: 250px; width: 250px;"></div>
+    </div>`;

package/src/less/skeleton/stories/composite.stories.js

@@ -0,0 +1,36 @@
+export default { title: "Skin/Skeleton/Composite" };
+
+export const tile = () =>
+    `<div class="skeleton skeleton--blue" role="img" aria-label="loading" style="width: 225px;">
+        <div class="skeleton__image" style="width: 225px; height: 225px"></div>
+        <div class="skeleton__text  skeleton__text--multiline"></div>
+    </div>`;
+
+export const inlineTiles = () =>
+    `<div class="skeleton skeleton--purple" role="img" aria-label="loading">
+        <span style="width: 225px; display: inline-block;">
+            <div class="skeleton__image" style="width: 225px; height: 225px"></div>
+            <div class="skeleton__text skeleton__text--multiline"></div>
+        </span>
+        <span style="width: 225px; display: inline-block;">
+            <div class="skeleton__image" style="width: 225px; height: 225px"></div>
+            <div class="skeleton__text skeleton__text--multiline"></div>
+        </span>
+        <span style="width: 225px; display: inline-block;">
+            <div class="skeleton__image" style="width: 225px; height: 225px"></div>
+            <div class="skeleton__text skeleton__text--multiline"></div>
+        </span>
+    </div>`;
+
+export const inlineSkeletons = () =>
+    `<div class="skeleton skeleton--green" role="img" aria-label="loading">
+        <span class="skeleton__avatar"></span>
+        <span class="skeleton__text  skeleton__text--multiline"
+        style="width: 200px; vertical-align: top;"></span>
+    </div>`;
+
+export const blockSkeletons = () =>
+    `<div class="skeleton skeleton--elevated" role="img" aria-label="loading">
+        <div class="skeleton__button"></div>
+        <div class="skeleton__button"></div>
+    </div>`;

package/src/less/skeleton/stories/rtl.stories.js

@@ -0,0 +1,7 @@
+export default { title: "Skin/Skeleton/RTL" };
+
+export const rtl = () =>
+    `<div class="skeleton" role="img" aria-label="loading" style="width: 225px;" dir="rtl">
+        <div class="skeleton__image" style="width: 225px; height: 225px"></div>
+        <div class="skeleton__text  skeleton__text--multiline"></div>
+    </div>`;

package/src/less/tooltip/stories/pointer.stories.js

@@ -5,14 +5,14 @@ const pointerStyles = {
         transform: "translateX(16px) translateY(-50%)",
         left: "100%",
         right: "auto",
-        top: "0",
+        top: "20px",
         bottom: "auto",
     },
     "left-top": {
         transform: "translateX(16px)",
         left: "100%",
         right: "auto",
-        top: "-25%",
+        top: "0",
         bottom: "auto",
     },
     "left-bottom": {
@@ -26,14 +26,14 @@ const pointerStyles = {
         transform: "translateX(-16px) translateY(-50%)",
         left: "auto",
         right: "100%",
-        top: "0",
+        top: "20px",
         bottom: "auto",
     },
     "right-top": {
         transform: "translateX(-16px)",
         left: "auto",
         right: "100%",
-        top: "-25%",
+        top: "2px",
         bottom: "auto",
     },
     "right-bottom": {
@@ -47,19 +47,19 @@ const pointerStyles = {
         transform: "translateX(-50%)",
         left: "50%",
         right: "auto",
-        top: "calc(100% + 2px)",
+        top: "calc(100% + 12px)",
         bottom: "auto",
     },
     "top-left": {
         left: "4px",
         right: "auto",
-        top: "calc(100% + 2px)",
+        top: "calc(100% + 12px)",
         bottom: "auto",
     },
     "top-right": {
         left: "auto",
         right: "4px",
-        top: "calc(100% + 2px)",
+        top: "calc(100% + 12px)",
         bottom: "auto",
     },
     "bottom-right": {
@@ -99,7 +99,7 @@ export const top = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "top"
+        "top",
     )}">
         <span class="tooltip__pointer tooltip__pointer--top"></span>
         <div class="tooltip__mask">
@@ -121,7 +121,7 @@ export const topLeft = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "top-left"
+        "top-left",
     )}">
         <span class="tooltip__pointer tooltip__pointer--top-left"></span>
         <div class="tooltip__mask">
@@ -143,7 +143,7 @@ export const leftTop = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "left-top"
+        "left-top",
     )}">
         <span class="tooltip__pointer tooltip__pointer--left-top"></span>
         <div class="tooltip__mask">
@@ -165,7 +165,7 @@ export const left = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "left"
+        "left",
     )}">
         <span class="tooltip__pointer tooltip__pointer--left"></span>
         <div class="tooltip__mask">
@@ -187,7 +187,7 @@ export const leftBottom = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "left-bottom"
+        "left-bottom",
     )}">
         <span class="tooltip__pointer tooltip__pointer--left-bottom"></span>
         <div class="tooltip__mask">
@@ -209,7 +209,7 @@ export const bottomLeft = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "bottom-left"
+        "bottom-left",
     )}">
         <span class="tooltip__pointer tooltip__pointer--bottom-left"></span>
         <div class="tooltip__mask">
@@ -231,7 +231,7 @@ export const bottom = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "bottom"
+        "bottom",
     )}">
         <span class="tooltip__pointer tooltip__pointer--bottom"></span>
         <div class="tooltip__mask">
@@ -253,7 +253,7 @@ export const bottomRight = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "bottom-right"
+        "bottom-right",
     )}">
         <span class="tooltip__pointer tooltip__pointer--bottom-right"></span>
         <div class="tooltip__mask">
@@ -275,7 +275,7 @@ export const rightBottom = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "right-bottom"
+        "right-bottom",
     )}">
         <span class="tooltip__pointer tooltip__pointer--right-bottom"></span>
         <div class="tooltip__mask">
@@ -297,7 +297,7 @@ export const right = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "right"
+        "right",
     )}">
         <span class="tooltip__pointer tooltip__pointer--right"></span>
         <div class="tooltip__mask">
@@ -319,7 +319,7 @@ export const rightTop = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "right-top"
+        "right-top",
     )}">
         <span class="tooltip__pointer tooltip__pointer--right-top"></span>
         <div class="tooltip__mask">
@@ -341,7 +341,7 @@ export const topRight = () => `
         </svg>
     </button>
     <div class="tooltip__overlay" id="tooltip-1" role="tooltip" style="${getPointerStyle(
-        "top-right"
+        "top-right",
     )}">
         <span class="tooltip__pointer tooltip__pointer--top-right"></span>
         <div class="tooltip__mask">

package/src/less/tooltip/stories/tooltip.stories.js

@@ -26,7 +26,7 @@ export const expanded = () => `
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
-    <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="bottom: calc(100% - 90px); left: 4px">
+    <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="left: calc(50% - 16px); right: auto; top: calc(100% + 8px); bottom: auto;">
         <span class="tooltip__pointer tooltip__pointer--top-left"></span>
         <div class="tooltip__mask">
             <div class="tooltip__cell">

package/src/less/tooltip/tooltip.less

@@ -12,11 +12,6 @@ span.tooltip {
 
 .tooltip__overlay {
     .bubble();
-
-    display: none;
-    left: 0 - 10px;
-    margin-top: var(--spacing-200);
-    position: absolute;
 }
 
 .tooltip__mask {
@@ -51,8 +46,6 @@ button.tooltip__close {
 
 .tooltip__pointer {
     .pointer-base();
-    .pointer-top();
-    .pointer-center();
     .background-color-token(tooltip-background-color, color-background-primary);
 }
 

package/src/less/tourtip/tourtip.less

@@ -12,9 +12,6 @@ span.tourtip {
 
 .tourtip__overlay {
     .bubble(@border-radius-value: border-radius-100);
-
-    display: none;
-    position: absolute;
 }
 
 .tourtip__mask {
@@ -60,8 +57,6 @@ button.tourtip__close > svg {
 
 .tourtip__pointer {
     .pointer-base();
-    .pointer-top();
-    .pointer-center();
     .background-color-token(tourtip-background-color, color-background-primary);
 }
 

package/src/less/variables/variables.less

@@ -57,6 +57,7 @@
 @spacing-400: @spacing-100 * 4;
 @spacing-450: @spacing-100 * 4.5;
 @spacing-600: @spacing-100 * 6;
+@spacing-700: @spacing-100 * 7;
 @spacing-800: @spacing-100 * 8;
 
 @font-size-giant-3: @font-size-46;