@ebay/skin 17.5.0 → 18.0.0-next.0

package/src/sass/listbox-button/listbox-button.scss

@@ -0,0 +1,233 @@
+@import "../variables/variables";
+@import "../mixins/private/dropdown-mixins";
+@import "../mixins/private/listbox-mixins";
+@import "../mixins/private/token-mixins";
+@import "../mixins/public/utility-mixins";
+
+.listbox-button {
+    line-height: normal;
+    position: relative;
+    vertical-align: bottom;
+}
+
+span.listbox-button {
+    display: inline-block;
+}
+
+.listbox-button .btn {
+    /* these values are used elsewhere in listbox */
+    /* in a non-standard manner and don't have variables */
+    /* this shares the same value with the horizontal */
+    /* padding in .selection-list-item-base() to align left */
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+span.listbox-button--fluid,
+span.listbox-button--fluid .expand-btn,
+span.listbox-button--fluid .btn {
+    width: 100%;
+}
+
+div.listbox-button__listbox {
+    @include dropdown-base(listbox-button-listbox);
+}
+
+button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
+.listbox-button button.btn[aria-expanded="true"] ~ div.listbox-button__listbox {
+    display: block;
+}
+
+.listbox-button button[aria-invalid="true"] {
+    @include border-color-token(
+        listbox-button-invalid-border-color,
+        color-stroke-attention
+    );
+}
+
+.listbox-button:not(.listbox-button--error)
+    button:not(
+        [disabled],
+        [aria-disabled="true"],
+        [aria-invalid="true"]
+    ).btn--form {
+    @include border-color-token(
+        listbox-button-border-color,
+        color-stroke-default
+    );
+
+    &:hover,
+    &:focus,
+    &:active {
+        border-color: inherit;
+    }
+}
+
+.listbox-button button.expand-btn--borderless,
+.listbox-button button.btn--borderless {
+    background-color: transparent;
+    border-color: transparent;
+    padding-left: 0;
+    vertical-align: initial;
+
+    &:focus {
+        outline: none;
+        text-decoration: underline;
+    }
+
+    &[aria-expanded="true"] ~ .listbox-button__listbox {
+        top: 41px; /* button height plus one px, to meet design guidelines */
+    }
+}
+
+.listbox-button.listbox-button--form button {
+    @include background-color-token(
+        listbox-button-background-color,
+        color-background-secondary
+    );
+    @include border-color-token(
+        listbox-button-border-color,
+        color-stroke-default
+    );
+    @include 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"] {
+    @include border-color-token(
+        listbox-button-disabled-border-color,
+        color-background-disabled
+    );
+    @include color-token(
+        listbox-button-disabled-foreground-color,
+        color-foreground-disabled
+    );
+}
+
+.listbox-button.listbox-button--form button:focus {
+    @include background-color-token(
+        combobox-textbox-focus-background-color,
+        color-background-primary
+    );
+}
+
+.listbox-button.listbox-button--form button[aria-invalid="true"] {
+    @include border-color-token(
+        listbox-button-invalid-border-color,
+        color-stroke-attention
+    );
+}
+
+.listbox-button.listbox-button--error button:not(.btn--borderless) {
+    @include background-color-token(
+        listbox-button-background-color,
+        color-background-secondary
+    );
+    @include border-color-token(
+        listbox-button-border-color,
+        color-stroke-attention
+    );
+}
+
+.listbox-button .btn__label {
+    @include color-token(
+        listbox-button-label-color,
+        color-foreground-secondary
+    );
+
+    margin-right: 3px;
+}
+
+.listbox-button--expanded .btn__label {
+    @include 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 {
+    @include color-token(
+        listbox-button-label-color,
+        color-foreground-attention
+    );
+}
+
+.listbox-button .btn__text {
+    font-weight: bold;
+    margin-right: auto;
+}
+
+.listbox-button__options {
+    @include border-radius-token(
+        listbox-button-border-radius,
+        border-radius-50
+    );
+}
+
+.listbox-button__options[role="listbox"]:focus
+    .listbox-button__option--active[role="option"] {
+    background-color: var(--color-state-primary-hover);
+}
+
+.listbox-button__option svg.icon {
+    @include listbox-option-status();
+
+    margin-inline-start: var(--spacing-100);
+}
+
+div.listbox-button__option[role="option"][aria-selected="true"] svg.icon {
+    opacity: 1;
+}
+
+.listbox-button__description {
+    @include color-token(
+        listbox-button-subtitle-color,
+        color-foreground-secondary
+    );
+
+    font-size: var(--font-size-small);
+    font-weight: normal;
+    grid-column: 1 2;
+    grid-row: 2;
+}
+
+div.listbox-button__option[role="option"] {
+    @include listbox-option-base();
+    @include dropdown-item-border-radius(listbox-button-listbox);
+
+    cursor: default; /* needed to override text cursor */
+
+    &:disabled .listbox-button__description,
+    &[aria-disabled="true"] .listbox-button__description {
+        @include listbox-disabled();
+    }
+}
+
+div.listbox-button__option--active[role="option"] {
+    font-weight: bold;
+}
+
+span.listbox-button__value {
+    flex: 1 0 auto;
+    white-space: nowrap;
+}
+
+/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
+.listbox-button__options:focus:not(:focus-visible) {
+    outline: none;
+}
+
+/* stylelint-disable no-descending-specificity */
+[dir="rtl"] {
+    .listbox-button .btn__label {
+        @include color-token(
+            listbox-button-label-color,
+            color-foreground-secondary
+        );
+
+        margin-left: 3px;
+        margin-right: 0;
+    }
+}
+/* stylelint-enable no-descending-specificity */

package/src/{less → sass}/listbox-button/stories/base.stories.js

@@ -6,7 +6,7 @@ export const collapsedUnselected = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">-</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -15,25 +15,25 @@ export const collapsedUnselected = () => `
         <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -48,7 +48,7 @@ export const expandedUnselected = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">-</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -57,25 +57,25 @@ export const expandedUnselected = () => `
         <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -90,7 +90,7 @@ export const collapsedSelected = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -99,25 +99,25 @@ export const collapsedSelected = () => `
         <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -132,7 +132,7 @@ export const expandedSelected = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -141,25 +141,25 @@ export const expandedSelected = () => `
         <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -174,7 +174,7 @@ export const disabled = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -183,25 +183,25 @@ export const disabled = () => `
         <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -216,7 +216,7 @@ export const invalid = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -225,25 +225,25 @@ export const invalid = () => `
         <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -258,7 +258,7 @@ export const longOption = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Red with very very very long text</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -267,19 +267,19 @@ export const longOption = () => `
         <div class="listbox-button__options" role="listbox">
             <div class="listbox-button__option" role="option" aria-selected="true">
                 <span class="listbox-button__value">Red with very very very long text</span>
-                <svg class="icon icon--tick-16" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -294,7 +294,7 @@ export const borderless = () => `
         <span class="btn__cell">
             <span class="btn__label">Quantity: </span>
             <span class="btn__text">1</span>
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -303,19 +303,19 @@ export const borderless = () => `
         <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" height="10" width="14">
+                <svg class="icon icon--16" 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" height="10" width="14">
+                <svg class="icon icon--16" 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" height="10" width="14">
+                <svg class="icon icon--16" height="10" width="14">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -330,7 +330,7 @@ export const floatingLabelSelected = () => `
         <span class="btn__cell">
             <span class="btn__floating-label">Color:</span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="10" width="14" aria-hidden="true">
+            <svg class="icon icon--12" height="10" width="14" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -339,25 +339,25 @@ export const floatingLabelSelected = () => `
         <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" height="10" width="14">
+                <svg class="icon icon--16" 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" height="10" width="14">
+                <svg class="icon icon--16" 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" height="10" width="14">
+                <svg class="icon icon--16" 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" height="10" width="14">
+                <svg class="icon icon--16" height="10" width="14">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>
@@ -372,7 +372,7 @@ export const textSpacing = () => `
         <span class="btn__cell">
             <span class="btn__label">Color: </span>
             <span class="btn__text">Blue</span>
-            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-down-12"></use>
             </svg>
         </span>
@@ -381,25 +381,25 @@ export const textSpacing = () => `
         <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <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" height="8" width="8">
+                <svg class="icon icon--16" height="8" width="8">
                     <use href="#icon-tick-16"></use>
                 </svg>
             </div>