@synerise/ds-tag 1.4.31 → 1.4.33
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 +8 -0
- package/CLAUDE.md +151 -0
- package/package.json +6 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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
|
+
## [1.4.33](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tag@1.4.32...@synerise/ds-tag@1.4.33) (2026-08-11)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-tag
|
|
9
|
+
|
|
10
|
+
## [1.4.32](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tag@1.4.31...@synerise/ds-tag@1.4.32) (2026-07-23)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-tag
|
|
13
|
+
|
|
6
14
|
## [1.4.31](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tag@1.4.30...@synerise/ds-tag@1.4.31) (2026-06-17)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-tag
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
# Tag (`@synerise/ds-tag`)
|
|
2
|
+
|
|
3
|
+
> A styled label component that supports multiple shapes, optional removal, prefix/suffix slots, image, tooltip, and status variants.
|
|
4
|
+
|
|
5
|
+
## Package structure
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
src/
|
|
9
|
+
Tag.tsx — main component, forwardRef, renders tag with optional remove button and tooltip
|
|
10
|
+
Tag.types.ts — TagProps type, TagTexts type, TagShape enum
|
|
11
|
+
Tag.styles.ts — all styled-components; exports getColorText helper
|
|
12
|
+
index.ts — public re-exports
|
|
13
|
+
hooks/
|
|
14
|
+
useDefaultTexts.tsx — merges caller-supplied texts with react-intl defaults
|
|
15
|
+
__specs__/
|
|
16
|
+
Tag.spec.tsx — Vitest unit tests
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Public exports
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
export { default } from './Tag';
|
|
23
|
+
export { TagShape, type TagProps, type TagTexts } from './Tag.types';
|
|
24
|
+
export { useDefaultTexts } from './hooks/useDefaultTexts';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### `Tag` (default export)
|
|
28
|
+
|
|
29
|
+
| Prop | Type | Default | Description |
|
|
30
|
+
|------|------|---------|-------------|
|
|
31
|
+
| `id` | `string \| number` | — | Used as the argument passed to `onRemove`; also sets `data-testid="tag-{id}"` (falls back to `"tag"` when absent) |
|
|
32
|
+
| `name` | `string` | — | Display text of the tag, rendered inside a `<span>` with text-overflow ellipsis |
|
|
33
|
+
| `color` | `string` | — | Background color for non-status shapes; sets close-icon color via `getColorText` |
|
|
34
|
+
| `textColor` | `string` | — | Overrides computed text color for any shape |
|
|
35
|
+
| `shape` | `TagShape` | `TagShape.DEFAULT_SQUARE` (see note) | Controls size, border-radius, and status styling |
|
|
36
|
+
| `image` | `string` | — | `src` for an `<img>` rendered before content; only shown for `DEFAULT_ROUND`/`DEFAULT_SQUARE` shapes |
|
|
37
|
+
| `removable` | `boolean` | — | Shows remove button on hover; only functional for `DEFAULT_ROUND` and `DEFAULT_SQUARE` |
|
|
38
|
+
| `disabled` | `boolean` | — | Reduces opacity to 0.4, prevents remove action; `onClick` still fires |
|
|
39
|
+
| `onClick` | `() => void` | — | Click handler on the tag container |
|
|
40
|
+
| `onRemove` | `(tag: string \| number) => void` | — | Called with `id` when remove button is clicked; requires `id` to be set |
|
|
41
|
+
| `prefixel` | `ReactNode` | — | Leading slot; strings/numbers get badge-style addonStyles wrapper, nodes get plain wrapper |
|
|
42
|
+
| `suffixel` | `ReactNode` | — | Trailing slot; hidden on remove-button hover; strings/numbers get addonStyles wrapper |
|
|
43
|
+
| `texts` | `Partial<TagTexts>` | — | Override any i18n string (see `TagTexts`) |
|
|
44
|
+
| `asPill` | `boolean` | — | Disables hover brightness filter (cursor stays default) |
|
|
45
|
+
| `dashed` | `boolean` | — | Passed to styled component; intended for dashed-border variant (no built-in CSS rule in current styles) |
|
|
46
|
+
| `tooltipProps` | `TooltipProps` | — | Wraps the entire rendered tag in `<Tooltip>` when provided |
|
|
47
|
+
| `className` | `string` | — | Appended to the `ds-tag` className on the root element |
|
|
48
|
+
| `ref` | `React.Ref<HTMLDivElement>` | — | Forwarded to the root `<div>` |
|
|
49
|
+
| `..htmlAttributes` | `HTMLDivElement` attrs | — | All remaining HTML div attributes are spread onto the root element |
|
|
50
|
+
|
|
51
|
+
### `TagShape` enum
|
|
52
|
+
|
|
53
|
+
| Value | Raw string | Visual |
|
|
54
|
+
|-------|-----------|--------|
|
|
55
|
+
| `DEFAULT_ROUND` | `'default_round'` | 24 px height, 12 px border-radius, removable |
|
|
56
|
+
| `DEFAULT_SQUARE` | `'default_square'` | 24 px height, 3 px border-radius, removable |
|
|
57
|
+
| `MEDIUM_ROUND` | `'medium_round'` | 18 px height, 9 px border-radius, uppercase |
|
|
58
|
+
| `SMALL_ROUND` | `'small_round'` | 14 px height, 8 px border-radius, uppercase |
|
|
59
|
+
| `SMALL_SQUARE` | `'small_square'` | 14 px height, 3 px border-radius, uppercase |
|
|
60
|
+
| `SINGLE_CHARACTER_ROUND` | `'single_character_round'` | 24×24 px, 12 px border-radius, centered |
|
|
61
|
+
| `SINGLE_CHARACTER_SQUARE` | `'single_character_square'` | 24×24 px, 3 px border-radius, centered |
|
|
62
|
+
| `STATUS_NEUTRAL` | `'status_custom'` | bordered, grey, no fill |
|
|
63
|
+
| `STATUS_SUCCESS` | `'status_active'` | bordered, green, no fill |
|
|
64
|
+
| `STATUS_ERROR` | `'status_inactive'` | bordered, red, no fill |
|
|
65
|
+
| `STATUS_WARNING` | `'status_paused'` | bordered, yellow, no fill |
|
|
66
|
+
|
|
67
|
+
### `TagTexts` type
|
|
68
|
+
|
|
69
|
+
All fields are optional and can be `ReactNode` (or `string` for `searchPlaceholder`).
|
|
70
|
+
|
|
71
|
+
| Key | Default message |
|
|
72
|
+
|-----|----------------|
|
|
73
|
+
| `deleteTooltip` | "Delete" |
|
|
74
|
+
| `addButtonLabel` | "Add tag" |
|
|
75
|
+
| `manageLinkLabel` | "Manage tags" |
|
|
76
|
+
| `createTagButtonLabel` | "Create tag" |
|
|
77
|
+
| `dropdownNoTags` | "No data" |
|
|
78
|
+
| `clearTooltip` | "Clear" |
|
|
79
|
+
| `searchPlaceholder` | "Search" |
|
|
80
|
+
| `noResultsLabel` | "No tags found" |
|
|
81
|
+
|
|
82
|
+
### `useDefaultTexts(texts?: Partial<TagTexts>): TagTexts`
|
|
83
|
+
|
|
84
|
+
Merges caller-supplied overrides with react-intl defaults. Requires an `IntlProvider` ancestor. Used internally by `Tag` but exported for use in composite components (e.g. `Tags`).
|
|
85
|
+
|
|
86
|
+
## Usage patterns
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
import Tag, { TagShape } from '@synerise/ds-tag';
|
|
90
|
+
|
|
91
|
+
// Basic
|
|
92
|
+
<Tag name="Label" shape={TagShape.DEFAULT_ROUND} color="#5A32FB" />
|
|
93
|
+
|
|
94
|
+
// Removable — requires id for onRemove to fire
|
|
95
|
+
<Tag
|
|
96
|
+
id="tag-1"
|
|
97
|
+
name="Removable"
|
|
98
|
+
shape={TagShape.DEFAULT_ROUND}
|
|
99
|
+
color="#5A32FB"
|
|
100
|
+
removable
|
|
101
|
+
onRemove={(id) => console.log('remove', id)}
|
|
102
|
+
/>
|
|
103
|
+
|
|
104
|
+
// Status
|
|
105
|
+
<Tag name="Active" shape={TagShape.STATUS_SUCCESS} />
|
|
106
|
+
|
|
107
|
+
// With tooltip over the whole tag
|
|
108
|
+
<Tag
|
|
109
|
+
name="Hovered"
|
|
110
|
+
shape={TagShape.DEFAULT_ROUND}
|
|
111
|
+
tooltipProps={{ title: 'More info' }}
|
|
112
|
+
/>
|
|
113
|
+
|
|
114
|
+
// Pill (no hover brightness effect)
|
|
115
|
+
<Tag name="Pill" shape={TagShape.SMALL_ROUND} asPill />
|
|
116
|
+
|
|
117
|
+
// Prefix / suffix (ReactNode)
|
|
118
|
+
<Tag
|
|
119
|
+
name="With icon"
|
|
120
|
+
shape={TagShape.DEFAULT_ROUND}
|
|
121
|
+
color="#5A32FB"
|
|
122
|
+
prefixel={<Icon component={<Add3M />} size={20} />}
|
|
123
|
+
/>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
## Styling
|
|
127
|
+
|
|
128
|
+
- Uses `styled-components` throughout; all styles are in `Tag.styles.ts`.
|
|
129
|
+
- Background is rendered via a `::before` pseudo-element (non-status shapes), with `filter: brightness()` applied on hover.
|
|
130
|
+
- `getColorText(theme, color)` is exported from `Tag.styles` and used by stories and the remove-icon to pick white vs `grey-600` depending on whether `color` equals `theme.palette['grey-200']`.
|
|
131
|
+
- When `asPill` is `true`, the hover brightness filter is suppressed and cursor stays `default`.
|
|
132
|
+
- Remove button is hidden via `display: none` by default and set to `display: inline-block` on `:hover` via the isActionable CSS block.
|
|
133
|
+
- Suffix is hidden (`display: none`) while the remove button is visible on hover.
|
|
134
|
+
- `dashed` prop is forwarded to the styled component but no CSS rule currently uses it in `Tag.styles.ts` — it is available for downstream extension.
|
|
135
|
+
|
|
136
|
+
## Key dependencies
|
|
137
|
+
|
|
138
|
+
- `@synerise/ds-icon` — close icon (`CloseS`) and custom prefix icons
|
|
139
|
+
- `@synerise/ds-tooltip` — delete tooltip on remove button and optional whole-tag tooltip
|
|
140
|
+
- `@synerise/ds-core` — `useTheme()` for palette access, `ThemeProps` typing
|
|
141
|
+
- `@synerise/ds-utils` — `WithHTMLAttributes` wrapper type
|
|
142
|
+
- `react-intl` — i18n for default texts (requires `IntlProvider` in the tree)
|
|
143
|
+
|
|
144
|
+
## Implementation notes
|
|
145
|
+
|
|
146
|
+
- The `shape` default in the destructure is written as `TagShape.DEFAULT_ROUND && TagShape.DEFAULT_SQUARE` which evaluates to `TagShape.DEFAULT_SQUARE` at runtime — the effective default is `DEFAULT_SQUARE`.
|
|
147
|
+
- `onRemove` is only called when both `onRemove` and `id` are defined; passing `removable` without `id` will show the button but silently no-op on click.
|
|
148
|
+
- Remove is restricted to `DEFAULT_ROUND` and `DEFAULT_SQUARE` shapes regardless of the `removable` prop.
|
|
149
|
+
- `disabled` only applies visual styling (opacity + cursor) and prevents `isActionable`; it does **not** stop `onClick` from firing.
|
|
150
|
+
- Tests use `jest` (not vitest) — see `jest.config.js`.
|
|
151
|
+
- `data-testid` is `"tag-{id}"` when `id` is provided, otherwise `"tag"`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-tag",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.33",
|
|
4
4
|
"description": "Tag UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"/dist",
|
|
19
19
|
"CHANGELOG.md",
|
|
20
|
+
"CLAUDE.md",
|
|
20
21
|
"README.md",
|
|
21
22
|
"package.json",
|
|
22
23
|
"LICENSE.md"
|
|
@@ -41,9 +42,9 @@
|
|
|
41
42
|
],
|
|
42
43
|
"types": "dist/index.d.ts",
|
|
43
44
|
"dependencies": {
|
|
44
|
-
"@synerise/ds-icon": "^1.18.
|
|
45
|
-
"@synerise/ds-tooltip": "^1.5.
|
|
46
|
-
"@synerise/ds-utils": "^1.10.
|
|
45
|
+
"@synerise/ds-icon": "^1.18.5",
|
|
46
|
+
"@synerise/ds-tooltip": "^1.5.5",
|
|
47
|
+
"@synerise/ds-utils": "^1.10.2",
|
|
47
48
|
"react-intl": "^6.8.7"
|
|
48
49
|
},
|
|
49
50
|
"peerDependencies": {
|
|
@@ -52,5 +53,5 @@
|
|
|
52
53
|
"styled-components": "^5.3.3",
|
|
53
54
|
"vitest": "4"
|
|
54
55
|
},
|
|
55
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
|
|
56
57
|
}
|