Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Oct 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ const App = () => {
<Separator mode="primary-alpha" wide />
<Separator mode={"secondary"} />
<Separator wide={false} />
<Separator wide={true} />
</React.Fragment>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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>)
);
};"
Expand Down
4 changes: 2 additions & 2 deletions packages/codemods/src/transforms/v7/separator.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -55,7 +55,7 @@ export const WithSearchAndContent: Story = {
<PanelHeader>Fixed layout</PanelHeader>
<FixedLayout {...args}>
<Search />
<Separator noPadding />
<Separator />
</FixedLayout>
<StubContent />
</Panel>
Expand Down
4 changes: 2 additions & 2 deletions packages/vkui/src/components/FixedLayout/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Example = () => {
<PanelHeader fixed>Fixed layout</PanelHeader>
<FixedLayout vertical="top" filled>
<Search />
<Separator noPadding />
<Separator />
</FixedLayout>
<Group>
<Div style={contentStyles}>
Expand Down Expand Up @@ -75,7 +75,7 @@ const Example = () => {
</Div>
</Group>
<FixedLayout filled vertical="bottom">
<Separator noPadding />
<Separator />
<Tabs>
<TabsItem selected={activeTab === 'groups'} onClick={() => setActiveTab('groups')}>
176 сообществ
Expand Down
2 changes: 1 addition & 1 deletion packages/vkui/src/components/Flex/Flex.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const ModalPageHeader = ({
{children}
</PanelHeader>
</div>
{!noSeparator && <Separator noPadding={sizeX === 'regular'} />}
{!noSeparator && <Separator padding={sizeX !== 'regular'} />}
</>
);
};
4 changes: 2 additions & 2 deletions packages/vkui/src/components/PanelHeader/PanelHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
24 changes: 19 additions & 5 deletions packages/vkui/src/components/Separator/Readme.md
Original file line number Diff line number Diff line change
@@ -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>
```
Original file line number Diff line number Diff line change
@@ -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>
);
};
7 changes: 7 additions & 0 deletions packages/vkui/src/components/Separator/Separator.e2e.tsx
Original file line number Diff line number Diff line change
@@ -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();
});
44 changes: 41 additions & 3 deletions packages/vkui/src/components/Separator/Separator.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
43 changes: 35 additions & 8 deletions packages/vkui/src/components/Separator/Separator.stories.tsx
Original file line number Diff line number Diff line change
@@ -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> = {
Expand All @@ -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>
),
],
};
Loading
Loading