fix(MobileHeader): fix padding in showcase

gravity-ui · Sep 24, 2024 · 54fbf9e · 54fbf9e
1 parent 50155e0
commit 54fbf9e
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 3 deletions.
diff --git a/...l.test.tsx-snapshots/MobileHeader-render-story-Showcase-dark-chromium-linux.png b/...l.test.tsx-snapshots/MobileHeader-render-story-Showcase-dark-chromium-linux.png
diff --git a/...ual.test.tsx-snapshots/MobileHeader-render-story-Showcase-dark-webkit-linux.png b/...ual.test.tsx-snapshots/MobileHeader-render-story-Showcase-dark-webkit-linux.png
diff --git a/....test.tsx-snapshots/MobileHeader-render-story-Showcase-light-chromium-linux.png b/....test.tsx-snapshots/MobileHeader-render-story-Showcase-light-chromium-linux.png
diff --git a/...al.test.tsx-snapshots/MobileHeader-render-story-Showcase-light-webkit-linux.png b/...al.test.tsx-snapshots/MobileHeader-render-story-Showcase-light-webkit-linux.png
diff --git a/src/components/MobileHeader/__stories__/MobileHeaderShowcase.scss b/src/components/MobileHeader/__stories__/MobileHeaderShowcase.scss
@@ -52,4 +52,13 @@ body {
         justify-content: center;
         min-height: 250px;
     }
+
+    &__side-item {
+        padding: 10px;
+        background: none;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        margin: 0;
+    }
 }
diff --git a/src/components/MobileHeader/__stories__/MobileHeaderShowcase.tsx b/src/components/MobileHeader/__stories__/MobileHeaderShowcase.tsx
@@ -97,16 +97,17 @@ export function MobileHeaderShowcase() {
     ];
 
     const sideItem = (
-        <div
+        <button
             className={b('side-item')}
             onClick={() => {
                 ref?.current?.dispatchEvent(
                     getMobileHeaderCustomEvent('MOBILE_PANEL_TOGGLE', {panelName: 'settings'}),
                 );
             }}
+            aria-label="settings"
         >
             <Icon data={Gear} size={20} />
-        </div>
+        </button>
     );
 
     return (

diff --git a/src/components/MobileHeader/__tests__/MobileHeader.visual.test.tsx b/src/components/MobileHeader/__tests__/MobileHeader.visual.test.tsx
@@ -5,8 +5,9 @@ import {test} from '~playwright/core';
 import {MobileHeaderStories} from './helpersPlaywright';
 
 test.describe('MobileHeader', () => {
-    test('render story: <Showcase>', async ({mount, expectScreenshot}) => {
+    test('render story: <Showcase>', async ({mount, expectScreenshot, defaultDelay}) => {
         await mount(<MobileHeaderStories.Showcase />, undefined, {width: 390, height: 844});
+        await defaultDelay();
 
         await expectScreenshot();
     });