feat(Divider): render content inside (#1701)

Co-authored-by: Vadim Polyakov <[email protected]>

src/components/Divider/Divider.scss

@@ -3,13 +3,71 @@
 $block: '.#{variables.$ns}divider';
 
 #{$block} {
+    --_--content-gap: 8px;
+    --_--size: 1px;
+
+    &:not(:empty) {
+        border: none;
+        display: flex;
+        align-items: center;
+
+        &::before,
+        &::after {
+            content: '';
+        }
+    }
+
+    &::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));
         }
 
         &_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));
         }
     }
+
+    &_align {
+        &_start::before {
+            display: none;
+        }
+
+        &_end::after {
+            display: none;
+        }
+    }
 }

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>
     );
 });

src/components/Divider/README.md

@@ -132,12 +132,102 @@ 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      |
 | :---------- | :-------------------------------------- | :---------------------- | :----------- |
 | 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`                |              |
 

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,33 @@ export const Custom: Story = {
         </Showcase>
     ),
 };
+
+const alignCases: Array<NonNullable<DividerProps['align']>> = ['start', 'center', 'end'];
+
+export const WithContent: Story = {
+    args: {
+        orientation: 'horizontal',
+    },
+    render: (args) => (
+        <Showcase>
+            <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}
+                    </Divider>
+                ))}
+
+                <Divider align="center" {...args}>
+                    <Icon data={CheckIcon} size={16} />
+                </Divider>
+            </Flex>
+        </Showcase>
+    ),
+};
+
+WithContent.storyName = 'With content';

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 element = screen.getByTestId(qa);
+
+            expect(element).toHaveClass(`g-divider_align_${align}`);
+        },
+    );
 });