feat: support css vars for z-index in Mobile-, Aside- Header (#255)

gravity-ui · Jun 14, 2024 · eb5326e · eb5326e
1 parent 6eae9cd
commit eb5326e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -89,13 +89,18 @@ Used for themization Navigation's components
 | `--gn-aside-header-divider-horizontal-color`              | All horizontal divider line color                             |    `--g-color-line-generic`    |
 | `--gn-aside-header-divider-vertical-color`                | Vertical divider line color between `AsideHeader` and content |    `--g-color-line-generic`    |
 | `--gn-aside-top-panel-height`                             | **Read only**.`AsideHeader` top alert height                  |              0px               |
-| Item                                                      |
+| Item                                                      |                                                               |                                |
 | `--gn-aside-header-general-item-icon-color`               | Icon color for Subheader and Footer items                     |    `--g-color-text-primary`    |
 | `--gn-aside-header-item-icon-color`                       | Icon color for CompositeBar items                             |     `--g-color-text-misc`      |
 | `--gn-aside-header-item-text-color`                       |                                                               |    `--g-color-text-primary`    |
 | `--gn-aside-header-item-background-color-hover`           |                                                               | `--g-color-base-simple-hover`  |
-| Current Item                                              |
+| Current Item                                              |                                                               |                                |
 | `--gn-aside-header-item-current-background-color`         |                                                               |   `--g-color-base-selection`   |
 | `--gn-aside-header-item-current-icon-color`               |                                                               |                                |
 | `--gn-aside-header-item-current-text-color`               |                                                               |    `--g-color-text-primary`    |
 | `--gn-aside-header-item-current-background-color-hover`   |                                                               |                                |
+| z-indexes                                                 |                                                               |                                |
+| `--gn-aside-header-z-index`                               | Aside header z-index                                          |              100               |
+| `--gn-aside-header-panel-z-index`                         | Aside header panel (Drawer component) z-index                 |               98               |
+| `--gn-aside-header-pane-top-z-index`                      | Top pane z-index                                              |               98               |
+| `--gn-aside-header-content-z-index`                       | Content (right part) z-index                                  |               95               |
diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -31,7 +31,7 @@ $block: '.#{variables.$ns}aside-header';
         display: flex;
         flex-direction: column;
         background-color: var(--gn-aside-header-background-color, var(--_--background-color));
-        z-index: 100;
+        z-index: var(--gn-aside-header-z-index, 100);
         max-height: calc(100vh - var(--gn-aside-top-panel-height));
         margin-top: var(--gn-aside-top-panel-height);
 
@@ -199,7 +199,7 @@ $block: '.#{variables.$ns}aside-header';
     }
 
     &__panels {
-        z-index: 98;
+        z-index: var(--gn-aside-header-panel-z-index, 98);
         position: fixed;
         inset: var(--gn-aside-top-panel-height) 0 0;
         overflow: auto;
@@ -229,7 +229,7 @@ $block: '.#{variables.$ns}aside-header';
 
     &__pane-top {
         position: fixed;
-        z-index: 98;
+        z-index: var(--gn-aside-header-pane-top-z-index, 98);
         top: 0;
         background: var(--g-color-base-background);
         width: 100%;
@@ -249,7 +249,7 @@ $block: '.#{variables.$ns}aside-header';
 
     &__content {
         width: calc(100% - var(--gn-aside-header-size));
-        z-index: 95;
+        z-index: var(--gn-aside-header-content-z-index, 95);
         margin-top: var(--gn-aside-top-panel-height);
     }
 }
diff --git a/src/components/MobileHeader/MobileHeader.scss b/src/components/MobileHeader/MobileHeader.scss
@@ -19,7 +19,7 @@ $block: '.#{variables.$ns}mobile-header';
         display: flex;
         justify-content: space-between;
         align-items: center;
-        z-index: 100;
+        z-index: var(--gn-mobile-header-z-index, 100);
     }
 
     &__burger {
@@ -39,7 +39,7 @@ $block: '.#{variables.$ns}mobile-header';
     }
 
     &__panels {
-        z-index: 98;
+        z-index: var(--gn-mobile-header-panel-z-index, 98);
         position: fixed;
         inset: var(--mobile-header-min-heigth) 0 0;
         overflow: hidden;

diff --git a/src/components/MobileHeader/README.md b/src/components/MobileHeader/README.md
@@ -54,3 +54,11 @@ Available panelName
 
 1. 'burger'
 2. `id` of element [panelItems prop](https://github.com/gravity-ui/navigation/blob/main/src/components/MobileHeader/MobileHeader.tsx#L38C5-L38C15)
+
+## MobileHeader vars
+
+| Name                               | Description                                    | Default |
+| :--------------------------------- | :--------------------------------------------- | :-----: |
+| z-indexes                          |                                                |         |
+| `--gn-mobile-header-z-index`       | Mobile header z-index                          |  `100`  |
+| `--gn-mobile-header-panel-z-index` | Mobile header panel (Drawer component) z-index |  `98`   |