Skip to content

Commit 99ffdd1

Browse files
tw15egantw15egan
authored
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
1 parent fe40fbf commit 99ffdd1

2 files changed

Lines changed: 88 additions & 10 deletions

File tree

‎packages/styles/scss/components/list-box/_list-box.scss‎

Lines changed: 74 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,15 @@ $list-box-menu-width: rem(300px);
103103
}
104104

105105
.#{$prefix}--list-box--expanded {
106-
border-bottom-color: $border-subtle;
106+
border-bottom-color: $border-subtle-01;
107+
}
108+
109+
.#{$prefix}--layer-two .#{$prefix}--list-box--expanded {
110+
border-bottom-color: $border-subtle-02;
111+
}
112+
113+
.#{$prefix}--layer-three .#{$prefix}--list-box--expanded {
114+
border-bottom-color: $border-subtle-03;
107115
}
108116

109117
.#{$prefix}--list-box--expanded:hover {
@@ -582,7 +590,19 @@ $list-box-menu-width: rem(300px);
582590

583591
.#{$prefix}--list-box--disabled
584592
.#{$prefix}--list-box__menu-item__option:hover {
585-
border-top-color: $border-subtle;
593+
border-top-color: $border-subtle-01;
594+
}
595+
596+
.#{$prefix}--layer-two
597+
.#{$prefix}--list-box--disabled
598+
.#{$prefix}--list-box__menu-item__option:hover {
599+
border-top-color: $border-subtle-02;
600+
}
601+
602+
.#{$prefix}--layer-three
603+
.#{$prefix}--list-box--disabled
604+
.#{$prefix}--list-box__menu-item__option:hover {
605+
border-top-color: $border-subtle-03;
586606
}
587607

588608
.#{$prefix}--list-box__menu-item:first-of-type
@@ -595,17 +615,35 @@ $list-box-menu-width: rem(300px);
595615
color: $text-primary;
596616
}
597617

598-
.#{$prefix}--list-box__menu-item:hover
618+
.#{$prefix}--list-box--disabled
619+
.#{$prefix}--list-box__menu-item:hover
599620
+ .#{$prefix}--list-box__menu-item
600621
.#{$prefix}--list-box__menu-item__option {
601-
border-top-color: transparent;
622+
border-top-color: $border-subtle-01;
602623
}
603624

604-
.#{$prefix}--list-box--disabled
625+
.#{$prefix}--layer-two
626+
.#{$prefix}--list-box--disabled
605627
.#{$prefix}--list-box__menu-item:hover
606628
+ .#{$prefix}--list-box__menu-item
607629
.#{$prefix}--list-box__menu-item__option {
608-
border-top-color: $border-subtle;
630+
border-top-color: $border-subtle-02;
631+
}
632+
633+
.#{$prefix}--layer-three
634+
.#{$prefix}--list-box--disabled
635+
.#{$prefix}--list-box__menu-item:hover
636+
+ .#{$prefix}--list-box__menu-item
637+
.#{$prefix}--list-box__menu-item__option {
638+
border-top-color: $border-subtle-03;
639+
}
640+
641+
.#{$prefix}--layer-two .#{$prefix}--list-box__menu-item__option {
642+
border-top-color: $border-subtle-02;
643+
}
644+
645+
.#{$prefix}--layer-three .#{$prefix}--list-box__menu-item__option {
646+
border-top-color: $border-subtle-03;
609647
}
610648

611649
.#{$prefix}--list-box__menu-item__option {
@@ -617,7 +655,7 @@ $list-box-menu-width: rem(300px);
617655
padding: rem(11px) 0;
618656
padding-right: $spacing-06;
619657
border-top: 1px solid transparent;
620-
border-top-color: $border-subtle;
658+
border-top-color: $border-subtle-01;
621659
border-bottom: 1px solid transparent;
622660
margin: 0 $spacing-05;
623661
color: $text-secondary;
@@ -682,14 +720,40 @@ $list-box-menu-width: rem(300px);
682720
}
683721

684722
.#{$prefix}--list-box__menu-item[disabled]
723+
.#{$prefix}--list-box__menu-item__option,
724+
.#{$prefix}--list-box__menu-item[disabled]:hover
725+
+ .#{$prefix}--list-box__menu-item
685726
.#{$prefix}--list-box__menu-item__option {
686-
border-top-color: $border-subtle;
727+
border-top-color: $border-subtle-01;
687728
}
688729

689-
.#{$prefix}--list-box__menu-item[disabled]:hover
730+
.#{$prefix}--layer-two
731+
.#{$prefix}--list-box__menu-item[disabled]
732+
.#{$prefix}--list-box__menu-item__option,
733+
.#{$prefix}--layer-two
734+
.#{$prefix}--list-box__menu-item[disabled]:hover
690735
+ .#{$prefix}--list-box__menu-item
691736
.#{$prefix}--list-box__menu-item__option {
692-
border-top-color: $border-subtle;
737+
border-top-color: $border-subtle-02;
738+
}
739+
740+
.#{$prefix}--layer-three
741+
.#{$prefix}--list-box__menu-item[disabled]
742+
.#{$prefix}--list-box__menu-item__option,
743+
.#{$prefix}--layer-three
744+
.#{$prefix}--list-box__menu-item[disabled]:hover
745+
+ .#{$prefix}--list-box__menu-item
746+
.#{$prefix}--list-box__menu-item__option {
747+
border-top-color: $border-subtle-03;
748+
}
749+
750+
.#{$prefix}--list-box__menu-item--active
751+
+ .#{$prefix}--list-box__menu-item[disabled]
752+
.#{$prefix}--list-box__menu-item__option,
753+
.#{$prefix}--list-box__menu-item:hover
754+
+ .#{$prefix}--list-box__menu-item
755+
.#{$prefix}--list-box__menu-item__option {
756+
border-top-color: transparent;
693757
}
694758

695759
.#{$prefix}--list-box.#{$prefix}--list-box--inline

‎packages/styles/scss/components/modal/_modal.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,20 @@
7272
background-color: $border-subtle-02;
7373
}
7474

75+
.#{$prefix}--list-box__menu-item__option {
76+
border-top-color: $border-subtle-02;
77+
}
78+
79+
.#{$prefix}--list-box__menu-item:hover
80+
.#{$prefix}--list-box__menu-item__option {
81+
border-top-color: $layer-hover;
82+
}
83+
84+
.#{$prefix}--list-box__menu-item--active:hover
85+
.#{$prefix}--list-box__menu-item__option {
86+
border-top-color: $layer-selected-hover;
87+
}
88+
7589
// Fluid inputs
7690
.#{$prefix}--text-input--fluid .#{$prefix}--text-input,
7791
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper,

0 commit comments

Comments
 (0)