fix(ListBoxMenuItem): ensure border-subtle renders correct value (#13879

) * fix(ListBoxMenuItem): ensure border-subtle renders correct value * fix(Layer): add 4th layer * fix(ListBoxMenuItem): add ts-ignore * style(ListBox): adjust border-subtle styles to account for proper layer * fix(Modal): add modal dropdown overrides
carbon-design-system · Jun 21, 2023 · 99ffdd1 · 99ffdd1
1 parent fe40fbf
commit 99ffdd1
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 10 deletions.
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
@@ -103,7 +103,15 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box--expanded {
-    border-bottom-color: $border-subtle;
+    border-bottom-color: $border-subtle-01;
+  }
+
+  .#{$prefix}--layer-two .#{$prefix}--list-box--expanded {
+    border-bottom-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three .#{$prefix}--list-box--expanded {
+    border-bottom-color: $border-subtle-03;
   }
 
   .#{$prefix}--list-box--expanded:hover {
@@ -582,7 +590,19 @@ $list-box-menu-width: rem(300px);
 
   .#{$prefix}--list-box--disabled
     .#{$prefix}--list-box__menu-item__option:hover {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-01;
+  }
+
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item__option:hover {
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item__option:hover {
+    border-top-color: $border-subtle-03;
   }
 
   .#{$prefix}--list-box__menu-item:first-of-type
@@ -595,17 +615,35 @@ $list-box-menu-width: rem(300px);
     color: $text-primary;
   }
 
-  .#{$prefix}--list-box__menu-item:hover
+  .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
     + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: transparent;
+    border-top-color: $border-subtle-01;
   }
 
-  .#{$prefix}--list-box--disabled
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box--disabled
     .#{$prefix}--list-box__menu-item:hover
     + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box--disabled
+    .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-03;
+  }
+
+  .#{$prefix}--layer-two .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-03;
   }
 
   .#{$prefix}--list-box__menu-item__option {
@@ -617,7 +655,7 @@ $list-box-menu-width: rem(300px);
     padding: rem(11px) 0;
     padding-right: $spacing-06;
     border-top: 1px solid transparent;
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-01;
     border-bottom: 1px solid transparent;
     margin: 0 $spacing-05;
     color: $text-secondary;
@@ -682,14 +720,40 @@ $list-box-menu-width: rem(300px);
   }
 
   .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-01;
   }
 
-  .#{$prefix}--list-box__menu-item[disabled]:hover
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--layer-two
+    .#{$prefix}--list-box__menu-item[disabled]:hover
     + .#{$prefix}--list-box__menu-item
     .#{$prefix}--list-box__menu-item__option {
-    border-top-color: $border-subtle;
+    border-top-color: $border-subtle-02;
+  }
+
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--layer-three
+    .#{$prefix}--list-box__menu-item[disabled]:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: $border-subtle-03;
+  }
+
+  .#{$prefix}--list-box__menu-item--active
+    + .#{$prefix}--list-box__menu-item[disabled]
+    .#{$prefix}--list-box__menu-item__option,
+  .#{$prefix}--list-box__menu-item:hover
+    + .#{$prefix}--list-box__menu-item
+    .#{$prefix}--list-box__menu-item__option {
+    border-top-color: transparent;
   }
 
   .#{$prefix}--list-box.#{$prefix}--list-box--inline

diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
@@ -72,6 +72,20 @@
       background-color: $border-subtle-02;
     }
 
+    .#{$prefix}--list-box__menu-item__option {
+      border-top-color: $border-subtle-02;
+    }
+
+    .#{$prefix}--list-box__menu-item:hover
+      .#{$prefix}--list-box__menu-item__option {
+      border-top-color: $layer-hover;
+    }
+
+    .#{$prefix}--list-box__menu-item--active:hover
+      .#{$prefix}--list-box__menu-item__option {
+      border-top-color: $layer-selected-hover;
+    }
+
     // Fluid inputs
     .#{$prefix}--text-input--fluid .#{$prefix}--text-input,
     .#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,