@ebay/skin 17.2.0-next.0 → 17.3.0-next.0

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

@@ -42,7 +42,8 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
     .border-color-token(listbox-button-invalid-border-color, color-stroke-attention);
 }
 
-.listbox-button:not(.listbox-button--error) button.btn--form {
+.listbox-button:not(.listbox-button--error)
+    button:not([disabled], [aria-disabled="true"]).btn--form {
     .border-color-token(listbox-button-border-color, color-stroke-default);
 
     &:hover,
@@ -78,7 +79,7 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .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-primary);
+    .color-token(listbox-button-disabled-foreground-color, color-foreground-disabled);
 }
 
 .listbox-button.listbox-button--form button:focus {

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

@@ -1,15 +1,19 @@
 // this mixin is used by infotip, tooltip, tourtip, date-textbox
 
 :root {
-    --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15))
-        drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
+    // Do NOT use filter: drop-shadow() as Safari cannot do
+    //   drop-shadows outside an element with overflow.
+    //   Since box-shadow more widely supports various use cases,
+    //   it's a more robust solution.
+    --bubble-shadow: 0 2px 7px rgba(0, 0, 0, 0.15),
+        0 5px 17px rgba(0, 0, 0, 0.2);
 }
 
 .bubble(@border-radius-value: border-radius-50) {
     .border-radius-token(bubble-border-radius, @border-radius-value);
 
+    box-shadow: var(--bubble-shadow);
     display: none;
-    filter: var(--bubble-filter);
     font-size: 14px;
     left: 0;
     max-width: 344px;

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

@@ -3,9 +3,9 @@
 .dropdown-base(@component) {
     .background-color-token(~"@{component}-background-color", color-background-elevated);
     .border-radius-token(~"@{component}-border-radius", border-radius-50);
+    box-shadow: var(--bubble-shadow);
     box-sizing: border-box;
     display: none;
-    filter: var(--bubble-filter);
     left: 0;
     max-height: 400px;
     min-width: 100%;

package/src/less/mixins/private/selection-list-mixins.less

@@ -1,5 +1,7 @@
 .selection-list-item-base() {
     background-color: transparent;
+    border-style: solid;
+    border-width: 1px;
     box-sizing: border-box;
     display: inline-grid;
     font-family: inherit;

package/src/less/pagination/stories/overflow.stories.js

@@ -16,8 +16,8 @@ export const start = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow" width="8" height="8" role="separator">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
         </li>
@@ -61,8 +61,8 @@ export const middle = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow" width="8" height="8" role="separator">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
         </li>
@@ -77,8 +77,8 @@ export const middle = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow" width="8" height="8" role="separator">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
         </li>
@@ -122,8 +122,8 @@ export const end = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow" width="8" height="8" role="separator">
-                    <use href="#icon-overflow"></use>
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
         </li>
@@ -169,8 +169,8 @@ export const endMenuCollapsed = () => `
             <span class="pagination__item">
                 <span class="fake-menu-button">
                     <button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-label="Menu">
-                        <svg class="icon icon--overflow" width="8" height="8" aria-hidden="true">
-                            <use href="#icon-overflow"></use>
+                        <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                            <use href="#icon-overflow-horizontal-24"></use>
                         </svg>
                     </button>
                     <ul class="fake-menu-button__menu">
@@ -240,8 +240,8 @@ export const endMenuExpanded = () => `
             <span class="pagination__item">
                 <span class="fake-menu-button">
                     <button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-expanded="true" aria-label="Menu">
-                        <svg class="icon icon--overflow" width="8" height="8" aria-hidden="true">
-                            <use href="#icon-overflow"></use>
+                        <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                            <use href="#icon-overflow-horizontal-24"></use>
                         </svg>
                     </button>
                     <ul class="fake-menu-button__menu">

package/src/less/progress-bar-expressive/progress-bar-expressive.less

@@ -0,0 +1,456 @@
+@import "../variables/variables.less";
+
+:root {
+    --progress-bar-expressive-color-1: #e53238;
+    --progress-bar-expressive-color-2: #0064d2;
+    --progress-bar-expressive-color-3: #f5af02;
+    --progress-bar-expressive-color-4: #86b817;
+    --progress-bar-expressive-line-border-radius: 2px;
+    --progress-bar-expressive-line-count: 12;
+    --progress-bar-expressive-line-gap: var(--spacing-50);
+    --progress-bar-expressive-line-height: 6px;
+    --progress-bar-expressive-line-scale-duration: 3s;
+    --progress-bar-expressive-line-scroll-duration: 20s;
+    /* Each line has a final width of 10% - 40% of the lines container.
+       In each set of four lines, the widths add up to 100%.
+       These widths are defined in CSS variables so they can more 
+       easily be randomized in Javascript, if desired. */
+    --progress-bar-expressive-line-width-a1: 25%;
+    --progress-bar-expressive-line-width-a2: 15%;
+    --progress-bar-expressive-line-width-a3: 40%;
+    --progress-bar-expressive-line-width-a4: 20%;
+    --progress-bar-expressive-line-width-b1: 17%;
+    --progress-bar-expressive-line-width-b2: 21%;
+    --progress-bar-expressive-line-width-b3: 30%;
+    --progress-bar-expressive-line-width-b4: 32%;
+    --progress-bar-expressive-line-width-c1: 39%;
+    --progress-bar-expressive-line-width-c2: 29%;
+    --progress-bar-expressive-line-width-c3: 20%;
+    --progress-bar-expressive-line-width-c4: 12%;
+    --progress-bar-expressive-message-animatein-duration: 833ms;
+    --progress-bar-expressive-message-animateout-duration: 400ms;
+
+    @media (prefers-color-scheme: dark) {
+        --progress-bar-expressive-color-1: #f0343b;
+        --progress-bar-expressive-color-2: #0078fc;
+        --progress-bar-expressive-color-3: #e8a502;
+        --progress-bar-expressive-color-4: #86b817;
+    }
+}
+
+.progress-bar-expressive {
+    align-items: stretch;
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-content: end;
+    margin: 0 auto;
+    max-width: 375px;
+    row-gap: var(--spacing-300);
+    width: 100%;
+}
+
+.progress-bar-expressive--loaded {
+    display: none;
+}
+
+.progress-bar-expressive__messages {
+    color: var(--color-foreground-primary);
+    font-size: var(--font-size-large-1);
+    font-weight: var(--font-weight-regular);
+    line-height: calc(var(--spacing-50) + var(--spacing-300)); // 26px
+    margin: 0 var(--spacing-200);
+    min-height: 3rem;
+    position: relative;
+    text-align: center;
+}
+
+.progress-bar-expressive__messages--medium {
+    font-size: var(--font-size-medium);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--spacing-300);
+}
+
+.progress-bar-expressive__message {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+}
+
+// current message
+.progress-bar-expressive__message[role="status"] {
+    opacity: 1;
+}
+
+// next message
+.progress-bar-expressive__message[aria-hidden="true"] {
+    opacity: 0;
+}
+
+.progress-bar-expressive__message--in {
+    animation: progress-bar-expressive-message-animatein
+        var(--progress-bar-expressive-message-animatein-duration)
+        cubic-bezier(0.3, 0, 0, 1) both;
+}
+
+.progress-bar-expressive__message--out {
+    animation: progress-bar-expressive-message-animateout
+        var(--progress-bar-expressive-message-animateout-duration)
+        cubic-bezier(0.3, 0, 0, 1) both;
+}
+
+.progress-bar-expressive__progress[role="progressbar"] {
+    border-radius: var(--progress-bar-expressive-line-border-radius);
+
+    margin: 0 var(--spacing-200);
+    overflow: hidden;
+}
+
+.progress-bar-expressive__lines {
+    display: flex;
+    overflow: visible;
+    // Account for gaps between lines
+    width: calc(100% - (3 * var(--progress-bar-expressive-line-gap)));
+}
+
+.progress-bar-expressive__line {
+    /* Default animation behavior: Lines scroll and resize.
+       Animate line's width from 0% to its pre-defined width.
+       Simultaneously cycle the line's order in its flex container
+       to push its siblings forward and achieve an infinite loop. 
+
+       Note that Safari < 14 does not support flex order animations.
+       In these browsers, the lines do not appear to infinitely
+       scroll. Instead, they scale up, reset their size, and repeat. */
+    animation:
+        progress-bar-expressive-line-reorder
+            var(--progress-bar-expressive-line-scale-duration)
+            steps(var(--progress-bar-expressive-line-count)) infinite,
+        progress-bar-expressive-line-scale-width
+            var(--progress-bar-expressive-line-scale-duration) infinite;
+    border-radius: var(--progress-bar-expressive-line-border-radius);
+    display: inline-block;
+    flex-shrink: 0;
+    height: var(--progress-bar-expressive-line-height);
+    line-height: 0;
+    order: 1;
+}
+
+// Set line colors
+.progress-bar-expressive__line:nth-child(4n + 1) {
+    background-color: var(--progress-bar-expressive-color-4);
+}
+.progress-bar-expressive__line:nth-child(4n + 2) {
+    background-color: var(--progress-bar-expressive-color-3);
+}
+.progress-bar-expressive__line:nth-child(4n + 3) {
+    background-color: var(--progress-bar-expressive-color-2);
+}
+.progress-bar-expressive__line:nth-child(4n + 4) {
+    background-color: var(--progress-bar-expressive-color-1);
+}
+
+// Set line widths and animation delays
+.progress-bar-expressive__line:nth-child(1) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    var(--progress-bar-expressive-line-scale-duration) /
+                    var(--progress-bar-expressive-line-count))
+    );
+    width: var(--progress-bar-expressive-line-width-a1);
+}
+.progress-bar-expressive__line:nth-child(2) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 2
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-a2);
+}
+.progress-bar-expressive__line:nth-child(3) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 3
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-a3);
+}
+.progress-bar-expressive__line:nth-child(4) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 4
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-a4);
+}
+.progress-bar-expressive__line:nth-child(5) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 5
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-b1);
+}
+.progress-bar-expressive__line:nth-child(6) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 6
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-b2);
+}
+.progress-bar-expressive__line:nth-child(7) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 7
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-b3);
+}
+.progress-bar-expressive__line:nth-child(8) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 8
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-b4);
+}
+.progress-bar-expressive__line:nth-child(9) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 9
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-c1);
+}
+.progress-bar-expressive__line:nth-child(10) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 10
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-c2);
+}
+.progress-bar-expressive__line:nth-child(11) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 11
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-c3);
+}
+.progress-bar-expressive__line:nth-child(12) {
+    animation-delay: calc(
+        -1 * (var(--progress-bar-expressive-line-scale-duration) -
+                    (
+                        (
+                                var(
+                                        --progress-bar-expressive-line-scale-duration
+                                    ) /
+                                    var(--progress-bar-expressive-line-count)
+                            ) * 12
+                    ))
+    );
+    width: var(--progress-bar-expressive-line-width-c4);
+}
+
+/* With reduced motion, there are no animated transitions
+   between messages and the lines scroll but do not resize. */
+@media (prefers-reduced-motion) {
+    // Remove default message animation
+    .progress-bar-expressive__message--in,
+    .progress-bar-expressive__message--out {
+        animation: none;
+    }
+
+    .progress-bar-expressive__message[aria-hidden="true"] {
+        display: none;
+    }
+
+    // Fade in first message
+    .progress-bar-expressive__messages:not(
+            .progress-bar-expressive__messages--medium
+        )
+        .progress-bar-expressive__message--initial[role="status"] {
+        animation: progress-bar-expressive-message-fadein
+            var(--progress-bar-expressive-message-animatein-duration)
+            cubic-bezier(0.3, 0, 0, 1) both;
+    }
+
+    // Scroll the entire line container
+    .progress-bar-expressive__lines {
+        animation: progress-bar-expressive-reduced-motion-line-scroll
+            var(--progress-bar-expressive-line-scroll-duration) linear infinite;
+        overflow: visible;
+    }
+
+    // Remove default line animation
+    .progress-bar-expressive__line {
+        animation: none;
+        animation-delay: none;
+        margin-right: var(--progress-bar-expressive-line-gap);
+    }
+
+    // Reset line colors
+    .progress-bar-expressive__line:nth-child(4n + 1) {
+        background-color: var(--progress-bar-expressive-color-1);
+    }
+    .progress-bar-expressive__line:nth-child(4n + 2) {
+        background-color: var(--progress-bar-expressive-color-2);
+    }
+    .progress-bar-expressive__line:nth-child(4n + 3) {
+        background-color: var(--progress-bar-expressive-color-3);
+    }
+    .progress-bar-expressive__line:nth-child(4n + 4) {
+        background-color: var(--progress-bar-expressive-color-4);
+    }
+
+    // To achieve a seamless loop, the last set of line widths
+    // need to match the first set of line widths
+    .progress-bar-expressive__line:nth-child(9) {
+        width: var(--progress-bar-expressive-line-width-a1);
+    }
+
+    .progress-bar-expressive__line:nth-child(10) {
+        width: var(--progress-bar-expressive-line-width-a2);
+    }
+
+    .progress-bar-expressive__line:nth-child(11) {
+        width: var(--progress-bar-expressive-line-width-a3);
+    }
+
+    .progress-bar-expressive__line:nth-child(12) {
+        width: var(--progress-bar-expressive-line-width-a4);
+    }
+}
+
+@keyframes progress-bar-expressive-message-animateout {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(calc(var(--font-size-24) * -1));
+    }
+}
+
+@keyframes progress-bar-expressive-message-animatein {
+    0% {
+        opacity: 0;
+        transform: translateY(var(--font-size-24));
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes progress-bar-expressive-message-fadein {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes progress-bar-expressive-line-reorder {
+    0% {
+        order: 0;
+    }
+    100% {
+        order: var(--progress-bar-expressive-line-count);
+    }
+}
+
+@keyframes progress-bar-expressive-line-scale-width {
+    0% {
+        margin-right: 0;
+        width: 0;
+    }
+
+    12.5% {
+        margin-right: var(--progress-bar-expressive-line-gap);
+    }
+
+    50%,
+    100% {
+        margin-right: var(--progress-bar-expressive-line-gap);
+    }
+}
+
+@keyframes progress-bar-expressive-reduced-motion-line-scroll {
+    0% {
+        transform: translateX(
+            calc(-200% - 8 * var(--progress-bar-expressive-line-gap))
+        );
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}