feat(Separator): add direction, size, padding and align props (#7720)

* feat(Separator): add direction, size and align props * feat: add e2e tests * fix eslint issues * feat: add align e2e test * docs clean up * fix review notes * feat: replace wide with padding prop * feat: update screenshots * fix e2e tests * add direction=block and align e2e
VKCOM · Oct 11, 2024 · 6039bdc · 6039bdc
1 parent fcf6f8e
commit 6039bdc
Show file tree

Hide file tree

Showing 34 changed files with 331 additions and 167 deletions.
diff --git a/packages/codemods/src/transforms/v7/__testfixtures__/separator/basic.input.tsx b/packages/codemods/src/transforms/v7/__testfixtures__/separator/basic.input.tsx
@@ -8,6 +8,7 @@ const App = () => {
       <Separator mode="primary-alpha" wide />
       <Separator mode={"secondary"} />
       <Separator wide={false} />
+      <Separator wide={true} />
     </React.Fragment>
   );
 };
diff --git a/packages/codemods/src/transforms/v7/__tests__/__snapshots__/separator.ts.snap b/packages/codemods/src/transforms/v7/__tests__/__snapshots__/separator.ts.snap
@@ -8,9 +8,10 @@ const App = () => {
   return (
     (<React.Fragment>
       <Separator appearance="primary" />
-      <Separator appearance="primary-alpha" noPadding />
+      <Separator appearance="primary-alpha" />
       <Separator appearance={"secondary"} />
-      <Separator noPadding={false} />
+      <Separator padding />
+      <Separator />
     </React.Fragment>)
   );
 };"

diff --git a/packages/codemods/src/transforms/v7/separator.ts b/packages/codemods/src/transforms/v7/separator.ts
@@ -1,5 +1,5 @@
 import { API, FileInfo } from 'jscodeshift';
-import { getImportInfo, renameProp } from '../../codemod-helpers';
+import { getImportInfo, renameProp, swapBooleanValue } from '../../codemod-helpers';
 import { JSCodeShiftOptions } from '../../types';
 
 export const parser = 'tsx';
@@ -13,7 +13,7 @@ export default function transformer(file: FileInfo, api: API, options: JSCodeShi
 
   if (localName) {
     renameProp(j, source, localName, { mode: 'appearance' });
-    renameProp(j, source, localName, { wide: 'noPadding' });
+    swapBooleanValue(api, source, localName, 'wide', 'padding');
   }
 
   return source.toSource();

diff --git a/packages/vkui/src/components/FixedLayout/FixedLayout.e2e-playground.tsx b/packages/vkui/src/components/FixedLayout/FixedLayout.e2e-playground.tsx
@@ -81,7 +81,7 @@ export const FixedLayoutPlayground = (
           <Panel id="fixedLayout">
             <PanelHeader>Fixed layout</PanelHeader>
             <FixedLayout filled={filled} vertical={vertical}>
-              <Separator noPadding />
+              <Separator />
               <Tabs>
                 <TabsItem selected>176 сообществ</TabsItem>
                 <TabsItem>9 событий</TabsItem>

diff --git a/packages/vkui/src/components/FixedLayout/FixedLayout.stories.tsx b/packages/vkui/src/components/FixedLayout/FixedLayout.stories.tsx
@@ -32,7 +32,7 @@ export const Playground: Story = {
       <Panel id="fixedLayout">
         <PanelHeader>Fixed layout</PanelHeader>
         <FixedLayout {...args}>
-          <Separator noPadding />
+          <Separator />
           <Tabs>
             <TabsItem selected>176 сообществ</TabsItem>
             <TabsItem>9 событий</TabsItem>
@@ -55,7 +55,7 @@ export const WithSearchAndContent: Story = {
         <PanelHeader>Fixed layout</PanelHeader>
         <FixedLayout {...args}>
           <Search />
-          <Separator noPadding />
+          <Separator />
         </FixedLayout>
         <StubContent />
       </Panel>

diff --git a/packages/vkui/src/components/FixedLayout/Readme.md b/packages/vkui/src/components/FixedLayout/Readme.md
@@ -20,7 +20,7 @@ const Example = () => {
         <PanelHeader fixed>Fixed layout</PanelHeader>
         <FixedLayout vertical="top" filled>
           <Search />
-          <Separator noPadding />
+          <Separator />
         </FixedLayout>
         <Group>
           <Div style={contentStyles}>
@@ -75,7 +75,7 @@ const Example = () => {
           </Div>
         </Group>
         <FixedLayout filled vertical="bottom">
-          <Separator noPadding />
+          <Separator />
           <Tabs>
             <TabsItem selected={activeTab === 'groups'} onClick={() => setActiveTab('groups')}>
               176 сообществ

diff --git a/packages/vkui/src/components/Flex/Flex.module.css b/packages/vkui/src/components/Flex/Flex.module.css
@@ -92,7 +92,7 @@
 }
 
 /* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
-.withGaps > * {
+.withGaps.withGaps > * {
   margin-block-start: var(--vkui_internal--row_gap);
   margin-inline-start: var(--vkui_internal--column_gap);
 }
diff --git a/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx b/packages/vkui/src/components/ModalPageHeader/ModalPageHeader.tsx
@@ -58,7 +58,7 @@ export const ModalPageHeader = ({
           {children}
         </PanelHeader>
       </div>
-      {!noSeparator && <Separator noPadding={sizeX === 'regular'} />}
+      {!noSeparator && <Separator padding={sizeX !== 'regular'} />}
     </>
   );
 };
diff --git a/packages/vkui/src/components/PanelHeader/PanelHeader.tsx b/packages/vkui/src/components/PanelHeader/PanelHeader.tsx
@@ -183,14 +183,14 @@ export const PanelHeader = ({
       {!isVKCOM && (
         <>
           {staticSeparatorVisible && adaptiveSizeX.compact && (
-            <Separator className={adaptiveSizeX.compact.className} />
+            <Separator className={adaptiveSizeX.compact.className} padding />
           )}
           {staticSpacingVisible && adaptiveSizeX.regular && (
             <Spacing className={adaptiveSizeX.regular.className} size={16} />
           )}
         </>
       )}
-      {separatorVisible && isVKCOM && <Separator className={styles.separator} noPadding />}
+      {separatorVisible && isVKCOM && <Separator className={styles.separator} />}
     </RootComponent>
   );
 };
diff --git a/packages/vkui/src/components/Separator/Readme.md b/packages/vkui/src/components/Separator/Readme.md
@@ -1,21 +1,35 @@
-Используется для разделения какого-либо контента. Отступы справа и слева контролируются свойством `noPadding`.
+Используется для разделения какого-либо контента.
+
+Добавить стандартные отступы можно через свойство `padding`.
+Изменить цветовое представление компонента можно при помощи свойства `appearance`.
+Свойство `size` позволяет задать размеры контейнера, внутри которого располагается `Separator`. Управлять выравниванием внутри контейнера можно через свойство `align`.
+
+> Обратите внимание, если вы используете компонент `Separator` с `direction="block"`,
+> то родительский элемент должен быть `flex`-контейнером.
 
 ```jsx
 <View activePanel="separator">
   <Panel id="separator">
     <PanelHeader>Separator</PanelHeader>
 
-    <Group>
+    <Group header={<Header mode="secondary">direction="inline"</Header>}>
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
-      <Spacing size={24}>
-        <Separator />
-      </Spacing>
+      <Separator size="4xl" />
 
       <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
     </Group>
+    <Group header={<Header mode="secondary">direction="block"</Header>}>
+      <Flex margin="auto">
+        <Link>Новости</Link>
+        <Separator direction="block" size="xl" />
+        <Link>Звонки</Link>
+        <Separator direction="block" size="xl" />
+        <Link>Друзья</Link>
+      </Flex>
+    </Group>
   </Panel>
 </View>
 ```
diff --git a/packages/vkui/src/components/Separator/Separator.e2e-playground.tsx b/packages/vkui/src/components/Separator/Separator.e2e-playground.tsx
@@ -0,0 +1,47 @@
+import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
+import { type SpacingSize, spacingSizeClassNames } from '../../lib/spacings/sizes';
+import { Separator, type SeparatorProps } from './Separator';
+
+const sizes = Object.keys(spacingSizeClassNames) as SpacingSize[];
+
+export const SeparatorPlayground = (props: ComponentPlaygroundProps) => {
+  return (
+    <ComponentPlayground
+      {...props}
+      propSets={[
+        {
+          size: [undefined, ...sizes, 8, 24],
+        },
+        {
+          appearance: ['primary', 'primary-alpha', 'secondary'],
+        },
+        {
+          direction: ['inline'],
+          size: [undefined, 'xl'],
+          padding: [true, false],
+        },
+        {
+          direction: ['block'],
+          size: ['xl'],
+        },
+        {
+          align: ['start', 'center', 'end'],
+          size: ['3xl'],
+        },
+        {
+          direction: ['block'],
+          align: ['start', 'center', 'end'],
+          size: ['3xl'],
+        },
+      ]}
+    >
+      {(props: SeparatorProps) => (
+        <div style={props.direction === 'block' ? { display: 'flex' } : undefined}>
+          First Item
+          <Separator {...props} />
+          Second Item
+        </div>
+      )}
+    </ComponentPlayground>
+  );
+};
diff --git a/packages/vkui/src/components/Separator/Separator.e2e.tsx b/packages/vkui/src/components/Separator/Separator.e2e.tsx
@@ -0,0 +1,7 @@
+import { test } from '@vkui-e2e/test';
+import { SeparatorPlayground } from './Separator.e2e-playground';
+
+test('Separator', async ({ mount, expectScreenshotClippedToContent, componentPlaygroundProps }) => {
+  await mount(<SeparatorPlayground {...componentPlaygroundProps} />);
+  await expectScreenshotClippedToContent();
+});
diff --git a/packages/vkui/src/components/Separator/Separator.module.css b/packages/vkui/src/components/Separator/Separator.module.css
@@ -10,19 +10,57 @@
   color: var(--vkui--color_separator_primary_alpha);
 }
 
+.alignStart {
+  --vkui_internal--separator_align: start;
+}
+
+.alignEnd {
+  --vkui_internal--separator_align: end;
+}
+
+.directionBlock {
+  display: inline-flex;
+  align-self: stretch;
+}
+
+.sized.directionInline {
+  display: flex;
+  block-size: var(--vkui_internal--spacing_size);
+  align-items: var(--vkui_internal--separator_align, center);
+}
+
+.sized.directionBlock {
+  inline-size: var(--vkui_internal--spacing_size);
+  justify-content: var(--vkui_internal--separator_align, center);
+}
+
 .in {
-  block-size: var(--vkui--size_border--regular);
   margin: 0;
   background: currentColor;
   color: inherit;
   border: 0;
-  transform-origin: center top;
 }
 
-.padded .in {
+.directionInline .in {
+  block-size: var(--vkui--size_border--regular);
+}
+
+.directionBlock .in {
+  inline-size: var(--vkui--size_border--regular);
+}
+
+.sized.directionInline .in {
+  flex: 1 0 auto;
+}
+
+.directionInline.padded .in {
   margin-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
+.directionBlock.padded .in {
+  margin-block: var(--vkui--size_base_padding_horizontal--regular);
+}
+
 /*
  * CMP:
  * ModalPage

diff --git a/packages/vkui/src/components/Separator/Separator.stories.tsx b/packages/vkui/src/components/Separator/Separator.stories.tsx
@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Icon28Notifications, Icon28SlidersOutline } from '@vkontakte/icons';
 import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { Div } from '../Div/Div';
 import { Group } from '../Group/Group';
+import { Link } from '../Link/Link';
 import { SimpleCell } from '../SimpleCell/SimpleCell';
-import { Spacing } from '../Spacing/Spacing';
 import { Separator, type SeparatorProps } from './Separator';
 
 const story: Meta<SeparatorProps> = {
@@ -17,28 +18,54 @@ export default story;
 type Story = StoryObj<SeparatorProps>;
 
 export const Playground: Story = {
+  args: {
+    size: 'xl',
+  },
   decorators: [
-    (Component) => (
-      <div>
+    (Component, props) => (
+      <div
+        style={
+          props.args.direction === 'block'
+            ? { display: 'flex', alignItems: 'center', height: 50 }
+            : undefined
+        }
+      >
         Before Separator
-        <Component />
+        <Component {...props} />
         After Separator
       </div>
     ),
   ],
 };
 
-export const Example: Story = {
+export const DefaultDirectionExample: Story = {
   ...Playground,
   decorators: [
     (Component) => (
       <Group>
         <SimpleCell before={<Icon28Notifications />}>Уведомления</SimpleCell>
-        <Spacing>
-          <Component />
-        </Spacing>
+        <Component />
         <SimpleCell before={<Icon28SlidersOutline />}>Основные</SimpleCell>
       </Group>
     ),
   ],
 };
+
+export const BlockDirectionExample: Story = {
+  ...Playground,
+  args: {
+    direction: 'block',
+    size: '2xl',
+  },
+  decorators: [
+    (Component, props) => (
+      <Div style={{ display: 'flex' }}>
+        <Link>Новости</Link>
+        <Component {...props} />
+        <Link>Звонки</Link>
+        <Component {...props} />
+        <Link>Друзья</Link>
+      </Div>
+    ),
+  ],
+};