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
VKCOM · Dec 18, 2024 · d14a7d6 · d14a7d6
1 parent a0141db
commit d14a7d6
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git 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
@@ -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) => (