@snack-uikit/modal 0.19.6 → 0.19.7
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 +10 -0
- package/README.md +128 -7
- package/package.json +12 -12
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.19.7 (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.19.6 (2025-11-28)</small>
|
|
7
17
|
|
|
8
18
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -5,13 +5,134 @@
|
|
|
5
5
|
|
|
6
6
|
[Changelog](./CHANGELOG.md)
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
## Description
|
|
9
|
+
|
|
10
|
+
- Пакет `@snack-uikit/modal` предоставляет компоненты для отображения модальных окон: готовый компонент с предустановленной структурой и конструктор для кастомной сборки.
|
|
11
|
+
- Компоненты поддерживают три режима отображения (`regular`, `aggressive`, `forced`), которые определяют способы закрытия модального окна (кнопка закрытия, клик на оверлей, клавиша `Esc`).
|
|
12
|
+
- Модальные окна доступны в трёх размерах (`s`, `m`, `l`) и поддерживают различные варианты выравнивания контента в зависимости от размера.
|
|
13
|
+
- Компоненты умеют работать с заголовком, подзаголовком, иконкой или изображением, произвольным контентом, кнопками действий и дисклеймером.
|
|
14
|
+
|
|
15
|
+
## Modal
|
|
16
|
+
|
|
17
|
+
### Description
|
|
18
|
+
|
|
19
|
+
- `Modal` — готовый компонент модального окна с предустановленной структурой, использующий `ModalCustom` внутри.
|
|
20
|
+
- Компонент предоставляет упрощённый API для быстрого создания модальных окон с заголовком, подзаголовком, контентом и кнопками действий.
|
|
21
|
+
- Поддерживает **три кнопки в футере**: основную (`approveButton`), отмены (`cancelButton`) и дополнительную (`additionalButton`), которые автоматически стилизуются и размещаются.
|
|
22
|
+
- Позволяет задать **состояние загрузки** (`loading`) с отображением спиннера по умолчанию или кастомного контента (`loadingState`).
|
|
23
|
+
- Умеет **обрезать длинные заголовки и подзаголовки** через проп `truncate` с указанием максимального количества строк.
|
|
24
|
+
- Поддерживает **дисклеймер** (`disclaimer`) с текстом и опциональной ссылкой, отображаемый под кнопками футера.
|
|
25
|
+
- Может отображать **иконку или изображение** в заголовке через проп `picture`, принимающий компонент иконки из `@snack-uikit/icon-predefined` или объект с путём к изображению.
|
|
26
|
+
- Figma: [`Modal`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A205426&mode=design).
|
|
27
|
+
|
|
28
|
+
### Example
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { useState } from 'react';
|
|
32
|
+
import { Modal } from '@snack-uikit/modal';
|
|
33
|
+
import { PlaceholderSVG } from '@snack-uikit/icons';
|
|
34
|
+
|
|
35
|
+
function Example() {
|
|
36
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<>
|
|
40
|
+
<button onClick={() => setIsOpen(true)}>Открыть модальное окно</button>
|
|
41
|
+
|
|
42
|
+
<Modal
|
|
43
|
+
open={isOpen}
|
|
44
|
+
onClose={() => setIsOpen(false)}
|
|
45
|
+
title="Подтвердите действие"
|
|
46
|
+
subtitle="Это действие нельзя отменить"
|
|
47
|
+
content={<div>Основной контент модального окна</div>}
|
|
48
|
+
picture={PlaceholderSVG}
|
|
49
|
+
approveButton={{
|
|
50
|
+
label: 'Подтвердить',
|
|
51
|
+
onClick: () => {
|
|
52
|
+
console.log('Подтверждено');
|
|
53
|
+
setIsOpen(false);
|
|
54
|
+
},
|
|
55
|
+
}}
|
|
56
|
+
cancelButton={{
|
|
57
|
+
label: 'Отмена',
|
|
58
|
+
onClick: () => setIsOpen(false),
|
|
59
|
+
}}
|
|
60
|
+
disclaimer={{
|
|
61
|
+
text: 'Нажимая кнопку, вы соглашаетесь с условиями',
|
|
62
|
+
link: {
|
|
63
|
+
text: 'Условиями использования',
|
|
64
|
+
href: '#',
|
|
65
|
+
},
|
|
66
|
+
}}
|
|
67
|
+
size="m"
|
|
68
|
+
mode="regular"
|
|
69
|
+
/>
|
|
70
|
+
</>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## ModalCustom
|
|
76
|
+
|
|
77
|
+
### Description
|
|
78
|
+
|
|
79
|
+
- `ModalCustom` — конструктор модального окна, позволяющий собрать компонент самостоятельно из составных частей.
|
|
80
|
+
- Компонент предоставляет максимальную гибкость в структуре и содержимом модального окна за счёт композиции из дочерних компонентов.
|
|
81
|
+
- Состоит из трёх составных частей: `ModalCustom.Header` для заголовка, `ModalCustom.Body` для контента и `ModalCustom.Footer` для кнопок действий.
|
|
82
|
+
- Каждая часть может быть настроена независимо: заголовок поддерживает иконку/изображение, тултип и подзаголовок; тело — произвольный контент; футер — любые кнопки и дисклеймер.
|
|
83
|
+
- Позволяет **независимо управлять выравниванием** каждой части через пропы `align` в `Header`, `Body` и `Footer`.
|
|
84
|
+
- Поддерживает те же режимы отображения (`regular`, `aggressive`, `forced`) и размеры (`s`, `m`, `l`), что и `Modal`, но даёт полный контроль над содержимым и структурой.
|
|
85
|
+
- Figma: [`ModalCustom`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A205426&mode=design).
|
|
86
|
+
|
|
87
|
+
### Example
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import { useState } from 'react';
|
|
91
|
+
import { ModalCustom } from '@snack-uikit/modal';
|
|
92
|
+
import { ButtonFilled, ButtonTonal } from '@snack-uikit/button';
|
|
93
|
+
import { PlaceholderSVG } from '@snack-uikit/icons';
|
|
94
|
+
|
|
95
|
+
function Example() {
|
|
96
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<>
|
|
100
|
+
<button onClick={() => setIsOpen(true)}>Открыть кастомное модальное окно</button>
|
|
101
|
+
|
|
102
|
+
<ModalCustom open={isOpen} onClose={() => setIsOpen(false)} size="m" mode="regular">
|
|
103
|
+
<ModalCustom.Header
|
|
104
|
+
title="Кастомный заголовок"
|
|
105
|
+
subtitle="Кастомный подзаголовок"
|
|
106
|
+
picture={PlaceholderSVG}
|
|
107
|
+
titleTooltip="Подсказка для заголовка"
|
|
108
|
+
align="default"
|
|
109
|
+
/>
|
|
110
|
+
|
|
111
|
+
<ModalCustom.Body
|
|
112
|
+
content={
|
|
113
|
+
<div>
|
|
114
|
+
<p>Произвольный контент модального окна</p>
|
|
115
|
+
<p>Можно использовать любые React-компоненты</p>
|
|
116
|
+
</div>
|
|
117
|
+
}
|
|
118
|
+
align="default"
|
|
119
|
+
/>
|
|
120
|
+
|
|
121
|
+
<ModalCustom.Footer
|
|
122
|
+
align="default"
|
|
123
|
+
disclaimer="Кастомный дисклеймер"
|
|
124
|
+
actions={
|
|
125
|
+
<>
|
|
126
|
+
<ButtonFilled label="Основная кнопка" size="s" />
|
|
127
|
+
<ButtonTonal label="Вторичная кнопка" size="s" />
|
|
128
|
+
</>
|
|
129
|
+
}
|
|
130
|
+
/>
|
|
131
|
+
</ModalCustom>
|
|
132
|
+
</>
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
```
|
|
15
136
|
|
|
16
137
|
[//]: DOCUMENTATION_SECTION_START
|
|
17
138
|
[//]: 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": "Modal",
|
|
7
|
-
"version": "0.19.
|
|
7
|
+
"version": "0.19.7",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,21 +36,21 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/button": "0.19.
|
|
40
|
-
"@snack-uikit/icon-predefined": "0.7.
|
|
41
|
-
"@snack-uikit/icons": "0.27.
|
|
42
|
-
"@snack-uikit/link": "0.17.
|
|
43
|
-
"@snack-uikit/loaders": "0.9.
|
|
44
|
-
"@snack-uikit/scroll": "0.10.
|
|
45
|
-
"@snack-uikit/tooltip": "0.18.
|
|
46
|
-
"@snack-uikit/truncate-string": "0.7.
|
|
47
|
-
"@snack-uikit/typography": "0.8.
|
|
48
|
-
"@snack-uikit/utils": "4.0.
|
|
39
|
+
"@snack-uikit/button": "0.19.17",
|
|
40
|
+
"@snack-uikit/icon-predefined": "0.7.11",
|
|
41
|
+
"@snack-uikit/icons": "0.27.5",
|
|
42
|
+
"@snack-uikit/link": "0.17.16",
|
|
43
|
+
"@snack-uikit/loaders": "0.9.10",
|
|
44
|
+
"@snack-uikit/scroll": "0.10.6",
|
|
45
|
+
"@snack-uikit/tooltip": "0.18.8",
|
|
46
|
+
"@snack-uikit/truncate-string": "0.7.7",
|
|
47
|
+
"@snack-uikit/typography": "0.8.12",
|
|
48
|
+
"@snack-uikit/utils": "4.0.1",
|
|
49
49
|
"classnames": "2.5.1",
|
|
50
50
|
"react-modal": "3.16.1"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@types/react-modal": "3.16.0"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
|
|
56
56
|
}
|