Added box-shadow and border color changes for dropdowns

eBay · Oct 15, 2020 · 8db7783 · 8db7783
1 parent 7157119
commit 8db7783
Show file tree

Hide file tree

Showing 22 changed files with 78 additions and 25 deletions.
diff --git a/.stylelintrc-css b/.stylelintrc-css
@@ -7,6 +7,7 @@
     "indentation": null,
     "no-descending-specificity": null,
     "no-duplicate-selectors": null,
+    "declaration-block-no-duplicate-properties": null,
     "rule-empty-line-before": null,
     "function-calc-no-invalid": null
   }

diff --git a/dist/combobox/ds4/combobox.css b/dist/combobox/ds4/combobox.css
@@ -37,6 +37,12 @@ span.combobox {
   background-color: var(--dropdown-items-background-color, #fff);
   border-color: #ccc;
   border-color: var(--dropdown-items-border-color, #ccc);
+  border-radius: 0;
+  border-radius: var(--dropdown-items-border-radius, 0);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+  -webkit-box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
+          box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
   border-style: solid;
   border-width: 1px;
   -webkit-box-sizing: border-box;
@@ -46,8 +52,6 @@ span.combobox {
   max-height: 400px;
   overflow-y: auto;
   z-index: 2;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
-          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
   display: none;
   position: absolute;
   top: calc(100% - 1px);

diff --git a/dist/combobox/ds6/combobox.css b/dist/combobox/ds6/combobox.css
@@ -49,6 +49,12 @@ span.combobox {
   background-color: var(--dropdown-items-background-color, #fff);
   border-color: #c7c7c7;
   border-color: var(--dropdown-items-border-color, #c7c7c7);
+  border-radius: 0;
+  border-radius: var(--dropdown-items-border-radius, 0);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+  -webkit-box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
+          box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
   border-style: solid;
   border-width: 1px;
   -webkit-box-sizing: border-box;
@@ -58,8 +64,6 @@ span.combobox {
   max-height: 400px;
   overflow-y: auto;
   z-index: 2;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
-          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
   display: none;
   position: absolute;
   top: calc(100% - 1px);
@@ -265,3 +269,8 @@ span.combobox {
 [dir="rtl"] .combobox__control > button {
   left: 0;
 }
+.skin-experiment-rounded .combobox__listbox {
+  --dropdown-items-border-radius: 8px;
+  --dropdown-items-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.07);
+  --dropdown-items-border-color: #f5f5f5;
+}
diff --git a/dist/listbox-button/ds4/listbox-button.css b/dist/listbox-button/ds4/listbox-button.css
@@ -23,6 +23,12 @@ div.listbox-button__listbox {
   background-color: var(--dropdown-items-background-color, #fff);
   border-color: #ccc;
   border-color: var(--dropdown-items-border-color, #ccc);
+  border-radius: 0;
+  border-radius: var(--dropdown-items-border-radius, 0);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+  -webkit-box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
+          box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
   border-style: solid;
   border-width: 1px;
   -webkit-box-sizing: border-box;
@@ -32,13 +38,9 @@ div.listbox-button__listbox {
   max-height: 400px;
   overflow-y: auto;
   z-index: 2;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
-          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
   display: none;
   position: absolute;
   top: calc(100% - 1px);
-  border-radius: 0;
-  border-radius: var(--dropdown-items-border-radius, 0);
   border-bottom-color: transparent;
 }
 button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {

diff --git a/dist/listbox-button/ds6/listbox-button.css b/dist/listbox-button/ds6/listbox-button.css
@@ -18,6 +18,8 @@
 }
 .skin-experiment-rounded .listbox-button__listbox {
   --dropdown-items-border-radius: 8px;
+  --dropdown-items-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.07);
+  --dropdown-items-border-color: #f5f5f5;
 }
 .listbox-button {
   line-height: normal;
@@ -36,6 +38,12 @@ div.listbox-button__listbox {
   background-color: var(--dropdown-items-background-color, #fff);
   border-color: #c7c7c7;
   border-color: var(--dropdown-items-border-color, #c7c7c7);
+  border-radius: 0;
+  border-radius: var(--dropdown-items-border-radius, 0);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+  -webkit-box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
+          box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
   border-style: solid;
   border-width: 1px;
   -webkit-box-sizing: border-box;
@@ -45,13 +53,9 @@ div.listbox-button__listbox {
   max-height: 400px;
   overflow-y: auto;
   z-index: 2;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
-          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
   display: none;
   position: absolute;
   top: calc(100% - 1px);
-  border-radius: 0;
-  border-radius: var(--dropdown-items-border-radius, 0);
   border-bottom-color: transparent;
 }
 button.expand-btn[aria-expanded="true"] ~ div.listbox-button__listbox {

diff --git a/dist/menu-button/ds4/menu-button.css b/dist/menu-button/ds4/menu-button.css
@@ -18,22 +18,24 @@
   background-color: var(--dropdown-items-background-color, #fff);
   border-color: #ccc;
   border-color: var(--dropdown-items-border-color, #ccc);
+  border-radius: 0;
+  border-radius: var(--dropdown-items-border-radius, 0);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+  -webkit-box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
+          box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
   border-style: solid;
   border-width: 1px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   min-width: 100%;
   width: auto;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
-          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
   display: none;
   position: absolute;
   top: calc(100% - 1px);
   max-height: 400px;
   overflow-y: auto;
   z-index: 2;
-  border-radius: 0;
-  border-radius: var(--dropdown-items-border-radius, 0);
   outline: 0;
 }
 span.menu-button__button,

diff --git a/dist/menu-button/ds6/menu-button.css b/dist/menu-button/ds6/menu-button.css
@@ -19,6 +19,8 @@
 .skin-experiment-rounded .menu-button__menu,
 .skin-experiment-rounded .menu-button__fake-menu {
   --dropdown-items-border-radius: 8px;
+  --dropdown-items-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.07);
+  --dropdown-items-border-color: #f5f5f5;
 }
 .menu-button,
 .fake-menu-button {
@@ -31,22 +33,24 @@
   background-color: var(--dropdown-items-background-color, #fff);
   border-color: #c7c7c7;
   border-color: var(--dropdown-items-border-color, #c7c7c7);
+  border-radius: 0;
+  border-radius: var(--dropdown-items-border-radius, 0);
+  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
+  -webkit-box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
+          box-shadow: var(--dropdown-items-box-shadow, 0 2px 4px 0 rgba(199, 199, 199, 0.5));
   border-style: solid;
   border-width: 1px;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   min-width: 100%;
   width: auto;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
-          box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
   display: none;
   position: absolute;
   top: calc(100% - 1px);
   max-height: 400px;
   overflow-y: auto;
   z-index: 2;
-  border-radius: 0;
-  border-radius: var(--dropdown-items-border-radius, 0);
   outline: 0;
 }
 span.menu-button__button,

diff --git a/dist/mixins/dropdown/base/dropdown-mixins.less b/dist/mixins/dropdown/base/dropdown-mixins.less
@@ -1,6 +1,8 @@
 .dropdown-base() {
     .customBackgroundColorProperty(dropdown-items-background-color);
     .customBorderColorProperty(dropdown-items-border-color);
+    .customBorderRadiusProperty(dropdown-items-border-radius);
+    .customBoxShadowProperty(dropdown-items-box-shadow);
 
     border-style: solid;
     border-width: 1px;
@@ -18,7 +20,6 @@
 .dropdown-overlay() {
     .dropdown-overlay-constraints();
 
-    box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
     display: none;
     position: absolute;
     top: calc(100% - 1px);

diff --git a/dist/mixins/utility/utility-mixins.less b/dist/mixins/utility/utility-mixins.less
@@ -52,6 +52,10 @@
     .customProperty(border-radius, @token);
 }
 
+.customBoxShadowProperty(@token) {
+    .customProperty(box-shadow, @token);
+}
+
 .customFillProperty(@token) {
     .customProperty(fill, @token);
 }

diff --git a/dist/variables/ds4/dropdown-variables.less b/dist/variables/ds4/dropdown-variables.less
@@ -3,6 +3,7 @@
 @dropdown-items-background-color: @color-background-default;
 @dropdown-items-border-color: @color-grey3;
 @dropdown-items-border-radius: @border-radius-none;
+@dropdown-items-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
 @dropdown-item-foreground-color: @color-text-default;
 @dropdown-item-background-color: @dropdown-items-background-color;
 @dropdown-item-border-color: @dropdown-items-background-color;

diff --git a/dist/variables/ds6/border-radius-variables.less b/dist/variables/ds6/border-radius-variables.less
@@ -8,7 +8,6 @@
 @border-radius-expand-button: @border-radius-small;
 
 @border-radius-overlay: @border-radius-small;
-
 @border-radius-notice: @border-radius-small;
 
 @border-radius-dialog: 16px;
diff --git a/dist/variables/ds6/dropdown-variables.less b/dist/variables/ds6/dropdown-variables.less
@@ -3,6 +3,7 @@
 @dropdown-items-background-color: @color-background-default;
 @dropdown-items-border-color: @color-grey3;
 @dropdown-items-border-radius: @border-radius-none;
+@dropdown-items-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
 @dropdown-item-foreground-color: @color-text-default;
 @dropdown-item-background-color: @dropdown-items-background-color;
 @dropdown-item-border-color: @dropdown-items-background-color;

diff --git a/src/less/combobox/ds6/combobox.less b/src/less/combobox/ds6/combobox.less
@@ -2,3 +2,12 @@
 @import "../../variables/ds6/dropdown-variables.less";
 @import "../../mixins/dropdown/ds6/dropdown-mixins.less";
 @import "../base/combobox.less";
+
+.skin-experiment-rounded {
+
+    .combobox__listbox {
+        --dropdown-items-border-radius: @border-radius-overlay;
+        --dropdown-items-box-shadow: @border-radius-overlay-box-shadow;
+        --dropdown-items-border-color: @border-radius-overlay-border-color;
+    }
+}
diff --git a/src/less/listbox-button/base/listbox-button.less b/src/less/listbox-button/base/listbox-button.less
@@ -17,7 +17,6 @@ span.listbox-button--fluid .expand-btn {
 
 div.listbox-button__listbox {
     .dropdown();
-    .customBorderRadiusProperty(dropdown-items-border-radius);
 
     border-bottom-color: transparent;
 }

diff --git a/src/less/menu-button/base/menu-button.less b/src/less/menu-button/base/menu-button.less
@@ -10,7 +10,6 @@
 .fake-menu-button__menu {
     .dropdown();
     .dropdown-overlay-constraints();
-    .customBorderRadiusProperty(dropdown-items-border-radius);
 
     // In ebayui there is a bug where if tabindex=-1 outside the menu button
     // Any clicks inside will trigger on the outher tabindex=-1. In order to fix it

diff --git a/src/less/mixins/dropdown/base/dropdown-mixins.less b/src/less/mixins/dropdown/base/dropdown-mixins.less
@@ -1,6 +1,8 @@
 .dropdown-base() {
     .customBackgroundColorProperty(dropdown-items-background-color);
     .customBorderColorProperty(dropdown-items-border-color);
+    .customBorderRadiusProperty(dropdown-items-border-radius);
+    .customBoxShadowProperty(dropdown-items-box-shadow);
 
     border-style: solid;
     border-width: 1px;
@@ -18,7 +20,6 @@
 .dropdown-overlay() {
     .dropdown-overlay-constraints();
 
-    box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
     display: none;
     position: absolute;
     top: calc(100% - 1px);

diff --git a/src/less/mixins/utility/utility-mixins.less b/src/less/mixins/utility/utility-mixins.less
@@ -52,6 +52,10 @@
     .customProperty(border-radius, @token);
 }
 
+.customBoxShadowProperty(@token) {
+    .customProperty(box-shadow, @token);
+}
+
 .customFillProperty(@token) {
     .customProperty(fill, @token);
 }

diff --git a/src/less/properties/ds6/listbox-button-properties.less b/src/less/properties/ds6/listbox-button-properties.less
@@ -21,5 +21,7 @@
 .skin-experiment-rounded {
     .listbox-button__listbox {
         --dropdown-items-border-radius: @border-radius-overlay;
+        --dropdown-items-box-shadow: @border-radius-overlay-box-shadow;
+        --dropdown-items-border-color: @border-radius-overlay-border-color;
     }
 }
diff --git a/src/less/properties/ds6/menu-button-properties.less b/src/less/properties/ds6/menu-button-properties.less
@@ -21,5 +21,7 @@
     .menu-button__menu,
     .menu-button__fake-menu {
         --dropdown-items-border-radius: @border-radius-overlay;
+        --dropdown-items-box-shadow: @border-radius-overlay-box-shadow;
+        --dropdown-items-border-color: @border-radius-overlay-border-color;
     }
 }
diff --git a/src/less/variables/ds4/dropdown-variables.less b/src/less/variables/ds4/dropdown-variables.less
@@ -3,6 +3,7 @@
 @dropdown-items-background-color: @color-background-default;
 @dropdown-items-border-color: @color-grey3;
 @dropdown-items-border-radius: @border-radius-none;
+@dropdown-items-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
 @dropdown-item-foreground-color: @color-text-default;
 @dropdown-item-background-color: @dropdown-items-background-color;
 @dropdown-item-border-color: @dropdown-items-background-color;

diff --git a/src/less/variables/ds6/border-radius-variables.less b/src/less/variables/ds6/border-radius-variables.less
@@ -8,6 +8,9 @@
 @border-radius-expand-button: @border-radius-small;
 
 @border-radius-overlay: @border-radius-small;
+// These are values required for new rounded corners
+@border-radius-overlay-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.07);
+@border-radius-overlay-border-color: @color-grey1;
 
 @border-radius-notice: @border-radius-small;
 

diff --git a/src/less/variables/ds6/dropdown-variables.less b/src/less/variables/ds6/dropdown-variables.less
@@ -3,6 +3,7 @@
 @dropdown-items-background-color: @color-background-default;
 @dropdown-items-border-color: @color-grey3;
 @dropdown-items-border-radius: @border-radius-none;
+@dropdown-items-box-shadow: 0 2px 4px 0 rgba(199, 199, 199, 0.5);
 @dropdown-item-foreground-color: @color-text-default;
 @dropdown-item-background-color: @dropdown-items-background-color;
 @dropdown-item-border-color: @dropdown-items-background-color;