Merge pull request #1903 from eBay/15.1.0

15.1.0 release
eBay · Oct 25, 2022 · c91ba95 · c91ba95
2 parents 9a63ee8 + 0231956
commit c91ba95
Show file tree

Hide file tree

Showing 70 changed files with 20,575 additions and 23,905 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -24,5 +24,6 @@ Fixes #
 <!-- For CSS changes -->
 - [ ] I regenerated all CSS files under dist folder
 - [ ] I tested the UI in all supported browsers
+- [ ] I did a visual regression check of the components impacted by doing a Percy build and approved the build
 - [ ] I tested the UI in dark mode and RTL mode
 - [ ] I added/updated/removed Storybook coverage as appropriate
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,4 @@ docs/static/*.min.css
 !docs/static/docs.min.css
 .storybook/preview-head.html
 .idea
+.storybook-percy
diff --git a/.stylelintrc b/.stylelintrc
@@ -21,6 +21,7 @@
     "selector-class-pattern": null,
     "alpha-value-notation": "number",
     "value-no-vendor-prefix": null,
+    "import-notation": "string",
     "value-keyword-case": [
       "lower",
       {

diff --git a/dist/combobox/combobox.css b/dist/combobox/combobox.css
@@ -77,6 +77,12 @@ span.combobox {
 .combobox__option[role^="option"]:active {
   font-weight: bold;
 }
+.combobox__option[role^="option"]:disabled,
+.combobox__option[role^="option"][aria-disabled="true"] {
+  color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
+}
 .combobox__option[role^="option"]:first-child {
   border-top-left-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));
   border-top-right-radius: var(--combobox-listbox-border-radius, var(--border-radius-50));

diff --git a/dist/drawer-dialog/drawer-dialog.css b/dist/drawer-dialog/drawer-dialog.css
@@ -20,7 +20,7 @@
 .drawer-dialog__header {
   display: flex;
   flex-shrink: 0;
-  margin: 16px 16px 0;
+  margin: 20px 16px 0;
   position: relative;
 }
 .drawer-dialog__header h1,
@@ -32,10 +32,16 @@
   align-self: center;
   flex: 1 1 auto;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .drawer-dialog__header > :last-child:not(:only-child) {
   margin-left: 16px;
 }
+.drawer-dialog__header .fake-link {
+  text-decoration: none;
+}
 .drawer-dialog__handle {
   background-color: transparent;
   border: none;
@@ -48,12 +54,12 @@
   z-index: 2;
 }
 .drawer-dialog__handle::after {
-  background-color: var(--dialog-handle-color, var(--color-foreground-secondary));
-  border-radius: 5px;
+  background-color: var(--dialog-handle-color, var(--color-stroke-default));
+  border-radius: 3px;
   content: "";
   display: block;
-  height: 3px;
-  width: 20px;
+  height: 2px;
+  width: 24px;
 }
 .drawer-dialog__main {
   box-sizing: border-box;
@@ -82,7 +88,7 @@
 .drawer-dialog__footer > :not(:first-child) {
   margin-left: 8px;
 }
-button.drawer-dialog__close {
+button.icon-button.drawer-dialog__close {
   background-color: transparent;
   border: 0;
   height: auto;

diff --git a/dist/filter-menu-button/filter-menu-button.css b/dist/filter-menu-button/filter-menu-button.css
@@ -167,6 +167,18 @@ span.filter-menu-button__radio svg.icon--radio-checked {
 .filter-menu-button__item:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
+.filter-menu-button__item:disabled,
+.filter-menu-button__item[aria-disabled="true"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu-button__item:disabled span > svg,
+.filter-menu-button__item[aria-disabled="true"] span > svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu-button__item:disabled:hover,
+.filter-menu-button__item[aria-disabled="true"]:hover {
+  background-color: inherit;
+}
 .filter-menu-button__item:hover {
   background-color: var(--color-state-primary-hover);
 }
@@ -215,6 +227,18 @@ button.filter-menu-button__footer {
 button.filter-menu-button__footer:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
+button.filter-menu-button__footer:disabled,
+button.filter-menu-button__footer[aria-disabled="true"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu-button__footer:disabled span > svg,
+button.filter-menu-button__footer[aria-disabled="true"] span > svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu-button__footer:disabled:hover,
+button.filter-menu-button__footer[aria-disabled="true"]:hover {
+  background-color: inherit;
+}
 button.filter-menu-button__footer:focus,
 button.filter-menu-button__footer:hover {
   background-color: var(--color-state-primary-hover);

diff --git a/dist/filter-menu/filter-menu.css b/dist/filter-menu/filter-menu.css
@@ -25,61 +25,28 @@ span.filter-menu__radio {
   min-width: 18px;
   width: 18px;
 }
-span.filter-menu__checkbox svg.icon--checkbox-unchecked {
-  color: var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary));
-  display: block;
-  height: 18px;
-  width: 18px;
-}
-span.filter-menu__checkbox svg.icon--checkbox-checked {
-  color: var(--filter-menu-item-checked-color, var(--color-foreground-primary));
-  display: none;
-  height: 18px;
-  width: 18px;
-}
-span.filter-menu__radio svg.icon--radio-unchecked {
-  color: var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary));
-  display: block;
-  height: 18px;
-  width: 18px;
-}
-span.filter-menu__radio svg.icon--radio-checked {
-  color: var(--filter-menu-item-checked-color, var(--color-foreground-primary));
-  display: none;
+span.filter-menu__checkbox svg,
+span.filter-menu__radio svg {
+  color: var(--filter-menu-item-icon-color, var(--color-foreground-primary));
   height: 18px;
   width: 18px;
 }
-.filter-menu-form__item span.checkbox {
-  align-items: flex-start;
-  display: flex;
-  flex-shrink: 1;
-  justify-content: center;
-}
-.filter-menu-form__item span.checkbox svg.checkbox__unchecked {
-  color: var(--filter-menu-item-unchecked-color, var(--color-foreground-primary));
-}
-.filter-menu-form__item span.checkbox svg.checkbox__checked {
-  color: var(--filter-menu-item-checked-color, var(--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;
 }
-.filter-menu-form__item span.radio svg.radio__unchecked {
-  color: var(--filter-menu-item-unchecked-color, var(--color-foreground-secondary));
-}
-.filter-menu-form__item span.radio svg.radio__checked {
+.filter-menu-form__item span.checkbox .checkbox__icon > svg,
+.filter-menu-form__item span.radio .checkbox__icon > svg {
   color: var(--filter-menu-item-checked-color, var(--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 {
   background-color: var(--filter-menu-item-background-color, var(--color-background-primary));
   box-sizing: border-box;
@@ -92,13 +59,29 @@ span.filter-menu-form__item {
   width: 100%;
   padding: 8px 16px;
 }
-.filter-menu__item[role="menuitemcheckbox"]:hover,
-.filter-menu__item[role="menuitemradio"]:hover,
+.filter-menu__item[role^="menuitem"]:hover,
 .filter-menu-form__item:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
-.filter-menu__item[role="menuitemcheckbox"]:last-child,
-.filter-menu__item[role="menuitemradio"]:last-child,
+.filter-menu__item[role^="menuitem"]:disabled,
+.filter-menu-form__item:disabled,
+.filter-menu__item[role^="menuitem"][aria-disabled="true"],
+.filter-menu-form__item[aria-disabled="true"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu__item[role^="menuitem"]:disabled span > svg,
+.filter-menu-form__item:disabled span > svg,
+.filter-menu__item[role^="menuitem"][aria-disabled="true"] span > svg,
+.filter-menu-form__item[aria-disabled="true"] span > svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+.filter-menu__item[role^="menuitem"]:disabled:hover,
+.filter-menu-form__item:disabled:hover,
+.filter-menu__item[role^="menuitem"][aria-disabled="true"]:hover,
+.filter-menu-form__item[aria-disabled="true"]:hover {
+  background-color: inherit;
+}
+.filter-menu__item[role^="menuitem"]:last-child,
 .filter-menu-form__item:last-child {
   margin-bottom: 8px;
 }
@@ -124,6 +107,24 @@ button.filter-menu__footer:hover,
 button.filter-menu-form__footer[type="submit"]:hover {
   background-color: var(--color-state-primary-hover, color-state-primary-hover);
 }
+button.filter-menu__footer:disabled,
+button.filter-menu-form__footer[type="submit"]:disabled,
+button.filter-menu__footer[aria-disabled="true"],
+button.filter-menu-form__footer[type="submit"][aria-disabled="true"] {
+  color: var(--filter-menu-item-foreground-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu__footer:disabled span > svg,
+button.filter-menu-form__footer[type="submit"]:disabled span > svg,
+button.filter-menu__footer[aria-disabled="true"] span > svg,
+button.filter-menu-form__footer[type="submit"][aria-disabled="true"] span > svg {
+  color: var(--filter-menu-item-icon-color-disabled, var(--color-foreground-disabled));
+}
+button.filter-menu__footer:disabled:hover,
+button.filter-menu-form__footer[type="submit"]:disabled:hover,
+button.filter-menu__footer[aria-disabled="true"]:hover,
+button.filter-menu-form__footer[type="submit"][aria-disabled="true"]:hover {
+  background-color: inherit;
+}
 button.filter-menu__footer:hover,
 button.filter-menu-form__footer[type="submit"]:hover {
   background-color: var(--color-state-primary-hover);
@@ -133,6 +134,14 @@ button.filter-menu-form__footer[type="submit"]:hover {
   flex-grow: 1;
   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;

diff --git a/dist/floating-label/floating-label.css b/dist/floating-label/floating-label.css
@@ -23,9 +23,18 @@ label.floating-label__label {
   width: calc(100% - 40px);
   z-index: 1;
 }
+.floating-label--opaque label.floating-label__label {
+  background-color: var(--floating-label-background-color, var(--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: var(--floating-label-focus-background-color, var(--color-background-primary));
+}
 .floating-label--large label.floating-label__label {
   transform: scale(0.75, 0.75) translate(0, 3px);
 }
@@ -42,6 +51,9 @@ label.floating-label__label--animate {
 label.floating-label__label--disabled {
   color: var(--floating-label-disabled-color, var(--color-foreground-disabled));
 }
+.floating-label--opaque label.floating-label__label--disabled {
+  background-color: var(--floating-label-disabled-background-color, var(--color-background-secondary));
+}
 label.floating-label__label--invalid {
   color: var(--floating-label-invalid-color, var(--color-foreground-attention));
 }

diff --git a/dist/fullscreen-dialog/fullscreen-dialog.css b/dist/fullscreen-dialog/fullscreen-dialog.css
@@ -42,6 +42,9 @@
   align-self: center;
   flex: 1 1 auto;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .fullscreen-dialog__header > :last-child:not(:only-child) {
   margin-left: 16px;

diff --git a/dist/inline-notice/inline-notice.css b/dist/inline-notice/inline-notice.css
@@ -13,7 +13,7 @@ span.inline-notice {
   margin-top: 4px;
 }
 .inline-notice p {
-  margin: 4px 0;
+  margin: 3px 0;
 }
 .inline-notice a,
 .inline-notice button.fake-link {

diff --git a/dist/lightbox-dialog/lightbox-dialog.css b/dist/lightbox-dialog/lightbox-dialog.css
@@ -41,6 +41,9 @@
   align-self: center;
   flex: 1 1 auto;
   margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .lightbox-dialog__header > :last-child:not(:only-child) {
   margin-left: 16px;

diff --git a/dist/listbox-button/listbox-button.css b/dist/listbox-button/listbox-button.css
@@ -56,6 +56,17 @@ 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 .btn__label {
+  color: var(--listbox-button-label-color, var(--color-foreground-secondary));
+  margin-right: 3px;
+}
+.listbox-button--expanded .btn__label {
+  color: var(--listbox-button-label-color, var(--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);
 }
@@ -103,6 +114,12 @@ div.listbox-button__option[role="option"]:hover {
 div.listbox-button__option[role="option"]:active {
   font-weight: bold;
 }
+div.listbox-button__option[role="option"]:disabled,
+div.listbox-button__option[role="option"][aria-disabled="true"] {
+  color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
+}
 div.listbox-button__option[role="option"]:first-child {
   border-top-left-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
   border-top-right-radius: var(--listbox-button-listbox-border-radius, var(--border-radius-50));
@@ -127,3 +144,8 @@ span.listbox-button__value {
   margin-left: 0;
   margin-right: 8px;
 }
+[dir="rtl"] .listbox-button .btn__label {
+  color: var(--listbox-button-label-color, var(--color-foreground-secondary));
+  margin-left: 3px;
+  margin-right: 0;
+}
diff --git a/dist/listbox/listbox.css b/dist/listbox/listbox.css
@@ -47,6 +47,12 @@ div.listbox__option[role="option"]:hover {
 div.listbox__option[role="option"]:active {
   font-weight: bold;
 }
+div.listbox__option[role="option"]:disabled,
+div.listbox__option[role="option"][aria-disabled="true"] {
+  color: var(--listbox-option-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
+}
 span.listbox__value {
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/dist/menu/menu.css b/dist/menu/menu.css
@@ -88,6 +88,8 @@ a.fake-menu__item:not([href]),
 button.fake-menu__item[disabled],
 div.menu__item[role^="menuitem"][aria-disabled="true"] {
   color: var(--menu-menuitem-disabled-foreground-color, var(--color-foreground-disabled));
+  background-color: unset;
+  font-weight: unset;
 }
 div.menu__item[role^="menuitem"][aria-checked="true"] svg.icon--tick-small {
   opacity: 1;