fix: added z-index to mode help tooltip and z-index system

dpolevodin · dpolevodin · commit 52053e55f8c4 · 2024-12-27T20:19:31.000+06:00
diff --git a/README-ru.md b/README-ru.md
@@ -84,6 +84,32 @@ configure({
 
 Обязательно сделайте вызов `configure()` из [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) и других UI-библиотек.
 
+### Система z-index 
+
+В этом проекте используется система z-index для управления слоями элементов. Ниже приведены определенные уровни и их значения:
+
+| level               | z-index value |
+|---------------------|---------------|
+| background          | -1            |
+| default             | 0             |
+| forefront           | 1             |
+| img-settings-button | 2             |
+| table-view-button   | 100           |
+| table-cell-button   | 110           |
+| sticky-toolbar      | 2000          |
+| tooltip             | 2100          |
+
+### Использование
+
+Для применения z-index в компонентах используйте миксин z-index, передавая соответствующий ключ в качестве аргумента:
+
+```scss
+@use 'styles/mixins.scss';
+
+.tooltip {
+  @include mixins.z-index('tooltip');
+}
+```
 
 ### Участие в разработке
 
diff --git a/README.md b/README.md
@@ -83,6 +83,33 @@ configure({
 
 Don't forget to call `configure()` from [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) and other UI libraries.
 
+### Z-index levels
+
+This project uses a z-index map to control the layers of elements. Defined levels:
+
+| level               | z-index value |
+|---------------------|---------------|
+| background          | -1            |
+| default             | 0             |
+| forefront           | 1             |
+| img-settings-button | 2             |
+| table-view-button   | 100           |
+| table-cell-button   | 110           |
+| sticky-toolbar      | 2000          |
+| tooltip             | 2100          |
+
+### Usage
+
+To apply z-index to components, use the z-index mixin, passing the key as an argument:
+
+```scss
+@use 'styles/mixins.scss';
+
+.tooltip {
+  @include mixins.z-index('tooltip');
+}
+```
+
 ### Contributing
 
 - [Contributor Guidelines](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-contributing--docs)
diff --git a/src/bundle/settings/index.scss b/src/bundle/settings/index.scss
@@ -1,3 +1,4 @@
+@use '../../styles/mixins.scss';
 @import '~@gravity-ui/uikit/styles/mixins';
 
 .g-md-editor-settings {
@@ -13,7 +14,7 @@
     }
 
     &__separator {
-        z-index: 0;
+        @include mixins.z-index('default');
 
         margin: 6px 4px;
 
@@ -28,6 +29,10 @@
         float: right;
     }
 
+    &__tooltip {
+        @include mixins.z-index('tooltip');
+    }
+
     &__separator {
         border-bottom: 1px solid var(--g-color-line-generic);
     }
diff --git a/src/bundle/settings/index.tsx b/src/bundle/settings/index.tsx
@@ -158,6 +158,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent
                                 <MarkdownHints />
                             </div>
                         }
+                        tooltipClassName={bContent('tooltip')}
                         placement={mdHelpPlacement}
                         className={bContent('mode-help')}
                     />
diff --git a/src/bundle/sticky/sticky.scss b/src/bundle/sticky/sticky.scss
@@ -1,4 +1,4 @@
-@use '../../styles/zindex' as zIndexVars;
+@use '../../styles/mixins.scss';
 
 $block: 'g-md-editor-sticky';
 
@@ -13,7 +13,7 @@ $block: 'g-md-editor-sticky';
     }
 
     &_sticky-active:not(.#{$block}_clear) {
-        z-index: zIndexVars.$sticky-toolbar;
+        @include mixins.z-index('sticky-toolbar');
 
         padding: var(--g-md-toolbar-sticky-padding);
 
diff --git a/src/extensions/additional/FoldingHeading/plugins/folding.scss b/src/extensions/additional/FoldingHeading/plugins/folding.scss
@@ -1,4 +1,6 @@
 @use 'node_modules/@gravity-ui/uikit/styles/mixins.scss' as uikit;
+@use '../../../../styles/mixins.scss';
+
 
 .pm-h-folding-hidden {
     display: none;
@@ -12,8 +14,9 @@
     position: relative;
 
     &::before {
+        @include mixins.z-index('forefront');
+        
         position: absolute;
-        z-index: 1;
         bottom: -4px;
         left: 0;
 
@@ -30,8 +33,9 @@
     }
 
     &::after {
+        @include mixins.z-index('forefront');
+        
         position: absolute;
-        z-index: 1;
         bottom: -8px;
         left: 16px;
 
@@ -47,8 +51,9 @@
 
 .pm-h-folding-label {
     &::after {
+        @include mixins.z-index('forefront');
+
         position: absolute;
-        z-index: 1;
         right: 2px;
         bottom: -6px;
 
diff --git a/src/extensions/additional/Math/view-and-edit.scss b/src/extensions/additional/Math/view-and-edit.scss
@@ -1,3 +1,5 @@
+@use '../../../styles/mixins.scss';
+
 .math-block {
     font-family: var(--g-font-family-monospace);
 
@@ -45,8 +47,9 @@
     }
 
     &::before {
+        @include mixins.z-index('background');
+        
         position: absolute;
-        z-index: -1;
         inset: -2px;
 
         content: '';
diff --git a/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss b/src/extensions/additional/Mermaid/MermaidNodeView/Mermaid.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins.scss';
+
 .g-md-Mermaid {
     display: flex;
     justify-content: space-between;
@@ -32,7 +34,7 @@
     }
 
     &__EditorPopover {
-        z-index: 1;
+        @include mixins.z-index('forefront');
 
         float: right;
     }
diff --git a/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss b/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlock.scss
@@ -1,3 +1,5 @@
+@use '../../../../styles/mixins.scss';
+
 .g-md-yfm-html-block {
     position: relative;
 
@@ -65,7 +67,7 @@
     }
 
     &__editor-popover {
-        z-index: 1;
+        @include mixins.z-index('forefront');
 
         float: right;
     }
diff --git a/src/extensions/behavior/Cursor/gapcursor.scss b/src/extensions/behavior/Cursor/gapcursor.scss
@@ -1,3 +1,5 @@
+@use '../../../styles//mixins.scss';
+
 .Prosemirror-hide-cursor {
     caret-color: transparent;
 }
@@ -27,8 +29,9 @@
     }
 
     &::before {
+        @include mixins.z-index('forefront');
+
         position: relative;
-        z-index: 1;
 
         display: inline-block;
 
diff --git a/src/extensions/behavior/Placeholder/index.scss b/src/extensions/behavior/Placeholder/index.scss
@@ -1,3 +1,5 @@
+@use '../../../styles/mixins.scss';
+
 .ProseMirror .g-md-placeholder {
     display: inline-block;
 
@@ -27,8 +29,9 @@
 
     .ProseMirror-focused &_focus {
         .g-md-placeholder__cursor {
+            @include mixins.z-index('forefront');
+
             position: relative;
-            z-index: 1;
 
             margin-right: -1px;
 
diff --git a/src/extensions/behavior/Resizable/Resizable.scss b/src/extensions/behavior/Resizable/Resizable.scss
@@ -1,3 +1,5 @@
+@use '../../../styles/mixins.scss';
+
 body :has(.g-md-resizable_resizing) {
     cursor: col-resize;
 }
@@ -7,8 +9,9 @@ body :has(.g-md-resizable_resizing) {
 
     &_resizing &__resizer-wrapper,
     &_hover &__resizer-wrapper {
+        @include mixins.z-index('forefront');
+        
         position: absolute;
-        z-index: 1;
         top: 0;
 
         display: flex;
diff --git a/src/extensions/markdown/Code/code.scss b/src/extensions/markdown/Code/code.scss
@@ -1,3 +1,4 @@
+@use '../../../styles/mixins.scss';
 // add custom styles for prosemirror-codemark
 // because default styles conflict with the rest of the project styles
 
@@ -18,8 +19,9 @@
 }
 
 .ProseMirror-focused .fake-cursor {
+    @include mixins.z-index('forefront');
+
     position: relative;
-    z-index: 1;
 
     margin-right: -1px;
 
diff --git a/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss b/src/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/ImgSettingsButton.scss
@@ -1,6 +1,9 @@
+@use '../../../../../styles/mixins.scss';
+
 .g-md-img-settings-button {
+    @include mixins.z-index('img-settings-button');
+
     position: absolute;
-    z-index: 2;
     top: 3px;
     right: 3px;
 }
diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/view.scss
@@ -1,3 +1,5 @@
+@use '../../../../../styles/mixins.scss';
+
 $buttons-size: 16px;
 $buttons-offset: 2px;
 
@@ -41,8 +43,9 @@ $buttons-offset: 2px;
         transition: opacity 150ms ease 50ms;
 
         &_right {
+            @include mixins.z-index('table-view-button');
+
             position: absolute;
-            z-index: 100;
             top: 0;
             right: -$buttons-size - $buttons-offset;
 
@@ -54,8 +57,9 @@ $buttons-offset: 2px;
         }
 
         &_bottom {
+            @include mixins.z-index('table-view-button');
+
             position: absolute;
-            z-index: 100;
             bottom: -$buttons-size - $buttons-offset;
 
             display: flex;
diff --git a/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss b/src/extensions/yfm/YfmTable/plugins/YfmTableControls/yfmTableCellView.scss
@@ -1,7 +1,10 @@
+@use '../../../../../styles/mixins.scss';
+
 .g-md-table-cell-view {
     &__left-button {
+        @include mixins.z-index('table-cell-button');
+
         position: absolute;
-        z-index: 110;
         top: calc(50% - 14px);
         left: -13px;
 
@@ -19,8 +22,9 @@
     }
 
     &__upper-button {
+        @include mixins.z-index('table-cell-button');
+
         position: absolute;
-        z-index: 110;
         top: -13px;
         left: calc(50% - 14px);
 
diff --git a/src/styles/_zindex.scss b/src/styles/_zindex.scss
@@ -1,6 +1,11 @@
-// so that cursor is always cursor:grabbing
-$dnd-cursor-back: 100500;
-// ghost for drag and drop. has to be always above other elements
-$dnd-ghost: 100499;
-
-$sticky-toolbar: 2000; // more than has popup
+// z-index system values
+$z-index-map: (
+    "background": -1,
+    "default": 0,
+    "forefront": 1,
+    "img-settings-button": 2,
+    "table-view-button": 100,
+    "table-cell-button": 110,
+    "sticky-toolbar": 2000,
+    "tooltip": 2100,
+);
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -1,3 +1,5 @@
+@use './zindex' as zIndexVariables;
+
 @mixin block-border-hover() {
     border: 1px dashed transparent;
     border-radius: var(--g-border-radius-s);
@@ -6,3 +8,9 @@
         border-color: var(--g-color-line-generic);
     }
 }
+
+// Getting z-index value by key
+@mixin z-index($key) {
+    z-index: map-get(zIndexVariables.$z-index-map, $key);
+}
+

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+@use '../../styles/mixins.scss';`
`1`	`2`	`@import '~@gravity-ui/uikit/styles/mixins';`
`2`	`3`
`3`	`4`	`.g-md-editor-settings {`
`@@ -13,7 +14,7 @@`
`13`	`14`	`}`
`14`	`15`
`15`	`16`	`&__separator {`
`16`		`- z-index: 0;`
	`17`	`+ @include mixins.z-index('default');`
`17`	`18`
`18`	`19`	`margin: 6px 4px;`
`19`	`20`
`@@ -28,6 +29,10 @@`
`28`	`29`	`float: right;`
`29`	`30`	`}`
`30`	`31`
	`32`	`+ &__tooltip {`
	`33`	`+ @include mixins.z-index('tooltip');`
	`34`	`+ }`
	`35`	`+`
`31`	`36`	`&__separator {`
`32`	`37`	`border-bottom: 1px solid var(--g-color-line-generic);`
`33`	`38`	`}`
Original file line number	Diff line number	Diff line change
`@@ -158,6 +158,7 @@ const SettingsContent: React.FC<SettingsContentProps> = function SettingsContent`
`158`	`158`	`<MarkdownHints />`
`159`	`159`	`</div>`
`160`	`160`	`}`
	`161`	`+ tooltipClassName={bContent('tooltip')}`
`161`	`162`	`placement={mdHelpPlacement}`
`162`	`163`	`className={bContent('mode-help')}`
`163`	`164`	`/>`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@use '../../styles/zindex' as zIndexVars;`
	`1`	`+@use '../../styles/mixins.scss';`
`2`	`2`
`3`	`3`	`$block: 'g-md-editor-sticky';`
`4`	`4`
`@@ -13,7 +13,7 @@ $block: 'g-md-editor-sticky';`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`&_sticky-active:not(.#{$block}_clear) {`
`16`		`- z-index: zIndexVars.$sticky-toolbar;`
	`16`	`+ @include mixins.z-index('sticky-toolbar');`
`17`	`17`
`18`	`18`	`padding: var(--g-md-toolbar-sticky-padding);`
`19`	`19`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../styles/mixins.scss';`
	`2`	`+`
`1`	`3`	`.g-md-Mermaid {`
`2`	`4`	`display: flex;`
`3`	`5`	`justify-content: space-between;`
`@@ -32,7 +34,7 @@`
`32`	`34`	`}`
`33`	`35`
`34`	`36`	`&__EditorPopover {`
`35`		`- z-index: 1;`
	`37`	`+ @include mixins.z-index('forefront');`
`36`	`38`
`37`	`39`	`float: right;`
`38`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../../styles/mixins.scss';`
	`2`	`+`
`1`	`3`	`.g-md-yfm-html-block {`
`2`	`4`	`position: relative;`
`3`	`5`
`@@ -65,7 +67,7 @@`
`65`	`67`	`}`
`66`	`68`
`67`	`69`	`&__editor-popover {`
`68`		`- z-index: 1;`
	`70`	`+ @include mixins.z-index('forefront');`
`69`	`71`
`70`	`72`	`float: right;`
`71`	`73`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use '../../../styles//mixins.scss';`
	`2`	`+`
`1`	`3`	`.Prosemirror-hide-cursor {`
`2`	`4`	`caret-color: transparent;`
`3`	`5`	`}`
`@@ -27,8 +29,9 @@`
`27`	`29`	`}`
`28`	`30`
`29`	`31`	`&::before {`
	`32`	`+ @include mixins.z-index('forefront');`
	`33`	`+`
`30`	`34`	`position: relative;`
`31`		`- z-index: 1;`
`32`	`35`
`33`	`36`	`display: inline-block;`
`34`	`37`