@salutejs/plasma-new-hope 0.83.0-canary.1213.9175571113.0 → 0.83.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.css +6 -9
- package/cjs/components/Button/Button.js +2 -16
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +10 -31
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Button/Button.styles_uqvh6u.css +5 -0
- package/cjs/components/Button/Button.tokens.js +0 -5
- package/cjs/components/Button/Button.tokens.js.map +1 -1
- package/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
- package/{es/components/Button/variations/_stretching/base_hy8dc.css → cjs/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
- package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
- package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
- package/{es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
- package/cjs/components/Drawer/Drawer.css +6 -9
- package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
- package/cjs/components/IconButton/IconButton.css +7 -10
- package/cjs/components/IconButton/IconButton.styles.js +1 -1
- package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
- package/cjs/components/Notification/Notification.css +6 -9
- package/cjs/components/Notification/NotificationsProvider.css +6 -9
- package/cjs/components/Pagination/Pagination.css +8 -11
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
- package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
- package/cjs/components/Select/Select.css +6 -9
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
- package/cjs/components/Toast/Toast.css +6 -9
- package/cjs/components/Toast/ToastController.css +6 -9
- package/cjs/index.css +9 -12
- package/es/components/Button/Button.css +6 -9
- package/es/components/Button/Button.js +3 -17
- package/es/components/Button/Button.js.map +1 -1
- package/es/components/Button/Button.styles.js +11 -29
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Button/Button.styles_uqvh6u.css +5 -0
- package/es/components/Button/Button.tokens.js +0 -5
- package/es/components/Button/Button.tokens.js.map +1 -1
- package/es/components/Button/variations/_stretching/base.js +1 -1
- package/es/components/Button/variations/_stretching/base.js.map +1 -1
- package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
- package/es/components/ButtonGroup/ButtonGroup.css +2 -2
- package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
- package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
- package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
- package/es/components/Drawer/Drawer.css +6 -9
- package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
- package/es/components/IconButton/IconButton.css +7 -10
- package/es/components/IconButton/IconButton.styles.js +1 -1
- package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
- package/es/components/Notification/Notification.css +6 -9
- package/es/components/Notification/NotificationsProvider.css +6 -9
- package/es/components/Pagination/Pagination.css +8 -11
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
- package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
- package/es/components/Select/Select.css +6 -9
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
- package/es/components/Toast/Toast.css +6 -9
- package/es/components/Toast/ToastController.css +6 -9
- package/es/index.css +9 -12
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
- package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/cjs/components/Button/Button.js +2 -16
- package/styled-components/cjs/components/Button/Button.styles.js +12 -20
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -51
- package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
- package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
- package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
- package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
- package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
- package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
- package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
- package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
- package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
- package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +3 -1
- package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/es/components/Button/Button.js +3 -17
- package/styled-components/es/components/Button/Button.styles.js +11 -19
- package/styled-components/es/components/Button/Button.template-doc.mdx +8 -51
- package/styled-components/es/components/Button/Button.tokens.js +0 -5
- package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
- package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
- package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
- package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
- package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
- package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
- package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
- package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
- package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/types/components/Button/Button.d.ts.map +1 -1
- package/types/components/Button/Button.styles.d.ts +1 -5
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/Button/Button.tokens.d.ts +0 -5
- package/types/components/Button/Button.tokens.d.ts.map +1 -1
- package/types/components/Button/Button.types.d.ts +4 -16
- package/types/components/Button/Button.types.d.ts.map +1 -1
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
- package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
- package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
- package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
- package/types/components/Notification/Notification.styles.d.ts +1 -43
- package/types/components/Notification/Notification.styles.d.ts.map +1 -1
- package/types/components/Pagination/Pagination.styles.d.ts +2 -86
- package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
- package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
- package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
- package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
- package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
- package/types/components/Toast/Toast.styles.d.ts +1 -43
- package/types/components/Toast/Toast.styles.d.ts.map +1 -1
- package/types/components/Toast/utils.d.ts +1 -43
- package/types/components/Toast/utils.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
- package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
- package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
- package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/cjs/components/Button/Button.styles_nedem1.css +0 -8
- package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
- package/es/components/Button/Button.styles_nedem1.css +0 -8
- package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
@@ -7,4 +7,4 @@ exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _ButtonGroup = /*#__PURE__*/require("../../ButtonGroup.tokens");
|
9
9
|
var _Button = /*#__PURE__*/require("../../../Button");
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], _ButtonGroup.classes.buttonGroupOverrideStyles, _Button.buttonClasses.buttonItem, _Button.buttonTokens.buttonColor, _ButtonGroup.tokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _ButtonGroup.tokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _ButtonGroup.tokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _ButtonGroup.tokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _ButtonGroup.tokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive, _ButtonGroup.tokens.buttonBackgroundColorActive);
|
@@ -0,0 +1,68 @@
|
|
1
|
+
---
|
2
|
+
id: cell
|
3
|
+
title: Cell
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
# Cell
|
9
|
+
<PropsTable name="Cell" />
|
10
|
+
<Description name="Cell" />
|
11
|
+
|
12
|
+
Компонент ячейки представляет собой стилизованные слоты для контента.
|
13
|
+
|
14
|
+
Также имеются вспомогательные компоненты (Textbox, TextTitle, TextSubtitle, TextLabel).
|
15
|
+
|
16
|
+
Они представляют собой стилизованный текст и слот для них.
|
17
|
+
|
18
|
+
## Примеры
|
19
|
+
|
20
|
+
### Базовое использование
|
21
|
+
|
22
|
+
```tsx live
|
23
|
+
import React from 'react';
|
24
|
+
import { Avatar, Cell } from '@salutejs/{{ package }}';
|
25
|
+
import { IconChevronRight } from '@salutejs/plasma-icons';
|
26
|
+
|
27
|
+
export function App() {
|
28
|
+
return (
|
29
|
+
<>
|
30
|
+
<Cell
|
31
|
+
contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
|
32
|
+
size="m"
|
33
|
+
contentRight={<IconChevronRight color="inheart" size="xs" />}
|
34
|
+
title="Title"
|
35
|
+
subtitle="Subtitle"
|
36
|
+
label="Label"
|
37
|
+
/>
|
38
|
+
</>
|
39
|
+
);
|
40
|
+
}
|
41
|
+
```
|
42
|
+
|
43
|
+
### С использованием своих стилей или встроенных компонентов
|
44
|
+
|
45
|
+
```tsx live
|
46
|
+
import React from 'react';
|
47
|
+
import { Avatar, Cell , CellTextboxLabel , CellTextboxTitle , CellTextboxSubtitle, CellTextbox } from '@salutejs/{{ package }}';
|
48
|
+
import { IconChevronRight } from '@salutejs/plasma-icons';
|
49
|
+
|
50
|
+
export function App() {
|
51
|
+
return (
|
52
|
+
<>
|
53
|
+
<Cell
|
54
|
+
contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
|
55
|
+
size="m"
|
56
|
+
contentRight={<IconChevronRight color="inheart" size="xs" />}
|
57
|
+
>
|
58
|
+
<CellTextbox>
|
59
|
+
<CellTextboxLabel>Label</CellTextboxLabel>
|
60
|
+
<CellTextboxTitle>Title</CellTextboxTitle>
|
61
|
+
<CellTextboxSubtitle>Subtitle</CellTextboxSubtitle>
|
62
|
+
<div style=\{{'font-size': '12px', opacity: 0.4}}>Caption</div>
|
63
|
+
</CellTextbox>
|
64
|
+
</Cell>
|
65
|
+
</>
|
66
|
+
);
|
67
|
+
}
|
68
|
+
```
|
@@ -14,7 +14,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
14
14
|
|
15
15
|
```tsx live
|
16
16
|
import React from 'react';
|
17
|
-
import { Checkbox } from '@salutejs/
|
17
|
+
import { Checkbox } from '@salutejs/{{ package }}';
|
18
18
|
|
19
19
|
export function App() {
|
20
20
|
return (
|
@@ -31,7 +31,7 @@ export function App() {
|
|
31
31
|
|
32
32
|
```tsx live
|
33
33
|
import React from 'react';
|
34
|
-
import { Checkbox } from '@salutejs/
|
34
|
+
import { Checkbox } from '@salutejs/{{ package }}';
|
35
35
|
|
36
36
|
export function App() {
|
37
37
|
return (
|
@@ -72,7 +72,7 @@ export function App() {
|
|
72
72
|
Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
|
73
73
|
+ `"default"` – основная;
|
74
74
|
+ `"secondary"` – вторичная;
|
75
|
-
+ `"accent"` –
|
75
|
+
+ `"accent"` – акцентный;
|
76
76
|
|
77
77
|
```tsx live
|
78
78
|
import React from 'react';
|
@@ -22,24 +22,24 @@ import { PropsTable, Description } from '@site/src/components';
|
|
22
22
|
## Клавиатурная навигация
|
23
23
|
|
24
24
|
Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
|
25
|
-
- `Tab` - переход на
|
25
|
+
- `Tab` - переход на target (input)
|
26
26
|
- `Shift` + `tab` - выход с него (теряем фокус)
|
27
27
|
- `Стрелка вверх` / `стрелка вниз` - открыть выпадающий список и переместиться на первый элемент
|
28
28
|
- `Стрелка вверх` / `стрелка вниз` ходим по элементам с зацикливанием
|
29
|
-
- `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на
|
30
|
-
- Если мы ходим по
|
31
|
-
- Если мы ходим по
|
32
|
-
- В
|
29
|
+
- `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на target (input)
|
30
|
+
- Если мы ходим по select и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
|
31
|
+
- Если мы ходим по select и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на target
|
32
|
+
- В multi-select то же самое кроме закрытия выпадающего списка при выборе элемента
|
33
33
|
- Когда находимся на первом чипе, нажимаем `стрелку влево` / `стрелку вправо` - переходим по чипам
|
34
|
-
- Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на
|
35
|
-
- Когда находимся на
|
36
|
-
- Когда находимся на
|
34
|
+
- Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на target (input)
|
35
|
+
- Когда находимся на target (input) и нажимаем `Backspace` - удаляется последний чип
|
36
|
+
- Когда находимся на target (input) и нажимаем `стрелку влево` - переходим на последний чип
|
37
37
|
- Нажимаем `Backspace` - удаляем выбранный чип и переходим на предыдущий
|
38
|
-
- Если удалили последний чип, то фокусируемся на
|
38
|
+
- Если удалили последний чип, то фокусируемся на target
|
39
39
|
- Если находимся в выборе элемента из выпадающего списка и нажимаем `стрелку влево` / `стрелку вправо` - попадаем на самый последний чип
|
40
40
|
- Если находимся в режиме выбора элемента и нажимаем `стрелку вниз` / `стрелку вверх` находясь на последнем / первом элементе, то перескакиваем в начало / в конец
|
41
|
-
- Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на
|
42
|
-
- Ввод значение в
|
41
|
+
- Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на target (input) и вводим значения
|
42
|
+
- Ввод значение в target (input) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
|
43
43
|
|
44
44
|
### Single
|
45
45
|
|
@@ -178,12 +178,12 @@ export function App() {
|
|
178
178
|
```
|
179
179
|
|
180
180
|
### Применение пользовательского фильтра
|
181
|
-
`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции
|
182
|
-
которая срабатывает на каждый элемент и если возвращает `true`, то элемент
|
181
|
+
`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции callback `filterFunction`,
|
182
|
+
которая срабатывает на каждый элемент и если возвращает `true`, то элемент rendering, иначе нет.
|
183
183
|
|
184
184
|
```tsx live
|
185
185
|
import React from 'react';
|
186
|
-
import { Combobox } from '@salutejs/{{ package }}';
|
186
|
+
import { Combobox, ComboboxItem } from '@salutejs/{{ package }}';
|
187
187
|
|
188
188
|
export function App() {
|
189
189
|
const [value, setValue] = React.useState(['item_0']);
|
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
11
11
|
|
12
12
|
## Примеры
|
13
13
|
|
14
|
-
### Максимальное значение числового
|
14
|
+
### Максимальное значение числового badge
|
15
15
|
Задается с помощью свойства `maxCount`.
|
16
16
|
|
17
17
|
```tsx live
|
@@ -28,7 +28,7 @@ export function App() {
|
|
28
28
|
}
|
29
29
|
```
|
30
30
|
|
31
|
-
### Размер числового
|
31
|
+
### Размер числового badge
|
32
32
|
Размер задается с помощью свойства `size`. Возможные значения свойства: `"xs"` или `"xxs"`.
|
33
33
|
|
34
34
|
```tsx live
|
@@ -45,7 +45,7 @@ export function App() {
|
|
45
45
|
}
|
46
46
|
```
|
47
47
|
|
48
|
-
### Вид числового
|
48
|
+
### Вид числового badge
|
49
49
|
Вид задается с помощью свойства `view`. Возможные значения свойства `view`:
|
50
50
|
|
51
51
|
+ `"primary"` – основной бейдж;
|
@@ -53,8 +53,8 @@ export function App() {
|
|
53
53
|
+ `"positive"` – успешное завершение;
|
54
54
|
+ `"warning"` – предупреждение;
|
55
55
|
+ `"negative"` – ошибка;
|
56
|
-
+ `"dark"` – темный
|
57
|
-
+ `"light"` – светлый
|
56
|
+
+ `"dark"` – темный badge;
|
57
|
+
+ `"light"` – светлый badge.
|
58
58
|
|
59
59
|
```tsx live
|
60
60
|
import React from 'react';
|
@@ -0,0 +1,57 @@
|
|
1
|
+
---
|
2
|
+
id: divider
|
3
|
+
title: Divider
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
## Divider
|
9
|
+
<Description name="Divider" />
|
10
|
+
<PropsTable name="Divider" exclude={['css']} />
|
11
|
+
|
12
|
+
## Использование
|
13
|
+
Компонент `Divider` используется для визуального разделения компонент.
|
14
|
+
|
15
|
+
### Ориентация разделителя
|
16
|
+
Ориентация разделителя задается с помощью свойства orientation.
|
17
|
+
|
18
|
+
Возможные значения свойства orientation:
|
19
|
+
+ "horizontal" – горизонтальная (по умолчанию);
|
20
|
+
+ "vertical" – вертикальная;
|
21
|
+
|
22
|
+
```tsx live
|
23
|
+
import React from 'react';
|
24
|
+
import { BodyS, Divider } from '@salutejs/{{ package }}';
|
25
|
+
|
26
|
+
export function App() {
|
27
|
+
const Demo = ({
|
28
|
+
orientation = 'horizontal',
|
29
|
+
length = '100%',
|
30
|
+
beforeText = 'Before',
|
31
|
+
afterText = 'After',
|
32
|
+
}) => {
|
33
|
+
const wrapperStyle = {
|
34
|
+
display: "inline-flex",
|
35
|
+
gap: "0.5rem",
|
36
|
+
alignItems: "center",
|
37
|
+
justifyContent: "center",
|
38
|
+
flexDirection: orientation === "horizontal" ? "column" : "row"
|
39
|
+
}
|
40
|
+
|
41
|
+
return (
|
42
|
+
<div style={wrapperStyle}>
|
43
|
+
<BodyS>{beforeText}</BodyS>
|
44
|
+
<Divider orientation={orientation} length={length} />
|
45
|
+
<BodyS>{afterText}</BodyS>
|
46
|
+
</div>
|
47
|
+
);
|
48
|
+
};
|
49
|
+
|
50
|
+
return (
|
51
|
+
<div style=\{{ display: "flex", gap: "2rem" }}>
|
52
|
+
<Demo />
|
53
|
+
<Demo orientation="vertical" />
|
54
|
+
</div>
|
55
|
+
);
|
56
|
+
}
|
57
|
+
```
|
@@ -35,13 +35,13 @@ Drawer можно использовать как и на всем окне, т
|
|
35
35
|
а также определить отступы от точки с помощью `offset`.
|
36
36
|
|
37
37
|
У компонента Drawer есть 2 режима отображения:
|
38
|
-
модальный - добавляет при этом подложку(`overlay`), а также блокирует
|
39
|
-
немодальный - нет подложки,
|
38
|
+
- модальный - добавляет при этом подложку(`overlay`), а также блокирует scroll и фокус;
|
39
|
+
- немодальный - нет подложки, scroll и фокус не заблокированы.
|
40
40
|
|
41
41
|
```tsx live
|
42
42
|
import React, { useRef } from 'react';
|
43
43
|
import { IconDone } from '@salutejs/plasma-icons';
|
44
|
-
import { surfaceSolidSecondary } from '@salutejs/{{
|
44
|
+
import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
|
45
45
|
|
46
46
|
import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from '@salutejs/{{ package }}';
|
47
47
|
|