create and assign z-index variables, update stylelinting to check for…

… z-index vars (#2225)
meedan · Dec 8, 2024 · fd72162 · fd72162
1 parent 9443817
commit fd72162
Show file tree

Hide file tree

Showing 19 changed files with 56 additions and 39 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -41,7 +41,7 @@
             }
         ],
         "scale-unlimited/declaration-strict-value": [
-            ["/color/", "fill", "stroke", "font-size", "border-radius"],
+            ["/color/", "fill", "stroke", "font-size", "border-radius", "z-index"],
             {
                 "ignoreValues": ["transparent", "inherit", "currentColor", "currentcolor", "none", "underline", "medium", "unset"]
             }

diff --git a/src/app/components/article/ArticleForm.module.css b/src/app/components/article/ArticleForm.module.css
@@ -24,7 +24,7 @@
     display: block;
     margin: 80px 0 0;
     position: relative;
-    z-index: 11;
+    z-index: var(--z-index-2);
   }
 
   &::after {
@@ -36,7 +36,7 @@
     right: 0;
     text-align: center;
     top: 0;
-    z-index: 10;
+    z-index: var(--z-index-1);
   }
 }
 

diff --git a/src/app/components/cds/alerts-and-prompts/Alert.module.css b/src/app/components/cds/alerts-and-prompts/Alert.module.css
@@ -125,5 +125,5 @@
   margin-top: 0;
   position: fixed;
   width: 100%;
-  z-index: 1000;
+  z-index: var(--z-index-max);
 }
diff --git a/src/app/components/cds/buttons-checkboxes-chips/MediaChip.module.css b/src/app/components/cds/buttons-checkboxes-chips/MediaChip.module.css
@@ -20,12 +20,12 @@
     position: absolute;
     right: 0;
     top: -.1em;
-    z-index: 0;
+    z-index: var(--z-index-0);
   }
 }
 
 .media-chip-icon {
-  z-index: 1;
+  z-index: var(--z-index-1);
 
   svg {
     color: var(--color-gray-15);
@@ -38,5 +38,5 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  z-index: 1;
+  z-index: var(--z-index-1);
 }
diff --git a/src/app/components/cds/slideout/Slideout.module.css b/src/app/components/cds/slideout/Slideout.module.css
@@ -7,7 +7,7 @@
   text-transform: none;
   top: 0;
   width: 40vw;
-  z-index: 4;
+  z-index: var(--z-index-9);
 
   textarea {
     font-weight: normal;
@@ -19,7 +19,7 @@
     flex-direction: column;
     height: 100%;
     position: relative;
-    z-index: 5;
+    z-index: var(--z-index-10);
   }
 
   .slideoutTitle {

diff --git a/src/app/components/dashboard/Dashboard.module.css b/src/app/components/dashboard/Dashboard.module.css
@@ -133,7 +133,7 @@
             th,
             td {
               &.stickyTableCell {
-                z-index: 3;
+                z-index: var(--z-index-3);
               }
 
               :global(.MuiTableSortLabel-root) {
@@ -159,7 +159,7 @@
             th,
             td {
               &.stickyTableCell {
-                z-index: 2;
+                z-index: var(--z-index-2);
               }
             }
 

diff --git a/src/app/components/drawer/Drawer.module.css b/src/app/components/drawer/Drawer.module.css
@@ -5,7 +5,7 @@
   height: 100vh;
   transition: width 225ms cubic-bezier(0, 0, .2, 1) 0ms;
   width: var(--drawerWidth);
-  z-index: 4;
+  z-index: var(--z-index-4);
 
   :global(.MuiDrawer-paperAnchorLeft) {
     background-color: var(--color-beige-93);

diff --git a/src/app/components/drawer/DrawerRail.module.css b/src/app/components/drawer/DrawerRail.module.css
@@ -9,7 +9,7 @@
   padding: 15px 0;
   text-align: center;
   width: var(--drawerRailWidth);
-  z-index: 2;
+  z-index: var(--z-index-2);
 
   .drawerRailTop,
   .drawerRailMiddle,

diff --git a/src/app/components/drawer/Projects/Projects.module.css b/src/app/components/drawer/Projects/Projects.module.css
@@ -200,7 +200,7 @@
     display: block;
     left: 6px;
     right: 20px;
-    z-index: 1;
+    z-index: var(--z-index-1);
   }
 
   &::after {
@@ -222,7 +222,7 @@
       position: absolute;
       right: 0;
       top: 0;
-      z-index: 2;
+      z-index: var(--z-index-2);
     }
 
     &::after {
@@ -233,7 +233,7 @@
       height: 2px;
       margin-top: auto;
       position: relative;
-      z-index: 2;
+      z-index: var(--z-index-2);
     }
   }
 }
diff --git a/src/app/components/layout/AspectRatio.module.css b/src/app/components/layout/AspectRatio.module.css
@@ -23,7 +23,7 @@
       position: absolute;
       top: 0;
       width: 100%;
-      z-index: 10;
+      z-index: var(--z-index-6);
     }
   }
 
@@ -36,6 +36,20 @@
   position: relative;
 }
 
+.aspectRatio,
+.aspectRatioSkipped {
+  .buttonsContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px 8px 0 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: var(--z-index-7);
+  }
+}
+
 .sensitiveScreen {
   align-items: center;
   background-color: transparent;
@@ -53,7 +67,7 @@
   right: 0;
   top: 0;
   width: 100%;
-  z-index: 100;
+  z-index: var(--z-index-8);
 
   p {
     margin-bottom: 0;
@@ -76,14 +90,3 @@
     }
   }
 }
-
-.buttonsContainer {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px 8px 0 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1002;
-}
diff --git a/src/app/components/layout/MultiSelector.module.css b/src/app/components/layout/MultiSelector.module.css
@@ -27,7 +27,7 @@
     max-height: 320px;
     position: absolute;
     right: 0;
-    z-index: 1;
+    z-index: var(--z-index-1);
   }
 
   .multiselector-scroller {

diff --git a/src/app/components/media/MediaCardLarge.module.css b/src/app/components/media/MediaCardLarge.module.css
@@ -27,7 +27,7 @@
         right: 0;
         top: 0;
         width: 100%;
-        z-index: 1;
+        z-index: var(--z-index-1);
       }
     }
 

diff --git a/src/app/components/media/ReportDesigner/ReportDesigner.module.css b/src/app/components/media/ReportDesigner/ReportDesigner.module.css
@@ -127,7 +127,7 @@
               position: absolute;
               right: 0;
               top: 0;
-              z-index: 2;
+              z-index: var(--z-index-2);
             }
           }
         }
@@ -156,6 +156,7 @@
     .content-screen {
       align-items: center;
       background-color: var(--color-gray-15);
+      border: solid 2px;
       color: var(--color-white-100);
       display: flex;
       flex-direction: column;
@@ -166,7 +167,7 @@
       text-align: center;
       top: 0;
       width: 500px;
-      z-index: 100;
+      z-index: var(--z-index-10);
     }
 
     .content-screen-icon {

diff --git a/src/app/components/search/SearchResults.module.css b/src/app/components/search/SearchResults.module.css
@@ -211,7 +211,7 @@
             background-color: var(--color-white-100);
             left: 0;
             position: sticky;
-            z-index: 3;
+            z-index: var(--z-index-3);
           }
         }
       }
@@ -238,7 +238,7 @@
             box-shadow: inset 3px 0 0 0 var(--color-gray-75);
             left: 0;
             position: sticky;
-            z-index: 1;
+            z-index: var(--z-index-1);
           }
 
           &.search-results-read {

diff --git a/src/app/components/search/search.module.css b/src/app/components/search/search.module.css
@@ -96,7 +96,7 @@
   position: absolute;
   right: 8px;
   top: 8px;
-  z-index: 1;
+  z-index: var(--z-index-1);
 }
 
 .filters-wrapper {

diff --git a/src/app/styles/css/inputs.module.css b/src/app/styles/css/inputs.module.css
@@ -114,7 +114,7 @@
     margin: 0 0 16px;
     position: sticky;
     top: -16px;
-    z-index: 2;
+    z-index: var(--z-index-2);
   }
 
   .form-inner-wrapper {

diff --git a/src/app/styles/css/mixins/mixins.css b/src/app/styles/css/mixins/mixins.css
@@ -37,7 +37,7 @@
     content: '';
     display: block;
     top: 0;
-    z-index: 3;
+    z-index: var(--z-index-3);
   }
 
   &::before {

diff --git a/src/app/styles/css/mixins/variables.css b/src/app/styles/css/mixins/variables.css
@@ -151,4 +151,17 @@
   --dropShadowMedium: 0 1px 6px 0 rgba(0 0 0 / .15);
   --dropShadowWindow: 14px 28px 56px 0 rgba(0 0 0 / .25);
   --dropShadowTab: 0 -2px 16px 0 rgba(0 0 0 / .15);
+
+  --z-index-max: 1000; /* Nothing will ever be higher, for example tooltips and toasts */
+  --z-index-10: 10; /* Highest main UI elements, such as slideouts */
+  --z-index-9: 9; /* Highest main UI elements, such as slideouts */
+  --z-index-8: 8;
+  --z-index-7: 7;
+  --z-index-6: 6;
+  --z-index-5: 5;
+  --z-index-4: 4;
+  --z-index-3: 3;
+  --z-index-2: 2;
+  --z-index-1: 1;
+  --z-index-0: 0;
 }
diff --git a/src/app/styles/css/tooltip.css b/src/app/styles/css/tooltip.css
@@ -104,7 +104,7 @@
 }
 .rc-tooltip {
   position: absolute;
-  z-index: 1070;
+  z-index: var(--z-index-max);
   display: block;
   visibility: visible;
   line-height: 1.5;