@ebay/skin 14.0.6 → 14.1.0-0

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

@@ -6,8 +6,8 @@ export const panelStart = () => `
         <div class="panel-dialog__header">
             <h2 id="panel-title">Left Panel</h2>
             <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close" aria-hidden="true">
-                    <use xlink:href="#icon-close"></use>
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
                 </svg>
             </button>
         </div>
@@ -30,8 +30,8 @@ export const RTL = () => `
             <div class="panel-dialog__header">
                 <h2 id="panel-title">Left Panel</h2>
                 <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
-                    <svg class="icon icon--close" aria-hidden="true">
-                        <use xlink:href="#icon-close"></use>
+                    <svg class="icon icon--close-small" aria-hidden="true">
+                        <use xlink:href="#icon-close-small"></use>
                     </svg>
                 </button>
             </div>
@@ -52,12 +52,12 @@ export const panelEnd = () => `
 <div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
     <div class="panel-dialog__window panel-dialog__window--end">
         <div class="panel-dialog__header">
+            <h2 id="panel-title">Right Panel</h2>
             <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close" aria-hidden="true">
-                    <use xlink:href="#icon-close"></use>
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
                 </svg>
             </button>
-            <h2 id="panel-title">Right Panel</h2>
         </div>
         <div class="panel-dialog__main">
             <h3>Heading</h3>
@@ -71,15 +71,37 @@ export const panelEnd = () => `
 </div>
 `;
 
-export const panelEndSecondaryButton = () => `
+export const panelEndWithFooter = () => `
 <div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
     <div class="panel-dialog__window panel-dialog__window--end">
         <div class="panel-dialog__header">
+            <h2 id="panel-title">Right Panel</h2>
             <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close" aria-hidden="true">
-                    <use xlink:href="#icon-close"></use>
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
                 </svg>
             </button>
+        </div>
+        <div class="panel-dialog__main">
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+            <h3>Heading</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum lorem, eu sodales velit sagittis id.</p>
+            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
+        </div>
+        <div class="panel-dialog__footer">
+            <button class="btn btn--primary">Submit</button>
+            <button class="btn">Cancel</button>
+        </div>
+    </div>
+</div>
+`;
+
+export const panelEndSecondaryButton = () => `
+<div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog" role="dialog">
+    <div class="panel-dialog__window panel-dialog__window--end">
+        <div class="panel-dialog__header">
             <h2 id="panel-title">Right Panel</h2>
             <button class="fake-link panel-dialog__close" type="button">Reset</button>
         </div>

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

@@ -6,7 +6,7 @@
 @progress-stepper-large-min-width: 120px;
 
 .progress-stepper__items {
-    align-items: start;
+    align-items: flex-start;
     display: flex;
 }
 
@@ -44,6 +44,23 @@ hr.progress-stepper__separator {
     .color-token(progress-stepper-text-color, color-foreground-primary);
 
     font-size: @font-size-12;
+    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 {
+    .color-token(progress-stepper-text-light-color, color-foreground-secondary);
+}
+
+.progress-stepper__item[aria-current] .progress-stepper__text h2,
+.progress-stepper__item[aria-current] .progress-stepper__text h3,
+.progress-stepper__item[aria-current] .progress-stepper__text h4,
+.progress-stepper__item[aria-current] .progress-stepper__text h5,
+.progress-stepper__item[aria-current] .progress-stepper__text h6 {
+    font-weight: bold;
 }
 
 .progress-stepper__text p {
@@ -58,6 +75,7 @@ hr.progress-stepper__separator {
     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);
@@ -85,8 +103,8 @@ hr.progress-stepper__separator--upcoming,
 }
 
 .progress-stepper {
-    margin: @spacing-200 0;
     overflow: auto;
+    padding: @spacing-200 0;
 }
 
 .progress-stepper__item:first-child .progress-stepper__text {
@@ -104,7 +122,7 @@ hr.progress-stepper__separator--upcoming,
 .progress-stepper--vertical .progress-stepper__item {
     align-items: flex-start;
     flex-direction: row;
-    height: 32px;
+    height: 24px;
     width: auto;
 }
 
@@ -143,7 +161,7 @@ hr.progress-stepper__separator--upcoming,
 }
 
 .progress-stepper--vertical .progress-stepper__item .progress-stepper__text {
-    align-self: flex-start;
+    align-self: center;
     margin-left: @spacing-200;
     margin-top: 0;
     text-align: left;
@@ -153,7 +171,7 @@ hr.progress-stepper__separator--upcoming,
 
 .progress-stepper--vertical .progress-stepper__icon {
     display: inline-block;
-    height: 28px;
+    height: 24px;
     margin: inherit;
     width: 24px;
 }
@@ -164,7 +182,7 @@ hr.progress-stepper__separator--upcoming,
     height: 51px;
     margin-bottom: 12px;
     margin-left: 11px;
-    margin-top: -15px;
+    margin-top: -4px;
     min-width: inherit;
     width: 2px;
 }

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

@@ -29,7 +29,9 @@ export const base = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-current"></use>
+                </svg>
             </span>
             <span class="progress-stepper__text">
                 <h4>Transit</h4>
@@ -37,9 +39,9 @@ export const base = () => `
             </span>
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
-        <div class="progress-stepper__item" role="listitem">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="4">4</span>
+                <span role="img" aria-label="upcoming"></span>
             </span>
             <span class="progress-stepper__text">
                 <h4>Delivered</h4>
@@ -105,6 +107,52 @@ export const allSelected = () => `
 `;
 
 export const noneSelected = () => `
+<div class="progress-stepper">
+    <div class="progress-stepper__items  progress-stepper__items--upcoming" role="list">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Started</h4>
+                <p>July 3rd</p>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Shipped</h4>
+                <p>July 4th</p>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Transit</h4>
+                <p>July 5th</p>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+            <span class="progress-stepper__text">
+                <h4>Delivered</h4>
+                <p>July 6th</p>
+            </span>
+        </div>
+    </div>
+</div>
+`;
+
+export const numbersNoneSelected = () => `
 <div class="progress-stepper">
     <div class="progress-stepper__items  progress-stepper__items--upcoming" role="list">
         <div class="progress-stepper__item" role="listitem">
@@ -179,7 +227,9 @@ export const RTL = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-current"></use>
+                </svg>
             </span>
             <span class="progress-stepper__text">
                 <h4>Transit</h4>
@@ -187,9 +237,9 @@ export const RTL = () => `
             </span>
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
-        <div class="progress-stepper__item" role="listitem">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="4">4</span>
+                <span role="img" aria-label="upcoming"></span>
             </span>
             <span class="progress-stepper__text">
                 <h4>Delivered</h4>
@@ -219,7 +269,9 @@ export const vertical = () => `
         <hr class="progress-stepper__separator" role="presentation" />
         <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="2">2</span>
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-current"></use>
+                </svg>
             </span>
             <span class="progress-stepper__text">
                 <h3>Preparing for shipment</h3>
@@ -227,13 +279,50 @@ export const vertical = () => `
             </span>
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
+            </span>
+           <span class="progress-stepper__text">
+                <h3>Delivered</h3>
+                <p>Guaranteed Wednesday, October 09.</p>
+            </span>
+        </div>
+    </div>
+</div>
+`;
+
+export const verticalSingleLine = () => `
+<div class="progress-stepper progress-stepper--vertical">
+    <div class="progress-stepper__items" role="list">
         <div class="progress-stepper__item" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-confirmation"></use>
+                </svg>
+            </span>
+            <span class="progress-stepper__text">
+                <h3>Order placed</h3>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
+            <span class="progress-stepper__icon">
+                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                    <use xlink:href="#icon-stepper-current"></use>
+                </svg>
+            </span>
+            <span class="progress-stepper__text">
+                <h3>Preparing for shipment</h3>
+            </span>
+        </div>
+        <hr class="progress-stepper__separator" role="presentation" />
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
+            <span class="progress-stepper__icon">
+                <span role="img" aria-label="upcoming"></span>
             </span>
             <span class="progress-stepper__text">
                 <h3>Delivered</h3>
-                <p>Guaranteed Wednesday, October 09.</p>
             </span>
         </div>
     </div>
@@ -259,7 +348,9 @@ export const verticalRTL = () => `
             <hr class="progress-stepper__separator" role="presentation" />
             <div aria-current="step" class="progress-stepper__item progress-stepper__item--current" role="listitem">
                 <span class="progress-stepper__icon">
-                    <span class="step" role="img" aria-label="2">2</span>
+                    <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
+                        <use xlink:href="#icon-stepper-current"></use>
+                    </svg>
                 </span>
                 <span class="progress-stepper__text">
                     <h3>Preparing for shipment</h3>
@@ -267,9 +358,9 @@ export const verticalRTL = () => `
                 </span>
             </div>
             <hr class="progress-stepper__separator" role="presentation" />
-            <div class="progress-stepper__item" role="listitem">
+            <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
                 <span class="progress-stepper__icon">
-                    <span class="step" role="img" aria-label="3">3</span>
+                    <span role="img" aria-label="upcoming"></span>
                 </span>
                 <span class="progress-stepper__text">
                     <h3>Delivered</h3>
@@ -308,11 +399,11 @@ export const infoState = () => `
                 </span>
             </div>
         <hr class="progress-stepper__separator" role="presentation" />
-        <div class="progress-stepper__item" role="listitem">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <span role="img" aria-label="upcoming"></span>
             </span>
-            <span class="progress-stepper__text">
+           <span class="progress-stepper__text">
                 <h4>Delivered</h4>
                 <p>July 6th</p>
             </span>
@@ -347,9 +438,9 @@ export const errorState = () => `
             </span>
         </div>
         <hr class="progress-stepper__separator" role="presentation" />
-        <div class="progress-stepper__item" role="listitem">
+        <div class="progress-stepper__item progress-stepper__item--upcoming" role="listitem">
             <span class="progress-stepper__icon">
-                <span class="step" role="img" aria-label="3">3</span>
+                <span role="img" aria-label="upcoming"></span>
             </span>
             <span class="progress-stepper__text">
                 <h4>Delivered</h4>

package/src/less/select/select.less

@@ -71,18 +71,22 @@ span.select {
 }
 
 .select select[disabled] {
-    .background-color-token(select-disabled-background-color, color-background-secondary);
-    .color-token(select-disabled-foregound-color, color-foreground-ghost);
+    .background-color-token(select-disabled-background-color, color-background-disabled);
+    .color-token(select-disabled-foregound-color, color-foreground-on-disabled);
+    opacity: 1;
 }
 
-.select--borderless select[disabled] {
-    .background-color-token(select-borderless-disabled-background-color, color-background-secondary);
-    .color-token(select-borderless-disabled-foregound-color, color-foreground-disabled);
+.select select[disabled] + svg {
+    .color-token(select-disabled-foregound-color, color-foreground-on-disabled);
 }
 
 .select select[readonly] {
-    .background-color-token(select-disabled-background-color, color-background-secondary);
-    .color-token(select-readonly-foregound-color, color-foreground-ghost);
+    .background-color-token(select-disabled-background-color, color-background-disabled);
+    .color-token(select-disabled-foregound-color, color-foreground-on-disabled);
+}
+
+.select select[readonly] + svg {
+    .color-token(select-disabled-foregound-color, color-foreground-on-disabled);
 }
 
 .select select[aria-invalid="true"] {
@@ -102,10 +106,6 @@ span.select {
     .color-token(select-invalid-foreground-color, color-foreground-primary);
 }
 
-.select select[disabled] + svg {
-    .color-token(select-disabled-foregound-color, color-foreground-ghost);
-}
-
 // stylelint-disable no-descending-specificity
 [dir="rtl"] {
     .select > select {

package/src/svg/direction.svg

@@ -111,4 +111,9 @@
       d="M6.309 12.194a.625.625 0 0 1 0-.882L9.62 8 6.31 4.694a.628.628 0 1 1 .887-.888l3.75 3.75a.625.625 0 0 1 0 .881l-3.75 3.75a.625.625 0 0 1-.887.007Z"
     />
   </symbol>
+  <symbol viewBox="0 0 20 20" id="icon-arrow-left-medium">
+    <path
+      d="M10.707 2.293a1 1 0 0 1 0 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l5.293 5.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z"
+    />
+  </symbol>
 </svg>