@snack-uikit/drawer 0.13.10-preview-d1ce0cc3.0 → 0.13.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -1
- package/README.md +88 -0
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## <small>0.13.10 (2026-01-19)</small>
|
|
7
|
+
|
|
8
|
+
* chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
|
|
9
|
+
* chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
|
|
10
|
+
* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
6
16
|
## <small>0.13.9 (2025-11-28)</small>
|
|
7
17
|
|
|
8
18
|
### Only dependencies have been changed
|
|
@@ -69,7 +79,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
69
79
|
|
|
70
80
|
## 0.13.3 (2025-08-27)
|
|
71
81
|
|
|
72
|
-
|
|
82
|
+
### Only dependencies have been changed
|
|
83
|
+
* [@snack-uikit/button@0.19.17](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/button/CHANGELOG.md)
|
|
84
|
+
* [@snack-uikit/icons@0.27.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
|
|
85
|
+
* [@snack-uikit/scroll@0.10.6](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
|
|
86
|
+
* [@snack-uikit/tooltip@0.18.8](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/tooltip/CHANGELOG.md)
|
|
87
|
+
* [@snack-uikit/truncate-string@0.7.7](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
|
|
88
|
+
* [@snack-uikit/typography@0.8.12](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/typography/CHANGELOG.md)
|
|
89
|
+
* [@snack-uikit/utils@4.0.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
|
|
73
90
|
|
|
74
91
|
|
|
75
92
|
|
package/README.md
CHANGED
|
@@ -5,7 +5,95 @@
|
|
|
5
5
|
|
|
6
6
|
[Changelog](./CHANGELOG.md)
|
|
7
7
|
|
|
8
|
+
## Description
|
|
8
9
|
|
|
10
|
+
- **DrawerCustom**: базовый компонент-дровер, который отвечает за анимацию, позиционирование, режим отображения (`regular`/`soft`), размеры и контейнер рендера. Позволяет собирать собственную структуру боковой панели через композицию `DrawerCustom.Header`, `DrawerCustom.Body` и `DrawerCustom.Footer`, а также поддерживает вложенные дроверы и смещение при их открытии.
|
|
11
|
+
- **Drawer**: готовая высокоуровневая обёртка над `DrawerCustom`, которая инкапсулирует типовую верстку дровера (заголовок, подзаголовок, иллюстрация, контент и блок кнопок). Упрощает настройку за счёт пропсов `title`, `subtitle`, `image` и объектов конфигурации кнопок, а также умеет открывать вложенный дровер и управлять обрезкой длинных заголовков.
|
|
12
|
+
|
|
13
|
+
## DrawerCustom
|
|
14
|
+
|
|
15
|
+
### Description
|
|
16
|
+
|
|
17
|
+
- **Гибкая основа дровера**: предоставляет низкоуровневый контрол над режимом (`mode`), положением (`position`), размерами (`size` как пресеты или произвольные значения) и контейнером рендера (`container`), что позволяет адаптировать компонент под разные сценарии.
|
|
18
|
+
- **Композиция через слоты**: использует дочерние компоненты `DrawerCustom.Header`, `DrawerCustom.Body` и `DrawerCustom.Footer` для построения структуры, благодаря чему можно полностью контролировать содержимое и порядок блоков.
|
|
19
|
+
- **Вложенные дроверы**: поддерживает проп `nestedDrawer` и `push`, за счёт чего можно открывать вложенные панели с сдвигом родительского дровера.
|
|
20
|
+
- **Управление состоянием и закрытием**: работает в управляемом режиме через пропы `open` и `onClose`, при необходимости может закрываться по Esc, по клику на оверлей (в режиме `regular`) и при изменении истории браузера (`closeOnPopstate`).
|
|
21
|
+
- **Figma**: [`DrawerCustom`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A208969&mode=drawer)
|
|
22
|
+
|
|
23
|
+
### Example
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { useState } from 'react';
|
|
27
|
+
import { ButtonFilled } from '@snack-uikit/button';
|
|
28
|
+
import { DrawerCustom } from '@snack-uikit/drawer';
|
|
29
|
+
|
|
30
|
+
function DrawerCustomExample() {
|
|
31
|
+
const [open, setOpen] = useState(false);
|
|
32
|
+
|
|
33
|
+
const toggle = () => setOpen(prev => !prev);
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<>
|
|
37
|
+
<ButtonFilled label='Toggle drawer' onClick={toggle} />
|
|
38
|
+
|
|
39
|
+
<DrawerCustom open={open} onClose={toggle} mode='regular' position='right' size='s'>
|
|
40
|
+
<DrawerCustom.Header
|
|
41
|
+
title='Title'
|
|
42
|
+
subtitle='Subtitle'
|
|
43
|
+
image={{ src: 'image.jpg', alt: 'Drawer image' }}
|
|
44
|
+
/>
|
|
45
|
+
|
|
46
|
+
<DrawerCustom.Body content='Drawer content' />
|
|
47
|
+
|
|
48
|
+
<DrawerCustom.Footer
|
|
49
|
+
actions={<ButtonFilled label='Action' onClick={toggle} />}
|
|
50
|
+
/>
|
|
51
|
+
</DrawerCustom>
|
|
52
|
+
</>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Drawer
|
|
58
|
+
|
|
59
|
+
### Description
|
|
60
|
+
|
|
61
|
+
- **Готовый кейс «из коробки»**: предоставляет упрощённый API поверх `DrawerCustom`, где основные части дровера настраиваются через пропсы `title`, `subtitle`, `content` и `image` без необходимости вручную собирать хедер, тело и футер.
|
|
62
|
+
- **Встроенный футер с кнопками**: принимает объекты `approveButton`, `cancelButton` и `additionalButton`, автоматически создавая кнопки нужных типов и размеров, а также позволяя добавить подсказки через `tooltip`.
|
|
63
|
+
- **Поддержка вложенных сценариев**: через проп `nestedDrawer` можно открыть дополнительный дровер внутри текущего, при этом родитель смещается на заданное расстояние и остаётся доступным.
|
|
64
|
+
- **Управление длиной текстов**: проп `truncate` позволяет ограничить количество строк для заголовка и подзаголовка, сохраняя компактный вид даже при длинных текстах.
|
|
65
|
+
- **Figma**: [`Drawer`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A208969&mode=drawer)
|
|
66
|
+
|
|
67
|
+
### Example
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
import { useState } from 'react';
|
|
71
|
+
import { Drawer } from '@snack-uikit/drawer';
|
|
72
|
+
|
|
73
|
+
function DrawerExample() {
|
|
74
|
+
const [open, setOpen] = useState(false);
|
|
75
|
+
|
|
76
|
+
const handleClose = () => setOpen(false);
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
<>
|
|
80
|
+
<button type='button' onClick={() => setOpen(true)}>
|
|
81
|
+
Open drawer
|
|
82
|
+
</button>
|
|
83
|
+
|
|
84
|
+
<Drawer
|
|
85
|
+
open={open}
|
|
86
|
+
onClose={handleClose}
|
|
87
|
+
title='Drawer title'
|
|
88
|
+
subtitle='Optional subtitle'
|
|
89
|
+
content='Drawer content'
|
|
90
|
+
approveButton={{ label: 'Primary action', onClick: handleClose }}
|
|
91
|
+
cancelButton={{ label: 'Secondary action', onClick: handleClose }}
|
|
92
|
+
/>
|
|
93
|
+
</>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
9
97
|
|
|
10
98
|
[//]: DOCUMENTATION_SECTION_START
|
|
11
99
|
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Drawer",
|
|
7
|
-
"version": "0.13.10
|
|
7
|
+
"version": "0.13.10",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/button": "0.19.
|
|
40
|
-
"@snack-uikit/icons": "0.27.5
|
|
41
|
-
"@snack-uikit/scroll": "0.10.
|
|
42
|
-
"@snack-uikit/tooltip": "0.18.8
|
|
43
|
-
"@snack-uikit/truncate-string": "0.7.7
|
|
44
|
-
"@snack-uikit/typography": "0.8.
|
|
45
|
-
"@snack-uikit/utils": "4.0.
|
|
39
|
+
"@snack-uikit/button": "0.19.17",
|
|
40
|
+
"@snack-uikit/icons": "0.27.5",
|
|
41
|
+
"@snack-uikit/scroll": "0.10.6",
|
|
42
|
+
"@snack-uikit/tooltip": "0.18.8",
|
|
43
|
+
"@snack-uikit/truncate-string": "0.7.7",
|
|
44
|
+
"@snack-uikit/typography": "0.8.12",
|
|
45
|
+
"@snack-uikit/utils": "4.0.1",
|
|
46
46
|
"classnames": "2.5.1",
|
|
47
47
|
"rc-drawer": "6.4.1"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
|
|
50
50
|
}
|