@ebay/skin 16.9.2 → 17.0.0-0

package/src/less/avatar/stories/avatar.stories.js

@@ -1,47 +1,85 @@
 export default { title: "Skin/Avatar" };
 
-export const base = () => /* HTML */ ` <div class="avatar">E</div> `;
+export const base = () => /* HTML */ `
+    <div class="avatar" role="img" aria-label="Profile picture - E">
+        <span>E</span>
+    </div>
+`;
 
 export const variations = () => /* HTML */ `
-    <div class="avatar avatar--teal" role="img" aria-label="Signed-in as Zed">
-        Z
+    <div
+        class="avatar avatar--teal"
+        role="img"
+        aria-label="Profile picture - Z"
+    >
+        <span>Z</span>
     </div>
     <div
         class="avatar avatar--light-teal"
         role="img"
-        aria-label="Signed-in as Awesome Jack"
+        aria-label="Profile picture - J"
     >
-        A
+        <span>J</span>
     </div>
-    <div class="avatar avatar--green" aria-label="Signed-in as Bob">B</div>
-    <div class="avatar avatar--lime" aria-label="Signed-in as Carol12345">
-        C
+    <div
+        class="avatar avatar--green"
+        role="img"
+        aria-label="Profile picture - B"
+    >
+        <span>B</span>
     </div>
-    <div class="avatar avatar--yellow" aria-label="Signed-in as DogLover">
-        D
+    <div
+        class="avatar avatar--lime"
+        role="img"
+        aria-label="Profile picture - C"
+    >
+        <span>C</span>
+    </div>
+    <div
+        class="avatar avatar--yellow"
+        role="img"
+        aria-label="Profile picture - D"
+    >
+        <span>D</span>
+    </div>
+    <div
+        class="avatar avatar--orange"
+        role="img"
+        aria-label="Profile picture - F"
+    >
+        <span>F</span>
+    </div>
+    <div
+        class="avatar avatar--magenta"
+        role="img"
+        aria-label="Profile picture - G"
+    >
+        <span>G</span>
     </div>
-    <div class="avatar avatar--orange" aria-label="Signed-in as FooBar">F</div>
-    <div class="avatar avatar--magenta" aria-label="Signed-in as Goolio">G</div>
 `;
 
 export const withImage = () => /* HTML */ `
-    <div class="avatar" role="img" aria-label="Signed-in as Doggy">
+    <div class="avatar" role="img" aria-label="Profile picture - Elizabeth">
         <img
             src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-            alt="profile pic"
+            alt=""
         />
     </div>
-    <div class="avatar avatar--128" role="img" aria-label="Signed-in as Doggy">
+    <div
+        class="avatar avatar--128"
+        role="img"
+        aria-label="Profile picture - Elizabeth"
+    >
         <img
             src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-            alt="profile pic"
+            alt=""
         />
     </div>
 `;
 
 export const signedOut = () => /* HTML */ `
-    <div class="avatar" role="img" aria-label="Signed-Out">
-        <svg class="icon" focusable="false" aria-hidden="true">
+    <div class="avatar" role="img" aria-label="Profile picture - Signed out">
+        <svg class="icon" aria-hidden="true">
             <use href="#icon-avatar-signed-out"></use>
         </svg>
     </div>
@@ -52,43 +90,51 @@ export const sizes = () => /* HTML */ `
         <div
             class="avatar avatar--32"
             role="img"
-            aria-label="Signed-in as Harry Potter"
+            aria-label="Profile picture - H"
         >
-            H
+            <span>H</span>
         </div>
         <div
             class="avatar avatar--40"
             role="img"
-            aria-label="Signed-in as Igquana"
+            aria-label="Profile picture - I"
         >
-            I
+            <span>I</span>
         </div>
         <div
             class="avatar avatar--48"
             role="img"
-            aria-label="Signed-in as Josh123"
+            aria-label="Profile picture - J"
         >
-            J
+            <span>J</span>
         </div>
         <div
             class="avatar avatar--56"
             role="img"
-            aria-label="Signed-in as KoolGuy"
+            aria-label="Profile picture - K"
         >
-            K
+            <span>K</span>
         </div>
-        <div class="avatar avatar--64" role="img" aria-label="Signed-in as Leo">
-            L
+        <div
+            class="avatar avatar--64"
+            role="img"
+            aria-label="Profile picture - L"
+        >
+            <span>L</span>
         </div>
-        <div class="avatar avatar--96" role="img" aria-label="Signed-in as Me">
-            M
+        <div
+            class="avatar avatar--96"
+            role="img"
+            aria-label="Profile picture - M"
+        >
+            <span>M</span>
         </div>
         <div
             class="avatar avatar--128"
             role="img"
-            aria-label="Signed-in as Noir"
+            aria-label="Profile picture - N"
         >
-            N
+            <span>N</span>
         </div>
     </div>
 `;
@@ -98,71 +144,71 @@ export const sizesProfilePic = () => /* HTML */ `
         <div
             class="avatar avatar--32"
             role="img"
-            aria-label="Signed-in as Doggy"
+            aria-label="Profile picture - Elizabeth"
         >
             <img
                 src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-                alt="profile pic"
+                alt=""
             />
         </div>
         <div
             class="avatar avatar--40"
             role="img"
-            aria-label="Signed-in as Doggy"
+            aria-label="Profile picture - Elizabeth"
         >
             <img
                 src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-                alt="profile pic"
+                alt=""
             />
         </div>
         <div
             class="avatar avatar--48"
             role="img"
-            aria-label="Signed-in as Doggy"
+            aria-label="Profile picture - Elizabeth"
         >
             <img
                 src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-                alt="profile pic"
+                alt=""
             />
         </div>
         <div
             class="avatar avatar--56"
             role="img"
-            aria-label="Signed-in as Doggy"
+            aria-label="Profile picture - Elizabeth"
         >
             <img
                 src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-                alt="profile pic"
+                alt=""
             />
         </div>
         <div
             class="avatar avatar--64"
             role="img"
-            aria-label="Signed-in as Doggy"
+            aria-label="Profile picture - Elizabeth"
         >
             <img
                 src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-                alt="profile pic"
+                alt=""
             />
         </div>
         <div
             class="avatar avatar--96"
             role="img"
-            aria-label="Signed-in as Doggy"
+            aria-label="Profile picture - Elizabeth"
         >
             <img
                 src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-                alt="profile pic"
+                alt=""
             />
         </div>
         <div
             class="avatar avatar--128"
             role="img"
-            aria-label="Signed-in as Doggy"
+            aria-label="Profile picture - Elizabeth"
         >
             <img
                 src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-                alt="profile pic"
+                alt=""
             />
         </div>
     </div>
@@ -170,38 +216,66 @@ export const sizesProfilePic = () => /* HTML */ `
 
 export const sizesIcon = () => /* HTML */ `
     <div>
-        <div class="avatar avatar--32" role="img" aria-label="Signed-Out">
-            <svg class="icon" focusable="false" aria-hidden="true">
+        <div
+            class="avatar avatar--32"
+            role="img"
+            aria-label="Profile picture - Signed out"
+        >
+            <svg class="icon" aria-hidden="true">
                 <use href="#icon-avatar-signed-out"></use>
             </svg>
         </div>
-        <div class="avatar avatar--40" role="img" aria-label="Signed-Out">
-            <svg class="icon" focusable="false" aria-hidden="true">
+        <div
+            class="avatar avatar--40"
+            role="img"
+            aria-label="Profile picture - Signed out"
+        >
+            <svg class="icon" aria-hidden="true">
                 <use href="#icon-avatar-signed-out"></use>
             </svg>
         </div>
-        <div class="avatar avatar--48" role="img" aria-label="Signed-Out">
-            <svg class="icon" focusable="false" aria-hidden="true">
+        <div
+            class="avatar avatar--48"
+            role="img"
+            aria-label="Profile picture - Signed out"
+        >
+            <svg class="icon" aria-hidden="true">
                 <use href="#icon-avatar-signed-out"></use>
             </svg>
         </div>
-        <div class="avatar avatar--56" role="img" aria-label="Signed-Out">
-            <svg class="icon" focusable="false" aria-hidden="true">
+        <div
+            class="avatar avatar--56"
+            role="img"
+            aria-label="Profile picture - Signed out"
+        >
+            <svg class="icon" aria-hidden="true">
                 <use href="#icon-avatar-signed-out"></use>
             </svg>
         </div>
-        <div class="avatar avatar--64" role="img" aria-label="Signed-Out">
-            <svg class="icon" focusable="false" aria-hidden="true">
+        <div
+            class="avatar avatar--64"
+            role="img"
+            aria-label="Profile picture - Signed out"
+        >
+            <svg class="icon" aria-hidden="true">
                 <use href="#icon-avatar-signed-out"></use>
             </svg>
         </div>
-        <div class="avatar avatar--96" role="img" aria-label="Signed-Out">
-            <svg class="icon" focusable="false" aria-hidden="true">
+        <div
+            class="avatar avatar--96"
+            role="img"
+            aria-label="Profile picture - Signed out"
+        >
+            <svg class="icon" aria-hidden="true">
                 <use href="#icon-avatar-signed-out"></use>
             </svg>
         </div>
-        <div class="avatar avatar--128" role="img" aria-label="Signed-Out">
-            <svg class="icon" focusable="false" aria-hidden="true">
+        <div
+            class="avatar avatar--128"
+            role="img"
+            aria-label="Profile picture - Signed out"
+        >
+            <svg class="icon" aria-hidden="true">
                 <use href="#icon-avatar-signed-out"></use>
             </svg>
         </div>
@@ -213,53 +287,56 @@ export const combinations = () => /* HTML */ `
         <div
             class="avatar avatar--32"
             role="img"
-            aria-label="Signed-in as Omega"
+            aria-label="Profile picture - O"
         >
-            O
+            <span>O</span>
         </div>
-        <div class="avatar avatar--40" role="img" aria-label="Signed-out">
-            <svg class="icon" focusable="false" aria-hidden="true">
+        <div
+            class="avatar avatar--40"
+            role="img"
+            aria-label="Profile picture - Signed out"
+        >
+            <svg class="icon" aria-hidden="true">
                 <use href="#icon-avatar-signed-out"></use>
             </svg>
         </div>
         <div
             class="avatar avatar--48 avatar--green"
             role="img"
-            aria-label="Signed-in as Queen"
+            aria-label="Profile picture - Q"
         >
-            Q
+            <span>Q</span>
         </div>
         <div
             class="avatar avatar--56"
             role="img"
-            aria-label="Signed-in as Doggy"
+            aria-label="Profile picture - Elizabeth"
         >
             <img
                 src="https://ir.ebaystatic.com/cr/v/c01/skin/docs/dog_profile_optimized.jpg"
-                alt="profile pic"
+                alt=""
             />
         </div>
         <div
             class="avatar avatar--64"
             role="img"
-            aria-label="Signed-in as Ryan"
+            aria-label="Profile picture - R"
         >
-            R
+            <span>R</span>
         </div>
         <div
             class="avatar avatar--96 avatar--magenta"
             role="img"
-            aria-label="Signed-in as Sam"
+            aria-label="Profile picture - S"
         >
-            S
+            <span>S</span>
         </div>
         <div
             class="avatar avatar--128"
             role="img"
-            aria-label="Signed-in as Turner"
+            aria-label="Profile picture - T"
         >
-            T
+            <span>T</span>
         </div>
-        <div></div>
     </div>
 `;

package/src/less/breadcrumbs/breadcrumbs.less

@@ -34,8 +34,8 @@ nav.breadcrumbs > ul > li[hidden] {
 }
 
 nav.breadcrumbs > ul > li svg {
-    margin-left: 3px;
-    margin-right: 3px;
+    margin-left: 6px;
+    margin-right: 6px;
 }
 
 nav.breadcrumbs > ul > li > a {

package/src/less/bundles/skin-headless.less

@@ -11,6 +11,7 @@
 @import "../calendar/calendar.less";
 @import "../checkbox/checkbox.less";
 @import "../chip/chip.less";
+@import "../chips-combobox/chips-combobox.less";
 @import "../combobox/combobox.less";
 @import "../confirm-dialog/confirm-dialog.less";
 @import "../cta-button/cta-button.less";
@@ -49,6 +50,7 @@
 @import "../section-title/section-title.less";
 @import "../segmented-buttons/segmented-buttons.less";
 @import "../select/select.less";
+@import "../skeleton/skeleton.less";
 @import "../snackbar-dialog/snackbar-dialog.less";
 @import "../split-button/split-button.less";
 @import "../star-rating/star-rating.less";

package/src/less/button/button.less

@@ -185,7 +185,7 @@ a.fake-btn--large svg.icon {
 
 button.btn--small svg.icon,
 a.fake-btn--small svg.icon {
-    max-height: @button-height-xsmall - (@button-padding-vertical-small * 2);
+    max-height: @button-height-small - (@button-padding-vertical-small * 2);
 }
 
 button.btn--primary[disabled],
@@ -344,9 +344,9 @@ a.fake-btn--large {
 
 button.btn--small,
 a.fake-btn--small {
-    border-radius: var(--btn-border-radius, calc(@button-height-xsmall / 2));
+    border-radius: var(--btn-border-radius, calc(@button-height-small / 2));
     font-size: var(--font-size-default);
-    min-height: @button-height-xsmall;
+    min-height: @button-height-small;
     padding: @button-padding-vertical-small @button-padding-horizontal-small;
 }
 

package/src/less/chips-combobox/chips-combobox.less

@@ -0,0 +1,127 @@
+@import "../variables/variables.less";
+
+.chips-combobox {
+    background-color: var(--color-background-secondary);
+    border: 1px solid var(--color-stroke-default);
+    border-radius: var(--border-radius-50);
+    display: inline-block;
+    padding-bottom: var(--spacing-100);
+    padding-inline-end: var(--spacing-200);
+    padding-inline-start: var(--spacing-100);
+    padding-top: var(--spacing-100);
+    position: relative;
+}
+
+.chips-combobox--fluid {
+    display: block;
+}
+
+.chips-combobox__items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    list-style: none;
+    margin: 0;
+    margin-bottom: var(--spacing-100);
+    padding: 0;
+}
+
+.chips-combobox__items:empty {
+    display: none;
+}
+
+.chips-combobox__items li {
+    display: inline-block;
+}
+
+.chips-combobox .combobox__control > input {
+    background-color: inherit;
+    border: none;
+    border-radius: 0;
+    height: auto;
+    margin: 0 var(--spacing-100);
+    padding: var(--spacing-75) 0;
+    width: calc(100% - var(--spacing-200));
+}
+
+.chips-combobox .combobox__control > input:focus {
+    outline: none;
+}
+
+.chips-combobox .combobox {
+    margin-inline-start: calc(var(--spacing-100) * -1);
+    width: calc(100% + var(--spacing-300));
+}
+
+.chips-combobox .combobox svg.icon {
+    pointer-events: none;
+    position: absolute;
+    right: var(--spacing-200);
+    top: calc(50% - var(--spacing-100));
+    transform: rotateX(0deg);
+    transition: transform 200ms linear;
+}
+
+.chips-combobox .combobox__listbox {
+    top: calc(100% + var(--spacing-150));
+}
+
+.chips-combobox .combobox__option[role^="option"] {
+    border-style: none;
+}
+
+.chips-combobox .combobox__option span {
+    pointer-events: none;
+}
+
+.chips-combobox:focus-within {
+    background-color: var(--color-background-primary);
+    border-color: var(--color-stroke-strong);
+}
+
+// a custom chevron flip is needed since combobox
+// is too specific with its selector of the icons size
+.chips-combobox .combobox--expanded svg.icon {
+    transform: rotateX(180deg);
+}
+
+/** Error State **/
+.chips-combobox--error {
+    border-color: var(--color-stroke-attention);
+}
+
+.chips-combobox--error:focus-within {
+    border-color: var(--color-stroke-attention);
+}
+
+/** Disabled State **/
+.chips-combobox[aria-disabled] {
+    border-color: var(--color-stroke-disabled);
+    pointer-events: none;
+}
+
+.chips-combobox[aria-disabled] .chip {
+    color: var(--color-foreground-disabled);
+}
+
+.chips-combobox[aria-disabled] svg.icon {
+    fill: var(--color-foreground-disabled);
+}
+
+.chips-combobox[aria-disabled] .combobox__control > input {
+    border: none;
+    color: var(--color-foreground-disabled);
+}
+
+.chips-combobox[aria-disabled] .combobox__control > input::placeholder {
+    color: var(--color-foreground-disabled);
+}
+
+// stylelint-disable no-descending-specificity
+
+// this is needed to fix the input padding in rtl
+// that combobox is setting for some reason
+[dir="rtl"] .chips-combobox .combobox__control > input {
+    padding: var(--spacing-75) 0;
+}
+// stylelint-enable no-descending-specificity