@ebay/skin 15.0.0 → 15.1.0-1

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

@@ -211,181 +211,19 @@ export const full = () => `
 </div>
 `;
 
-export const bottomContainerDefault = () => `
-<div aria-labelledby="drawer-title-default" aria-modal="true"
-    class="drawer drawer--mask-fade-slow" id="default-0" role="dialog">
-    <div class="drawer__window drawer__window--slide">
-        <button aria-label="Toggle Expanded" class="drawer__handle"></button>
-        <div class="drawer__header">
-            <h2 id="dialog-title-default" class="large-text-1 bold-text">Heading</h2>
-            <button aria-label="Close dialog" class="drawer__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use xlink:href="#icon-close"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="drawer__main">
-            <p>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>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-`;
-
-export const bottomContainerLong = () => `
-<div aria-labelledby="drawer-title-default" aria-modal="true"
-    class="drawer drawer--mask-fade-slow" id="default-0" role="dialog">
-    <div class="drawer__window drawer__window--slide">
-        <button aria-label="Toggle Expanded" class="drawer__handle"></button>
-        <div class="drawer__header">
-            <h2 id="dialog-title-default" class="large-text-1 bold-text">Heading</h2>
-            <button aria-label="Close dialog" class="drawer__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use xlink:href="#icon-close"></use>
-                </svg>
-            </button>
-        </div>
-        <div class="drawer__main">
-            <p>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>
-                <p>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>
-                <p>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>
-                <p>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>
-                <p>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>
-                <p>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>
-                <p>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>
-            <p><a href="http://www.ebay.com">www.ebay.com</a></p>
-        </div>
-    </div>
-</div>
-
-`;
-
-export const bottomContainerExpanded = () => `
-<div aria-labelledby="drawer-title-default" aria-modal="true"
-    class="drawer drawer--mask-fade-slow" id="default-0" role="dialog">
-    <div class="drawer__window drawer__window--expanded drawer__window--slide">
-        <button aria-label="Toggle Expanded" class="drawer__handle"></button>
-        <div class="drawer__header">
-            <h2 id="dialog-title-default" class="large-text-1 bold-text">Heading</h2>
-            <button aria-label="Close dialog" class="drawer__close" type="button">
-                <svg aria-hidden="true" class="icon icon--close" focusable="false" height="16" width="16">
-                    <use xlink:href="#icon-close"></use>
-                </svg>
-            </button>
+export const textClose = () => `
+<div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">
+    <div class="drawer-dialog__window drawer-dialog__window--slide">
+        <button class="drawer-dialog__handle"></button>
+        <div class="drawer-dialog__header">
+            <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
+            <button class="fake-link">Apply</button>
         </div>
-        <div class="drawer__main">
-            <p>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>
-                <p>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>
-                <p>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>
-                <p>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>
-                <p>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>
-                <p>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>
-                <p>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="drawer-dialog__main">
+            <p>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.
+            </p>
             <p><a href="http://www.ebay.com">www.ebay.com</a></p>
         </div>
     </div>

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

@@ -32,78 +32,32 @@ span.filter-menu__radio {
     height: 18px;
     min-width: 18px;
     width: 18px;
-}
-
-span.filter-menu__checkbox {
-    svg.icon--checkbox-unchecked {
-        .color-token(filter-menu-item-unchecked-color, color-foreground-secondary);
-        display: block;
-        height: 18px;
-        width: 18px;
-    }
-
-    svg.icon--checkbox-checked {
-        .color-token(filter-menu-item-checked-color, color-foreground-primary);
-        display: none;
-        height: 18px;
-        width: 18px;
-    }
-}
 
-span.filter-menu__radio {
-    svg.icon--radio-unchecked {
-        .color-token(filter-menu-item-unchecked-color, color-foreground-secondary);
-        display: block;
+    svg {
+        .color-token(filter-menu-item-icon-color, color-foreground-primary);
         height: 18px;
         width: 18px;
     }
-
-    svg.icon--radio-checked {
-        .color-token(filter-menu-item-checked-color, color-foreground-primary);
-        display: none;
-        height: 18px;
-        width: 18px;
-    }
-}
-
-.filter-menu-form__item span.checkbox {
-    align-items: flex-start;
-    display: flex;
-    flex-shrink: 1;
-    justify-content: center;
-
-    svg.checkbox__unchecked {
-        .color-token(filter-menu-item-unchecked-color, color-foreground-primary);
-    }
-
-    svg.checkbox__checked {
-        .color-token(filter-menu-item-checked-color, color-foreground-primary);
-    }
 }
 
+.filter-menu-form__item span.checkbox,
 .filter-menu-form__item span.radio {
     align-items: flex-start;
     display: flex;
     flex-shrink: 1;
     justify-content: center;
 
-    svg.radio__unchecked {
-        .color-token(filter-menu-item-unchecked-color, color-foreground-secondary);
-    }
-
-    svg.radio__checked {
+    .checkbox__icon > svg {
         .color-token(filter-menu-item-checked-color, color-foreground-primary);
     }
 }
 
-span.filter-menu__item[role="menuitemcheckbox"],
-span.filter-menu__item[role="menuitemradio"],
+span.filter-menu__item[role^="menuitem"],
 span.filter-menu-form__item {
     display: block;
 }
 
-.filter-menu__item[role="menuitemcheckbox"],
-.filter-menu__item[role="menuitemradio"],
+.filter-menu__item[role^="menuitem"],
 .filter-menu-form__item {
     .filter-menu-item-base();
 
@@ -136,6 +90,16 @@ button.filter-menu-form__footer[type="submit"] {
     margin-left: 8px;
 }
 
+.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-checked,
+.filter-menu__item[role="menuitemradio"] svg.icon--radio-checked {
+    display: none;
+}
+
+.filter-menu__item[role="menuitemcheckbox"] svg.icon--checkbox-unchecked,
+.filter-menu__item[role="menuitemradio"] svg.icon--radio-unchecked {
+    display: block;
+}
+
 .filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-unchecked,
 .filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked {
     display: none;

package/src/less/filter-menu/stories/filter-menu.stories.js

@@ -40,6 +40,46 @@ export const base = () => `
 </span>
 `;
 
+export const withDisabled = () => `
+<span class="filter-menu">
+    <div class="filter-menu__items" role="menu">
+        <div class="filter-menu__item" role="menuitemcheckbox" tabindex="0" aria-checked="false" aria-disabled="true">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
+                    <use xlink:href="#icon-checkbox-unchecked"></use>
+                </svg>
+                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
+                    <use xlink:href="#icon-checkbox-checked"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 1 with a long string that will wrap to another line</span>
+        </div>
+        <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="false">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
+                    <use xlink:href="#icon-checkbox-unchecked"></use>
+                </svg>
+                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
+                    <use xlink:href="#icon-checkbox-checked"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 2</span>
+        </div>
+        <div class="filter-menu__item" role="menuitemcheckbox" aria-checked="true" aria-disabled="true">
+            <span class="filter-menu__checkbox">
+                <svg class="icon icon--checkbox-unchecked" focusable="false" height="18" width="18">
+                    <use xlink:href="#icon-checkbox-unchecked"></use>
+                </svg>
+                <svg class="icon icon--checkbox-checked" focusable="false" height="18" width="18">
+                    <use xlink:href="#icon-checkbox-checked"></use>
+                </svg>
+            </span>
+            <span class="filter-menu__text">Item 3</span>
+        </div>
+    </div>
+</span>
+`;
+
 export const withFooterButton = () => `
 <span class="filter-menu">
     <div class="filter-menu__items" role="menu">

package/src/less/floating-label/floating-label.less

@@ -31,10 +31,21 @@ label.floating-label__label {
     z-index: 1;
 }
 
+.floating-label--opaque label.floating-label__label {
+    .background-color-token(floating-label-background-color, color-background-secondary);
+    padding-top: 3px;
+    top: -3px;
+    width: calc(100% - 40px);
+}
+
 label.floating-label__label--focus {
     color: var(--color-background-inverse);
 }
 
+.floating-label--opaque label.floating-label__label--focus {
+    .background-color-token(floating-label-focus-background-color, color-background-primary);
+}
+
 .floating-label--large label.floating-label__label {
     transform: scale(0.75, 0.75) translate(0, 3px);
 }
@@ -57,6 +68,10 @@ label.floating-label__label--disabled {
     .color-token(floating-label-disabled-color, color-foreground-disabled);
 }
 
+.floating-label--opaque label.floating-label__label--disabled {
+    .background-color-token(floating-label-disabled-background-color, color-background-secondary);
+}
+
 label.floating-label__label--invalid {
     .color-token(floating-label-invalid-color, color-foreground-attention);
 }

package/src/less/floating-label/stories/floating-label.stories.js

@@ -178,7 +178,7 @@ export const RTLSelectInline = () => `
 `;
 
 export const TextArea = () => `
-<span class="floating-label">
+<span class="floating-label floating-label--opaque">
     <label class="floating-label__label" for="first-name">Enter list of users</label>
     <span class="textbox">
         <textarea aria-label="Textbox demo" class="textbox__control"></textarea>

package/src/less/inline-notice/inline-notice.less

@@ -20,7 +20,7 @@ span.inline-notice {
 }
 
 .inline-notice p {
-    margin: @spacing-50 0;
+    margin: 3px 0;
 }
 
 .inline-notice a,

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

@@ -75,3 +75,26 @@ export const baseRTL = () => `
     </div>
 </div>
 `;
+
+export const baseWithLongHeader = () => `
+<div aria-labelledby="lightbox-dialog-title" aria-modal="true" class="lightbox-dialog" role="dialog">
+    <div class="lightbox-dialog__window">
+        <div class="lightbox-dialog__header">
+            <h2 id="lightbox-dialog-title">Dialog Lightbox with a very long header that should wrap to the next line, but is actually cut off</h2>
+            <button class="icon-btn lightbox-dialog__close" type="button" aria-label="Close Dialog">
+                <svg class="icon icon--close-small" aria-hidden="true">
+                    <use xlink:href="#icon-close-small"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="lightbox-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>
+        </div>
+    </div>
+</div>
+`;

package/src/less/listbox-button/listbox-button.less

@@ -50,6 +50,20 @@ button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox,
     }
 }
 
+.listbox-button .btn__label {
+    .color-token(listbox-button-label-color, color-foreground-secondary);
+    margin-right: 3px;
+}
+
+.listbox-button--expanded .btn__label {
+    .color-token(listbox-button-label-color, color-foreground-primary);
+}
+
+.listbox-button .btn__text {
+    font-weight: bold;
+    margin-right: auto;
+}
+
 .listbox-button__options[role="listbox"]:focus .listbox-button__option--active[role="option"] {
     background-color: var(--color-state-primary-hover);
 }
@@ -92,5 +106,11 @@ span.listbox-button__value {
         margin-left: 0;
         margin-right: @spacing-100;
     }
+
+    .listbox-button .btn__label {
+        .color-token(listbox-button-label-color, color-foreground-secondary);
+        margin-left: 3px;
+        margin-right: 0;
+    }
 }
 // stylelint-enable no-descending-specificity