@zendeskgarden/react-buttons 9.0.0-next.24 → 9.0.0-next.25
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/styled/StyledAnchor.js +2 -5
- package/dist/esm/styled/StyledButton.js +2 -5
- package/dist/esm/styled/StyledExternalIcon.js +2 -5
- package/dist/esm/styled/StyledIcon.js +2 -5
- package/dist/esm/styled/StyledIconButton.js +2 -5
- package/dist/esm/styled/StyledSplitButton.js +2 -5
- package/dist/index.cjs.js +6 -24
- package/package.json +3 -3
|
@@ -5,13 +5,13 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledButton } from './StyledButton.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'buttons.anchor';
|
|
12
12
|
const StyledAnchor = styled(StyledButton).attrs(props => ({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.25',
|
|
15
15
|
as: 'a',
|
|
16
16
|
dir: props.theme.rtl ? 'rtl' : undefined,
|
|
17
17
|
isLink: true,
|
|
@@ -20,8 +20,5 @@ const StyledAnchor = styled(StyledButton).attrs(props => ({
|
|
|
20
20
|
displayName: "StyledAnchor",
|
|
21
21
|
componentId: "sc-xshgmo-0"
|
|
22
22
|
})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(props['data-garden-id'], props));
|
|
23
|
-
StyledAnchor.defaultProps = {
|
|
24
|
-
theme: DEFAULT_THEME
|
|
25
|
-
};
|
|
26
23
|
|
|
27
24
|
export { StyledAnchor };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { math, em } from 'polished';
|
|
9
|
-
import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles,
|
|
9
|
+
import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, getColor, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledSplitButton } from './StyledSplitButton.js';
|
|
11
11
|
import { StyledIcon } from './StyledIcon.js';
|
|
12
12
|
|
|
@@ -308,14 +308,11 @@ const sizeStyles = props => {
|
|
|
308
308
|
};
|
|
309
309
|
const StyledButton = styled.button.attrs(props => ({
|
|
310
310
|
'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
|
|
311
|
-
'data-garden-version': '9.0.0-next.
|
|
311
|
+
'data-garden-version': '9.0.0-next.25',
|
|
312
312
|
type: props.type || 'button'
|
|
313
313
|
})).withConfig({
|
|
314
314
|
displayName: "StyledButton",
|
|
315
315
|
componentId: "sc-qe3ace-0"
|
|
316
316
|
})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles(props), StyledSplitButton, props => groupStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
317
|
-
StyledButton.defaultProps = {
|
|
318
|
-
theme: DEFAULT_THEME
|
|
319
|
-
};
|
|
320
317
|
|
|
321
318
|
export { COMPONENT_ID, StyledButton, getHeight };
|
|
@@ -6,18 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import SvgNewWindowStroke from '../node_modules/@zendeskgarden/svg-icons/src/12/new-window-stroke.svg.js';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'buttons.external_icon';
|
|
12
12
|
const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.25'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledExternalIcon",
|
|
17
17
|
componentId: "sc-16oz07e-0"
|
|
18
18
|
})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledExternalIcon.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledExternalIcon };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { StyledBaseIcon, retrieveComponentStyles
|
|
8
|
+
import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'buttons.icon';
|
|
11
11
|
const sizeStyles = props => {
|
|
@@ -19,13 +19,10 @@ const sizeStyles = props => {
|
|
|
19
19
|
};
|
|
20
20
|
const StyledIcon = styled(StyledBaseIcon).attrs({
|
|
21
21
|
'data-garden-id': COMPONENT_ID,
|
|
22
|
-
'data-garden-version': '9.0.0-next.
|
|
22
|
+
'data-garden-version': '9.0.0-next.25'
|
|
23
23
|
}).withConfig({
|
|
24
24
|
displayName: "StyledIcon",
|
|
25
25
|
componentId: "sc-19meqgg-0"
|
|
26
26
|
})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
27
|
-
StyledIcon.defaultProps = {
|
|
28
|
-
theme: DEFAULT_THEME
|
|
29
|
-
};
|
|
30
27
|
|
|
31
28
|
export { StyledIcon };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles,
|
|
8
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledButton, COMPONENT_ID as COMPONENT_ID$1, getHeight } from './StyledButton.js';
|
|
10
10
|
import { StyledIcon } from './StyledIcon.js';
|
|
11
11
|
|
|
@@ -51,14 +51,11 @@ const StyledIconButton = styled(StyledButton).attrs(props => {
|
|
|
51
51
|
const externalId = props['data-garden-id'];
|
|
52
52
|
return {
|
|
53
53
|
'data-garden-id': externalId && externalId !== COMPONENT_ID$1 ? externalId : COMPONENT_ID,
|
|
54
|
-
'data-garden-version': '9.0.0-next.
|
|
54
|
+
'data-garden-version': '9.0.0-next.25'
|
|
55
55
|
};
|
|
56
56
|
}).withConfig({
|
|
57
57
|
displayName: "StyledIconButton",
|
|
58
58
|
componentId: "sc-1t0ughp-0"
|
|
59
59
|
})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(props['data-garden-id'], props));
|
|
60
|
-
StyledIconButton.defaultProps = {
|
|
61
|
-
theme: DEFAULT_THEME
|
|
62
|
-
};
|
|
63
60
|
|
|
64
61
|
export { COMPONENT_ID, StyledIconButton };
|
|
@@ -5,18 +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 { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'buttons.button_group_view';
|
|
11
11
|
const StyledSplitButton = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.25'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSplitButton",
|
|
16
16
|
componentId: "sc-1u4v04v-0"
|
|
17
17
|
})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledSplitButton.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledSplitButton };
|
package/dist/index.cjs.js
CHANGED
|
@@ -41,14 +41,11 @@ const SIZE = ['small', 'medium', 'large'];
|
|
|
41
41
|
const COMPONENT_ID$5 = 'buttons.button_group_view';
|
|
42
42
|
const StyledSplitButton = styled__default.default.div.attrs({
|
|
43
43
|
'data-garden-id': COMPONENT_ID$5,
|
|
44
|
-
'data-garden-version': '9.0.0-next.
|
|
44
|
+
'data-garden-version': '9.0.0-next.25'
|
|
45
45
|
}).withConfig({
|
|
46
46
|
displayName: "StyledSplitButton",
|
|
47
47
|
componentId: "sc-1u4v04v-0"
|
|
48
48
|
})(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
49
|
-
StyledSplitButton.defaultProps = {
|
|
50
|
-
theme: reactTheming.DEFAULT_THEME
|
|
51
|
-
};
|
|
52
49
|
|
|
53
50
|
const COMPONENT_ID$4 = 'buttons.icon';
|
|
54
51
|
const sizeStyles$1 = props => {
|
|
@@ -62,14 +59,11 @@ const sizeStyles$1 = props => {
|
|
|
62
59
|
};
|
|
63
60
|
const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
|
|
64
61
|
'data-garden-id': COMPONENT_ID$4,
|
|
65
|
-
'data-garden-version': '9.0.0-next.
|
|
62
|
+
'data-garden-version': '9.0.0-next.25'
|
|
66
63
|
}).withConfig({
|
|
67
64
|
displayName: "StyledIcon",
|
|
68
65
|
componentId: "sc-19meqgg-0"
|
|
69
66
|
})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, props => sizeStyles$1(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
70
|
-
StyledIcon.defaultProps = {
|
|
71
|
-
theme: reactTheming.DEFAULT_THEME
|
|
72
|
-
};
|
|
73
67
|
|
|
74
68
|
const COMPONENT_ID$3 = 'buttons.button';
|
|
75
69
|
const getBorderRadius = props => {
|
|
@@ -369,20 +363,17 @@ const sizeStyles = props => {
|
|
|
369
363
|
};
|
|
370
364
|
const StyledButton = styled__default.default.button.attrs(props => ({
|
|
371
365
|
'data-garden-id': props['data-garden-id'] || COMPONENT_ID$3,
|
|
372
|
-
'data-garden-version': '9.0.0-next.
|
|
366
|
+
'data-garden-version': '9.0.0-next.25',
|
|
373
367
|
type: props.type || 'button'
|
|
374
368
|
})).withConfig({
|
|
375
369
|
displayName: "StyledButton",
|
|
376
370
|
componentId: "sc-qe3ace-0"
|
|
377
371
|
})(["display:", ";align-items:", ";justify-content:", ";transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;margin:0;border:", ";border-radius:", ";cursor:pointer;width:", ";overflow:hidden;text-decoration:", ";text-overflow:ellipsis;white-space:", ";font-family:inherit;font-weight:", ";-webkit-font-smoothing:subpixel-antialiased;box-sizing:border-box;user-select:", ";-webkit-touch-callout:none;", ";&::-moz-focus-inner{border:0;padding:0;}", "{text-decoration:none;}&:hover{text-decoration:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,color 0.1s ease-in-out,outline-color 0.1s ease-in-out,z-index 0.25s ease-in-out;text-decoration:", ";}", ";&:disabled{cursor:default;text-decoration:", ";}& ", "{", "}", " &&{", "}", ""], props => props.isLink ? 'inline' : 'inline-flex', props => !props.isLink && 'center', props => !props.isLink && 'center', props => `${props.isLink ? `0px solid` : props.theme.borders.sm} transparent`, props => getBorderRadius(props), props => props.isStretched ? '100%' : '', props => props.$isUnderlined ? 'underline' : 'none', props => !props.isLink && 'nowrap', props => props.isLink ? 'inherit' : props.theme.fontWeights.regular, props => !props.isLink && 'none', props => sizeStyles(props), reactTheming.SELECTOR_FOCUS_VISIBLE, props => props.isLink ? 'underline' : 'none', props => props.isLink ? 'underline' : 'none', props => colorStyles(props), props => props.isLink && 'none', StyledIcon, props => iconStyles$1(props), StyledSplitButton, props => groupStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
378
|
-
StyledButton.defaultProps = {
|
|
379
|
-
theme: reactTheming.DEFAULT_THEME
|
|
380
|
-
};
|
|
381
372
|
|
|
382
373
|
const COMPONENT_ID$2 = 'buttons.anchor';
|
|
383
374
|
const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
|
|
384
375
|
'data-garden-id': COMPONENT_ID$2,
|
|
385
|
-
'data-garden-version': '9.0.0-next.
|
|
376
|
+
'data-garden-version': '9.0.0-next.25',
|
|
386
377
|
as: 'a',
|
|
387
378
|
dir: props.theme.rtl ? 'rtl' : undefined,
|
|
388
379
|
isLink: true,
|
|
@@ -391,9 +382,6 @@ const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
|
|
|
391
382
|
displayName: "StyledAnchor",
|
|
392
383
|
componentId: "sc-xshgmo-0"
|
|
393
384
|
})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
|
|
394
|
-
StyledAnchor.defaultProps = {
|
|
395
|
-
theme: reactTheming.DEFAULT_THEME
|
|
396
|
-
};
|
|
397
385
|
|
|
398
386
|
var _path$1;
|
|
399
387
|
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
@@ -416,14 +404,11 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
|
416
404
|
const COMPONENT_ID$1 = 'buttons.external_icon';
|
|
417
405
|
const StyledExternalIcon = styled__default.default(SvgNewWindowStroke).attrs({
|
|
418
406
|
'data-garden-id': COMPONENT_ID$1,
|
|
419
|
-
'data-garden-version': '9.0.0-next.
|
|
407
|
+
'data-garden-version': '9.0.0-next.25'
|
|
420
408
|
}).withConfig({
|
|
421
409
|
displayName: "StyledExternalIcon",
|
|
422
410
|
componentId: "sc-16oz07e-0"
|
|
423
411
|
})(["transform:", ";margin-bottom:-0.085em;padding-left:0.25em;box-sizing:content-box;width:0.85em;height:0.85em;", ";"], props => props.theme.rtl && 'scaleX(-1)', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
424
|
-
StyledExternalIcon.defaultProps = {
|
|
425
|
-
theme: reactTheming.DEFAULT_THEME
|
|
426
|
-
};
|
|
427
412
|
|
|
428
413
|
const COMPONENT_ID = 'buttons.icon_button';
|
|
429
414
|
const iconColorStyles = _ref => {
|
|
@@ -467,15 +452,12 @@ const StyledIconButton = styled__default.default(StyledButton).attrs(props => {
|
|
|
467
452
|
const externalId = props['data-garden-id'];
|
|
468
453
|
return {
|
|
469
454
|
'data-garden-id': externalId && externalId !== COMPONENT_ID$3 ? externalId : COMPONENT_ID,
|
|
470
|
-
'data-garden-version': '9.0.0-next.
|
|
455
|
+
'data-garden-version': '9.0.0-next.25'
|
|
471
456
|
};
|
|
472
457
|
}).withConfig({
|
|
473
458
|
displayName: "StyledIconButton",
|
|
474
459
|
componentId: "sc-1t0ughp-0"
|
|
475
460
|
})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
|
|
476
|
-
StyledIconButton.defaultProps = {
|
|
477
|
-
theme: reactTheming.DEFAULT_THEME
|
|
478
|
-
};
|
|
479
461
|
|
|
480
462
|
const SplitButtonContext = React.createContext(undefined);
|
|
481
463
|
const useSplitButtonContext = () => {
|
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.25",
|
|
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>",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
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.25",
|
|
37
37
|
"@zendeskgarden/svg-icons": "7.2.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": "460751d630ab1c46e11810d60e4d7701b9d30b8f"
|
|
50
50
|
}
|