From de4417ba98d3af60850d93ab3bbc20d3df23526e Mon Sep 17 00:00:00 2001
From: Viktor Zdorovtsev <v.zdvacew@gmail.com>
Date: Thu, 11 Jul 2024 17:57:29 +0700
Subject: [PATCH 1/5] feat(Divider): render content inside

---
 src/components/Divider/Divider.scss           | 32 ++++++++++++++++++
 src/components/Divider/Divider.tsx            | 11 +++++--
 .../Divider/__stories__/Divider.stories.tsx   | 33 +++++++++++++++++++
 .../Divider/__tests__/Divider.test.tsx        | 22 +++++++++++++
 4 files changed, 95 insertions(+), 3 deletions(-)

diff --git a/src/components/Divider/Divider.scss b/src/components/Divider/Divider.scss
index 4139723fe8..a462c452fb 100644
--- a/src/components/Divider/Divider.scss
+++ b/src/components/Divider/Divider.scss
@@ -12,4 +12,36 @@ $block: '.#{variables.$ns}divider';
             border-block-start: 1px solid var(--g-divider-color, var(--g-color-line-generic));
         }
     }
+
+    &:not(:empty) {
+        border: none;
+        display: flex;
+        align-items: center;
+
+        &::before,
+        &::after {
+            content: '';
+            height: 1px;
+            flex-grow: 1;
+            background: var(--g-divider-color, var(--g-color-line-generic));
+        }
+
+        &::before {
+            margin-inline-end: 8px;
+        }
+
+        &::after {
+            margin-inline-start: 8px;
+        }
+    }
+
+    &_align {
+        &_start::before {
+            display: none;
+        }
+
+        &_end::after {
+            display: none;
+        }
+    }
 }
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index 8ac333c182..bfade0711f 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -6,24 +6,29 @@ import {block} from '../utils/cn';
 import './Divider.scss';
 
 export type DividerOrientation = 'vertical' | 'horizontal';
+export type DividerAlign = 'start' | 'center' | 'end';
 
 export interface DividerProps extends DOMProps, QAProps {
     orientation?: DividerOrientation;
+    align?: DividerAlign;
+    children?: React.ReactNode;
 }
 
 const b = block('divider');
 
 export const Divider = React.forwardRef<HTMLDivElement, DividerProps>(function Divider(props, ref) {
-    const {orientation = 'horizontal', className, style, qa} = props;
+    const {orientation = 'horizontal', className, style, qa, children, align = 'start'} = props;
 
     return (
         <div
-            className={b({orientation}, className)}
+            className={b({orientation, align}, className)}
             ref={ref}
             style={style}
             data-qa={qa}
             role="separator"
             aria-orientation={orientation === 'vertical' ? 'vertical' : undefined}
-        />
+        >
+            {children}
+        </div>
     );
 });
diff --git a/src/components/Divider/__stories__/Divider.stories.tsx b/src/components/Divider/__stories__/Divider.stories.tsx
index 16e89a446b..db23afeb4a 100644
--- a/src/components/Divider/__stories__/Divider.stories.tsx
+++ b/src/components/Divider/__stories__/Divider.stories.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 
+import {Check as CheckIcon} from '@gravity-ui/icons';
 import type {Meta, StoryObj} from '@storybook/react';
 
 import {Showcase} from '../../../demo/Showcase';
 import {Card} from '../../Card';
+import {Icon} from '../../Icon';
 import {ListItem} from '../../List';
 import {Flex} from '../../layout';
 import {Divider} from '../Divider';
+import type {DividerProps} from '../Divider';
 
 const meta: Meta<typeof Divider> = {
     title: 'Components/Utils/Divider',
@@ -57,6 +60,7 @@ export const Horizontal: Story = {
         style: disabledControl,
         qa: disabledControl,
         className: disabledControl,
+        align: disabledControl,
     },
     render: (args) => {
         return (
@@ -93,6 +97,7 @@ export const Vertical: Story = {
         style: disabledControl,
         qa: disabledControl,
         className: disabledControl,
+        align: disabledControl,
     },
     render: (args) => (
         <Showcase>
@@ -124,6 +129,9 @@ export const Custom: Story = {
         className: 'custom-divider',
         style: {borderWidth: '2px'},
     },
+    argTypes: {
+        align: disabledControl,
+    },
     render: (args) => (
         <Showcase>
             <style>
@@ -152,3 +160,28 @@ export const Custom: Story = {
         </Showcase>
     ),
 };
+
+const alignCases: Array<NonNullable<DividerProps['align']>> = ['start', 'center', 'end'];
+
+export const WithContent: Story = {
+    argTypes: {
+        orientation: disabledControl,
+    },
+    render: (args) => (
+        <Showcase>
+            <Flex direction="column" width={400} gap={5}>
+                {alignCases.map((align, index) => (
+                    <Divider {...args} align={align} key={index}>
+                        {align}
+                    </Divider>
+                ))}
+
+                <Divider align="center" {...args}>
+                    <Icon data={CheckIcon} size={16} />
+                </Divider>
+            </Flex>
+        </Showcase>
+    ),
+};
+
+WithContent.storyName = 'With content';
diff --git a/src/components/Divider/__tests__/Divider.test.tsx b/src/components/Divider/__tests__/Divider.test.tsx
index 5351c1dd5f..dbd1a6ae3e 100644
--- a/src/components/Divider/__tests__/Divider.test.tsx
+++ b/src/components/Divider/__tests__/Divider.test.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import {render, screen} from '../../../../test-utils/utils';
 import {block} from '../../utils/cn';
 import {Divider} from '../Divider';
+import type {DividerAlign} from '../Divider';
 
 const b = block('custom-divider');
 const qa = 'divider';
@@ -36,4 +37,25 @@ describe('Divider', () => {
         expect(element).toHaveAttribute('role', 'separator');
         expect(element).toHaveClass('g-divider_orientation_vertical');
     });
+    test('Should render children content', () => {
+        const childrenText = 'Children content';
+
+        render(
+            <Divider qa={qa}>
+                <span>{childrenText}</span>
+            </Divider>,
+        );
+        const content = screen.getByText(childrenText);
+
+        expect(content).toBeVisible();
+    });
+    test.each(new Array<DividerAlign>('start', 'center', 'end'))(
+        'Should render children content with given align "%s"',
+        (align) => {
+            render(<Divider align={align} qa={qa} />);
+            const button = screen.getByTestId(qa);
+
+            expect(button).toHaveClass(`g-divider_align_${align}`);
+        },
+    );
 });

From 1ff90724e341d4297fc508dd89cf95080c6778f6 Mon Sep 17 00:00:00 2001
From: Viktor Zdorovtsev <v.zdvacew@gmail.com>
Date: Fri, 19 Jul 2024 11:48:46 +0700
Subject: [PATCH 2/5] feat: vertical orientation support

---
 src/components/Divider/Divider.scss           | 58 ++++++++++++++-----
 .../Divider/__stories__/Divider.stories.tsx   | 11 +++-
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/Divider/Divider.scss b/src/components/Divider/Divider.scss
index a462c452fb..3b7223e0b9 100644
--- a/src/components/Divider/Divider.scss
+++ b/src/components/Divider/Divider.scss
@@ -3,15 +3,8 @@
 $block: '.#{variables.$ns}divider';
 
 #{$block} {
-    &_orientation {
-        &_vertical {
-            border-inline-start: 1px solid var(--g-divider-color, var(--g-color-line-generic));
-        }
-
-        &_horizontal {
-            border-block-start: 1px solid var(--g-divider-color, var(--g-color-line-generic));
-        }
-    }
+    --_--content-gap: 8px;
+    --_--size: 1px;
 
     &:not(:empty) {
         border: none;
@@ -21,17 +14,50 @@ $block: '.#{variables.$ns}divider';
         &::before,
         &::after {
             content: '';
-            height: 1px;
-            flex-grow: 1;
-            background: var(--g-divider-color, var(--g-color-line-generic));
         }
+    }
 
-        &::before {
-            margin-inline-end: 8px;
+    &::before,
+    &::after {
+        flex-grow: 1;
+        background: var(--g-divider-color, var(--g-color-line-generic));
+    }
+
+    &_orientation {
+        &_vertical {
+            flex-direction: column;
+
+            &::before,
+            &::after {
+                width: var(--_--size);
+            }
+
+            &::before {
+                margin-block-end: var(--_--content-gap);
+            }
+
+            &::after {
+                margin-block-start: var(--_--content-gap);
+            }
+
+            border-inline-start: 1px solid var(--g-divider-color, var(--g-color-line-generic));
         }
 
-        &::after {
-            margin-inline-start: 8px;
+        &_horizontal {
+            &::before,
+            &::after {
+                height: var(--_--size);
+            }
+
+            &::before {
+                margin-inline-end: var(--_--content-gap);
+            }
+
+            &::after {
+                margin-inline-start: var(--_--content-gap);
+            }
+
+            border-block-start: 1px solid var(--g-divider-color, var(--g-color-line-generic));
         }
     }
 
diff --git a/src/components/Divider/__stories__/Divider.stories.tsx b/src/components/Divider/__stories__/Divider.stories.tsx
index db23afeb4a..2c4f63acac 100644
--- a/src/components/Divider/__stories__/Divider.stories.tsx
+++ b/src/components/Divider/__stories__/Divider.stories.tsx
@@ -164,12 +164,17 @@ export const Custom: Story = {
 const alignCases: Array<NonNullable<DividerProps['align']>> = ['start', 'center', 'end'];
 
 export const WithContent: Story = {
-    argTypes: {
-        orientation: disabledControl,
+    args: {
+        orientation: 'horizontal',
     },
     render: (args) => (
         <Showcase>
-            <Flex direction="column" width={400} gap={5}>
+            <Flex
+                direction={args.orientation === 'horizontal' ? 'column' : 'row'}
+                height={args.orientation === 'vertical' ? 200 : undefined}
+                width={400}
+                gap={5}
+            >
                 {alignCases.map((align, index) => (
                     <Divider {...args} align={align} key={index}>
                         {align}

From 3d1562eb1aeaf1ad76146580ad73d698c389745c Mon Sep 17 00:00:00 2001
From: Viktor Zdorovtsev <v.zdvacew@gmail.com>
Date: Thu, 15 Aug 2024 20:58:48 +0700
Subject: [PATCH 3/5] docs: add examples with custom content and alignment

---
 src/components/Divider/README.md              | 88 +++++++++++++++++++
 .../Divider/__tests__/Divider.test.tsx        |  4 +-
 2 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/src/components/Divider/README.md b/src/components/Divider/README.md
index 330a69476b..5468ded005 100644
--- a/src/components/Divider/README.md
+++ b/src/components/Divider/README.md
@@ -132,6 +132,94 @@ import {Flex, Label, Divider} from '@gravity-ui/uikit';
 
 <!--/GITHUB_BLOCK-->
 
+### Custom content
+
+<!--LANDING_BLOCK
+
+<ExampleBlock
+    code={`
+        <Container>
+            <Flex gap={3}>
+                <Divider>Custom content</Divider>
+                <Divider align="center">
+                    <Icon data={CheckIcon} size={16} />
+                </Divider>
+            </Flex>
+        </Container>
+    `}
+>
+    <UIKit.Container>
+        <UIKit.Flex gap={3}>
+            <UIKit.Divider>Custom content</UIKit.Divider>
+            <UIKit.Divider>
+                <Icon data={CheckIcon} size={16} />
+            </UIKit.Divider>
+        </UIKit.Flex>
+    </UIKit.Container>
+</ExampleBlock>
+
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+import {Divider, Flex, Container, Icon} from '@gravity-ui/uikit';
+import {CheckIcon} from '@gravity-ui/icons';
+
+<Container>
+  <Flex gap={3}>
+    <Divider>Custom content</Divider>
+    <Divider>
+      <Icon data={CheckIcon} size={16} />
+    </Divider>
+  </Flex>
+</Container>;
+```
+
+<!--/GITHUB_BLOCK-->
+
+### Alignment
+
+<!--LANDING_BLOCK
+
+<ExampleBlock
+    code={`
+        <Container>
+            <Flex gap={3}>
+                <Divider align="start">Start content</Divider>
+                <Divider align="center">Center content</Divider>
+                <Divider align="end">End content</Divider>
+            </Flex>
+        </Container>
+    `}
+>
+    <UIKit.Container>
+        <UIKit.Flex gap={3}>
+            <UIKit.Divider align="start">Start content</UIKit.Divider>
+            <UIKit.Divider align="center">Center content</UIKit.Divider>
+            <UIKit.Divider align="end">End content</UIKit.Divider>
+        </UIKit.Flex>
+    </Container>
+</ExampleBlock>
+
+LANDING_BLOCK-->
+
+<!--GITHUB_BLOCK-->
+
+```tsx
+import {Divider, Flex, Container} from '@gravity-ui/uikit';
+
+<Container>
+  <Flex gap={3}>
+    <Divider align="start">Start content</Divider>
+    <Divider align="center">Center content</Divider>
+    <Divider align="end">End content</Divider>
+  </Flex>
+</Container>;
+```
+
+<!--/GITHUB_BLOCK-->
+
 ### Properties
 
 | Name        | Description                             | Type                    | Default      |
diff --git a/src/components/Divider/__tests__/Divider.test.tsx b/src/components/Divider/__tests__/Divider.test.tsx
index dbd1a6ae3e..c690792829 100644
--- a/src/components/Divider/__tests__/Divider.test.tsx
+++ b/src/components/Divider/__tests__/Divider.test.tsx
@@ -53,9 +53,9 @@ describe('Divider', () => {
         'Should render children content with given align "%s"',
         (align) => {
             render(<Divider align={align} qa={qa} />);
-            const button = screen.getByTestId(qa);
+            const element = screen.getByTestId(qa);
 
-            expect(button).toHaveClass(`g-divider_align_${align}`);
+            expect(element).toHaveClass(`g-divider_align_${align}`);
         },
     );
 });

From 040292a75fe6d85303c3eacd89776746433cedce Mon Sep 17 00:00:00 2001
From: Viktor Zdorovtsev <v.zdvacew@gmail.com>
Date: Fri, 16 Aug 2024 16:54:55 +0700
Subject: [PATCH 4/5] docs: add align prop

---
 src/components/Divider/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Divider/README.md b/src/components/Divider/README.md
index 5468ded005..56ad085a61 100644
--- a/src/components/Divider/README.md
+++ b/src/components/Divider/README.md
@@ -226,6 +226,7 @@ import {Divider, Flex, Container} from '@gravity-ui/uikit';
 | :---------- | :-------------------------------------- | :---------------------- | :----------- |
 | className   | HTML `class` attribute                  | `string`                | -            |
 | orientation | Sets the direction of divider           | `horizontal - vertical` | `horizontal` |
+| align       | Custom content position                 | `start - center - end`  | `start`      |
 | style       | HTML `style` attribute                  | `React.CSSProperties`   |              |
 | qa          | HTML `data-qa` attribute, used in tests | `string`                |              |
 

From 916a26334e7130839cdb67633ac1b6d1703834b3 Mon Sep 17 00:00:00 2001
From: Viktor Zdorovtsev <v.zdvacew@gmail.com>
Date: Fri, 16 Aug 2024 23:53:26 +0700
Subject: [PATCH 5/5] docs: add children prop

---
 src/components/Divider/README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Divider/README.md b/src/components/Divider/README.md
index 56ad085a61..dbb176dbd7 100644
--- a/src/components/Divider/README.md
+++ b/src/components/Divider/README.md
@@ -226,6 +226,7 @@ import {Divider, Flex, Container} from '@gravity-ui/uikit';
 | :---------- | :-------------------------------------- | :---------------------- | :----------- |
 | className   | HTML `class` attribute                  | `string`                | -            |
 | orientation | Sets the direction of divider           | `horizontal - vertical` | `horizontal` |
+| children    | Custom content inside divider           | `React.ReactNode`       |              |
 | align       | Custom content position                 | `start - center - end`  | `start`      |
 | style       | HTML `style` attribute                  | `React.CSSProperties`   |              |
 | qa          | HTML `data-qa` attribute, used in tests | `string`                |              |