feat(EditorView): add sticky toolbar border variable (#499)

gravity-ui · Nov 27, 2024 · 3e1d2e2 · 3e1d2e2
1 parent 9eb6464
commit 3e1d2e2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/demo/stories/css-variables/CSSVariables.stories.tsx b/demo/stories/css-variables/CSSVariables.stories.tsx
@@ -20,6 +20,10 @@ export const Story: StoryObj<typeof component> = {
             control: {type: 'text'},
             description: 'Toolbar padding in sticky mode',
         },
+        '--g-md-toolbar-sticky-border': {
+            control: {type: 'text'},
+            description: 'Toolbar border in sticky mode',
+        },
         '--g-md-editor-padding': {
             control: {type: 'text'},
             description: 'Editor contents padding',

diff --git a/docs/how-to-customize-the-editor.md b/docs/how-to-customize-the-editor.md
@@ -9,4 +9,5 @@ You can use CSS variables to make editor contents fit your own needs
 | `--g-md-toolbar-sticky-padding` | Toolbar padding in sticky mode | padding | -4px |
 | `--g-md-toolbar-sticky-inset` | Toolbar inset in sticky mode | inset | -4px |
 | `--g-md-toolbar-sticky-offset` | Toolbar offset in sticky mode | top | 0px |
+| `--g-md-toolbar-sticky-border` | Toolbar border in sticky mode | border | 1px solid var(--g-color-line-generic-solid) |
 | `--g-md-editor-padding` | Editor contents padding | padding | 0px |
diff --git a/src/bundle/sticky/sticky.scss b/src/bundle/sticky/sticky.scss
@@ -23,7 +23,7 @@ $block: 'g-md-editor-sticky';
 
             content: '';
 
-            border: 1px solid var(--g-color-line-generic-solid);
+            border: var(--g-md-toolbar-sticky-border, 1px solid var(--g-color-line-generic-solid));
             border-radius: 4px;
             background-color: var(--g-color-base-background);
         }