@ebay/skin 14.2.1 → 15.0.0-1

package/src/less/lightbox-dialog/lightbox-dialog.less

@@ -10,25 +10,10 @@
     .lightbox-dialog-window();
 }
 
-// Deprecated --mini dilaog in favor of drawer, remove next major
-.lightbox-dialog__window--mini {
-    align-items: flex-start;
-    align-self: center;
-    border-radius: 7px;
-    flex-direction: row-reverse;
-    margin-top: 0;
-    min-height: 72px;
-    min-width: 200px;
-}
-
 .lightbox-dialog__header {
     .dialog-header-content();
 }
 
-.lightbox-dialog__window--mini .lightbox-dialog__header {
-    margin-top: @spacing-100;
-}
-
 .lightbox-dialog__main {
     .dialog-body-content();
 

package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js

@@ -51,40 +51,6 @@ export const baseWithFooter = () => `
 </div>
 `;
 
-export const mini = () => `
-<div aria-label="mini Example" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" role="dialog">
-    <div class="lightbox-dialog__window lightbox-dialog__window--fade lightbox-dialog__window--mini">
-        <div class="lightbox-dialog__header">
-            <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="16" width="16">
-                    <use xlink:href="#icon-close-small"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="lightbox-dialog__main">
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-        </div>
-    </div>
-</div>
-`;
-
-export const miniMinHeight = () => `
-<div aria-label="miniMinHeight Example" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" role="dialog">
-    <div class="lightbox-dialog__window lightbox-dialog__window--fade lightbox-dialog__window--mini">
-        <div class="lightbox-dialog__header">
-            <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="16" width="16">
-                    <use xlink:href="#icon-close-small"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="lightbox-dialog__main">
-            <p>Lorem ipsum dolor sit amet.</p>
-        </div>
-    </div>
-</div>
-`;
-
 export const baseRTL = () => `
 <div dir="rtl">
     <div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
@@ -109,22 +75,3 @@ export const baseRTL = () => `
     </div>
 </div>
 `;
-
-export const miniRTL = () => `
-<div dir="rtl">
-    <div aria-label="mini Example RTL" aria-modal="true" class="lightbox-dialog lightbox-dialog--mask-fade" role="dialog">
-        <div class="lightbox-dialog__window lightbox-dialog__window--fade lightbox-dialog__window--mini">
-            <div class="lightbox-dialog__header">
-                <button aria-label="Close dialog" class="icon-btn lightbox-dialog__close" type="button">
-                    <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="16" width="16">
-                        <use xlink:href="#icon-close-small"></use>
-                    </svg>
-                </button>
-            </div>
-            <div class="lightbox-dialog__main">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-            </div>
-        </div>
-    </div>
-</div>
-`;

package/src/less/menu-button/menu-button.less

@@ -76,12 +76,6 @@ button.fake-menu-button__item {
     text-align: left;
 }
 
-a.fake-menu-button__item:not([href]),
-button.fake-menu-button__item[disabled],
-div.menu-button__item[role^="menuitem"][aria-disabled="true"] {
-    .color-token(menu-button-menuitem-disabled-foreground-color, color-foreground-disabled);
-}
-
 a.fake-menu-button__item[aria-current="page"] svg.icon--tick-small,
 button.fake-menu-button__item[aria-current="page"] svg.icon--tick-small {
     opacity: 1;
@@ -96,6 +90,12 @@ div.menu-button__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-smal
     .menu-menuitem-base(menu-button);
 }
 
+.fake-menu-button__menu a.fake-menu-button__item:not([href]),
+.fake-menu-button__menu button.fake-menu-button__item[disabled],
+.menu-button__menu div.menu-button__item[role^="menuitem"][aria-disabled="true"] {
+    .color-token(menu-button-menuitem-disabled-foreground-color, color-foreground-disabled);
+}
+
 .fake-menu-button__menu > li:first-child a.fake-menu-button__item {
     .border-top-left-radius-token(menu-button-menu-border-radius, border-radius-50);
     .border-top-right-radius-token(menu-button-menu-border-radius, border-radius-50);
@@ -146,27 +146,7 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
 
 .menu-button__menu--reverse,
 .fake-menu-button__menu--reverse {
-    right: 0;
-}
-
-[dir="rtl"] .menu-button__menu--reverse,
-[dir="rtl"] .fake-menu-button__menu--reverse {
-    left: 0;
-    right: inherit;
-}
-
-// DEPRECATED. Remove in v15
-.menu-button button.expand-btn--borderless,
-.fake-menu-button button.expand-btn--borderless {
-    background-color: transparent;
-    border-color: transparent;
-    padding-left: 0;
-    vertical-align: initial;
-
-    &:focus {
-        outline: none;
-        text-decoration: underline;
-    }
+    .dropdown-reverse();
 }
 
 .menu-button__button[aria-expanded="true"] ~ .menu-button__menu,
@@ -187,12 +167,6 @@ div.menu-button__item--badged[role^="menuitem"] .badge {
     position: static;
 }
 
-// DEPRECATED. Remove in v15
-.menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu-button__menu,
-.fake-menu button.expand-btn--borderless[aria-expanded="true"] ~ .menu-button__menu {
-    top: 41px; // button height plus one px, to meet design guidelines
-}
-
 div.menu-button__option--active[role="option"] {
     font-weight: bold;
 }

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

@@ -1,17 +1,6 @@
 // this mixin is used by infotip, tooltip, tourtip
 
-// Deprecated
-@bubble-base-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
-
 :root {
-    // Deprecated variables, remove next version
-    --bubble-base-box-shadow: @bubble-base-box-shadow;
-    --bubble-left-box-shadow: @bubble-base-box-shadow;
-    --bubble-right-box-shadow: @bubble-base-box-shadow;
-    --bubble-bottom-box-shadow: @bubble-base-box-shadow;
-    --bubble-top-box-shadow: @bubble-base-box-shadow;
-    // End deprecated
-
     --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15))
         drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
 }

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

@@ -4,7 +4,6 @@
 @button-padding-horizontal: 20px;
 @button-padding-vertical-large: 13px;
 @button-padding-horizontal-large: 20px;
-@button-padding-horizontal-wide: 48px; // deprecated
 
 .btn-base() {
     border: 1px solid;

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

@@ -1,8 +1,5 @@
 @import "../public/utility-mixins.less";
 
-// Deprecated, remove the gutter sizes next major
-@dialog-small-gutter-size: 16px;
-@dialog-large-gutter-size: 24px;
 @dialog-scrim-color-hide: rgba(17, 24, 32, 0);
 @dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
 @dialog-lightbox-max-width: 616px;

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

@@ -9,6 +9,7 @@
     .box-shadow-token(~"@{component}-box-shadow", dropdown-box-shadow);
     box-sizing: border-box;
     display: none;
+    left: 0;
     max-height: 400px;
     min-width: 100%;
     overflow-y: auto;
@@ -16,6 +17,21 @@
     top: calc(100% + 4px);
     width: auto;
     z-index: 2;
+
+    [dir="rtl"] & {
+        left: unset;
+        right: 0;
+    }
+}
+
+.dropdown-reverse() {
+    left: unset;
+    right: 0;
+
+    [dir="rtl"] & {
+        left: 0;
+        right: unset;
+    }
 }
 
 .dropdown-item-border-radius(@component) {

package/src/less/panel-dialog/panel-dialog.less

@@ -58,11 +58,6 @@ button.icon-btn.panel-dialog__close {
     }
 }
 
-// Deprecated
-.panel-dialog__title--center {
-    text-align: center;
-}
-
 .panel-dialog--show,
 .panel-dialog--hide {
     &.panel-dialog--mask-fade {

package/src/less/progress-spinner/progress-spinner.less

@@ -2,10 +2,11 @@
 @import "../mixins/private/token-mixins.less";
 
 .progress-spinner {
-    animation: spin 600ms linear infinite;
+    animation: spin 1.5s linear infinite;
+    animation-timing-function: cubic-bezier(0.7, 0.2, 0.3, 0.73);
     display: inline-block;
-    height: 30px;
-    width: 30px;
+    height: 24px;
+    width: 24px;
 
     @keyframes spin {
         from {
@@ -13,13 +14,15 @@
         }
 
         to {
-            transform: rotate(360deg);
+            transform: rotate(720deg);
         }
     }
 }
 
 // fixes wobble
-.progress-spinner > svg.icon.icon--spinner {
+.progress-spinner > svg.icon.icon--spinner,
+.progress-spinner > svg.icon.icon--spinner-large,
+.progress-spinner > svg.icon.icon--spinner-small {
     height: inherit;
     margin: 0;
     max-height: inherit;
@@ -27,20 +30,12 @@
     width: inherit;
 }
 
-.progress-spinner--large {
-    height: 60px;
-    width: 60px;
-}
-
-/* This needs to be removed on next major version.
-    this makes it backwards compatible with empty span */
-.progress-spinner:empty {
-    .background-image-token(progress-spinner-image-url, url-image-progress-spinner);
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
+.progress-spinner--small {
+    height: 20px;
+    width: 20px;
 }
 
-.progress-spinner--large:empty {
-    .background-image-token(progress-spinner-large-image-url, url-image-progress-spinner-large);
+.progress-spinner--large {
+    height: 30px;
+    width: 30px;
 }

package/src/less/progress-spinner/stories/progress-spinner.stories.js

@@ -17,12 +17,13 @@ export const RTL = () =>
 export const large = () =>
     `<span class="progress-spinner progress-spinner--large" aria-label="Busy" role="img">
         <svg class="icon icon--spinner-large" focusable="false" aria-hidden="true">
-            <use xlink:href="#icon-spinner"></use>
+            <use xlink:href="#icon-spinner-large"></use>
         </svg>
     </span>`;
 
-export const baseEmpty = () =>
-    '<span class="progress-spinner" aria-label="Busy animation" role="img"></span>';
-
-export const largeEmpty = () =>
-    '<span class="progress-spinner progress-spinner--large" aria-label="Busy" role="img"></span>';
+export const small = () =>
+    `<span class="progress-spinner progress-spinner--small" aria-label="Busy" role="img">
+        <svg class="icon icon--spinner-small" focusable="false" aria-hidden="true">
+            <use xlink:href="#icon-spinner-small"></use>
+        </svg>
+    </span>`;

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

@@ -1,9 +1,19 @@
 @import "../variables/variables.less";
 @import "../mixins/private/token-mixins.less";
 
-@progress-stepper-icon-size: 24px;
 @progress-stepper-min-width: 80px;
 @progress-stepper-large-min-width: 120px;
+// Shortcut private variables
+@_progress-stepper-active-gradient: var(
+        --progress-stepper-active-color,
+        var(--color-background-information)
+    )
+    50%;
+@_progress-stepper-upcoming-gradient: var(
+        --progress-stepper-upcoming-color,
+        var(--color-background-disabled)
+    )
+    50%;
 
 .progress-stepper__items {
     align-items: flex-start;
@@ -20,12 +30,13 @@
 hr.progress-stepper__separator {
     .background-color-token(progress-stepper-active-color, color-background-information);
     border: 0 none;
+    border-radius: 2px;
     flex: 1;
-    height: 2px;
+    height: 4px;
     margin: 0;
     min-width: @progress-stepper-min-width;
     position: relative;
-    top: 11px;
+    top: 10px;
 }
 
 .progress-stepper__text {
@@ -47,11 +58,11 @@ hr.progress-stepper__separator {
     font-weight: normal;
 }
 
-.progress-stepper__item--upcoming .progress-stepper__text h2,
-.progress-stepper__item--upcoming .progress-stepper__text h3,
-.progress-stepper__item--upcoming .progress-stepper__text h4,
-.progress-stepper__item--upcoming .progress-stepper__text h5,
-.progress-stepper__item--upcoming .progress-stepper__text h6 {
+.progress-stepper__items--upcoming .progress-stepper__text h2,
+.progress-stepper__items--upcoming .progress-stepper__text h3,
+.progress-stepper__items--upcoming .progress-stepper__text h4,
+.progress-stepper__items--upcoming .progress-stepper__text h5,
+.progress-stepper__items--upcoming .progress-stepper__text h6 {
     .color-token(progress-stepper-text-light-color, color-foreground-secondary);
 }
 
@@ -63,39 +74,47 @@ hr.progress-stepper__separator {
     font-weight: bold;
 }
 
+.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h2,
+.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h3,
+.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h4,
+.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h5,
+.progress-stepper__item[aria-current] ~ .progress-stepper__item .progress-stepper__text h6 {
+    .color-token(progress-stepper-text-light-color, color-foreground-secondary);
+}
+
 .progress-stepper__text p {
     .color-token(progress-stepper-text-light-color, color-foreground-secondary);
 }
 
 .progress-stepper__icon {
-    .color-token(progress-stepper-active-color, color-background-information);
-
     height: 24px;
     margin: auto;
     width: 24px;
 }
 
-// TODO remove next major version
-.progress-stepper__icon > span[role="img"] {
-    align-items: center;
-    .border-color-token(progress-stepper-badge-current-border-color, color-background-information);
-    border-radius: @progress-stepper-icon-size;
-    border-style: solid;
-    border-width: 2px;
-    box-sizing: border-box;
-    .color-token(progress-stepper-badge-current-color, color-foreground-primary);
-    display: inline-flex;
-    font-weight: @font-weight-bold;
-    height: @progress-stepper-icon-size;
-    justify-content: center;
-    top: 0;
-    width: @progress-stepper-icon-size;
-}
-
 .progress-stepper__items--upcoming hr.progress-stepper__separator,
-hr.progress-stepper__separator--upcoming,
 .progress-stepper__item[aria-current] ~ hr.progress-stepper__separator {
     .background-color-token(progress-stepper-upcoming-color, color-background-disabled);
+
+    background-image: none;
+}
+
+.progress-stepper__item[aria-current] + hr.progress-stepper__separator {
+    background-image: linear-gradient(
+        90deg,
+        @_progress-stepper-active-gradient,
+        @_progress-stepper-upcoming-gradient
+    );
+}
+
+// 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 > * {
@@ -126,34 +145,25 @@ hr.progress-stepper__separator--upcoming,
     width: auto;
 }
 
-.progress-stepper__item--upcoming,
-.progress-stepper__items--upcoming .progress-stepper__item > [role="img"] {
-    .color-token(progress-stepper-text-light-color, color-foreground-secondary);
+.progress-stepper--vertical .progress-stepper__item[aria-current] + hr.progress-stepper__separator {
+    background: linear-gradient(
+        180deg,
+        @_progress-stepper-active-gradient,
+        @_progress-stepper-upcoming-gradient
+    );
 }
 
-.progress-stepper__items--upcoming .progress-stepper__icon > [role="img"],
-.progress-stepper__item--upcoming .progress-stepper__icon > [role="img"] {
-    .background-color-token(progress-stepper-badge-upcoming-background-color, color-background-primary);
-    .border-color-token(progress-stepper-badge-upcoming-border-color, color-foreground-disabled);
-    .color-token(progress-stepper-badge-upcoming-color, color-foreground-secondary);
-}
-
-.progress-stepper__item--attention .progress-stepper__icon > [role="img"] {
-    .color-token(progress-stepper-attention-color, color-foreground-attention);
-}
-
-.progress-stepper__item[aria-current] {
-    ~ .progress-stepper__item {
-        > [role="img"] {
-            .color-token(progress-stepper-text-light-color, color-foreground-secondary);
-        }
+// 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);
 
-        .progress-stepper__icon > [role="img"] {
-            .background-color-token(progress-stepper-badge-upcoming-background-color, color-background-primary);
-            .border-color-token(progress-stepper-badge-upcoming-border-color, color-foreground-disabled);
-            .color-token(progress-stepper-badge-upcoming-color, color-foreground-secondary);
-        }
-    }
+    background-image: none;
 }
 
 .progress-stepper--vertical .progress-stepper__items {
@@ -181,10 +191,10 @@ hr.progress-stepper__separator--upcoming,
     flex: inherit;
     height: 51px;
     margin-bottom: 12px;
-    margin-left: 11px;
+    margin-left: 10px;
     margin-top: -4px;
     min-width: inherit;
-    width: 2px;
+    width: 4px;
 }
 
 [dir="rtl"] {
@@ -194,6 +204,44 @@ hr.progress-stepper__separator--upcoming,
         text-align: right;
     }
 
+    // stylelint-disable no-descending-specificity
+    .progress-stepper__item[aria-current] + hr.progress-stepper__separator {
+        background-image: linear-gradient(
+            90deg,
+            @_progress-stepper-upcoming-gradient,
+            @_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]
+        + hr.progress-stepper__separator {
+        background: linear-gradient(
+            180deg,
+            @_progress-stepper-active-gradient,
+            @_progress-stepper-upcoming-gradient
+        );
+    }
+
+    .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__item:last-child .progress-stepper__text {
         margin-left: @spacing-50;
         margin-right: 0;