@zendeskgarden/react-tags 9.4.0 → 9.5.1
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.
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { StyledBaseIcon,
|
|
8
|
+
import { StyledBaseIcon, componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'tags.avatar';
|
|
11
11
|
const StyledAvatar = styled(StyledBaseIcon).attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledAvatar",
|
|
16
16
|
componentId: "sc-3kdmgt-0"
|
|
17
|
-
})(["flex-shrink:0;font-size:0;", ";"],
|
|
17
|
+
})(["flex-shrink:0;font-size:0;", ";"], componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledAvatar };
|
|
@@ -5,15 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { componentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'tags.close';
|
|
11
11
|
const StyledClose = styled.button.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.
|
|
13
|
+
'data-garden-version': '9.5.1'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledClose",
|
|
16
16
|
componentId: "sc-d6lrpn-0"
|
|
17
|
-
})(["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],
|
|
17
|
+
})(["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], componentStyles);
|
|
18
18
|
|
|
19
19
|
export { StyledClose };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { readableColor, math } from 'polished';
|
|
9
|
-
import { SELECTOR_FOCUS_VISIBLE,
|
|
9
|
+
import { SELECTOR_FOCUS_VISIBLE, componentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledAvatar } from './StyledAvatar.js';
|
|
11
11
|
import { StyledClose } from './StyledClose.js';
|
|
12
12
|
|
|
@@ -191,11 +191,11 @@ const sizeStyles = _ref2 => {
|
|
|
191
191
|
};
|
|
192
192
|
const StyledTag = styled.div.attrs({
|
|
193
193
|
'data-garden-id': COMPONENT_ID,
|
|
194
|
-
'data-garden-version': '9.
|
|
194
|
+
'data-garden-version': '9.5.1'
|
|
195
195
|
}).withConfig({
|
|
196
196
|
displayName: "StyledTag",
|
|
197
197
|
componentId: "sc-1jvbe03-0"
|
|
198
|
-
})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.$isRound && 'center', props => !props.$isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.$isRound || props.$size === 'small') && 'none', StyledClose, props => props.$isRound && 'none',
|
|
198
|
+
})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.$isRound && 'center', props => !props.$isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.$isRound || props.$size === 'small') && 'none', StyledClose, props => props.$isRound && 'none', componentStyles);
|
|
199
199
|
StyledTag.defaultProps = {
|
|
200
200
|
$size: 'medium',
|
|
201
201
|
theme: DEFAULT_THEME
|
package/dist/index.cjs.js
CHANGED
|
@@ -41,20 +41,20 @@ 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.
|
|
44
|
+
'data-garden-version': '9.5.1'
|
|
45
45
|
}).withConfig({
|
|
46
46
|
displayName: "StyledAvatar",
|
|
47
47
|
componentId: "sc-3kdmgt-0"
|
|
48
|
-
})(["flex-shrink:0;font-size:0;", ";"],
|
|
48
|
+
})(["flex-shrink:0;font-size:0;", ";"], reactTheming.componentStyles);
|
|
49
49
|
|
|
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.
|
|
53
|
+
'data-garden-version': '9.5.1'
|
|
54
54
|
}).withConfig({
|
|
55
55
|
displayName: "StyledClose",
|
|
56
56
|
componentId: "sc-d6lrpn-0"
|
|
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],
|
|
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
60
|
const colorStyles = _ref => {
|
|
@@ -237,11 +237,11 @@ const sizeStyles = _ref2 => {
|
|
|
237
237
|
};
|
|
238
238
|
const StyledTag = styled__default.default.div.attrs({
|
|
239
239
|
'data-garden-id': COMPONENT_ID,
|
|
240
|
-
'data-garden-version': '9.
|
|
240
|
+
'data-garden-version': '9.5.1'
|
|
241
241
|
}).withConfig({
|
|
242
242
|
displayName: "StyledTag",
|
|
243
243
|
componentId: "sc-1jvbe03-0"
|
|
244
|
-
})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.$isRound && 'center', props => !props.$isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.$isRound || props.$size === 'small') && 'none', StyledClose, props => props.$isRound && 'none',
|
|
244
|
+
})(["display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:", ";transition:box-shadow 0.1s ease-in-out;box-sizing:border-box;border:0;max-width:100%;overflow:hidden;vertical-align:middle;text-decoration:none;white-space:nowrap;font-weight:", ";direction:", ";", ";&:hover{cursor:default;text-decoration:none;}&:link:hover,&:visited:hover{cursor:pointer;}&:any-link:hover{cursor:pointer;}", "{text-decoration:none;}", ";& > *{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;}& b{font-weight:", ";}& ", "{display:", ";}& ", "{display:", ";}", ";"], props => props.$isRound && 'center', props => !props.$isRegular && props.theme.fontWeights.semibold, props => props.theme.rtl ? 'rtl' : 'ltr', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => colorStyles(props), props => props.theme.fontWeights.semibold, StyledAvatar, props => (props.$isRound || props.$size === 'small') && 'none', StyledClose, props => props.$isRound && 'none', reactTheming.componentStyles);
|
|
245
245
|
StyledTag.defaultProps = {
|
|
246
246
|
$size: 'medium',
|
|
247
247
|
theme: reactTheming.DEFAULT_THEME
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tags",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.1",
|
|
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.
|
|
36
|
-
"@zendeskgarden/svg-icons": "7.
|
|
35
|
+
"@zendeskgarden/react-theming": "^9.5.1",
|
|
36
|
+
"@zendeskgarden/svg-icons": "7.5.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": "2571d0225b784bb7c765316ed584d289d35d4605"
|
|
49
49
|
}
|