diff --git a/src/components/Divider/Divider.scss b/src/components/Divider/Divider.scss index 4139723fe8..3b7223e0b9 100644 --- a/src/components/Divider/Divider.scss +++ b/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; + } + } } 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(function Divider(props, ref) { - const {orientation = 'horizontal', className, style, qa} = props; + const {orientation = 'horizontal', className, style, qa, children, align = 'start'} = props; return (
+ > + {children} +
); }); diff --git a/src/components/Divider/README.md b/src/components/Divider/README.md index 330a69476b..dbb176dbd7 100644 --- a/src/components/Divider/README.md +++ b/src/components/Divider/README.md @@ -132,12 +132,102 @@ import {Flex, Label, Divider} from '@gravity-ui/uikit'; +### Custom content + + + + + +```tsx +import {Divider, Flex, Container, Icon} from '@gravity-ui/uikit'; +import {CheckIcon} from '@gravity-ui/icons'; + + + + Custom content + + + + +; +``` + + + +### Alignment + + + + + +```tsx +import {Divider, Flex, Container} from '@gravity-ui/uikit'; + + + + Start content + Center content + End content + +; +``` + + + ### 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` | | diff --git a/src/components/Divider/__stories__/Divider.stories.tsx b/src/components/Divider/__stories__/Divider.stories.tsx index 16e89a446b..2c4f63acac 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 = { 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) => ( @@ -124,6 +129,9 @@ export const Custom: Story = { className: 'custom-divider', style: {borderWidth: '2px'}, }, + argTypes: { + align: disabledControl, + }, render: (args) => (