@zendeskgarden/react-buttons 9.0.0-next.3 → 9.0.0-next.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/index.cjs.js +18 -18
- package/dist/index.esm.js +19 -19
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -57,7 +57,7 @@ const SIZE = ['small', 'medium', 'large'];
|
|
|
57
57
|
const COMPONENT_ID$5 = 'buttons.button_group_view';
|
|
58
58
|
const StyledSplitButton = styled__default.default.div.attrs({
|
|
59
59
|
'data-garden-id': COMPONENT_ID$5,
|
|
60
|
-
'data-garden-version': '9.0.0-next.
|
|
60
|
+
'data-garden-version': '9.0.0-next.5'
|
|
61
61
|
}).withConfig({
|
|
62
62
|
displayName: "StyledSplitButton",
|
|
63
63
|
componentId: "sc-1u4v04v-0"
|
|
@@ -86,7 +86,7 @@ const StyledIcon = styled__default.default(_ref => {
|
|
|
86
86
|
return React__namespace.default.cloneElement(React.Children.only(children), props);
|
|
87
87
|
}).attrs({
|
|
88
88
|
'data-garden-id': COMPONENT_ID$4,
|
|
89
|
-
'data-garden-version': '9.0.0-next.
|
|
89
|
+
'data-garden-version': '9.0.0-next.5'
|
|
90
90
|
}).withConfig({
|
|
91
91
|
displayName: "StyledIcon",
|
|
92
92
|
componentId: "sc-19meqgg-0"
|
|
@@ -103,7 +103,7 @@ const getBorderRadius = props => {
|
|
|
103
103
|
return props.theme.borderRadii.md;
|
|
104
104
|
};
|
|
105
105
|
const getDisabledBackgroundColor = props => {
|
|
106
|
-
return reactTheming.
|
|
106
|
+
return reactTheming.getColorV8('neutralHue', 200, props.theme);
|
|
107
107
|
};
|
|
108
108
|
const getHeight = props => {
|
|
109
109
|
if (props.size === 'small') {
|
|
@@ -124,12 +124,12 @@ const colorStyles = props => {
|
|
|
124
124
|
hue = 'primaryHue';
|
|
125
125
|
}
|
|
126
126
|
const shade = 600;
|
|
127
|
-
const baseColor = reactTheming.
|
|
128
|
-
const hoverColor = reactTheming.
|
|
129
|
-
const activeColor = reactTheming.
|
|
130
|
-
const focusColor = reactTheming.
|
|
127
|
+
const baseColor = reactTheming.getColorV8(hue, shade, props.theme);
|
|
128
|
+
const hoverColor = reactTheming.getColorV8(hue, shade + 100, props.theme);
|
|
129
|
+
const activeColor = reactTheming.getColorV8(hue, shade + 200, props.theme);
|
|
130
|
+
const focusColor = reactTheming.getColorV8('primaryHue', shade, props.theme);
|
|
131
131
|
const disabledBackgroundColor = getDisabledBackgroundColor(props);
|
|
132
|
-
const disabledForegroundColor = reactTheming.
|
|
132
|
+
const disabledForegroundColor = reactTheming.getColorV8(hue, shade - 200, props.theme);
|
|
133
133
|
if (props.isLink) {
|
|
134
134
|
retVal = styled.css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, reactTheming.focusStyles({
|
|
135
135
|
theme: props.theme,
|
|
@@ -150,7 +150,7 @@ const colorStyles = props => {
|
|
|
150
150
|
} : undefined
|
|
151
151
|
}), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
|
|
152
152
|
} else {
|
|
153
|
-
const borderColor = props.isNeutral && !props.isDanger ? reactTheming.
|
|
153
|
+
const borderColor = props.isNeutral && !props.isDanger ? reactTheming.getColorV8('neutralHue', 300, props.theme) : baseColor;
|
|
154
154
|
const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
|
|
155
155
|
const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
|
|
156
156
|
const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
|
|
@@ -160,7 +160,7 @@ const colorStyles = props => {
|
|
|
160
160
|
styles: props.isNeutral ? {
|
|
161
161
|
borderColor: baseColor
|
|
162
162
|
} : undefined
|
|
163
|
-
}), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.
|
|
163
|
+
}), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
|
|
164
164
|
}
|
|
165
165
|
return retVal;
|
|
166
166
|
};
|
|
@@ -184,7 +184,7 @@ const groupStyles = props => {
|
|
|
184
184
|
const iconMarginDisplacement = isPill && '-2px';
|
|
185
185
|
const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
|
|
186
186
|
const borderColor = isBasic ? 'transparent' : 'revert';
|
|
187
|
-
const focusColor = reactTheming.
|
|
187
|
+
const focusColor = reactTheming.getColorV8('primaryHue', 600, theme);
|
|
188
188
|
const focusBoxShadow = isBasic && !isPrimary && reactTheming.getFocusBoxShadow({
|
|
189
189
|
theme,
|
|
190
190
|
inset: focusInset,
|
|
@@ -223,7 +223,7 @@ const sizeStyles = props => {
|
|
|
223
223
|
};
|
|
224
224
|
const StyledButton = styled__default.default.button.attrs(props => ({
|
|
225
225
|
'data-garden-id': COMPONENT_ID$3,
|
|
226
|
-
'data-garden-version': '9.0.0-next.
|
|
226
|
+
'data-garden-version': '9.0.0-next.5',
|
|
227
227
|
type: props.type || 'button'
|
|
228
228
|
})).withConfig({
|
|
229
229
|
displayName: "StyledButton",
|
|
@@ -236,7 +236,7 @@ StyledButton.defaultProps = {
|
|
|
236
236
|
const COMPONENT_ID$2 = 'buttons.anchor';
|
|
237
237
|
const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
|
|
238
238
|
'data-garden-id': COMPONENT_ID$2,
|
|
239
|
-
'data-garden-version': '9.0.0-next.
|
|
239
|
+
'data-garden-version': '9.0.0-next.5',
|
|
240
240
|
as: 'a',
|
|
241
241
|
dir: props.theme.rtl ? 'rtl' : undefined,
|
|
242
242
|
isLink: true,
|
|
@@ -270,7 +270,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
|
270
270
|
const COMPONENT_ID$1 = 'buttons.external_icon';
|
|
271
271
|
const StyledExternalIcon = styled__default.default(SvgNewWindowStroke).attrs({
|
|
272
272
|
'data-garden-id': COMPONENT_ID$1,
|
|
273
|
-
'data-garden-version': '9.0.0-next.
|
|
273
|
+
'data-garden-version': '9.0.0-next.5'
|
|
274
274
|
}).withConfig({
|
|
275
275
|
displayName: "StyledExternalIcon",
|
|
276
276
|
componentId: "sc-16oz07e-0"
|
|
@@ -282,9 +282,9 @@ StyledExternalIcon.defaultProps = {
|
|
|
282
282
|
const COMPONENT_ID = 'buttons.icon_button';
|
|
283
283
|
const iconColorStyles = props => {
|
|
284
284
|
const shade = 600;
|
|
285
|
-
const baseColor = reactTheming.
|
|
286
|
-
const hoverColor = reactTheming.
|
|
287
|
-
const activeColor = reactTheming.
|
|
285
|
+
const baseColor = reactTheming.getColorV8('neutralHue', shade, props.theme);
|
|
286
|
+
const hoverColor = reactTheming.getColorV8('neutralHue', shade + 100, props.theme);
|
|
287
|
+
const activeColor = reactTheming.getColorV8('neutralHue', shade + 200, props.theme);
|
|
288
288
|
return styled.css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
|
|
289
289
|
};
|
|
290
290
|
const iconButtonStyles = props => {
|
|
@@ -297,7 +297,7 @@ const iconStyles = props => {
|
|
|
297
297
|
};
|
|
298
298
|
const StyledIconButton = styled__default.default(StyledButton).attrs({
|
|
299
299
|
'data-garden-id': COMPONENT_ID,
|
|
300
|
-
'data-garden-version': '9.0.0-next.
|
|
300
|
+
'data-garden-version': '9.0.0-next.5'
|
|
301
301
|
}).withConfig({
|
|
302
302
|
displayName: "StyledIconButton",
|
|
303
303
|
componentId: "sc-1t0ughp-0"
|
package/dist/index.esm.js
CHANGED
|
@@ -9,7 +9,7 @@ import * as React from 'react';
|
|
|
9
9
|
import React__default, { Children, createContext, useContext, forwardRef } from 'react';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
11
|
import styled, { css } from 'styled-components';
|
|
12
|
-
import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE,
|
|
12
|
+
import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, getColorV8, focusStyles, getFocusBoxShadow, useText } from '@zendeskgarden/react-theming';
|
|
13
13
|
import { rgba, math, em } from 'polished';
|
|
14
14
|
|
|
15
15
|
function _extends$2() {
|
|
@@ -32,7 +32,7 @@ const SIZE = ['small', 'medium', 'large'];
|
|
|
32
32
|
const COMPONENT_ID$5 = 'buttons.button_group_view';
|
|
33
33
|
const StyledSplitButton = styled.div.attrs({
|
|
34
34
|
'data-garden-id': COMPONENT_ID$5,
|
|
35
|
-
'data-garden-version': '9.0.0-next.
|
|
35
|
+
'data-garden-version': '9.0.0-next.5'
|
|
36
36
|
}).withConfig({
|
|
37
37
|
displayName: "StyledSplitButton",
|
|
38
38
|
componentId: "sc-1u4v04v-0"
|
|
@@ -61,7 +61,7 @@ const StyledIcon = styled(_ref => {
|
|
|
61
61
|
return React__default.cloneElement(Children.only(children), props);
|
|
62
62
|
}).attrs({
|
|
63
63
|
'data-garden-id': COMPONENT_ID$4,
|
|
64
|
-
'data-garden-version': '9.0.0-next.
|
|
64
|
+
'data-garden-version': '9.0.0-next.5'
|
|
65
65
|
}).withConfig({
|
|
66
66
|
displayName: "StyledIcon",
|
|
67
67
|
componentId: "sc-19meqgg-0"
|
|
@@ -78,7 +78,7 @@ const getBorderRadius = props => {
|
|
|
78
78
|
return props.theme.borderRadii.md;
|
|
79
79
|
};
|
|
80
80
|
const getDisabledBackgroundColor = props => {
|
|
81
|
-
return
|
|
81
|
+
return getColorV8('neutralHue', 200, props.theme);
|
|
82
82
|
};
|
|
83
83
|
const getHeight = props => {
|
|
84
84
|
if (props.size === 'small') {
|
|
@@ -99,12 +99,12 @@ const colorStyles = props => {
|
|
|
99
99
|
hue = 'primaryHue';
|
|
100
100
|
}
|
|
101
101
|
const shade = 600;
|
|
102
|
-
const baseColor =
|
|
103
|
-
const hoverColor =
|
|
104
|
-
const activeColor =
|
|
105
|
-
const focusColor =
|
|
102
|
+
const baseColor = getColorV8(hue, shade, props.theme);
|
|
103
|
+
const hoverColor = getColorV8(hue, shade + 100, props.theme);
|
|
104
|
+
const activeColor = getColorV8(hue, shade + 200, props.theme);
|
|
105
|
+
const focusColor = getColorV8('primaryHue', shade, props.theme);
|
|
106
106
|
const disabledBackgroundColor = getDisabledBackgroundColor(props);
|
|
107
|
-
const disabledForegroundColor =
|
|
107
|
+
const disabledForegroundColor = getColorV8(hue, shade - 200, props.theme);
|
|
108
108
|
if (props.isLink) {
|
|
109
109
|
retVal = css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, focusStyles({
|
|
110
110
|
theme: props.theme,
|
|
@@ -125,7 +125,7 @@ const colorStyles = props => {
|
|
|
125
125
|
} : undefined
|
|
126
126
|
}), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
|
|
127
127
|
} else {
|
|
128
|
-
const borderColor = props.isNeutral && !props.isDanger ?
|
|
128
|
+
const borderColor = props.isNeutral && !props.isDanger ? getColorV8('neutralHue', 300, props.theme) : baseColor;
|
|
129
129
|
const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
|
|
130
130
|
const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
|
|
131
131
|
const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
|
|
@@ -135,7 +135,7 @@ const colorStyles = props => {
|
|
|
135
135
|
styles: props.isNeutral ? {
|
|
136
136
|
borderColor: baseColor
|
|
137
137
|
} : undefined
|
|
138
|
-
}), !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral &&
|
|
138
|
+
}), !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
|
|
139
139
|
}
|
|
140
140
|
return retVal;
|
|
141
141
|
};
|
|
@@ -159,7 +159,7 @@ const groupStyles = props => {
|
|
|
159
159
|
const iconMarginDisplacement = isPill && '-2px';
|
|
160
160
|
const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
|
|
161
161
|
const borderColor = isBasic ? 'transparent' : 'revert';
|
|
162
|
-
const focusColor =
|
|
162
|
+
const focusColor = getColorV8('primaryHue', 600, theme);
|
|
163
163
|
const focusBoxShadow = isBasic && !isPrimary && getFocusBoxShadow({
|
|
164
164
|
theme,
|
|
165
165
|
inset: focusInset,
|
|
@@ -198,7 +198,7 @@ const sizeStyles = props => {
|
|
|
198
198
|
};
|
|
199
199
|
const StyledButton = styled.button.attrs(props => ({
|
|
200
200
|
'data-garden-id': COMPONENT_ID$3,
|
|
201
|
-
'data-garden-version': '9.0.0-next.
|
|
201
|
+
'data-garden-version': '9.0.0-next.5',
|
|
202
202
|
type: props.type || 'button'
|
|
203
203
|
})).withConfig({
|
|
204
204
|
displayName: "StyledButton",
|
|
@@ -211,7 +211,7 @@ StyledButton.defaultProps = {
|
|
|
211
211
|
const COMPONENT_ID$2 = 'buttons.anchor';
|
|
212
212
|
const StyledAnchor = styled(StyledButton).attrs(props => ({
|
|
213
213
|
'data-garden-id': COMPONENT_ID$2,
|
|
214
|
-
'data-garden-version': '9.0.0-next.
|
|
214
|
+
'data-garden-version': '9.0.0-next.5',
|
|
215
215
|
as: 'a',
|
|
216
216
|
dir: props.theme.rtl ? 'rtl' : undefined,
|
|
217
217
|
isLink: true,
|
|
@@ -245,7 +245,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
|
245
245
|
const COMPONENT_ID$1 = 'buttons.external_icon';
|
|
246
246
|
const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
|
|
247
247
|
'data-garden-id': COMPONENT_ID$1,
|
|
248
|
-
'data-garden-version': '9.0.0-next.
|
|
248
|
+
'data-garden-version': '9.0.0-next.5'
|
|
249
249
|
}).withConfig({
|
|
250
250
|
displayName: "StyledExternalIcon",
|
|
251
251
|
componentId: "sc-16oz07e-0"
|
|
@@ -257,9 +257,9 @@ StyledExternalIcon.defaultProps = {
|
|
|
257
257
|
const COMPONENT_ID = 'buttons.icon_button';
|
|
258
258
|
const iconColorStyles = props => {
|
|
259
259
|
const shade = 600;
|
|
260
|
-
const baseColor =
|
|
261
|
-
const hoverColor =
|
|
262
|
-
const activeColor =
|
|
260
|
+
const baseColor = getColorV8('neutralHue', shade, props.theme);
|
|
261
|
+
const hoverColor = getColorV8('neutralHue', shade + 100, props.theme);
|
|
262
|
+
const activeColor = getColorV8('neutralHue', shade + 200, props.theme);
|
|
263
263
|
return css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
|
|
264
264
|
};
|
|
265
265
|
const iconButtonStyles = props => {
|
|
@@ -272,7 +272,7 @@ const iconStyles = props => {
|
|
|
272
272
|
};
|
|
273
273
|
const StyledIconButton = styled(StyledButton).attrs({
|
|
274
274
|
'data-garden-id': COMPONENT_ID,
|
|
275
|
-
'data-garden-version': '9.0.0-next.
|
|
275
|
+
'data-garden-version': '9.0.0-next.5'
|
|
276
276
|
}).withConfig({
|
|
277
277
|
displayName: "StyledIconButton",
|
|
278
278
|
componentId: "sc-1t0ughp-0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-buttons",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.5",
|
|
4
4
|
"description": "Components relating to buttons in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -30,10 +30,10 @@
|
|
|
30
30
|
"@zendeskgarden/react-theming": "^8.67.0",
|
|
31
31
|
"react": ">=16.8.0",
|
|
32
32
|
"react-dom": ">=16.8.0",
|
|
33
|
-
"styled-components": "^5.1
|
|
33
|
+
"styled-components": "^5.3.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
36
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.5",
|
|
37
37
|
"@zendeskgarden/svg-icons": "7.0.0"
|
|
38
38
|
},
|
|
39
39
|
"keywords": [
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"zendeskgarden:src": "src/index.ts",
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
|
|
50
50
|
}
|