@zendeskgarden/react-tags 9.12.3 → 9.12.5
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/dist/esm/elements/Tag.js
CHANGED
|
@@ -13,24 +13,21 @@ import '../styled/StyledClose.js';
|
|
|
13
13
|
import { Close } from './Close.js';
|
|
14
14
|
import { Avatar } from './Avatar.js';
|
|
15
15
|
|
|
16
|
-
const TagComponent = forwardRef((
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
ref: ref
|
|
32
|
-
}, other));
|
|
33
|
-
});
|
|
16
|
+
const TagComponent = forwardRef(({
|
|
17
|
+
isPill,
|
|
18
|
+
isRound,
|
|
19
|
+
isRegular,
|
|
20
|
+
size = 'medium',
|
|
21
|
+
hue,
|
|
22
|
+
...other
|
|
23
|
+
}, ref) => React__default.createElement(StyledTag, Object.assign({
|
|
24
|
+
$hue: hue,
|
|
25
|
+
$isPill: isPill,
|
|
26
|
+
$isRegular: isRegular,
|
|
27
|
+
$isRound: isRound,
|
|
28
|
+
$size: size,
|
|
29
|
+
ref: ref
|
|
30
|
+
}, other)));
|
|
34
31
|
TagComponent.displayName = 'Tag';
|
|
35
32
|
TagComponent.propTypes = {
|
|
36
33
|
size: PropTypes.oneOf(SIZE),
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'tags.avatar';
|
|
10
|
+
const COMPONENT_ID$2 = 'tags.avatar';
|
|
11
11
|
const StyledAvatar = styled(StyledBaseIcon).attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$2,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledAvatar",
|
|
16
16
|
componentId: "sc-3kdmgt-0"
|
|
@@ -7,10 +7,10 @@
|
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
|
-
const COMPONENT_ID = 'tags.close';
|
|
10
|
+
const COMPONENT_ID$1 = 'tags.close';
|
|
11
11
|
const StyledClose = styled.button.attrs({
|
|
12
|
-
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.12.
|
|
12
|
+
'data-garden-id': COMPONENT_ID$1,
|
|
13
|
+
'data-garden-version': '9.12.5'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledClose",
|
|
16
16
|
componentId: "sc-d6lrpn-0"
|
|
@@ -5,17 +5,16 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import {
|
|
9
|
-
import { SELECTOR_FOCUS_VISIBLE, componentStyles, getColor, focusStyles
|
|
8
|
+
import { math, readableColor } from 'polished';
|
|
9
|
+
import { SELECTOR_FOCUS_VISIBLE, componentStyles, getLineHeight, getColor, focusStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledAvatar } from './StyledAvatar.js';
|
|
11
11
|
import { StyledClose } from './StyledClose.js';
|
|
12
12
|
|
|
13
13
|
const COMPONENT_ID = 'tags.tag_view';
|
|
14
|
-
const colorStyles =
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} = _ref;
|
|
14
|
+
const colorStyles = ({
|
|
15
|
+
theme,
|
|
16
|
+
$hue
|
|
17
|
+
}) => {
|
|
19
18
|
let backgroundColor;
|
|
20
19
|
let foregroundColor;
|
|
21
20
|
if ($hue) {
|
|
@@ -135,13 +134,12 @@ const colorStyles = _ref => {
|
|
|
135
134
|
selector: '&:focus'
|
|
136
135
|
}));
|
|
137
136
|
};
|
|
138
|
-
const sizeStyles =
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
} = _ref2;
|
|
137
|
+
const sizeStyles = ({
|
|
138
|
+
$isPill,
|
|
139
|
+
$isRound,
|
|
140
|
+
$size,
|
|
141
|
+
theme
|
|
142
|
+
}) => {
|
|
145
143
|
let borderRadius;
|
|
146
144
|
let padding;
|
|
147
145
|
let height;
|
|
@@ -191,7 +189,7 @@ const sizeStyles = _ref2 => {
|
|
|
191
189
|
};
|
|
192
190
|
const StyledTag = styled.div.attrs(props => ({
|
|
193
191
|
'data-garden-id': COMPONENT_ID,
|
|
194
|
-
'data-garden-version': '9.12.
|
|
192
|
+
'data-garden-version': '9.12.5',
|
|
195
193
|
$size: props.$size ?? 'medium'
|
|
196
194
|
})).withConfig({
|
|
197
195
|
displayName: "StyledTag",
|
package/dist/index.cjs.js
CHANGED
|
@@ -41,7 +41,7 @@ const SIZE = ['small', 'medium', 'large'];
|
|
|
41
41
|
const COMPONENT_ID$2 = 'tags.avatar';
|
|
42
42
|
const StyledAvatar = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
43
43
|
'data-garden-id': COMPONENT_ID$2,
|
|
44
|
-
'data-garden-version': '9.12.
|
|
44
|
+
'data-garden-version': '9.12.5'
|
|
45
45
|
}).withConfig({
|
|
46
46
|
displayName: "StyledAvatar",
|
|
47
47
|
componentId: "sc-3kdmgt-0"
|
|
@@ -50,18 +50,17 @@ const StyledAvatar = styled__default.default(reactTheming.StyledBaseIcon).attrs(
|
|
|
50
50
|
const COMPONENT_ID$1 = 'tags.close';
|
|
51
51
|
const StyledClose = styled__default.default.button.attrs({
|
|
52
52
|
'data-garden-id': COMPONENT_ID$1,
|
|
53
|
-
'data-garden-version': '9.12.
|
|
53
|
+
'data-garden-version': '9.12.5'
|
|
54
54
|
}).withConfig({
|
|
55
55
|
displayName: "StyledClose",
|
|
56
56
|
componentId: "sc-d6lrpn-0"
|
|
57
57
|
})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:", ";border:0;background:transparent;cursor:pointer;padding:0;color:inherit;font-size:0;appearance:none;&:hover{opacity:", ";}&:focus{outline:none;}&:active{opacity:", ";}", ";"], props => props.theme.opacity[1000], props => props.theme.opacity[1100], props => props.theme.opacity[1200], reactTheming.componentStyles);
|
|
58
58
|
|
|
59
59
|
const COMPONENT_ID = 'tags.tag_view';
|
|
60
|
-
const colorStyles =
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
} = _ref;
|
|
60
|
+
const colorStyles = ({
|
|
61
|
+
theme,
|
|
62
|
+
$hue
|
|
63
|
+
}) => {
|
|
65
64
|
let backgroundColor;
|
|
66
65
|
let foregroundColor;
|
|
67
66
|
if ($hue) {
|
|
@@ -181,13 +180,12 @@ const colorStyles = _ref => {
|
|
|
181
180
|
selector: '&:focus'
|
|
182
181
|
}));
|
|
183
182
|
};
|
|
184
|
-
const sizeStyles =
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
} = _ref2;
|
|
183
|
+
const sizeStyles = ({
|
|
184
|
+
$isPill,
|
|
185
|
+
$isRound,
|
|
186
|
+
$size,
|
|
187
|
+
theme
|
|
188
|
+
}) => {
|
|
191
189
|
let borderRadius;
|
|
192
190
|
let padding;
|
|
193
191
|
let height;
|
|
@@ -237,7 +235,7 @@ const sizeStyles = _ref2 => {
|
|
|
237
235
|
};
|
|
238
236
|
const StyledTag = styled__default.default.div.attrs(props => ({
|
|
239
237
|
'data-garden-id': COMPONENT_ID,
|
|
240
|
-
'data-garden-version': '9.12.
|
|
238
|
+
'data-garden-version': '9.12.5',
|
|
241
239
|
$size: props.$size ?? 'medium'
|
|
242
240
|
})).withConfig({
|
|
243
241
|
displayName: "StyledTag",
|
|
@@ -278,24 +276,21 @@ const AvatarComponent = props => React__namespace.default.createElement(StyledAv
|
|
|
278
276
|
AvatarComponent.displayName = 'Tag.Avatar';
|
|
279
277
|
const Avatar = AvatarComponent;
|
|
280
278
|
|
|
281
|
-
const TagComponent = React.forwardRef((
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
ref: ref
|
|
297
|
-
}, other));
|
|
298
|
-
});
|
|
279
|
+
const TagComponent = React.forwardRef(({
|
|
280
|
+
isPill,
|
|
281
|
+
isRound,
|
|
282
|
+
isRegular,
|
|
283
|
+
size = 'medium',
|
|
284
|
+
hue,
|
|
285
|
+
...other
|
|
286
|
+
}, ref) => React__namespace.default.createElement(StyledTag, Object.assign({
|
|
287
|
+
$hue: hue,
|
|
288
|
+
$isPill: isPill,
|
|
289
|
+
$isRegular: isRegular,
|
|
290
|
+
$isRound: isRound,
|
|
291
|
+
$size: size,
|
|
292
|
+
ref: ref
|
|
293
|
+
}, other)));
|
|
299
294
|
TagComponent.displayName = 'Tag';
|
|
300
295
|
TagComponent.propTypes = {
|
|
301
296
|
size: PropTypes__default.default.oneOf(SIZE),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tags",
|
|
3
|
-
"version": "9.12.
|
|
3
|
+
"version": "9.12.5",
|
|
4
4
|
"description": "Components relating to tags in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"styled-components": "^5.3.1 || ^6.0.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@zendeskgarden/react-theming": "^9.12.
|
|
36
|
-
"@zendeskgarden/svg-icons": "7.
|
|
35
|
+
"@zendeskgarden/react-theming": "^9.12.5",
|
|
36
|
+
"@zendeskgarden/svg-icons": "7.6.0"
|
|
37
37
|
},
|
|
38
38
|
"keywords": [
|
|
39
39
|
"components",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
47
|
"zendeskgarden:src": "src/index.ts",
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "a4edcee778788b0e30fc17671b95a6e239e27912"
|
|
49
49
|
}
|