@snack-uikit/tag 0.15.13-preview-d1ce0cc3.0 → 0.15.13
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 +16 -1
- package/README.md +93 -0
- package/package.json +7 -7
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.15.13 (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.15.12 (2025-11-28)</small>
|
|
7
17
|
|
|
8
18
|
### Only dependencies have been changed
|
|
@@ -46,7 +56,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
46
56
|
|
|
47
57
|
## 0.15.8 (2025-08-26)
|
|
48
58
|
|
|
49
|
-
|
|
59
|
+
### Only dependencies have been changed
|
|
60
|
+
* [@snack-uikit/dropdown@0.5.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/dropdown/CHANGELOG.md)
|
|
61
|
+
* [@snack-uikit/icons@0.27.5](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/icons/CHANGELOG.md)
|
|
62
|
+
* [@snack-uikit/scroll@0.10.6](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/scroll/CHANGELOG.md)
|
|
63
|
+
* [@snack-uikit/tooltip@0.18.8](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/tooltip/CHANGELOG.md)
|
|
64
|
+
* [@snack-uikit/utils@4.0.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
|
|
50
65
|
|
|
51
66
|
|
|
52
67
|
|
package/README.md
CHANGED
|
@@ -5,6 +5,99 @@
|
|
|
5
5
|
|
|
6
6
|
[Changelog](./CHANGELOG.md)
|
|
7
7
|
|
|
8
|
+
## Description
|
|
9
|
+
|
|
10
|
+
- Пакет `@snack-uikit/tag` предоставляет компоненты для отображения тегов — компактных меток с текстом, которые используются для категоризации, фильтрации и маркировки контента.
|
|
11
|
+
- Компоненты поддерживают различные визуальные варианты (appearance) и размеры, могут работать как обычные теги или ссылки, поддерживают удаление и отображение тултипов.
|
|
12
|
+
- Пакет включает два основных компонента: `Tag` для одиночных тегов и `TagRow` для отображения коллекций тегов с возможностью ограничения количества видимых элементов.
|
|
13
|
+
|
|
14
|
+
## Tag
|
|
15
|
+
|
|
16
|
+
### Description
|
|
17
|
+
|
|
18
|
+
- `Tag` — компонент для отображения одиночного тега с текстовой меткой.
|
|
19
|
+
- Поддерживает **два размера** (`xs`, `s`) и **девять вариантов внешнего вида** (neutral, primary, red, orange, yellow, green, blue, violet, pink) для визуального выделения и категоризации.
|
|
20
|
+
- Может работать в **трёх режимах**: обычный тег, тег с возможностью удаления (при передаче `onDelete`) и тег-ссылка (при передаче `href`).
|
|
21
|
+
- Поддерживает **тултип** (`tooltip`) для отображения дополнительной информации при наведении.
|
|
22
|
+
- В режиме ссылки позволяет задать обработчик клика (`onClick`) и атрибут `target` для управления поведением навигации.
|
|
23
|
+
- Figma: [`Tag`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A24551&mode=design).
|
|
24
|
+
|
|
25
|
+
### Example
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { Tag } from '@snack-uikit/tag';
|
|
29
|
+
|
|
30
|
+
function Example() {
|
|
31
|
+
return (
|
|
32
|
+
<>
|
|
33
|
+
<Tag
|
|
34
|
+
label="Обычный тег"
|
|
35
|
+
size="xs"
|
|
36
|
+
appearance="primary"
|
|
37
|
+
/>
|
|
38
|
+
|
|
39
|
+
<Tag
|
|
40
|
+
label="Удаляемый тег"
|
|
41
|
+
size="s"
|
|
42
|
+
appearance="green"
|
|
43
|
+
onDelete={() => console.log('Tag deleted')}
|
|
44
|
+
/>
|
|
45
|
+
|
|
46
|
+
<Tag
|
|
47
|
+
label="Тег-ссылка"
|
|
48
|
+
size="xs"
|
|
49
|
+
appearance="blue"
|
|
50
|
+
href="https://example.com"
|
|
51
|
+
target="_blank"
|
|
52
|
+
tooltip={{
|
|
53
|
+
tip: 'Перейти на страницу',
|
|
54
|
+
placement: 'bottom',
|
|
55
|
+
}}
|
|
56
|
+
/>
|
|
57
|
+
</>
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## TagRow
|
|
63
|
+
|
|
64
|
+
### Description
|
|
65
|
+
|
|
66
|
+
- `TagRow` — компонент для отображения коллекции тегов в виде строки или нескольких строк с автоматическим переносом.
|
|
67
|
+
- Позволяет **ограничить количество видимых строк** через проп `rowLimit`: при превышении лимита оставшиеся теги скрываются под кнопкой "More" с указанием количества скрытых элементов.
|
|
68
|
+
- При наведении на кнопку "More" отображается выпадающий список со всеми скрытыми тегами.
|
|
69
|
+
- Поддерживает **удаление тегов** через коллбэк `onItemRemove`, который вызывается при клике на кнопку удаления любого тега в коллекции.
|
|
70
|
+
- Каждый тег в коллекции может иметь свой внешний вид (`appearance`), размер задаётся единообразно для всех тегов через проп `size`.
|
|
71
|
+
- Позволяет настроить текст кнопки "More" через проп `moreButtonLabel`.
|
|
72
|
+
- Если `rowLimit` не задан или равен `0`, отображаются все теги без ограничений.
|
|
73
|
+
- Figma: [`TagRow`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=41%3A24551&mode=design).
|
|
74
|
+
|
|
75
|
+
### Example
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import { TagRow } from '@snack-uikit/tag';
|
|
79
|
+
|
|
80
|
+
function Example() {
|
|
81
|
+
const tags = [
|
|
82
|
+
{ label: 'Тег 1', appearance: 'primary' },
|
|
83
|
+
{ label: 'Тег 2', appearance: 'green' },
|
|
84
|
+
{ label: 'Тег 3', appearance: 'red' },
|
|
85
|
+
{ label: 'Тег 4', appearance: 'blue' },
|
|
86
|
+
{ label: 'Тег 5', appearance: 'violet' },
|
|
87
|
+
];
|
|
88
|
+
|
|
89
|
+
return (
|
|
90
|
+
<TagRow
|
|
91
|
+
items={tags}
|
|
92
|
+
size="xs"
|
|
93
|
+
rowLimit={2}
|
|
94
|
+
moreButtonLabel="Ещё: "
|
|
95
|
+
onItemRemove={(label) => console.log(`Removed: ${label}`)}
|
|
96
|
+
/>
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
8
101
|
[//]: DOCUMENTATION_SECTION_START
|
|
9
102
|
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
|
|
10
103
|
## isTagLinkProps
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Tag",
|
|
7
|
-
"version": "0.15.13
|
|
7
|
+
"version": "0.15.13",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,12 +36,12 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/dropdown": "0.5.
|
|
40
|
-
"@snack-uikit/icons": "0.27.5
|
|
41
|
-
"@snack-uikit/scroll": "0.10.
|
|
42
|
-
"@snack-uikit/tooltip": "0.18.8
|
|
43
|
-
"@snack-uikit/utils": "4.0.
|
|
39
|
+
"@snack-uikit/dropdown": "0.5.4",
|
|
40
|
+
"@snack-uikit/icons": "0.27.5",
|
|
41
|
+
"@snack-uikit/scroll": "0.10.6",
|
|
42
|
+
"@snack-uikit/tooltip": "0.18.8",
|
|
43
|
+
"@snack-uikit/utils": "4.0.1",
|
|
44
44
|
"classnames": "2.5.1"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
|
|
47
47
|
}
|