From d14a7d6b70e5ca9e3b23262d9bb15579f0f36d9d Mon Sep 17 00:00:00 2001
From: Eldar <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:17:42 +0300
Subject: [PATCH] fix(ImageBase): fix bug with css selectors of ImageBase
 (#8004)

* fix(ImageBase): remove Avatar margins in PanelHeader

* fix(ImageBase): fix bug with css selectors of ImageBase

* test(PanelHeader): add screens with Avatar and PanelHeaderButton
---
 .../components/ImageBase/ImageBase.module.css |  4 +--
 .../PanelHeader.e2e-playground.tsx            | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/vkui/src/components/ImageBase/ImageBase.module.css b/packages/vkui/src/components/ImageBase/ImageBase.module.css
index 85b435c010..e05e6d9da7 100644
--- a/packages/vkui/src/components/ImageBase/ImageBase.module.css
+++ b/packages/vkui/src/components/ImageBase/ImageBase.module.css
@@ -88,11 +88,11 @@
  * PanelHeader
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalPanelHeader__before) .host {
+:global(.vkuiInternalPanelHeader__before) > .host {
   margin-inline-start: 8px;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalPanelHeader__after) .host {
+:global(.vkuiInternalPanelHeader__after) > .host {
   margin-inline-end: 8px;
 }
diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.e2e-playground.tsx b/packages/vkui/src/components/PanelHeader/PanelHeader.e2e-playground.tsx
index 9df73d49c1..553714af57 100644
--- a/packages/vkui/src/components/PanelHeader/PanelHeader.e2e-playground.tsx
+++ b/packages/vkui/src/components/PanelHeader/PanelHeader.e2e-playground.tsx
@@ -1,5 +1,7 @@
 import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
+import { Avatar } from '../Avatar/Avatar';
 import { Div } from '../Div/Div';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { PanelHeader, type PanelHeaderProps } from './PanelHeader';
 
 export const PanelHeaderPlayground = (props: ComponentPlaygroundProps) => {
@@ -14,6 +16,32 @@ export const PanelHeaderPlayground = (props: ComponentPlaygroundProps) => {
           fixed: [false],
           $adaptivity: 'x',
         },
+        {
+          delimiter: ['auto'],
+          children: ['PanelHeader'],
+          after: [
+            <Avatar size={36} key="avatar" />,
+            <PanelHeaderButton key="header-button">
+              <Avatar size={36} />
+            </PanelHeaderButton>,
+          ],
+          // Чтобы шапка в примерах не улетала наверх
+          fixed: [false],
+          $adaptivity: 'x',
+        },
+        {
+          delimiter: ['auto'],
+          children: ['PanelHeader'],
+          before: [
+            <Avatar size={36} key="avatar" />,
+            <PanelHeaderButton key="header-button">
+              <Avatar size={36} />
+            </PanelHeaderButton>,
+          ],
+          // Чтобы шапка в примерах не улетала наверх
+          fixed: [false],
+          $adaptivity: 'x',
+        },
       ]}
     >
       {(props: PanelHeaderProps) => (