feat(Separator): rename separator direction values (#7767)

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

@@ -12,7 +12,7 @@
   <Panel id="separator">
     <PanelHeader>Separator</PanelHeader>
 
-    <Group header={<Header mode="secondary">direction="inline"</Header>}>
+    <Group header={<Header mode="secondary">direction="horizontal"</Header>}>
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
@@ -21,12 +21,12 @@
       <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
     </Group>
-    <Group header={<Header mode="secondary">direction="block"</Header>}>
+    <Group header={<Header mode="secondary">direction="vertical"</Header>}>
       <Flex margin="auto">
         <Link>Новости</Link>
-        <Separator direction="block" size="xl" />
+        <Separator direction="vertical" size="xl" />
         <Link>Звонки</Link>
-        <Separator direction="block" size="xl" />
+        <Separator direction="vertical" size="xl" />
         <Link>Друзья</Link>
       </Flex>
     </Group>

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

@@ -16,27 +16,27 @@ export const SeparatorPlayground = (props: ComponentPlaygroundProps) => {
           appearance: ['primary', 'primary-alpha', 'secondary'],
         },
         {
-          direction: ['inline'],
+          direction: ['horizontal'],
           size: [undefined, 'xl'],
           padding: [true, false],
         },
         {
-          direction: ['block'],
+          direction: ['vertical'],
           size: ['xl'],
         },
         {
           align: ['start', 'center', 'end'],
           size: ['3xl'],
         },
         {
-          direction: ['block'],
+          direction: ['vertical'],
           align: ['start', 'center', 'end'],
           size: ['3xl'],
         },
       ]}
     >
       {(props: SeparatorProps) => (
-        <div style={props.direction === 'block' ? { display: 'flex' } : undefined}>
+        <div style={props.direction === 'vertical' ? { display: 'flex' } : undefined}>
           First Item
           <Separator {...props} />
           Second Item

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

@@ -18,18 +18,18 @@
   --vkui_internal--separator_align: end;
 }
 
-.directionBlock {
+.directionVertical {
   display: inline-flex;
   align-self: stretch;
 }
 
-.sized.directionInline {
+.sized.directionHorizontal {
   display: flex;
   block-size: var(--vkui_internal--spacing_size);
   align-items: var(--vkui_internal--separator_align, center);
 }
 
-.sized.directionBlock {
+.sized.directionVertical {
   inline-size: var(--vkui_internal--spacing_size);
   justify-content: var(--vkui_internal--separator_align, center);
 }
@@ -41,23 +41,23 @@
   border: 0;
 }
 
-.directionInline .in {
+.directionHorizontal .in {
   block-size: var(--vkui--size_border--regular);
 }
 
-.directionBlock .in {
+.directionVertical .in {
   inline-size: var(--vkui--size_border--regular);
 }
 
-.sized.directionInline .in {
+.sized.directionHorizontal .in {
   flex: 1 0 auto;
 }
 
-.directionInline.padded .in {
+.directionHorizontal.padded .in {
   margin-inline: var(--vkui--size_base_padding_horizontal--regular);
 }
 
-.directionBlock.padded .in {
+.directionVertical.padded .in {
   margin-block: var(--vkui--size_base_padding_horizontal--regular);
 }
 

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

@@ -25,7 +25,7 @@ export const Playground: Story = {
     (Component, props) => (
       <div
         style={
-          props.args.direction === 'block'
+          props.args.direction === 'vertical'
             ? { display: 'flex', alignItems: 'center', height: 50 }
             : undefined
         }
@@ -54,7 +54,7 @@ export const DefaultDirectionExample: Story = {
 export const BlockDirectionExample: Story = {
   ...Playground,
   args: {
-    direction: 'block',
+    direction: 'vertical',
     size: '2xl',
   },
   decorators: [

packages/vkui/src/components/Separator/Separator.tsx

@@ -18,7 +18,7 @@ export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement
   /**
    * Направление отображения разделителя
    */
-  direction?: 'inline' | 'block';
+  direction?: 'horizontal' | 'vertical';
   /**
    * Размер контейнера, в который вложен разделитель
    */
@@ -36,8 +36,8 @@ const appearanceClassNames = {
 };
 
 const directionClassNames = {
-  block: styles.directionBlock,
-  inline: styles.directionInline,
+  horizontal: styles.directionHorizontal,
+  vertical: styles.directionVertical,
 };
 
 const alignClassNames = {
@@ -51,7 +51,7 @@ const alignClassNames = {
 export const Separator = ({
   padding = false,
   appearance = 'primary',
-  direction = 'inline',
+  direction = 'horizontal',
   align = 'center',
   style,
   size,