Merge pull request #1979 from eBay/15.4.0

15.4.0 Release

dist/filter-menu-button/filter-menu-button.css

@@ -115,6 +115,7 @@ button.filter-menu-button__button[aria-expanded="true"] + .filter-menu-button__m
   min-width: 100%;
   overflow-y: auto;
   position: relative;
+  transform: translateZ(0);
 }
 span.filter-menu-button__items {
   display: inline-block;
@@ -222,7 +223,9 @@ button.filter-menu-button__footer {
   border-top-style: solid;
   border-top-width: 1px;
   bottom: 0;
+  outline-offset: -10;
   padding: 16px;
+  transform: translateZ(0);
 }
 button.filter-menu-button__footer:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);

dist/listbox-button/listbox-button.css

@@ -56,6 +56,18 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
 .listbox-button button.btn--borderless[aria-expanded="true"] ~ .listbox-button__listbox {
   top: 41px;
 }
+.listbox-button.listbox-button--form button {
+  background-color: var(--listbox-button-background-color, var(--color-background-secondary));
+  border-color: var(--listbox-button-border-color, var(--color-stroke-default));
+}
+.listbox-button.listbox-button--form button[disabled],
+.listbox-button.listbox-button--form button[aria-disabled="true"] {
+  border-color: var(--listbox-button-disabled-border-color, var(--color-background-disabled));
+  color: var(--listbox-button-disabled-foreground-color, var(--color-foreground-disabled));
+}
+.listbox-button.listbox-button--form button:focus {
+  background-color: var(--combobox-textbox-focus-background-color, var(--color-background-primary));
+}
 .listbox-button .btn__label {
   color: var(--listbox-button-label-color, var(--color-foreground-secondary));
   margin-right: 3px;

dist/page-notice/page-notice.css

@@ -19,7 +19,7 @@ span[role="region"].page-notice {
 .page-notice__title {
   font-size: 0.875rem;
   font-weight: normal;
-  margin: 4px 0 0;
+  margin: 1px 0 0;
 }
 /* legacy version with separate bold heading */
 .page-notice__title:not(:only-child) {
@@ -107,18 +107,17 @@ p.page-notice__cta {
 @media (min-width: 601px) {
   section.page-notice,
   div[role="region"].page-notice {
-    flex-wrap: nowrap;
     margin: 16px 0;
   }
   .page-notice__title {
-    margin-top: 2px;
+    margin-bottom: 2px;
   }
   p.page-notice__cta {
     grid-column: 4;
     grid-row: 1;
     justify-self: end;
     margin-bottom: 0;
-    margin-top: 0;
+    margin-top: 1px;
     padding-right: 16px;
   }
   .page-notice__footer {

dist/section-notice/section-notice.css

@@ -48,6 +48,7 @@ span[role="region"].section-notice {
   grid-column: 1;
   grid-row: 1;
   height: 16px;
+  margin-top: 1px;
   padding-right: 16px;
 }
 .section-notice__main {
@@ -62,6 +63,7 @@ span[role="region"].section-notice {
   grid-column: 4;
   grid-row: 1;
   justify-self: end;
+  margin-top: 2px;
 }
 .section-notice__main p {
   font-size: 0.875rem;
@@ -82,7 +84,6 @@ p.section-notice__cta {
 @media (min-width: 601px) {
   section.section-notice,
   div[role="region"].section-notice {
-    flex-wrap: nowrap;
     margin: 16px 0;
   }
   p.section-notice__cta {
@@ -94,7 +95,6 @@ p.section-notice__cta {
     padding-right: 16px;
   }
   .section-notice__footer {
-    margin-top: 0;
     padding-left: 16px;
   }
 }

docs/_config.yml

@@ -9,4 +9,4 @@ defaults:
       path: "" # an empty string here means all files in the project
     values:
       cdn_path: https://ir.ebaystatic.com/cr/v/c1/skin
-      version: 15.3.0
+      version: 15.4.0-0

docs/_includes/button.html

@@ -189,7 +189,7 @@ <h3 id="button-icon-adjacent">Adjacent Icon Button</h3>
 <button class="btn btn--primary">
     <span class="btn__cell">
         <svg aria-hidden="true" class="icon icon--menu" focusable="false" height="16" width="16">
-            <use xlink:href="#icon-menu"></use>
+            <use href="#icon-menu"></use>
         </svg>
         <span>Button</span>
     </span>
@@ -198,7 +198,7 @@ <h3 id="button-icon-adjacent">Adjacent Icon Button</h3>
     <span class="btn__cell">
         <span>Button</span>
         <svg aria-hidden="true" class="icon icon--menu" focusable="false" height="16" width="16">
-            <use xlink:href="#icon-menu"></use>
+            <use href="#icon-menu"></use>
         </svg>
     </span>
 </button>
@@ -226,7 +226,7 @@ <h3 id="button-busy">Busy State for Button</h3>
     <span class="btn__cell">
         <span class="progress-spinner">
             <svg aria-hidden="true" class="icon icon--spinner" focusable="false" height="24" width="24">
-                <use xlink:href="#icon-spinner"></use>
+                <use href="#icon-spinner"></use>
             </svg>
         </span>
     </span>
@@ -270,7 +270,7 @@ <h3 id="button-layout">Flexible Button</h3>
         <span style="display: inline-flex;">
             <span>Any</span>
             <svg aria-hidden="true" class="icon icon--chevron-down" focusable="false" width="8" height="8">
-                <use xlink:href="#icon-chevron-down"></use>
+                <use href="#icon-chevron-down"></use>
             </svg>
         </span>
     </span>
@@ -364,7 +364,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
     <span class="btn__cell">
         <span class="btn__text">Button</span>
         <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-            <use xlink:href="#icon-dropdown"></use>
+            <use href="#icon-dropdown"></use>
         </svg>
     </span>
 </button>
@@ -390,7 +390,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
     <span class="btn__cell">
         <span class="btn__text">Button</span>
         <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-            <use xlink:href="#icon-dropdown"></use>
+            <use href="#icon-dropdown"></use>
         </svg>
     </span>
 </button>
@@ -415,7 +415,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
     <span class="btn__cell">
         <span class="btn__text">Button</span>
         <svg class="icon icon--dropdown" focusable="false" height="10" width="14" aria-hidden="true">
-            <use xlink:href="#icon-dropdown"></use>
+            <use href="#icon-dropdown"></use>
         </svg>
     </span>
 </button>
@@ -436,7 +436,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
     {% highlight html %}
 <button class="btn btn--form btn--slim" type="button" aria-expanded="false" aria-label="Expand/Collapse">
     <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>
 </button>
     {% endhighlight %}
@@ -463,7 +463,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
         <span class="btn__floating-label">Color</span>
         <span class="btn__text">Blue</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>
@@ -491,7 +491,7 @@ <h3 id="button-expandable">Expandable Buttons</h3>
         <span class="btn__floating-label btn__floating-label--inline">Color</span>
         <span class="btn__text"></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>

docs/_includes/carousel.html

@@ -44,7 +44,7 @@ <h3 id="carousel-continuous">Continuous Carousel</h3>
     <div class="carousel__container">
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
             <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false" >
-                <use xlink:href="#icon-carousel-prev"></use>
+                <use href="#icon-carousel-prev"></use>
             </svg>
         </button>
         <div class="carousel__viewport carousel__viewport--mask">
@@ -61,7 +61,7 @@ <h3 id="carousel-continuous">Continuous Carousel</h3>
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
             <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
-                <use xlink:href="#icon-carousel-next"></use>
+                <use href="#icon-carousel-next"></use>
             </svg>
         </button>
     </div>
@@ -114,7 +114,7 @@ <h2 class="clipped" aria-live="polite">
         </h2>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
             <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false" >
-                <use xlink:href="#icon-carousel-prev"></use>
+                <use href="#icon-carousel-prev"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -131,7 +131,7 @@ <h2 class="clipped" aria-live="polite">
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
             <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
-                <use xlink:href="#icon-carousel-next"></use>
+                <use href="#icon-carousel-next"></use>
             </svg>
         </button>
     </div>
@@ -184,7 +184,7 @@ <h2 class="clipped" aria-live="polite">
         </h2>
         <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
             <svg aria-hidden="true" class="icon icon--carousel-prev" focusable="false" >
-                <use xlink:href="#icon-carousel-prev"></use>
+                <use href="#icon-carousel-prev"></use>
             </svg>
         </button>
         <div class="carousel__viewport">
@@ -197,13 +197,13 @@ <h2 class="clipped" aria-live="polite">
         </div>
         <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
             <svg aria-hidden="true" class="icon icon--carousel-next" focusable="false">
-                <use xlink:href="#icon-carousel-next"></use>
+                <use href="#icon-carousel-next"></use>
             </svg>
         </button>
     </div>
     <button class="carousel__playback" aria-label="Play - Top Products">
         <svg class="icon icon--play" focusable="false" aria-hidden="true">
-            <use xlink:href="#icon-play"></use>
+            <use href="#icon-play"></use>
         </svg>
     </button>
 </div>

docs/_includes/checkbox.html

@@ -29,10 +29,10 @@ <h3 id="checkbox-default">Default Checkbox</h3>
     <input class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
         <svg class="checkbox__unchecked" focusable="false" height="18" width="18" aria-hidden="true">
-            <use xlink:href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked"></use>
         </svg>
         <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
-            <use xlink:href="#icon-checkbox-checked"></use>
+            <use href="#icon-checkbox-checked"></use>
         </svg>
     </span>
 </span>
@@ -62,10 +62,10 @@ <h3 id="checkbox-mixed">Mixed Checkbox</h3>
     <input aria-checked="mixed" class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
         <svg class="checkbox__unchecked" focusable="false" height="18" width="18" aria-hidden="true">
-            <use xlink:href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked"></use>
         </svg>
         <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
-            <use xlink:href="#icon-checkbox-mixed"></use>
+            <use href="#icon-checkbox-mixed"></use>
         </svg>
     </span>
 </span>
@@ -94,10 +94,10 @@ <h3 id="checkbox-large">Large Checkbox</h3>
     <input class="checkbox__control" type="checkbox" checked />
     <span class="checkbox__icon" hidden>
         <svg class="checkbox__unchecked" focusable="false" height="24" width="24" aria-hidden="true">
-            <use xlink:href="#icon-checkbox-unchecked-large"></use>
+            <use href="#icon-checkbox-unchecked-large"></use>
         </svg>
         <svg class="checkbox__checked" focusable="false" height="24" width="24" aria-hidden="true">
-            <use xlink:href="#icon-checkbox-checked-large"></use>
+            <use href="#icon-checkbox-checked-large"></use>
         </svg>
     </span>
 </span>
@@ -126,10 +126,10 @@ <h3 id="checkbox-disabled">Disabled Checkbox</h3>
     <input class="checkbox__control" type="checkbox" checked disabled />
     <span class="checkbox__icon" hidden>
         <svg class="checkbox__unchecked" focusable="false" height="18" width="18" aria-hidden="true">
-            <use xlink:href="#icon-checkbox-unchecked"></use>
+            <use href="#icon-checkbox-unchecked"></use>
         </svg>
         <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
-            <use xlink:href="#icon-checkbox-checked"></use>
+            <use href="#icon-checkbox-checked"></use>
         </svg>
     </span>
 </span>
@@ -198,10 +198,10 @@ <h3 id="checkbox-group">Grouped Checkboxes</h3>
             <input class="checkbox__control" id="group-checkbox-1" type="checkbox" value="1" name="checkbox-group" checked />
             <span class="checkbox__icon" hidden>
                 <svg class="checkbox__unchecked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-unchecked"></use>
+                    <use href="#icon-checkbox-unchecked"></use>
                 </svg>
                 <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-checked"></use>
+                    <use href="#icon-checkbox-checked"></use>
                 </svg>
             </span>
         </span>
@@ -212,10 +212,10 @@ <h3 id="checkbox-group">Grouped Checkboxes</h3>
             <input class="checkbox__control" id="group-checkbox-2" type="checkbox" value="2" name="checkbox-group" />
             <span class="checkbox__icon" hidden>
                 <svg class="checkbox__unchecked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-unchecked"></use>
+                    <use href="#icon-checkbox-unchecked"></use>
                 </svg>
                 <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-checked"></use>
+                    <use href="#icon-checkbox-checked"></use>
                 </svg>
             </span>
         </span>
@@ -226,10 +226,10 @@ <h3 id="checkbox-group">Grouped Checkboxes</h3>
             <input class="checkbox__control" id="group-checkbox-3" type="checkbox" value="3" name="checkbox-group" />
             <span class="checkbox__icon" hidden>
                 <svg class="checkbox__unchecked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-unchecked"></use>
+                    <use href="#icon-checkbox-unchecked"></use>
                 </svg>
                 <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-checked"></use>
+                    <use href="#icon-checkbox-checked"></use>
                 </svg>
             </span>
         </span>
@@ -299,10 +299,10 @@ <h3 id="checkbox-group">Grouped Checkboxes</h3>
             <input class="checkbox__control" id="group-checkbox-4" type="checkbox" value="1" name="checkbox-group" checked />
             <span class="checkbox__icon" hidden>
                 <svg class="checkbox__unchecked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-unchecked"></use>
+                    <use href="#icon-checkbox-unchecked"></use>
                 </svg>
                 <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-checked"></use>
+                    <use href="#icon-checkbox-checked"></use>
                 </svg>
             </span>
         </span>
@@ -313,10 +313,10 @@ <h3 id="checkbox-group">Grouped Checkboxes</h3>
             <input class="checkbox__control" id="group-checkbox-5" type="checkbox" value="2" name="checkbox-group" />
             <span class="checkbox__icon" hidden>
                 <svg class="checkbox__unchecked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-unchecked"></use>
+                    <use href="#icon-checkbox-unchecked"></use>
                 </svg>
                 <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-checked"></use>
+                    <use href="#icon-checkbox-checked"></use>
                 </svg>
             </span>
         </span>
@@ -327,10 +327,10 @@ <h3 id="checkbox-group">Grouped Checkboxes</h3>
             <input class="checkbox__control" id="group-checkbox-6" type="checkbox" value="3" name="checkbox-group" />
             <span class="checkbox__icon" hidden>
                 <svg class="checkbox__unchecked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-unchecked"></use>
+                    <use href="#icon-checkbox-unchecked"></use>
                 </svg>
                 <svg class="checkbox__checked" focusable="false" height="18" width="18" aria-hidden="true">
-                    <use xlink:href="#icon-checkbox-checked"></use>
+                    <use href="#icon-checkbox-checked"></use>
                 </svg>
             </span>
         </span>