feat(PanelHeader): rename boolean props (#6277)

* feat(PanelHeader): rename boolean props

* chore: review fixes

Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]>

* chore: update readme

Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]>

* fix: revert condition

* fix: rename noVisor to float

* fix: reorder migration guide

* Fix warnings

---------

Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]>

README.md

@@ -60,9 +60,11 @@ import {
 import '@vkontakte/vkui/dist/vkui.css';
 
 const Example = () => {
+  const platform = usePlatform();
+
   return (
     <AppRoot>
-      <SplitLayout header={<PanelHeader separator={false} />}>
+      <SplitLayout header={platform !== 'vkcom' && <PanelHeader delimiter="none" />}>
         <SplitCol autoSpaced>
           <View activePanel="main">
             <Panel id="main">

packages/vkui/src/components/Epic/Epic.stories.tsx

@@ -52,7 +52,7 @@ export const Example: Story = {
 
     return (
       <SplitLayout
-        header={hasHeader && <PanelHeader separator={false} />}
+        header={hasHeader && <PanelHeader delimiter="none" />}
         style={{ justifyContent: 'center' }}
       >
         {viewWidth.tabletPlus && (

packages/vkui/src/components/Epic/Readme.md

@@ -29,7 +29,7 @@ const Example = () => {
 
   return (
     <SplitLayout
-      header={hasHeader && <PanelHeader separator={false} />}
+      header={hasHeader && <PanelHeader delimiter="none" />}
       style={{ justifyContent: 'center' }}
     >
       {viewWidth.tabletPlus && (

packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -10,23 +10,24 @@ import styles from './ModalPageHeader.module.css';
 
 export interface ModalPageHeaderProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    Omit<PanelHeaderProps, 'fixed' | 'shadow'>,
+    Omit<PanelHeaderProps, 'fixed' | 'shadow' | 'delimiter'>,
     HasRef<HTMLDivElement>,
-    HasRootRef<HTMLDivElement> {}
+    HasRootRef<HTMLDivElement> {
+  noSeparator?: boolean;
+}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPageHeader
  */
 export const ModalPageHeader = ({
   children,
-  separator = true,
+  noSeparator = false,
   getRootRef,
   className,
   typographyProps,
   ...restProps
 }: ModalPageHeaderProps) => {
   const platform = usePlatform();
-  const hasSeparator = separator && platform === 'vkcom';
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
   const { labelId } = React.useContext(ModalPageContext);
 
@@ -48,12 +49,12 @@ export const ModalPageHeader = ({
         }}
         {...restProps}
         fixed={false}
-        separator={false}
+        delimiter="none"
         transparent
       >
         {children}
       </PanelHeader>
-      {hasSeparator && <Separator wide />}
+      {!noSeparator && <Separator wide />}
     </div>
   );
 };

packages/vkui/src/components/Panel/Panel.module.css

@@ -34,12 +34,7 @@
 /* stylelint-disable selector-max-universal */
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.Panel__centered :global(.vkuiInternalPanelHeader--vis) + * {
-  margin-block-start: var(--vkui_internal--panel_header_height);
-}
-
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.Panel__centered :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--vis) + * {
+.Panel__centered :global(.vkuiInternalPanelHeader--static) + * {
   margin-block-start: var(--vkui_internal--panel_header_height);
 }
 
@@ -55,42 +50,6 @@
   }
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.Panel--sizeX-compact
-  .Panel__centered
-  :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep)
-  + * {
-  margin-block-start: calc(var(--vkui_internal--panel_header_height) + 5px);
-}
-
-@media (--sizeX-compact) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-  .Panel--sizeX-none
-    .Panel__centered
-    :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep)
-    + * {
-    margin-block-start: calc(var(--vkui_internal--panel_header_height) + 5px);
-  }
-}
-
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.Panel--sizeX-compact
-  .Panel__centered
-  :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep)
-  + * {
-  margin-block-start: calc(var(--vkui_internal--panel_header_height) + 5px);
-}
-
-@media (--sizeX-compact) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-  .Panel--sizeX-none
-    .Panel__centered
-    :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep)
-    + * {
-    margin-block-start: calc(var(--vkui_internal--panel_header_height) + 5px);
-  }
-}
-
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 .Panel--sizeX-regular .Panel__centered :global(.vkuiInternalPanelHeader--sep) + * {
   margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px);
@@ -103,53 +62,12 @@
   }
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.Panel--sizeX-regular
-  .Panel__centered
-  :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep)
-  + * {
-  margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px);
-}
-
-@media (--sizeX-regular) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-  .Panel--sizeX-none
-    .Panel__centered
-    :global(.vkuiInternalPanelHeader--ios):global(.vkuiInternalPanelHeader--sep)
-    + * {
-    margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px);
-  }
-}
-
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.Panel--sizeX-regular
-  .Panel__centered
-  :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep)
-  + * {
-  margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px);
-}
-
-@media (--sizeX-regular) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-  .Panel--sizeX-none
-    .Panel__centered
-    :global(.vkuiInternalPanelHeader--vkcom):global(.vkuiInternalPanelHeader--sep)
-    + * {
-    margin-block-start: calc(var(--vkui_internal--panel_header_height) + 16px);
-  }
-}
-
 /* stylelint-enable selector-max-universal */
 
 /**
  * CMP:
  * View
  */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalView--ios) .Panel__in {
-  padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
-}
-
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalView--ios) .Panel__in {
   padding-block: 0 var(--vkui_internal--safe_area_inset_bottom);

packages/vkui/src/components/Panel/Panel.stories.tsx

@@ -58,7 +58,7 @@ export const Example: Story = {
         </Panel>
         <Panel id="panel2">
           <PanelHeader
-            separator={false}
+            delimiter="spacing"
             before={<PanelHeaderBack onClick={() => setActivePanel('panel1')} />}
           >
             Communities

packages/vkui/src/components/Panel/Readme.md

@@ -34,7 +34,7 @@ const Example = () => {
       </Panel>
       <Panel id="panel2">
         <PanelHeader
-          separator={false}
+          delimiter="spacing"
           before={<PanelHeaderBack onClick={() => setActivePanel('panel1')} />}
         >
           Communities

packages/vkui/src/components/PanelHeader/PanelHeader.e2e-playground.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
+import { Div } from '../Div/Div';
+import { PanelHeader, type PanelHeaderProps } from './PanelHeader';
+
+export const PanelHeaderPlayground = (props: ComponentPlaygroundProps) => {
+  return (
+    <ComponentPlayground
+      {...props}
+      propSets={[
+        {
+          delimiter: ['none', 'auto', 'separator', 'spacing'],
+          children: ['PanelHeader'],
+          // Чтобы шапка в примерах не улетала наверх
+          fixed: [false],
+          $adaptivity: 'x',
+        },
+      ]}
+    >
+      {(props: PanelHeaderProps) => (
+        <>
+          <div
+            style={{
+              // чтобы было проще видеть разницу скриншотов
+              border: '1px solid blue',
+            }}
+          >
+            <PanelHeader {...props} />
+            <Div>Panel</Div>
+          </div>
+        </>
+      )}
+    </ComponentPlayground>
+  );
+};

packages/vkui/src/components/PanelHeader/PanelHeader.e2e.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { test } from '@vkui-e2e/test';
+import { PanelHeaderPlayground } from './PanelHeader.e2e-playground';
+
+test.use({
+  onlyForAppearances: ['light'],
+});
+
+test('PanelHeader', async ({
+  mount,
+  expectScreenshotClippedToContent,
+  componentPlaygroundProps,
+}) => {
+  await mount(<PanelHeaderPlayground {...componentPlaygroundProps} />);
+  await expectScreenshotClippedToContent();
+});

packages/vkui/src/components/PanelHeader/PanelHeader.module.css

@@ -2,12 +2,12 @@
   position: relative;
 }
 
-.PanelHeader--vis.PanelHeader--fixed::before {
+.PanelHeader--static.PanelHeader--fixed::before {
   display: block;
   content: '';
 }
 
-.PanelHeader:not(.PanelHeader--vis):not(.PanelHeader--fixed) {
+.PanelHeader:not(.PanelHeader--static):not(.PanelHeader--fixed) {
   block-size: 0;
   /* см. https://github.com/VKCOM/VKUI/issues/5571 */
   z-index: var(--vkui_internal--z_index_panel_header);
@@ -30,12 +30,12 @@
   background: transparent;
 }
 
-.PanelHeader--sizeX-regular .PanelHeader--shadow .PanelHeader__in {
+.PanelHeader--sizeX-regular.PanelHeader--shadow .PanelHeader__in {
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
 }
 
 @media (--sizeX-regular) {
-  .PanelHeader--sizeX-none .PanelHeader--shadow .PanelHeader__in {
+  .PanelHeader--sizeX-none.PanelHeader--shadow .PanelHeader__in {
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.08);
   }
 }