@ebay/skin 17.3.0 → 17.4.0-next.0

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

@@ -365,3 +365,45 @@ export const floatingLabelSelected = () => `
     </div>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="listbox-button demo-a11y-text-spacing">
+    <button class="btn btn--form" aria-expanded="true" aria-haspopup="listbox">
+        <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">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </button>
+    <div class="listbox-button__listbox">
+        <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">
+                    <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">
+                    <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">
+                    <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">
+                    <use href="#icon-tick-16"></use>
+                </svg>
+            </div>
+        </div>
+    </div>
+</span>
+`;

package/src/less/menu/stories/misc.stories.js

@@ -30,3 +30,13 @@ export const separator = () => `
     </div>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="menu demo-a11y-text-spacing">
+    <span class="menu__items" role="menu">
+        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 1<span class="badge">1</span></span></div>
+        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 2<span class="badge">10</span></span></div>
+        <div class="menu__item menu__item--badged" role="menuitem"><span>Button 3<span class="badge">99+</span></span></div>
+    </span>
+</span>
+`;

package/src/less/menu-button/stories/base.stories.js

@@ -415,3 +415,29 @@ export const separator = () => `
     </div>
 </span>
 `;
+
+export const textSpacing = () => `
+<span class="menu-button demo-a11y-text-spacing">
+    <button class="btn" type="button" aria-expanded="true" aria-haspopup="true">
+        <span class="btn__cell">
+            <span class="btn__text">Button</span>
+            <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-down-12"></use>
+            </svg>
+        </span>
+    </button>
+    <div class="menu-button__menu">
+        <div class="menu-button__items" role="menu">
+            <div class="menu-button__item" role="menuitem" tabindex="0">
+                <span>Item 1 with a very very very long string</span>
+            </div>
+            <div class="menu-button__item" role="menuitem">
+                <span>Item 20000</span>
+            </div>
+            <div class="menu-button__item" role="menuitem">
+                <span>Item 30000</span>
+            </div>
+        </div>
+    </div>
+</span>
+`;

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

@@ -198,3 +198,25 @@ export const formErrors = () => `
     </div>
 </section>
 `;
+
+export const textSpacing = () => `
+<section class="page-notice page-notice--information demo-a11y-text-spacing" role="region" aria-label="Information">
+    <div class="page-notice__header">
+        <svg class="icon icon--information-filled-16" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
+        </svg>
+    </div>
+    <div class="page-notice__main">
+        <h3 class="page-notice__title">Notice Title</h3>
+        <p>Opt into eBay payments before Jan 12th to pay no selling fees.</p>
+    </div>
+    <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
+    <div class="page-notice__footer">
+        <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
+            <svg aria-hidden="true" class="icon icon--close-16" height="14" width="14">
+                <use href="#icon-close-16"></use>
+            </svg>
+        </a>
+    </div>
+</section>
+`;

package/src/less/pagination/stories/overflow.stories.js

@@ -280,3 +280,52 @@ export const endMenuExpanded = () => `
     </a>
 </nav>
 `;
+
+export const textSpacing = () => `
+<nav class="pagination demo-a11y-text-spacing" aria-labelledby="pagination-heading-4" role="navigation">
+    <span aria-live="polite" role="status">
+        <h2 class="clipped" id="pagination-heading-3">Results Pagination - Page 10</h2>
+    </span>
+    <a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
+        <svg class="icon icon--arrow-left-16" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
+        </svg>
+    </a>
+    <ol class="pagination__items">
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=1" class="pagination__item">1</a>
+        </li>
+        <li>
+            <span class="pagination__item">
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
+                </svg>
+            </span>
+        </li>
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=43" class="pagination__item">43</a>
+        </li>
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=44" class="pagination__item" aria-current="page">44</a>
+        </li>
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=45" class="pagination__item">45</a>
+        </li>
+        <li>
+            <span class="pagination__item">
+                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                    <use href="#icon-overflow-horizontal-24"></use>
+                </svg>
+            </span>
+        </li>
+        <li>
+            <a href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=80" class="pagination__item">80</a>
+        </li>
+    </ol>
+    <a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
+        <svg class="icon icon--arrow-right-16" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
+        </svg>
+    </a>
+</nav>
+`;

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

@@ -202,3 +202,48 @@ export const panelScrollWithFooter = () => `
     </div>
 </div>
 `;
+
+export const textSpacing = () => `
+<div aria-labelledby="panel-title" aria-modal="true" class="panel-dialog demo-a11y-text-spacing" role="dialog">
+    <div class="panel-dialog__window">
+        <div class="panel-dialog__header">
+            <h2 id="panel-title">Scrolling Panel with Footer</h2>
+            <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-16" aria-hidden="true">
+                    <use href="#icon-close-16"></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>
+            <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>
+            <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>
+            <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>
+`;

package/src/less/phone-input/phone-input.less

@@ -0,0 +1,173 @@
+@import "../variables/variables.less";
+@import "../mixins/private/token-mixins.less";
+
+.phone-input,
+.phone-input .listbox-button {
+    display: inline-flex;
+}
+
+.phone-input button.btn {
+    border-radius: 8px 0 0 8px;
+    min-width: 64px;
+    outline: none;
+    padding-inline: var(--spacing-200) var(--spacing-100);
+}
+
+.phone-input button.btn svg.icon:last-child {
+    margin-inline-start: var(--spacing-50);
+}
+
+.phone-input .listbox-button svg.flag {
+    height: 18px;
+    width: 24px;
+}
+
+.phone-input .listbox-button__value,
+.phone-input .listbox__value {
+    display: inline-flex;
+
+    & svg {
+        margin-inline-end: var(--spacing-200);
+    }
+
+    & span {
+        margin-inline-end: var(--spacing-100);
+    }
+
+    & span:last-child {
+        color: var(--color-foreground-secondary);
+    }
+}
+
+.phone-input .listbox-button__value span:nth-of-type(1),
+.phone-input .listbox__value span:nth-of-type(1) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.phone-input .textbox {
+    align-items: center;
+    .background-color-token(textbox-background-color, color-background-secondary);
+    .border-color-token(textbox-border-color, color-stroke-default);
+    border-radius: 0 var(--border-radius-50) var(--border-radius-50) 0;
+    border-style: solid;
+    border-width: 1px;
+    color: var(--textbox-prefix-color, var(--color-foreground-primary));
+    display: inline-flex;
+    margin-left: -1px;
+    padding-inline-start: var(--spacing-100);
+}
+
+// To vertically re-align the text inside the textbox excluding floating label
+// stylelint-disable no-descending-specificity
+.phone-input > .textbox > span:first-child,
+.phone-input > .textbox > input.textbox__control {
+    padding-top: 2px;
+}
+
+.phone-input .textbox > input.textbox__control {
+    border: none;
+    height: 36px;
+    padding-inline: var(--spacing-50);
+}
+
+.phone-input .textbox > input.textbox__control:focus {
+    .background-color-token(textbox-focus-background-color, color-background-secondary);
+    outline: none;
+}
+
+.phone-input button.btn:focus,
+.phone-input:not(.phone-input--readonly) .textbox:focus-within {
+    .background-color-token(textbox-focus-background-color, color-background-secondary);
+    .border-color-token(textbox-focus-border-color, color-stroke-strong);
+    box-shadow: 0 0 0 0.5pt var(--color-stroke-strong);
+    position: relative;
+    z-index: 1;
+}
+
+.phone-input--large {
+    height: 48px;
+}
+
+.phone-input--fluid,
+.phone-input--fluid .textbox,
+.phone-input--fluid .textbox > input.textbox__control {
+    width: 100%;
+}
+
+.phone-input--readonly .listbox-button button[aria-disabled="true"],
+.phone-input--readonly .listbox-button button[disabled] {
+    .border-color-token(textbox-border-color, color-stroke-default);
+}
+
+.phone-input--readonly .textbox span:first-child {
+    .color-token(textbox-disabled-foreground-color, color-foreground-secondary);
+}
+
+.phone-input--readonly input.textbox__control[readonly] {
+    .background-color-token(textbox-background-color, color-background-secondary);
+    .color-token(textbox-foreground-color, color-foreground-secondary);
+}
+
+.phone-input--disabled svg.flag {
+    filter: var(--color-icon-disabled-filter);
+}
+
+.phone-input--disabled .textbox {
+    .border-color-token(textbox-disabled-border-color, color-background-disabled);
+}
+
+.phone-input--disabled .textbox span:first-child {
+    .color-token(textbox-disabled-foreground-color, color-foreground-disabled);
+}
+
+.phone-input--error .textbox {
+    .border-color-token(textbox-invalid-foreground-color, color-stroke-attention);
+    .border-left-color-token(textbox-border-color, color-stroke-default);
+}
+
+// added to fix the floating label because of the z-index in :focus-within
+.phone-input .floating-label .floating-label__label {
+    z-index: 2;
+}
+
+.phone-input .floating-label .textbox > span:first-child {
+    padding-bottom: 2px;
+    padding-top: 18px;
+}
+
+.phone-input .floating-label--large .textbox > span:first-child {
+    padding-bottom: 5px;
+    padding-top: 23px;
+}
+
+@media screen and (min-width: @_screen-size-XS) {
+    .phone-input .listbox-button__value span:nth-of-type(1),
+    .phone-input .listbox__value span:nth-of-type(1) {
+        max-width: 50vw;
+    }
+
+    .phone-input .textbox > input.textbox__control {
+        max-width: 180px;
+    }
+}
+
+[dir="rtl"] {
+    .phone-input button.btn {
+        border-radius: 0 8px 8px 0;
+    }
+
+    .phone-input .textbox {
+        border-radius: var(--border-radius-50) 0 0 var(--border-radius-50);
+        /* input type='tel | number' by default starts from left to right in RTL mode */
+        direction: ltr;
+        margin-left: 0;
+        margin-right: -1px;
+    }
+
+    .phone-input .listbox-button__value span:last-child,
+    .phone-input .listbox__value span:last-child {
+        direction: ltr;
+    }
+}