@startupjs-ui/tag 0.1.12 → 0.1.16
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 -0
- package/README.mdx +19 -9
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
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
|
+
## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @startupjs-ui/tag
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @startupjs-ui/tag
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
6
22
|
## [0.1.12](https://github.com/startupjs/startupjs-ui/compare/v0.1.11...v0.1.12) (2026-01-21)
|
|
7
23
|
|
|
8
24
|
**Note:** Version bump only for package @startupjs-ui/tag
|
package/README.mdx
CHANGED
|
@@ -12,7 +12,9 @@ Inherits [Div props](/docs/components/Div).
|
|
|
12
12
|
|
|
13
13
|
Tags are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions. While buttons are expected to appear consistently and with familiar calls to action, tags should appear dynamically as a group of multiple interactive elements.
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
The component supports style overrides via `style`, `textStyle`, `iconStyle`, `secondaryIconStyle`, `hoverStyle`, and `activeStyle`. Use `onIconPress` and `onSecondaryIconPress` to handle presses on the left and right icons independently. Set `disabled` to prevent all interactions.
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
16
18
|
import { Tag } from 'startupjs-ui'
|
|
17
19
|
```
|
|
18
20
|
|
|
@@ -28,7 +30,7 @@ return (
|
|
|
28
30
|
|
|
29
31
|
## Colors
|
|
30
32
|
|
|
31
|
-
|
|
33
|
+
The default color is `'primary'`. You can change it by passing a color name from the theme configuration to the `color` prop. See the Sandbox section at the bottom of the page for all available values.
|
|
32
34
|
|
|
33
35
|
```jsx example
|
|
34
36
|
return (
|
|
@@ -43,7 +45,7 @@ return (
|
|
|
43
45
|
|
|
44
46
|
## Sizes
|
|
45
47
|
|
|
46
|
-
The `size`
|
|
48
|
+
The `size` prop controls the overall dimensions of the tag, including its icons and text. Available sizes are `'s'` and `'m'` (default).
|
|
47
49
|
|
|
48
50
|
```jsx example
|
|
49
51
|
return (
|
|
@@ -55,9 +57,13 @@ return (
|
|
|
55
57
|
)
|
|
56
58
|
```
|
|
57
59
|
|
|
58
|
-
##
|
|
60
|
+
## Variants
|
|
61
|
+
|
|
62
|
+
The `variant` prop controls the tag's visual style. The default value is `'flat'`.
|
|
59
63
|
|
|
60
|
-
|
|
64
|
+
- **flat** -- a solid, filled tag (default)
|
|
65
|
+
- **outlined** -- a bordered tag with no background fill
|
|
66
|
+
- **outlined-bg** -- a bordered tag with a tinted background
|
|
61
67
|
|
|
62
68
|
```jsx example
|
|
63
69
|
return (
|
|
@@ -70,7 +76,10 @@ return (
|
|
|
70
76
|
|
|
71
77
|
## Shapes
|
|
72
78
|
|
|
73
|
-
|
|
79
|
+
The `shape` prop controls the border radius of the tag. The default value is `'circle'`.
|
|
80
|
+
|
|
81
|
+
- **circle** -- fully rounded corners (default)
|
|
82
|
+
- **rounded** -- standard rounded corners
|
|
74
83
|
|
|
75
84
|
```jsx example
|
|
76
85
|
return (
|
|
@@ -83,9 +92,9 @@ return (
|
|
|
83
92
|
|
|
84
93
|
## Icons
|
|
85
94
|
|
|
86
|
-
|
|
95
|
+
Use the `icon` prop to add a left-side icon and the `secondaryIcon` prop for a right-side icon. To change the color of an icon, use the corresponding `iconStyleName` or `secondaryIconStyleName` prop.
|
|
87
96
|
|
|
88
|
-
In `.styl` file
|
|
97
|
+
In your `.styl` file:
|
|
89
98
|
```stylus
|
|
90
99
|
.icon
|
|
91
100
|
color var(--color-text-main)
|
|
@@ -121,7 +130,8 @@ return (
|
|
|
121
130
|
```
|
|
122
131
|
|
|
123
132
|
## Actions
|
|
124
|
-
|
|
133
|
+
|
|
134
|
+
A tag can be made interactive using the `onPress` prop.
|
|
125
135
|
|
|
126
136
|
```jsx example
|
|
127
137
|
const [counter, setCounter] = useState(0)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startupjs-ui/tag",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.16",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -9,14 +9,14 @@
|
|
|
9
9
|
"type": "module",
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@startupjs-ui/core": "^0.1.11",
|
|
12
|
-
"@startupjs-ui/div": "^0.1.
|
|
13
|
-
"@startupjs-ui/icon": "^0.1.
|
|
14
|
-
"@startupjs-ui/span": "^0.1.
|
|
12
|
+
"@startupjs-ui/div": "^0.1.16",
|
|
13
|
+
"@startupjs-ui/icon": "^0.1.16",
|
|
14
|
+
"@startupjs-ui/span": "^0.1.16"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": "*",
|
|
18
18
|
"react-native": "*",
|
|
19
19
|
"startupjs": "*"
|
|
20
20
|
},
|
|
21
|
-
"gitHead": "
|
|
21
|
+
"gitHead": "9943aa3566d5d80f5b404473906eb3c0611f9ee5"
|
|
22
22
|
}
|