@ebay/skin 15.0.0-1 → 15.1.0-0

package/src/less/listbox-button/stories/cascade.stories.js

@@ -5,9 +5,10 @@ export const RTL = () => `
     <span class="listbox-button">
         <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
             <span class="btn__cell">
-                <span class="btn__text">Color: Red</span>
+                <span class="btn__label">Color: </span>
+                <span class="btn__text">Red</span>
                 <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-dropdown"></use>
+                    <use href="#icon-dropdown"></use>
                 </svg>
             </span>
         </button>
@@ -16,25 +17,25 @@ export const RTL = () => `
                 <div class="listbox-button__option" role="option" aria-selected="true">
                     <span class="listbox-button__value">Red</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="listbox-button__option" role="option">
                     <span class="listbox-button__value">Blue</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="listbox-button__option" role="option">
                     <span class="listbox-button__value">Yellow</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="listbox-button__option" role="option">
                     <span class="listbox-button__value">Green</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
             </div>
@@ -48,9 +49,10 @@ export const color = () => `
     <span class="listbox-button">
         <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
             <span class="btn__cell">
-                <span class="btn__text">Color: Red</span>
+                <span class="btn__label">Color: </span>
+                <span class="btn__text">Red</span>
                 <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-dropdown"></use>
+                    <use href="#icon-dropdown"></use>
                 </svg>
             </span>
         </button>
@@ -59,25 +61,25 @@ export const color = () => `
                 <div class="listbox-button__option" role="option" aria-selected="true">
                     <span class="listbox-button__value">Red</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="listbox-button__option" role="option">
                     <span class="listbox-button__value">Blue</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="listbox-button__option" role="option">
                     <span class="listbox-button__value">Yellow</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="listbox-button__option" role="option">
                     <span class="listbox-button__value">Green</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
             </div>
@@ -91,9 +93,10 @@ export const fontSize = () => `
     <span class="listbox-button">
         <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
             <span class="btn__cell">
-                <span class="btn__text">Color: Red</span>
+                <span class="btn__label">Color: </span>
+                <span class="btn__text">Red</span>
                 <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use xlink:href="#icon-dropdown"></use>
+                    <use href="#icon-dropdown"></use>
                 </svg>
             </span>
         </button>
@@ -102,25 +105,25 @@ export const fontSize = () => `
                 <div class="listbox-button__option" role="option" aria-selected="true">
                     <span class="listbox-button__value">Red</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="listbox-button__option" role="option">
                     <span class="listbox-button__value">Blue</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="listbox-button__option" role="option">
                     <span class="listbox-button__value">Yellow</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
                 <div class="listbox-button__option" role="option">
                     <span class="listbox-button__value">Green</span>
                     <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                        <use xlink:href="#icon-tick-small"></use>
+                        <use href="#icon-tick-small"></use>
                     </svg>
                 </div>
             </div>

package/src/less/listbox-button/stories/dimensions.stories.js

@@ -4,9 +4,10 @@ export const fluid = () => `
 <span class="listbox-button listbox-button--fluid">
     <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
         <span class="btn__cell">
-            <span class="btn__text">Color: Red</span>
+                <span class="btn__label">Color: </span>
+                <span class="btn__text">Red</span>
             <svg class="icon icon--dropdown" focusable="false" height="8" width="8" aria-hidden="true">
-                <use xlink:href="#icon-dropdown"></use>
+                <use href="#icon-dropdown"></use>
             </svg>
         </span>
     </button>
@@ -15,25 +16,25 @@ export const fluid = () => `
             <div class="listbox-button__option" role="option" aria-selected="true">
                 <span class="listbox-button__value">Red</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Blue</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Yellow</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
             <div class="listbox-button__option" role="option">
                 <span class="listbox-button__value">Green</span>
                 <svg class="icon icon--tick-small" focusable="false" height="8" width="8">
-                    <use xlink:href="#icon-tick-small"></use>
+                    <use href="#icon-tick-small"></use>
                 </svg>
             </div>
         </div>

package/src/less/menu/menu.less

@@ -66,6 +66,8 @@ a.fake-menu__item:not([href]),
 button.fake-menu__item[disabled],
 div.menu__item[role^="menuitem"][aria-disabled="true"] {
     .color-token(menu-menuitem-disabled-foreground-color, color-foreground-disabled);
+    background-color: unset;
+    font-weight: unset;
 }
 
 div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-small {

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

@@ -62,6 +62,9 @@
         align-self: center;
         flex: 1 1 auto;
         margin: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     & > :last-child:not(:only-child) {

package/src/less/mixins/private/filter-menu-mixins.less

@@ -12,4 +12,17 @@
     &:hover {
         background-color: var(--color-state-primary-hover, color-state-primary-hover);
     }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+        .color-token(filter-menu-item-foreground-color-disabled, color-foreground-disabled);
+
+        span > svg {
+            .color-token(filter-menu-item-icon-color-disabled, color-foreground-disabled);
+        }
+
+        &:hover {
+            background-color: inherit;
+        }
+    }
 }

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

@@ -17,6 +17,13 @@
     &:active {
         font-weight: bold;
     }
+
+    &:disabled,
+    &[aria-disabled="true"] {
+        .color-token(listbox-option-disabled-foreground-color, color-foreground-disabled);
+        background-color: unset;
+        font-weight: unset;
+    }
 }
 
 .listbox-option-status() {

package/src/less/page-notice/page-notice.less

@@ -112,9 +112,13 @@ span[role="region"].page-notice {
     text-align: right;
 }
 
-/* support legacy 6.5 notice with heading + paragaphs */
 .page-notice__main p {
     font-size: @font-size-regular;
+    margin: 2px 0 0;
+}
+
+/* support legacy 6.5 notice with heading + paragaphs */
+.page-notice__main .page-notice__title ~ p {
     margin: @spacing-50 0 0;
 }
 

package/src/less/page-notice/stories/page-notice.stories.js

@@ -126,6 +126,22 @@ export const informationWithLink = () => `
 </section>
 `;
 
+export const InformationWithParagraph = () => `
+<section class="page-notice page-notice--information" role="region" aria-label="Information">
+    <div class="page-notice__header">
+        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-small"></use>
+        </svg>
+    </div>
+    <div class="page-notice__main">
+        <p>You have opted into eBay Pay</p>
+    </div>
+    <div class="page-notice__footer">
+        <button class="fake-link">Dismiss</button>
+    </div>
+</section>
+`;
+
 export const dismissableWithTitle = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">

package/src/less/section-notice/section-notice.less

@@ -71,9 +71,13 @@ span[role="region"].section-notice {
     width: auto;
 }
 
-/* support legacy 6.5 notice with heading + paragaphs */
 .section-notice__main p {
     font-size: @font-size-regular;
+    margin: 0;
+}
+
+/* support legacy 6.5 notice with heading + paragaphs */
+.section-notice__main .section-notice__title ~ p {
     margin: @spacing-50 0 0;
 }
 

package/src/less/section-notice/stories/section-notice.stories.js

@@ -30,6 +30,22 @@ export const generalWithLink = () => `
 </div>
 `;
 
+export const confirmationWithParagraph = () => `
+<div class="section-notice section-notice--confirmation" role="region">
+    <div class="section-notice__header" role="region" aria-roledescription="Notice">
+        <svg aria-hidden="true" focusable="false" class="icon--confirmation-filled-small">
+            <use href="#icon-confirmation-filled-small"></use>
+        </svg>
+    </div>
+    <div class="section-notice__main">
+        <p>Your price has been updated.</p>
+    </div>
+    <div class="section-notice__footer">
+        <button class="fake-link">Dismiss</button>
+    </div>
+</div>
+`;
+
 export const confirmationWithButton = () => `
 <div class="section-notice section-notice--confirmation" role="region">
     <div class="section-notice__header" role="region" aria-roledescription="Notice">

package/src/less/tourtip/stories/tourtip.stories.js

@@ -41,3 +41,54 @@ export const expanded = () => `
         </div>
     </div>
 </div>`;
+
+export const withActions = () => `
+<div class="tourtip tourtip--expanded">
+    <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+        <span class="tourtip__pointer tourtip__pointer--top"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use xlink:href="#icon-close"></use>
+                    </svg>
+                </button>
+                <div class="tourtip__footer">
+                    <span class="tourtip__index">1 / 3</span>
+                    <button class="fake-link">Back</button>
+                    <button class="btn btn--primary">Next</button>
+                </span>
+            </div>
+        </div>
+    </div>
+</div>`;
+
+export const withOneAction = () => `
+<div class="tourtip tourtip--expanded">
+    <p class="tourtip__host">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+        <span class="tourtip__pointer tourtip__pointer--top"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--close" focusable="false" height="24" width="24" aria-hidden="true">
+                        <use xlink:href="#icon-close"></use>
+                    </svg>
+                </button>
+                <div class="tourtip__footer">
+                    <span class="tourtip__index">2 / 3</span>
+                    <button class="btn btn--primary">Next</button>
+                </span>
+            </div>
+        </div>
+    </div>
+</div>`;

package/src/less/tourtip/tourtip.less

@@ -30,6 +30,8 @@ span.tourtip__mask {
 .tourtip__cell {
     .bubble-cell();
 
+    flex-wrap: wrap;
+
     a {
         .color-token(tourtip-foreground-color, color-foreground-primary);
 
@@ -41,10 +43,14 @@ span.tourtip__mask {
 
 .tourtip__content {
     .bubble-content();
+
+    flex-basis: 0;
 }
 
 button.tourtip__close {
     .bubble-close();
+
+    outline-offset: -2px;
 }
 
 button.tourtip__close > svg {
@@ -121,6 +127,40 @@ span.tourtip__heading {
     display: block;
 }
 
+.tourtip__footer {
+    align-items: center;
+    display: flex;
+    justify-content: end;
+    margin-top: 16px;
+    width: 100%;
+}
+
+.tourtip__footer > button:not(:last-child),
+.tourtip__footer > a:not(:last-child) {
+    margin-right: 8px;
+}
+
+// stylelint-disable no-descending-specificity
+// TODO need to remove this once we update fake-links/links to allow no underline and black text
+.tourtip__footer > .fake-link,
+.tourtip__footer > a {
+    color: var(--color-foreground-primary);
+
+    text-decoration: none;
+
+    &:hover:not(:disabled) {
+        color: var(--color-foreground-primary);
+
+        text-decoration: underline;
+    }
+}
+// stylelint-enable no-descending-specificity
+
+.tourtip__index {
+    .color-token(tourtip-index-color, color-foreground-secondary);
+    flex: 1;
+}
+
 @media (min-width: 601px) {
     .tourtip__overlay {
         .bubble-large-screen();