@zendeskgarden/react-tags 8.66.0 → 8.68.0
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/index.cjs.js +9 -8
- package/dist/index.esm.js +10 -9
- package/dist/typings/elements/Avatar.d.ts +2 -2
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -63,7 +63,7 @@ const StyledAvatar = styled__default.default(_ref => {
|
|
|
63
63
|
return React__namespace.default.cloneElement(React.Children.only(children), props);
|
|
64
64
|
}).attrs({
|
|
65
65
|
'data-garden-id': COMPONENT_ID$2,
|
|
66
|
-
'data-garden-version': '8.
|
|
66
|
+
'data-garden-version': '8.68.0'
|
|
67
67
|
}).withConfig({
|
|
68
68
|
displayName: "StyledAvatar",
|
|
69
69
|
componentId: "sc-3kdmgt-0"
|
|
@@ -75,7 +75,7 @@ StyledAvatar.defaultProps = {
|
|
|
75
75
|
const COMPONENT_ID$1 = 'tags.close';
|
|
76
76
|
const StyledClose = styled__default.default.button.attrs({
|
|
77
77
|
'data-garden-id': COMPONENT_ID$1,
|
|
78
|
-
'data-garden-version': '8.
|
|
78
|
+
'data-garden-version': '8.68.0'
|
|
79
79
|
}).withConfig({
|
|
80
80
|
displayName: "StyledClose",
|
|
81
81
|
componentId: "sc-d6lrpn-0"
|
|
@@ -87,13 +87,11 @@ StyledClose.defaultProps = {
|
|
|
87
87
|
const COMPONENT_ID = 'tags.tag_view';
|
|
88
88
|
const colorStyles = props => {
|
|
89
89
|
let backgroundColor;
|
|
90
|
-
let boxShadowColor;
|
|
91
90
|
let foregroundColor;
|
|
92
91
|
let closeColor;
|
|
93
92
|
if (props.hue) {
|
|
94
93
|
const shade = props.hue === 'yellow' ? 400 : 600;
|
|
95
94
|
backgroundColor = reactTheming.getColor(props.hue, shade, props.theme);
|
|
96
|
-
boxShadowColor = reactTheming.getColor(props.hue, shade, props.theme, 0.35);
|
|
97
95
|
if (props.hue === 'yellow' || props.hue === 'lemon') {
|
|
98
96
|
foregroundColor = reactTheming.getColor('yellow', 800, props.theme);
|
|
99
97
|
} else {
|
|
@@ -101,11 +99,14 @@ const colorStyles = props => {
|
|
|
101
99
|
}
|
|
102
100
|
} else {
|
|
103
101
|
backgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
|
|
104
|
-
boxShadowColor = reactTheming.getColor('neutralHue', 600, props.theme, 0.35);
|
|
105
102
|
foregroundColor = reactTheming.getColor('neutralHue', 700, props.theme);
|
|
106
103
|
closeColor = reactTheming.getColor('neutralHue', 600, props.theme);
|
|
107
104
|
}
|
|
108
|
-
return styled.css(["background-color:", ";color:", ";&:hover{color:", ";}
|
|
105
|
+
return styled.css(["background-color:", ";color:", ";&:hover{color:", ";}", " & ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, reactTheming.focusStyles({
|
|
106
|
+
theme: props.theme,
|
|
107
|
+
shadowWidth: 'sm',
|
|
108
|
+
selector: '&:focus'
|
|
109
|
+
}), StyledClose, closeColor);
|
|
109
110
|
};
|
|
110
111
|
const sizeStyles = props => {
|
|
111
112
|
let borderRadius;
|
|
@@ -157,11 +158,11 @@ const sizeStyles = props => {
|
|
|
157
158
|
};
|
|
158
159
|
const StyledTag = styled__default.default.div.attrs({
|
|
159
160
|
'data-garden-id': COMPONENT_ID,
|
|
160
|
-
'data-garden-version': '8.
|
|
161
|
+
'data-garden-version': '8.68.0'
|
|
161
162
|
}).withConfig({
|
|
162
163
|
displayName: "StyledTag",
|
|
163
164
|
componentId: "sc-1jvbe03-0"
|
|
164
|
-
})(["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;}&:
|
|
165
|
+
})(["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', props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
165
166
|
StyledTag.defaultProps = {
|
|
166
167
|
size: 'medium',
|
|
167
168
|
theme: reactTheming.DEFAULT_THEME
|
package/dist/index.esm.js
CHANGED
|
@@ -10,7 +10,7 @@ import React__default, { Children, forwardRef } from 'react';
|
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
11
|
import styled, { css } from 'styled-components';
|
|
12
12
|
import { readableColor, math } from 'polished';
|
|
13
|
-
import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight, useText } from '@zendeskgarden/react-theming';
|
|
13
|
+
import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, getColor, focusStyles, getLineHeight, useText } from '@zendeskgarden/react-theming';
|
|
14
14
|
|
|
15
15
|
function _extends$1() {
|
|
16
16
|
_extends$1 = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -38,7 +38,7 @@ const StyledAvatar = styled(_ref => {
|
|
|
38
38
|
return React__default.cloneElement(Children.only(children), props);
|
|
39
39
|
}).attrs({
|
|
40
40
|
'data-garden-id': COMPONENT_ID$2,
|
|
41
|
-
'data-garden-version': '8.
|
|
41
|
+
'data-garden-version': '8.68.0'
|
|
42
42
|
}).withConfig({
|
|
43
43
|
displayName: "StyledAvatar",
|
|
44
44
|
componentId: "sc-3kdmgt-0"
|
|
@@ -50,7 +50,7 @@ StyledAvatar.defaultProps = {
|
|
|
50
50
|
const COMPONENT_ID$1 = 'tags.close';
|
|
51
51
|
const StyledClose = styled.button.attrs({
|
|
52
52
|
'data-garden-id': COMPONENT_ID$1,
|
|
53
|
-
'data-garden-version': '8.
|
|
53
|
+
'data-garden-version': '8.68.0'
|
|
54
54
|
}).withConfig({
|
|
55
55
|
displayName: "StyledClose",
|
|
56
56
|
componentId: "sc-d6lrpn-0"
|
|
@@ -62,13 +62,11 @@ StyledClose.defaultProps = {
|
|
|
62
62
|
const COMPONENT_ID = 'tags.tag_view';
|
|
63
63
|
const colorStyles = props => {
|
|
64
64
|
let backgroundColor;
|
|
65
|
-
let boxShadowColor;
|
|
66
65
|
let foregroundColor;
|
|
67
66
|
let closeColor;
|
|
68
67
|
if (props.hue) {
|
|
69
68
|
const shade = props.hue === 'yellow' ? 400 : 600;
|
|
70
69
|
backgroundColor = getColor(props.hue, shade, props.theme);
|
|
71
|
-
boxShadowColor = getColor(props.hue, shade, props.theme, 0.35);
|
|
72
70
|
if (props.hue === 'yellow' || props.hue === 'lemon') {
|
|
73
71
|
foregroundColor = getColor('yellow', 800, props.theme);
|
|
74
72
|
} else {
|
|
@@ -76,11 +74,14 @@ const colorStyles = props => {
|
|
|
76
74
|
}
|
|
77
75
|
} else {
|
|
78
76
|
backgroundColor = getColor('neutralHue', 200, props.theme);
|
|
79
|
-
boxShadowColor = getColor('neutralHue', 600, props.theme, 0.35);
|
|
80
77
|
foregroundColor = getColor('neutralHue', 700, props.theme);
|
|
81
78
|
closeColor = getColor('neutralHue', 600, props.theme);
|
|
82
79
|
}
|
|
83
|
-
return css(["background-color:", ";color:", ";&:hover{color:", ";}
|
|
80
|
+
return css(["background-color:", ";color:", ";&:hover{color:", ";}", " & ", "{color:", ";}"], backgroundColor, foregroundColor, foregroundColor, focusStyles({
|
|
81
|
+
theme: props.theme,
|
|
82
|
+
shadowWidth: 'sm',
|
|
83
|
+
selector: '&:focus'
|
|
84
|
+
}), StyledClose, closeColor);
|
|
84
85
|
};
|
|
85
86
|
const sizeStyles = props => {
|
|
86
87
|
let borderRadius;
|
|
@@ -132,11 +133,11 @@ const sizeStyles = props => {
|
|
|
132
133
|
};
|
|
133
134
|
const StyledTag = styled.div.attrs({
|
|
134
135
|
'data-garden-id': COMPONENT_ID,
|
|
135
|
-
'data-garden-version': '8.
|
|
136
|
+
'data-garden-version': '8.68.0'
|
|
136
137
|
}).withConfig({
|
|
137
138
|
displayName: "StyledTag",
|
|
138
139
|
componentId: "sc-1jvbe03-0"
|
|
139
|
-
})(["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;}&:
|
|
140
|
+
})(["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', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
140
141
|
StyledTag.defaultProps = {
|
|
141
142
|
size: 'medium',
|
|
142
143
|
theme: DEFAULT_THEME
|
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
|
-
import { HTMLAttributes } from 'react';
|
|
7
|
+
import React, { HTMLAttributes } from 'react';
|
|
8
8
|
/**
|
|
9
9
|
* @extends HTMLAttributes<HTMLElement>
|
|
10
10
|
*/
|
|
11
11
|
export declare const Avatar: {
|
|
12
|
-
(props: HTMLAttributes<HTMLElement>): JSX.Element;
|
|
12
|
+
(props: HTMLAttributes<HTMLElement>): React.JSX.Element;
|
|
13
13
|
displayName: string;
|
|
14
14
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-tags",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.68.0",
|
|
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>",
|
|
@@ -26,13 +26,13 @@
|
|
|
26
26
|
"prop-types": "^15.5.7"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
|
-
"@zendeskgarden/react-theming": "^8.
|
|
29
|
+
"@zendeskgarden/react-theming": "^8.67.0",
|
|
30
30
|
"react": ">=16.8.0",
|
|
31
31
|
"react-dom": ">=16.8.0",
|
|
32
32
|
"styled-components": "^4.2.0 || ^5.0.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@zendeskgarden/react-theming": "^8.
|
|
35
|
+
"@zendeskgarden/react-theming": "^8.68.0",
|
|
36
36
|
"@zendeskgarden/svg-icons": "6.33.0"
|
|
37
37
|
},
|
|
38
38
|
"keywords": [
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
47
|
"zendeskgarden:src": "src/index.ts",
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "e05a28d586f47d95e0570fe2d529915aa4285845"
|
|
49
49
|
}
|