@ebay/skin 17.5.0 → 18.0.0

package/src/{less → sass}/pagination/stories/overflow.stories.js

@@ -6,7 +6,7 @@ export const start = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" 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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -16,7 +16,7 @@ export const start = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                <svg class="icon icon--24" width="8" height="8" role="separator">
                     <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
@@ -38,7 +38,7 @@ export const start = () => `
         </li>
     </ol>
     <a aria-label="Next Page" 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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
@@ -51,7 +51,7 @@ export const middle = () => `
         <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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -61,7 +61,7 @@ export const middle = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                <svg class="icon icon--24" width="8" height="8" role="separator">
                     <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
@@ -77,7 +77,7 @@ export const middle = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                <svg class="icon icon--24" width="8" height="8" role="separator">
                     <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
@@ -87,7 +87,7 @@ export const middle = () => `
         </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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
@@ -100,7 +100,7 @@ export const end = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" 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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -122,7 +122,7 @@ export const end = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                <svg class="icon icon--24" width="8" height="8" role="separator">
                     <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
@@ -132,7 +132,7 @@ export const end = () => `
         </li>
     </ol>
     <a aria-label="Next Page" 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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
@@ -145,7 +145,7 @@ export const endMenuCollapsed = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" 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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -169,7 +169,7 @@ export const endMenuCollapsed = () => `
             <span class="pagination__item">
                 <span class="fake-menu-button">
                     <button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-label="Menu">
-                        <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                        <svg class="icon icon--24" width="8" height="8" role="separator">
                             <use href="#icon-overflow-horizontal-24"></use>
                         </svg>
                     </button>
@@ -203,7 +203,7 @@ export const endMenuCollapsed = () => `
         </li>
     </ol>
     <a aria-label="Next Page" 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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
@@ -216,7 +216,7 @@ export const endMenuExpanded = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" 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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -240,7 +240,7 @@ export const endMenuExpanded = () => `
             <span class="pagination__item">
                 <span class="fake-menu-button">
                     <button class="icon-btn icon-btn--transparent fake-menu-button__button" type="button" aria-expanded="true" aria-label="Menu">
-                        <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                        <svg class="icon icon--24" width="8" height="8" role="separator">
                             <use href="#icon-overflow-horizontal-24"></use>
                         </svg>
                     </button>
@@ -274,7 +274,7 @@ export const endMenuExpanded = () => `
         </li>
     </ol>
     <a aria-label="Next Page" 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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
@@ -287,7 +287,7 @@ export const textSpacing = () => `
         <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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
@@ -297,7 +297,7 @@ export const textSpacing = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                <svg class="icon icon--24" width="8" height="8" role="separator">
                     <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
@@ -313,7 +313,7 @@ export const textSpacing = () => `
         </li>
         <li>
             <span class="pagination__item">
-                <svg class="icon icon--overflow-horizontal-24" width="8" height="8" role="separator">
+                <svg class="icon icon--24" width="8" height="8" role="separator">
                     <use href="#icon-overflow-horizontal-24"></use>
                 </svg>
             </span>
@@ -323,7 +323,7 @@ export const textSpacing = () => `
         </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">
+        <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
             <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>

package/src/{less/panel-dialog/panel-dialog.less → sass/panel-dialog/panel-dialog.scss}

@@ -1,18 +1,19 @@
-@import "../variables/variables.less";
-@import "../mixins/private/dialog-mixins.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/dialog-mixins";
+@import "../mixins/private/token-mixins";
 
 .panel-dialog[role="dialog"] {
-    .dialog-base();
+    @include dialog-base();
+
     flex-direction: column;
 
-    // need to override base as panel dialog is the only one to scroll the content only
+    /* need to override base as panel dialog is the only one to scroll the content only */
     /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
     overflow-y: hidden;
 }
 
 .panel-dialog__window {
-    .dialog-window();
+    @include dialog-window();
 
     border-right: 1px solid rgba(153, 153, 153, 0.18);
     -webkit-overflow-scrolling: touch;
@@ -26,7 +27,7 @@
 }
 
 .panel-dialog__header {
-    .dialog-header-content();
+    @include dialog-header-content();
 }
 
 .panel-dialog__header .fake-link {
@@ -36,18 +37,18 @@
 }
 
 .panel-dialog__main {
-    .dialog-body-content();
+    @include dialog-body-content();
 
     height: 1px;
     overflow-y: auto;
 }
 
 .panel-dialog__footer {
-    .dialog-footer-content();
+    @include dialog-footer-content();
 }
 
-// inherits from .icon-btn
-// Might need to see to add a small icon btn
+/* inherits from .icon-btn */
+/* Might need to see to add a small icon btn */
 button.icon-btn.panel-dialog__close {
     align-self: flex-start;
     border: 0;
@@ -82,7 +83,8 @@ button.icon-btn.panel-dialog__close {
 
 .panel-dialog--hide,
 .panel-dialog--show-init {
-    && {
+    &.panel-dialog--hide,
+    &.panel-dialog--show-init {
         display: flex;
     }
 
@@ -113,7 +115,8 @@ button.icon-btn.panel-dialog__close {
 
 .panel-dialog--show,
 .panel-dialog--hide-init {
-    && {
+    &.panel-dialog--show,
+    &.panel-dialog--hide-init {
         display: flex;
     }
 
@@ -127,10 +130,10 @@ button.icon-btn.panel-dialog__close {
     }
 }
 
-// MEDIA QUERIES
-//-----------------------------
+/* MEDIA QUERIES */
+/* ----------------------------- */
 
-@media (min-width: @_screen-size-SM) {
+@media (min-width: $_screen-size-SM) {
     .panel-dialog__window {
         width: 384px;
     }

package/src/{less → sass}/panel-dialog/stories/panel-dialog.stories.js

@@ -6,7 +6,7 @@ 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-16" aria-hidden="true">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -30,7 +30,7 @@ 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-16" aria-hidden="true">
+                    <svg class="icon icon--16" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -54,7 +54,7 @@ export const panelEnd = () => `
         <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-16" aria-hidden="true">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -77,7 +77,7 @@ export const panelEndWithFooter = () => `
         <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-16" aria-hidden="true">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -123,7 +123,7 @@ export const panelScroll = () => `
         <div class="panel-dialog__header">
             <h2 id="panel-title">Scrolling Panel</h2>
             <button class="icon-btn panel-dialog__close" type="button" aria-label="Close Dialog">
-                <svg class="icon icon--close-16" aria-hidden="true">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -164,7 +164,7 @@ export const panelScrollWithFooter = () => `
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>
@@ -209,7 +209,7 @@ export const textSpacing = () => `
         <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">
+                <svg class="icon icon--16" aria-hidden="true">
                     <use href="#icon-close-16"></use>
                 </svg>
             </button>

package/src/{less/phone-input/phone-input.less → sass/phone-input/phone-input.scss}

@@ -1,5 +1,5 @@
-@import "../variables/variables.less";
-@import "../mixins/private/token-mixins.less";
+@import "../variables/variables";
+@import "../mixins/private/token-mixins";
 
 .phone-input,
 .phone-input .listbox-button {
@@ -9,8 +9,15 @@
 .phone-input button.btn {
     border-radius: 8px 0 0 8px;
     min-width: 64px;
-    outline: none;
     padding-inline: var(--spacing-200) var(--spacing-100);
+    border-right-style: none;
+}
+
+.phone-input button.btn:focus-visible {
+    box-shadow: 0 0 0 1px var(--color-stroke-strong);
+    border-right-style: solid;
+    z-index: 1;
+    outline: none;
 }
 
 .phone-input button.btn svg.icon:last-child {
@@ -48,43 +55,7 @@
 }
 
 .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 {
@@ -92,23 +63,35 @@
 }
 
 .phone-input--fluid,
-.phone-input--fluid .textbox,
-.phone-input--fluid .textbox > input.textbox__control {
+.phone-input--fluid .textbox {
     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);
+    @include 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);
+    @include color-token(
+        textbox-disabled-foreground-color,
+        color-foreground-secondary
+    );
+}
+
+.phone-input.phone-input--readonly .textbox.textbox {
+    @include background-color-token(
+        textbox-background-color,
+        color-background-secondary
+    );
+    @include border-color-token(textbox-border-color, color-stroke-default);
+
+    border-style: solid;
+    border-width: 1px;
 }
 
 .phone-input--readonly input.textbox__control[readonly] {
-    .background-color-token(textbox-background-color, color-background-secondary);
-    .color-token(textbox-foreground-color, color-foreground-secondary);
+    @include color-token(textbox-foreground-color, color-foreground-secondary);
 }
 
 .phone-input--disabled span.fflag,
@@ -117,19 +100,31 @@
 }
 
 .phone-input--disabled .textbox {
-    .border-color-token(textbox-disabled-border-color, color-background-disabled);
+    @include 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);
+    @include 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);
+.phone-input.phone-input--error .textbox.textbox {
+    @include border-color-token(
+        textbox-invalid-foreground-color,
+        color-stroke-attention
+    );
+    @include border-left-color-token(
+        textbox-border-color,
+        color-stroke-default
+    );
 }
 
-// added to fix the floating label because of the z-index in :focus-within
+/* added to fix the floating label because of the z-index in :focus-within */
 .phone-input .floating-label .floating-label__label {
     z-index: 2;
 }
@@ -144,15 +139,11 @@
     padding-top: 23px;
 }
 
-@media screen and (min-width: @_screen-size-XS) {
+@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"] {