@ebay/skin 17.5.0 → 18.0.0-next.0

package/src/sass/toggle-button-group/toggle-button-group.scss

@@ -0,0 +1,342 @@
+@import "../variables/variables";
+
+// Recursive Mixin to build repetative class delcarations for explicit dev overrides for various breakpoints
+@mixin toggle-button-grid-templates($breakpoint, $repeatTo, $i: 1) {
+    @if $i <= $repeatTo {
+        .toggle-button-group[data-columns-#{$breakpoint}="#{$i}"] ul {
+            grid-template-columns: repeat($i, 1fr);
+        }
+
+        @include toggle-button-grid-templates($breakpoint, $repeatTo, ($i + 1));
+    }
+}
+
+:root {
+    // Respsonsive Toggle Button Prop Naming Convention:
+    // prefixes (--row-[prefix]):
+    //    min = minimal variation
+    //    list: list variation
+    //    gallery: gallery variation
+    // suffixes map with breakpoints:
+    //    - "min" indicates default (smallest screen)
+    //    - custom ones are called out
+    //    - all lowercase (i.e. "min")
+    //    - pixel values
+
+    // Minimal Layout (default)
+    --row-min-toggle-buttons-min: 2;
+    --row-min-toggle-buttons-xs: 4;
+    --row-min-toggle-buttons-sm: 5;
+    --row-min-toggle-buttons-md: 8;
+    --row-min-toggle-buttons-xl: 12;
+
+    // List Layout
+    --row-list-toggle-buttons-min: 1;
+    --row-list-toggle-buttons-xs: 1;
+    --row-list-toggle-buttons-sm: 2;
+    --row-list-toggle-buttons-md: 3;
+    --row-list-toggle-buttons-xl: 5;
+
+    // Gallery Layout
+    --row-gallery-toggle-buttons-min: 1;
+    --row-gallery-toggle-buttons-xs: 2;
+    --row-gallery-toggle-buttons-sm: 3;
+    --row-gallery-toggle-buttons-md: 4;
+    --row-gallery-toggle-buttons-xl: 6;
+}
+
+.toggle-button-group {
+    container: toggle-buttons-container / inline-size;
+}
+
+.toggle-button-group ul {
+    display: grid;
+    gap: var(--spacing-100);
+    grid-auto-rows: 1fr;
+    grid-template-columns: repeat(var(--row-min-toggle-buttons-min), 1fr);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+.toggle-button-group li {
+    display: inline-block;
+    min-height: var(--toggle-button-height-min);
+    width: 100%;
+}
+
+.toggle-button-group .toggle-button {
+    height: 100%;
+    margin: 0;
+    max-width: 100%;
+    width: 100%;
+}
+
+/* Layout Themes */
+.toggle-button-group--list-layout .toggle-button {
+    justify-content: left;
+    max-width: 100%;
+    min-width: auto;
+}
+
+.toggle-button-group--gallery-layout li {
+    max-width: 100%;
+}
+
+.toggle-button-group--gallery-layout .toggle-button {
+    flex-direction: column;
+    max-width: 100%;
+    min-width: auto;
+}
+
+.toggle-button-group--list-layout .toggle-button__image-container,
+.toggle-button-group--list-layout .toggle-button__content {
+    align-self: flex-start;
+}
+
+.toggle-button-group--gallery-layout .toggle-button {
+    justify-content: flex-start;
+}
+
+.toggle-button-group--gallery-layout .toggle-button__image,
+.toggle-button-group--gallery-layout .toggle-button__icon {
+    margin-bottom: 0;
+    margin-right: 0;
+}
+
+.toggle-button-group--gallery-layout
+    .toggle-button__icon
+    ~ .toggle-button__content,
+.toggle-button-group--gallery-layout
+    .toggle-button__image-container
+    ~ .toggle-button__content {
+    align-self: flex-start;
+}
+
+.toggle-button-group--gallery-layout .toggle-button__icon,
+.toggle-button-group--gallery-layout .toggle-button__image-container {
+    margin-bottom: 0;
+    margin-right: 0;
+    text-align: left;
+}
+
+.toggle-button-group--gallery-layout .toggle-button__image-container {
+    padding-bottom: 60%;
+    position: relative;
+    text-align: center;
+    width: 100%;
+}
+
+.toggle-button-group--gallery-layout .toggle-button__image {
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+}
+
+.toggle-button-group--gallery-layout .toggle-button__image-container img {
+    height: 100%;
+    max-height: 200px;
+    max-width: initial;
+}
+
+/* Responsive Layouts */
+// first, we define media queries as a fallback for browsers not supporting container queries
+@supports not (contain: inline-size) {
+    @media (min-width: $_screen-size-XS) {
+        // Responsive columns based on XS breakpoint per button type
+        .toggle-button-group ul {
+            grid-template-columns: repeat(
+                var(--row-min-toggle-buttons-xs),
+                1fr
+            );
+        }
+
+        .toggle-button-group--list-layout ul {
+            grid-template-columns: repeat(
+                var(--row-list-toggle-buttons-xs),
+                1fr
+            );
+        }
+
+        .toggle-button-group--gallery-layout ul {
+            grid-template-columns: repeat(
+                var(--row-gallery-toggle-buttons-xs),
+                1fr
+            );
+        }
+
+        // Explicit developer overrides for XS breakpoint for exception cases
+        @include toggle-button-grid-templates(xs, 16);
+    }
+
+    @media (min-width: $_screen-size-SM) {
+        // Responsive columns based on SM breakpoint per button type
+        .toggle-button-group ul {
+            grid-template-columns: repeat(
+                var(--row-min-toggle-buttons-sm),
+                1fr
+            );
+        }
+
+        .toggle-button-group--list-layout ul {
+            grid-template-columns: repeat(
+                var(--row-list-toggle-buttons-sm),
+                1fr
+            );
+        }
+
+        .toggle-button-group--gallery-layout ul {
+            grid-template-columns: repeat(
+                var(--row-gallery-toggle-buttons-sm),
+                1fr
+            );
+        }
+
+        // Explicit developer overrides for SM breakpoint for exception cases
+        @include toggle-button-grid-templates(sm, 16);
+    }
+
+    @media (min-width: $_screen-size-MD) {
+        // Responsive columns based on MD breakpoint per button type
+        .toggle-button-group ul {
+            grid-template-columns: repeat(
+                var(--row-min-toggle-buttons-md),
+                1fr
+            );
+        }
+
+        .toggle-button-group--list-layout ul {
+            grid-template-columns: repeat(
+                var(--row-list-toggle-buttons-md),
+                1fr
+            );
+        }
+
+        .toggle-button-group--gallery-layout ul {
+            grid-template-columns: repeat(
+                var(--row-gallery-toggle-buttons-md),
+                1fr
+            );
+        }
+
+        // Explicit developer overrides for MD breakpoint for exception cases
+        @include toggle-button-grid-templates(md, 16);
+    }
+
+    @media (min-width: $_screen-size-XL) {
+        // Responsive columns based on XL breakpoint per button type
+        .toggle-button-group ul {
+            grid-template-columns: repeat(
+                var(--row-min-toggle-buttons-xl),
+                1fr
+            );
+        }
+
+        .toggle-button-group--list-layout ul {
+            grid-template-columns: repeat(
+                var(--row-list-toggle-buttons-xl),
+                1fr
+            );
+        }
+
+        .toggle-button-group--gallery-layout ul {
+            grid-template-columns: repeat(
+                var(--row-gallery-toggle-buttons-xl),
+                1fr
+            );
+        }
+
+        // Explicit developer overrides for XL breakpoint for exception cases
+        @include toggle-button-grid-templates(xl, 16);
+    }
+}
+
+// For browsers that DO support container queries
+@container toggle-buttons-container (inline-size >= #{$_screen-size-XS}) {
+    // Responsive columns based on XS breakpoint per button type
+    .toggle-button-group ul {
+        grid-template-columns: repeat(var(--row-min-toggle-buttons-xs), 1fr);
+    }
+
+    .toggle-button-group--list-layout ul {
+        grid-template-columns: repeat(var(--row-list-toggle-buttons-xs), 1fr);
+    }
+
+    .toggle-button-group--gallery-layout ul {
+        grid-template-columns: repeat(
+            var(--row-gallery-toggle-buttons-xs),
+            1fr
+        );
+    }
+
+    // Explicit developer overrides for XS breakpoint for exception cases
+    @include toggle-button-grid-templates(xs, 16);
+}
+
+@container toggle-buttons-container (inline-size >= #{$_screen-size-SM}) {
+    // Responsive columns based on SM breakpoint per button type
+    .toggle-button-group ul {
+        grid-template-columns: repeat(var(--row-min-toggle-buttons-sm), 1fr);
+    }
+
+    .toggle-button-group--list-layout ul {
+        grid-template-columns: repeat(var(--row-list-toggle-buttons-sm), 1fr);
+    }
+
+    .toggle-button-group--gallery-layout ul {
+        grid-template-columns: repeat(
+            var(--row-gallery-toggle-buttons-sm),
+            1fr
+        );
+    }
+
+    // Explicit developer overrides for SM breakpoint for exception cases
+    @include toggle-button-grid-templates(sm, 16);
+}
+
+@container toggle-buttons-container (inline-size >= #{$_screen-size-MD}) {
+    // Responsive columns based on MD breakpoint per button type
+    .toggle-button-group ul {
+        grid-template-columns: repeat(var(--row-min-toggle-buttons-md), 1fr);
+    }
+
+    .toggle-button-group--list-layout ul {
+        grid-template-columns: repeat(var(--row-list-toggle-buttons-md), 1fr);
+    }
+
+    .toggle-button-group--gallery-layout ul {
+        grid-template-columns: repeat(
+            var(--row-gallery-toggle-buttons-md),
+            1fr
+        );
+    }
+
+    // Explicit developer overrides for MD breakpoint for exception cases
+    @include toggle-button-grid-templates(md, 16);
+}
+
+@container toggle-buttons-container (inline-size >= #{$_screen-size-XL}) {
+    // Responsive columns based on XL breakpoint per button type
+    .toggle-button-group ul {
+        grid-template-columns: repeat(var(--row-min-toggle-buttons-xl), 1fr);
+    }
+
+    .toggle-button-group--list-layout ul {
+        grid-template-columns: repeat(var(--row-list-toggle-buttons-xl), 1fr);
+    }
+
+    .toggle-button-group--gallery-layout ul {
+        grid-template-columns: repeat(
+            var(--row-gallery-toggle-buttons-xl),
+            1fr
+        );
+    }
+
+    // Explicit developer overrides for XL breakpoint for exception cases
+    @include toggle-button-grid-templates(xl, 16);
+}

package/src/{less → sass}/tooltip/stories/pointer.stories.js

@@ -94,7 +94,7 @@ function getPointerStyle(key) {
 export const top = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -116,7 +116,7 @@ export const top = () => `
 export const topLeft = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -138,7 +138,7 @@ export const topLeft = () => `
 export const leftTop = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -160,7 +160,7 @@ export const leftTop = () => `
 export const left = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -182,7 +182,7 @@ export const left = () => `
 export const leftBottom = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -204,7 +204,7 @@ export const leftBottom = () => `
 export const bottomLeft = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -226,7 +226,7 @@ export const bottomLeft = () => `
 export const bottom = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -248,7 +248,7 @@ export const bottom = () => `
 export const bottomRight = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -270,7 +270,7 @@ export const bottomRight = () => `
 export const rightBottom = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -292,7 +292,7 @@ export const rightBottom = () => `
 export const right = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -314,7 +314,7 @@ export const right = () => `
 export const rightTop = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -336,7 +336,7 @@ export const rightTop = () => `
 export const topRight = () => `
 <span class="tooltip" style="margin-left: 100px; margin-top: 100px;">
     <button class="icon-btn tooltip__host" aria-describedby="tooltip-1" aria-expanded="true" aria-label="Info">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>

package/src/{less → sass}/tooltip/stories/tooltip.stories.js

@@ -3,7 +3,7 @@ export default { title: "Skin/Tooltip" };
 export const collapsed = () => `
 <span class="tooltip">
     <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -22,7 +22,7 @@ export const collapsed = () => `
 export const expanded = () => `
 <span class="tooltip">
     <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="true" aria-label="Settings">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>
@@ -41,7 +41,7 @@ export const expanded = () => `
 export const textSpacing = () => `
 <span class="tooltip demo-a11y-text-spacing">
     <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="true" aria-label="Settings">
-        <svg class="icon icon--settings-24" height="16" width="16" aria-hidden="true">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
             <use href="#icon-settings-24"></use>
         </svg>
     </button>

package/src/sass/tooltip/tooltip.scss

@@ -0,0 +1,118 @@
+@import "../variables/variables";
+@import "../mixins/private/bubble-mixins";
+@import "../mixins/private/token-mixins";
+
+.tooltip {
+    position: relative;
+}
+
+span.tooltip {
+    display: inline-block;
+}
+
+.tooltip__overlay {
+    @include bubble();
+}
+
+.tooltip__mask {
+    @include bubble-mask();
+    @include background-color-token(
+        tooltip-background-color,
+        color-background-elevated
+    );
+    @include color-token(tooltip-foreground-color, color-foreground-primary);
+}
+
+span.tooltip__mask {
+    display: block;
+}
+
+.tooltip__cell {
+    @include bubble-cell();
+
+    a {
+        @include color-token(
+            tooltip-foreground-color,
+            color-foreground-primary
+        );
+
+        &:focus {
+            outline: 1px dashed currentColor;
+        }
+    }
+}
+
+.tooltip__content {
+    @include bubble-content();
+}
+
+button.tooltip__close {
+    @include bubble-close();
+}
+
+.tooltip__pointer {
+    @include pointer-base();
+    @include background-color-token(
+        tooltip-background-color,
+        color-background-elevated
+    );
+}
+
+.tooltip__pointer--top-left {
+    @include pointer-top-left();
+}
+
+.tooltip__pointer--top {
+    @include pointer-top-center();
+}
+
+.tooltip__pointer--top-right {
+    @include pointer-top-right();
+}
+
+.tooltip__pointer--bottom-left {
+    @include pointer-bottom-left();
+}
+
+.tooltip__pointer--bottom {
+    @include pointer-bottom-center();
+}
+
+.tooltip__pointer--bottom-right {
+    @include pointer-bottom-right();
+}
+
+.tooltip__pointer--left {
+    @include pointer-left();
+}
+
+.tooltip__pointer--left-bottom {
+    @include pointer-left-bottom();
+}
+
+.tooltip__pointer--left-top {
+    @include pointer-left-top();
+}
+
+.tooltip__pointer--right {
+    @include pointer-right();
+}
+
+.tooltip__pointer--right-bottom {
+    @include pointer-right-bottom();
+}
+
+.tooltip__pointer--right-top {
+    @include pointer-right-top();
+}
+
+.tooltip--expanded .tooltip__overlay,
+.tooltip__host[aria-expanded="true"] ~ .tooltip__overlay {
+    display: block;
+}
+
+@media (min-width: $_screen-size-SM) {
+    .tooltip__overlay {
+        @include bubble-large-screen();
+    }
+}

package/src/{less → sass}/tourtip/stories/tourtip.stories.js

@@ -12,7 +12,7 @@ export const collapsed = () => `
                     <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-16" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -33,7 +33,7 @@ export const expanded = () => `
                     <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-16" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -54,7 +54,7 @@ export const withActions = () => `
                     <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-16" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -80,7 +80,7 @@ export const withOneAction = () => `
                     <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-16" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>
@@ -105,7 +105,7 @@ export const textSpacing = () => `
                     <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-16" height="24" width="24" aria-hidden="true">
+                    <svg class="icon icon--16" height="24" width="24" aria-hidden="true">
                         <use href="#icon-close-16"></use>
                     </svg>
                 </button>