@zendeskgarden/react-buttons 8.62.2 → 8.63.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.
- package/dist/index.cjs.js +10 -15
- package/dist/index.esm.js +10 -15
- package/dist/typings/elements/Anchor.d.ts +4 -0
- package/dist/typings/types/index.d.ts +1 -1
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -58,7 +58,7 @@ const SIZE = ['small', 'medium', 'large'];
|
|
|
58
58
|
const COMPONENT_ID$5 = 'buttons.button_group_view';
|
|
59
59
|
const StyledButtonGroup = styled__default.default.div.attrs({
|
|
60
60
|
'data-garden-id': COMPONENT_ID$5,
|
|
61
|
-
'data-garden-version': '8.
|
|
61
|
+
'data-garden-version': '8.63.1'
|
|
62
62
|
}).withConfig({
|
|
63
63
|
displayName: "StyledButtonGroup",
|
|
64
64
|
componentId: "sc-1fbpzef-0"
|
|
@@ -87,7 +87,7 @@ const StyledIcon = styled__default.default(_ref => {
|
|
|
87
87
|
return React__namespace.default.cloneElement(React.Children.only(children), props);
|
|
88
88
|
}).attrs({
|
|
89
89
|
'data-garden-id': COMPONENT_ID$4,
|
|
90
|
-
'data-garden-version': '8.
|
|
90
|
+
'data-garden-version': '8.63.1'
|
|
91
91
|
}).withConfig({
|
|
92
92
|
displayName: "StyledIcon",
|
|
93
93
|
componentId: "sc-19meqgg-0"
|
|
@@ -186,7 +186,7 @@ const sizeStyles = props => {
|
|
|
186
186
|
};
|
|
187
187
|
const StyledButton = styled__default.default.button.attrs(props => ({
|
|
188
188
|
'data-garden-id': COMPONENT_ID$3,
|
|
189
|
-
'data-garden-version': '8.
|
|
189
|
+
'data-garden-version': '8.63.1',
|
|
190
190
|
type: props.type || 'button'
|
|
191
191
|
})).withConfig({
|
|
192
192
|
displayName: "StyledButton",
|
|
@@ -199,7 +199,7 @@ StyledButton.defaultProps = {
|
|
|
199
199
|
const COMPONENT_ID$2 = 'buttons.anchor';
|
|
200
200
|
const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
|
|
201
201
|
'data-garden-id': COMPONENT_ID$2,
|
|
202
|
-
'data-garden-version': '8.
|
|
202
|
+
'data-garden-version': '8.63.1',
|
|
203
203
|
as: 'a',
|
|
204
204
|
dir: props.theme.rtl ? 'rtl' : undefined,
|
|
205
205
|
isLink: true,
|
|
@@ -213,9 +213,7 @@ StyledAnchor.defaultProps = {
|
|
|
213
213
|
};
|
|
214
214
|
|
|
215
215
|
var _path$1;
|
|
216
|
-
|
|
217
216
|
function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
218
|
-
|
|
219
217
|
var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
220
218
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
221
219
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -223,8 +221,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
|
223
221
|
height: 12,
|
|
224
222
|
focusable: "false",
|
|
225
223
|
viewBox: "0 0 12 12",
|
|
226
|
-
"aria-hidden": "true"
|
|
227
|
-
role: "img"
|
|
224
|
+
"aria-hidden": "true"
|
|
228
225
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
229
226
|
fill: "none",
|
|
230
227
|
stroke: "currentColor",
|
|
@@ -236,7 +233,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
|
236
233
|
const COMPONENT_ID$1 = 'buttons.external_icon';
|
|
237
234
|
const StyledExternalIcon = styled__default.default(SvgNewWindowStroke).attrs({
|
|
238
235
|
'data-garden-id': COMPONENT_ID$1,
|
|
239
|
-
'data-garden-version': '8.
|
|
236
|
+
'data-garden-version': '8.63.1'
|
|
240
237
|
}).withConfig({
|
|
241
238
|
displayName: "StyledExternalIcon",
|
|
242
239
|
componentId: "sc-16oz07e-0"
|
|
@@ -263,7 +260,7 @@ const iconStyles = props => {
|
|
|
263
260
|
};
|
|
264
261
|
const StyledIconButton = styled__default.default(StyledButton).attrs({
|
|
265
262
|
'data-garden-id': COMPONENT_ID,
|
|
266
|
-
'data-garden-version': '8.
|
|
263
|
+
'data-garden-version': '8.63.1'
|
|
267
264
|
}).withConfig({
|
|
268
265
|
displayName: "StyledIconButton",
|
|
269
266
|
componentId: "sc-1t0ughp-0"
|
|
@@ -359,7 +356,8 @@ const Anchor = React.forwardRef((_ref, ref) => {
|
|
|
359
356
|
const iconAriaLabel = reactTheming.useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
|
|
360
357
|
return React__namespace.default.createElement(StyledAnchor, _extends$2({
|
|
361
358
|
ref: ref
|
|
362
|
-
}, anchorProps), children, isExternal &&
|
|
359
|
+
}, anchorProps), children, isExternal &&
|
|
360
|
+
React__namespace.default.createElement(StyledExternalIcon, {
|
|
363
361
|
role: "img",
|
|
364
362
|
"aria-label": iconAriaLabel,
|
|
365
363
|
"aria-hidden": undefined
|
|
@@ -437,9 +435,7 @@ IconButton.defaultProps = {
|
|
|
437
435
|
};
|
|
438
436
|
|
|
439
437
|
var _path;
|
|
440
|
-
|
|
441
438
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
442
|
-
|
|
443
439
|
var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
444
440
|
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
445
441
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -447,8 +443,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
447
443
|
height: 16,
|
|
448
444
|
focusable: "false",
|
|
449
445
|
viewBox: "0 0 16 16",
|
|
450
|
-
"aria-hidden": "true"
|
|
451
|
-
role: "img"
|
|
446
|
+
"aria-hidden": "true"
|
|
452
447
|
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
453
448
|
fill: "currentColor",
|
|
454
449
|
d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
|
package/dist/index.esm.js
CHANGED
|
@@ -33,7 +33,7 @@ const SIZE = ['small', 'medium', 'large'];
|
|
|
33
33
|
const COMPONENT_ID$5 = 'buttons.button_group_view';
|
|
34
34
|
const StyledButtonGroup = styled.div.attrs({
|
|
35
35
|
'data-garden-id': COMPONENT_ID$5,
|
|
36
|
-
'data-garden-version': '8.
|
|
36
|
+
'data-garden-version': '8.63.1'
|
|
37
37
|
}).withConfig({
|
|
38
38
|
displayName: "StyledButtonGroup",
|
|
39
39
|
componentId: "sc-1fbpzef-0"
|
|
@@ -62,7 +62,7 @@ const StyledIcon = styled(_ref => {
|
|
|
62
62
|
return React__default.cloneElement(Children.only(children), props);
|
|
63
63
|
}).attrs({
|
|
64
64
|
'data-garden-id': COMPONENT_ID$4,
|
|
65
|
-
'data-garden-version': '8.
|
|
65
|
+
'data-garden-version': '8.63.1'
|
|
66
66
|
}).withConfig({
|
|
67
67
|
displayName: "StyledIcon",
|
|
68
68
|
componentId: "sc-19meqgg-0"
|
|
@@ -161,7 +161,7 @@ const sizeStyles = props => {
|
|
|
161
161
|
};
|
|
162
162
|
const StyledButton = styled.button.attrs(props => ({
|
|
163
163
|
'data-garden-id': COMPONENT_ID$3,
|
|
164
|
-
'data-garden-version': '8.
|
|
164
|
+
'data-garden-version': '8.63.1',
|
|
165
165
|
type: props.type || 'button'
|
|
166
166
|
})).withConfig({
|
|
167
167
|
displayName: "StyledButton",
|
|
@@ -174,7 +174,7 @@ StyledButton.defaultProps = {
|
|
|
174
174
|
const COMPONENT_ID$2 = 'buttons.anchor';
|
|
175
175
|
const StyledAnchor = styled(StyledButton).attrs(props => ({
|
|
176
176
|
'data-garden-id': COMPONENT_ID$2,
|
|
177
|
-
'data-garden-version': '8.
|
|
177
|
+
'data-garden-version': '8.63.1',
|
|
178
178
|
as: 'a',
|
|
179
179
|
dir: props.theme.rtl ? 'rtl' : undefined,
|
|
180
180
|
isLink: true,
|
|
@@ -188,9 +188,7 @@ StyledAnchor.defaultProps = {
|
|
|
188
188
|
};
|
|
189
189
|
|
|
190
190
|
var _path$1;
|
|
191
|
-
|
|
192
191
|
function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
|
|
193
|
-
|
|
194
192
|
var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
195
193
|
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
196
194
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -198,8 +196,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
|
198
196
|
height: 12,
|
|
199
197
|
focusable: "false",
|
|
200
198
|
viewBox: "0 0 12 12",
|
|
201
|
-
"aria-hidden": "true"
|
|
202
|
-
role: "img"
|
|
199
|
+
"aria-hidden": "true"
|
|
203
200
|
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
204
201
|
fill: "none",
|
|
205
202
|
stroke: "currentColor",
|
|
@@ -211,7 +208,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
|
211
208
|
const COMPONENT_ID$1 = 'buttons.external_icon';
|
|
212
209
|
const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
|
|
213
210
|
'data-garden-id': COMPONENT_ID$1,
|
|
214
|
-
'data-garden-version': '8.
|
|
211
|
+
'data-garden-version': '8.63.1'
|
|
215
212
|
}).withConfig({
|
|
216
213
|
displayName: "StyledExternalIcon",
|
|
217
214
|
componentId: "sc-16oz07e-0"
|
|
@@ -238,7 +235,7 @@ const iconStyles = props => {
|
|
|
238
235
|
};
|
|
239
236
|
const StyledIconButton = styled(StyledButton).attrs({
|
|
240
237
|
'data-garden-id': COMPONENT_ID,
|
|
241
|
-
'data-garden-version': '8.
|
|
238
|
+
'data-garden-version': '8.63.1'
|
|
242
239
|
}).withConfig({
|
|
243
240
|
displayName: "StyledIconButton",
|
|
244
241
|
componentId: "sc-1t0ughp-0"
|
|
@@ -334,7 +331,8 @@ const Anchor = forwardRef((_ref, ref) => {
|
|
|
334
331
|
const iconAriaLabel = useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
|
|
335
332
|
return React__default.createElement(StyledAnchor, _extends$2({
|
|
336
333
|
ref: ref
|
|
337
|
-
}, anchorProps), children, isExternal &&
|
|
334
|
+
}, anchorProps), children, isExternal &&
|
|
335
|
+
React__default.createElement(StyledExternalIcon, {
|
|
338
336
|
role: "img",
|
|
339
337
|
"aria-label": iconAriaLabel,
|
|
340
338
|
"aria-hidden": undefined
|
|
@@ -412,9 +410,7 @@ IconButton.defaultProps = {
|
|
|
412
410
|
};
|
|
413
411
|
|
|
414
412
|
var _path;
|
|
415
|
-
|
|
416
413
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
417
|
-
|
|
418
414
|
var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
419
415
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
420
416
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -422,8 +418,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
422
418
|
height: 16,
|
|
423
419
|
focusable: "false",
|
|
424
420
|
viewBox: "0 0 16 16",
|
|
425
|
-
"aria-hidden": "true"
|
|
426
|
-
role: "img"
|
|
421
|
+
"aria-hidden": "true"
|
|
427
422
|
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
428
423
|
fill: "currentColor",
|
|
429
424
|
d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
|
|
@@ -6,6 +6,10 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import { IAnchorProps } from '../types';
|
|
9
|
+
/**
|
|
10
|
+
* 1. role='img' on `svg` is valid WAI-ARIA usage in this context.
|
|
11
|
+
* https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
|
|
12
|
+
*/
|
|
9
13
|
/**
|
|
10
14
|
* @extends AnchorHTMLAttributes<HTMLAnchorElement>
|
|
11
15
|
*/
|
|
@@ -10,7 +10,7 @@ export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
10
10
|
/** Applies danger styling */
|
|
11
11
|
isDanger?: boolean;
|
|
12
12
|
/** Specifies the button size */
|
|
13
|
-
size?: typeof SIZE[number];
|
|
13
|
+
size?: (typeof SIZE)[number];
|
|
14
14
|
/** Stretches the button fill to its container width */
|
|
15
15
|
isStretched?: boolean;
|
|
16
16
|
/** Applies neutral button styling */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-buttons",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.63.1",
|
|
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": "^4.2.0 || ^5.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@zendeskgarden/react-theming": "^8.
|
|
36
|
+
"@zendeskgarden/react-theming": "^8.63.1",
|
|
37
37
|
"@zendeskgarden/svg-icons": "6.33.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": "1c1d67d2b98ee0539975cee53f457081e5ae479a"
|
|
50
50
|
}
|