fix(MobileHeader): fix padding in showcase

gravity-ui · Sep 20, 2024 · 177b010 · 177b010
1 parent f6b3183
commit 177b010
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 2 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,12 @@ body {
         justify-content: center;
         min-height: 250px;
     }
+
+    &__side-item {
+        padding: 10px;
+        background: none;
+        border: none;
+        outline: none;
+        cursor: pointer;
+    }
 }
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 (