fix(list): prevent z-index overlapping problems by isolating the comp…

…onent
Lundalogik · Jun 21, 2022 · 076a7ce · 076a7ce
1 parent 6af14cc
commit 076a7ce
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
@@ -1,4 +1,3 @@
-@use '../../style/internal/z-index';
 @use '../../style/functions';
 @use '../../style/mixins';
 
@@ -8,6 +7,9 @@
 @use '@material/ripple';
 
 $list-border-radius: 0.375rem; // 6px
+$list--has-interactive-items--mdc-list-item--hover: 1;
+$list-static-actions-list: 1;
+$list-mdc-list-item: 0;
 
 /**
  * @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.
@@ -20,6 +22,7 @@ $list-border-radius: 0.375rem; // 6px
 
 :host(limel-list) {
     display: block;
+    isolation: isolate;
 }
 
 :host([hidden]) {
@@ -41,7 +44,7 @@ $list-border-radius: 0.375rem; // 6px
 
     .mdc-deprecated-list-item {
         box-sizing: border-box;
-        z-index: z-index.$list-mdc-list-item; // in Chrome on Windows, menus flicker when they have a scroll bar and user hovers on them. We may be able to remove this in future versions of Chrome. Kia 2021-May-12
+        z-index: $list-mdc-list-item; // in Chrome on Windows, menus flicker when they have a scroll bar and user hovers on them. We may be able to remove this in future versions of Chrome. Kia 2021-May-12
 
         &.mdc-deprecated-list-item--disabled {
             cursor: not-allowed;
@@ -230,7 +233,7 @@ $list-border-radius: 0.375rem; // 6px
             &:focus-visible {
                 box-shadow: var(--shadow-depth-8-focused);
                 border-radius: $list-border-radius;
-                z-index: z-index.$list--has-interactive-items--mdc-list-item--hover;
+                z-index: $list--has-interactive-items--mdc-list-item--hover;
 
                 &:before {
                     animation-duration: 0s !important;

diff --git a/src/components/list/partial-styles/_static-actions.scss b/src/components/list/partial-styles/_static-actions.scss
@@ -1,7 +1,7 @@
 // This is used in limel-picker only for now
 
 :host(.static-actions-list) {
-    z-index: z-index.$list-static-actions-list;
+    z-index: $list-static-actions-list;
     background-color: var(--mdc-theme-surface);
 }
 

diff --git a/src/components/list/partial-styles/custom-styles.scss b/src/components/list/partial-styles/custom-styles.scss
@@ -1,4 +1,3 @@
-@use '../../../style/internal/z-index';
 @use '../../../style/mixins';
 
 $background-color-of-odd-interactive-items: rgb(var(--contrast-100));
@@ -26,7 +25,7 @@ $background-color-of-interactive-items-hovered: rgb(var(--contrast-100));
             @include mixins.is-flat-clickable();
 
             &:hover {
-                z-index: z-index.$list--has-interactive-items--mdc-list-item--hover;
+                z-index: $list--has-interactive-items--mdc-list-item--hover;
                 background-color: $background-color-of-interactive-items-hovered;
 
                 &:before {

diff --git a/src/style/internal/z-index.scss b/src/style/internal/z-index.scss
@@ -6,12 +6,9 @@ $date-picker--flatpickr-adapter--flatpickr-day--after: -1 !default;
 $input-field--formatted-value: 1 !default;
 $input-field--input-with-formatted-value: 2 !default;
 $input-field--mdc-text-field__input--readonly: 1 !default;
-$list--has-interactive-items--mdc-list-item--hover: 1 !default;
-$list-static-actions-list: 1 !default;
 $tab-bar--active-tab: 2 !default;
 $table--has-interactive-rows--selectable-row--hover: 2 !default;
 $table--limel-table--row-selector: 1 !default;
 $popover-before: -1 !default;
 $button-group-radio-button-keyboard-focused: 1 !default;
-$list-mdc-list-item: 0 !default;
 $limel-circular-progress-value: 1 !default;