npm - @ebay/skin - Versions diffs - 17.0.0 → 17.1.0-0 - Mend

@ebay/skin 17.0.0 → 17.1.0-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/ICON-CREATION.md +10 -0
package/_cdn/skin/v17.1.0-0/skin-default.min.css +69 -0
package/_cdn/skin/v17.1.0-0/skin-full.min.css +151 -0
package/_cdn/skin/v17.1.0-0/skin-headless.min.css +6 -0
package/dist/avatar/avatar.css +20 -16
package/dist/breadcrumbs/breadcrumbs.css +6 -2
package/dist/eek/eek.css +2 -2
package/dist/field/field.css +5 -1
package/dist/floating-label/floating-label.css +2 -2
package/dist/icon/icon.css +1 -2
package/dist/listbox-button/listbox-button.css +14 -5
package/dist/progress-stepper/progress-stepper.css +8 -0
package/dist/skeleton/skeleton.css +15 -15
package/dist/tokens/evo-light.css +1 -0
package/package.json +9 -6
package/src/less/avatar/avatar.less +39 -16
package/src/less/breadcrumbs/breadcrumbs.less +7 -2
package/src/less/eek/eek.less +1 -1
package/src/less/field/field.less +6 -1
package/src/less/field/stories/stacked.stories.js +65 -5
package/src/less/floating-label/floating-label.less +5 -2
package/src/less/icon/icon.less +1 -2
package/src/less/listbox-button/listbox-button.less +13 -2
package/src/less/listbox-button/stories/base.stories.js +78 -0
package/src/less/listbox-button/stories/error/error.base.stories.js +325 -0
package/src/less/listbox-button/stories/error/error.cascade.stories.js +133 -0
package/src/less/listbox-button/stories/error/error.dimensions.stories.js +43 -0
package/src/less/listbox-button/stories/error/error.form.stories.js +97 -0
package/src/less/progress-stepper/progress-stepper.less +15 -0
package/src/less/progress-stepper/stories/progress-stepper.stories.js +0 -218
package/src/less/section-notice/stories/icon-24.stories.js +4 -4
package/src/less/skeleton/skeleton.less +14 -14
package/src/tokens/evo-light.css +1 -0
package/_cdn/skin/v17.0.0/skin-default.min.css +0 -69
package/_cdn/skin/v17.0.0/skin-full.min.css +0 -151
package/_cdn/skin/v17.0.0/skin-headless.min.css +0 -6

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

@@ -159,60 +159,6 @@ export const allSelected = () => `
 </div>
 `;
-export const currentBubble = () => `
-<div class="progress-stepper">
-    <div class="progress-stepper__items  progress-stepper__items--current" role="list">
-        <div class="progress-stepper__item" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-confirmation-24"></use>
-                </svg>
-            </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" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-confirmation-24"></use>
-                </svg>
-            </span>
-            <span class="progress-stepper__text">
-                <h4>Shipped</h4>
-                <p>July 4th</p>
-            </span>
-        </div>
-        <hr class="progress-stepper__separator" role="presentation" />
-        <div aria-current="step" class="progress-stepper__item" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-current-24"></use>
-                </svg>
-            </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" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-upcoming-24"></use>
-                </svg>
-            </span>
-            <span class="progress-stepper__text">
-                <h4>Delivered</h4>
-                <p>July 6th</p>
-            </span>
-        </div>
-    </div>
-</div>
-`;
 export const noneSelected = () => `
 <div class="progress-stepper">
     <div class="progress-stepper__items  progress-stepper__items--upcoming" role="list">
@@ -322,60 +268,6 @@ export const RTL = () => `
 `;
-export const currentBubbleRTL = () => `
-<div class="progress-stepper" dir="rtl">
-    <div class="progress-stepper__items  progress-stepper__items--current" role="list">
-        <div class="progress-stepper__item" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-confirmation-24"></use>
-                </svg>
-            </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" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-confirmation-24"></use>
-                </svg>
-            </span>
-            <span class="progress-stepper__text">
-                <h4>Shipped</h4>
-                <p>July 4th</p>
-            </span>
-        </div>
-        <hr class="progress-stepper__separator" role="presentation" />
-        <div aria-current="step" class="progress-stepper__item" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-current-24"></use>
-                </svg>
-            </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" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-upcoming-24"></use>
-                </svg>
-            </span>
-            <span class="progress-stepper__text">
-                <h4>Delivered</h4>
-                <p>July 6th</p>
-            </span>
-        </div>
-    </div>
-</div>
-`;
 export const vertical = () => `
 <div class="progress-stepper progress-stepper--vertical">
     <div class="progress-stepper__items" role="list">
@@ -546,116 +438,6 @@ export const verticalRTL = () => `
 </div>
 `;
-export const currentBubbleVertical = () => `
-<div class="progress-stepper progress-stepper--vertical">
-    <div class="progress-stepper__items  progress-stepper__items--current" role="list">
-        <div class="progress-stepper__item" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-confirmation-24"></use>
-                </svg>
-            </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" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-confirmation-24"></use>
-                </svg>
-            </span>
-            <span class="progress-stepper__text">
-                <h4>Shipped</h4>
-                <p>July 4th</p>
-            </span>
-        </div>
-        <hr class="progress-stepper__separator" role="presentation" />
-        <div aria-current="step" class="progress-stepper__item" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-current-24"></use>
-                </svg>
-            </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" role="listitem">
-            <span class="progress-stepper__icon">
-                <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
-                    <use href="#icon-stepper-upcoming-24"></use>
-                </svg>
-            </span>
-            <span class="progress-stepper__text">
-                <h4>Delivered</h4>
-                <p>July 6th</p>
-            </span>
-        </div>
-    </div>
-</div>
-`;
-export const currentBubbleVerticalRTL = () => `
-<div dir="rtl">
-    <div class="progress-stepper progress-stepper--vertical">
-        <div class="progress-stepper__items  progress-stepper__items--current" role="list">
-            <div class="progress-stepper__item" role="listitem">
-                <span class="progress-stepper__icon">
-                    <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                        <use href="#icon-stepper-confirmation-24"></use>
-                    </svg>
-                </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" role="listitem">
-                <span class="progress-stepper__icon">
-                    <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                        <use href="#icon-stepper-confirmation-24"></use>
-                    </svg>
-                </span>
-                <span class="progress-stepper__text">
-                    <h4>Shipped</h4>
-                    <p>July 4th</p>
-                </span>
-            </div>
-            <hr class="progress-stepper__separator" role="presentation" />
-            <div aria-current="step" class="progress-stepper__item" role="listitem">
-                <span class="progress-stepper__icon">
-                    <svg role="img" aria-hidden="true" class="icon" focusable="false" height="24" width="24">
-                        <use href="#icon-stepper-current-24"></use>
-                    </svg>
-                </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" role="listitem">
-                <span class="progress-stepper__icon">
-                    <svg role="img" aria-label="upcoming" class="icon" focusable="false" height="24" width="24">
-                        <use href="#icon-stepper-upcoming-24"></use>
-                    </svg>
-                </span>
-                <span class="progress-stepper__text">
-                    <h4>Delivered</h4>
-                    <p>July 6th</p>
-                </span>
-            </div>
-        </div>
-    </div>
-</div>
-`;
 export const errorState = () => `
 <div class="progress-stepper">
     <div class="progress-stepper__items" role="list">

package/src/less/section-notice/stories/icon-24.stories.js CHANGED Viewed

@@ -181,8 +181,8 @@ export const RTL = () => `
 export const vault = () => `
 <div class="section-notice" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--the-ebay-vault-24-fit">
-            <use href="#icon-the-ebay-vault-24-fit"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--the-ebay-vault-24">
+            <use href="#icon-the-ebay-vault-24"></use>
         </svg>
     </div>
     <div class="section-notice__main">
@@ -229,8 +229,8 @@ export const selling = () => `
 export const warranty = () => `
 <div class="section-notice" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">
-        <svg aria-hidden="true" focusable="false" class="icon--free-warranty-24-fit">
-            <use href="#icon-free-warranty-24-fit"></use>
+        <svg aria-hidden="true" focusable="false" class="icon--free-warranty-24">
+            <use href="#icon-free-warranty-24"></use>
         </svg>
     </div>
     <div class="section-notice__main">

package/src/less/skeleton/skeleton.less CHANGED Viewed

@@ -108,20 +108,20 @@ span.skeleton__textbox {
     display: inline-block;
 }
-span.skeleton__avatar + span,
-span.skeleton__button + span,
-span.skeleton__text + span,
-span.skeleton__image + span,
-span.skeleton__textbox + span {
-    margin-inline-start: var(--spacing-100);
-}
-div.skeleton__avatar,
-div.skeleton__button,
-div.skeleton__text,
-div.skeleton__image,
-div.skeleton__textbox {
-    margin-block-start: var(--spacing-150);
+span.skeleton__avatar:not(:last-child),
+span.skeleton__button:not(:last-child),
+span.skeleton__text:not(:last-child),
+span.skeleton__image:not(:last-child),
+span.skeleton__textbox:not(:last-child) {
+    margin-inline-end: var(--spacing-100);
+}
+div.skeleton__avatar:not(:last-child),
+div.skeleton__button:not(:last-child),
+div.skeleton__text:not(:last-child),
+div.skeleton__image:not(:last-child),
+div.skeleton__textbox:not(:last-child) {
+    margin-block-end: var(--spacing-150);
 }
 .skeleton--elevated {

package/src/tokens/evo-light.css CHANGED Viewed

@@ -172,4 +172,5 @@
         var(--color-ai-solid-green-subtle) 66%,
         var(--color-ai-solid-green-subtle) 100%
     );
+    --color-icon-disabled-filter: grayscale(1) opacity(0.25);
 }