@zendeskgarden/react-buttons 8.49.2 → 8.49.3
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 +14 -17
- package/dist/index.esm.js +14 -17
- package/dist/typings/elements/Anchor.d.ts +2 -11
- package/dist/typings/elements/Button.d.ts +2 -23
- package/dist/typings/elements/ButtonGroup.d.ts +4 -11
- package/dist/typings/elements/ChevronButton.d.ts +2 -2
- package/dist/typings/elements/IconButton.d.ts +2 -19
- package/dist/typings/elements/ToggleButton.d.ts +1 -8
- package/dist/typings/elements/ToggleIconButton.d.ts +1 -8
- package/dist/typings/elements/components/EndIcon.d.ts +2 -6
- package/dist/typings/elements/components/StartIcon.d.ts +2 -6
- package/dist/typings/index.d.ts +2 -8
- package/dist/typings/styled/StyledAnchor.d.ts +1 -1
- package/dist/typings/styled/StyledButton.d.ts +3 -15
- package/dist/typings/styled/StyledIconButton.d.ts +2 -2
- package/dist/typings/types/index.d.ts +63 -0
- package/package.json +4 -4
package/dist/index.cjs.js
CHANGED
|
@@ -136,10 +136,12 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
136
136
|
return target;
|
|
137
137
|
}
|
|
138
138
|
|
|
139
|
+
var SIZE = ['small', 'medium', 'large'];
|
|
140
|
+
|
|
139
141
|
var COMPONENT_ID$5 = 'buttons.button_group_view';
|
|
140
142
|
var StyledButtonGroup = styled__default["default"].div.attrs({
|
|
141
143
|
'data-garden-id': COMPONENT_ID$5,
|
|
142
|
-
'data-garden-version': '8.49.
|
|
144
|
+
'data-garden-version': '8.49.3'
|
|
143
145
|
}).withConfig({
|
|
144
146
|
displayName: "StyledButtonGroup",
|
|
145
147
|
componentId: "sc-1fbpzef-0"
|
|
@@ -171,7 +173,7 @@ var StyledIcon = styled__default["default"](function (_ref) {
|
|
|
171
173
|
return React__default["default"].cloneElement(React.Children.only(children), props);
|
|
172
174
|
}).attrs({
|
|
173
175
|
'data-garden-id': COMPONENT_ID$4,
|
|
174
|
-
'data-garden-version': '8.49.
|
|
176
|
+
'data-garden-version': '8.49.3'
|
|
175
177
|
}).withConfig({
|
|
176
178
|
displayName: "StyledIcon",
|
|
177
179
|
componentId: "sc-19meqgg-0"
|
|
@@ -187,11 +189,6 @@ StyledIcon.defaultProps = {
|
|
|
187
189
|
};
|
|
188
190
|
|
|
189
191
|
var COMPONENT_ID$3 = 'buttons.button';
|
|
190
|
-
var SIZE = {
|
|
191
|
-
SMALL: 'small',
|
|
192
|
-
MEDIUM: 'medium',
|
|
193
|
-
LARGE: 'large'
|
|
194
|
-
};
|
|
195
192
|
var getBorderRadius = function getBorderRadius(props) {
|
|
196
193
|
if (props.isLink) {
|
|
197
194
|
return 0;
|
|
@@ -204,9 +201,9 @@ var getDisabledBackgroundColor = function getDisabledBackgroundColor(props) {
|
|
|
204
201
|
return reactTheming.getColor('neutralHue', 200, props.theme);
|
|
205
202
|
};
|
|
206
203
|
var getHeight = function getHeight(props) {
|
|
207
|
-
if (props.size ===
|
|
204
|
+
if (props.size === 'small') {
|
|
208
205
|
return "".concat(props.theme.space.base * 8, "px");
|
|
209
|
-
} else if (props.size ===
|
|
206
|
+
} else if (props.size === 'large') {
|
|
210
207
|
return "".concat(props.theme.space.base * 12, "px");
|
|
211
208
|
}
|
|
212
209
|
return "".concat(props.theme.space.base * 10, "px");
|
|
@@ -262,12 +259,12 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
262
259
|
var lineHeight = polished.math("".concat(height, " - (").concat(props.theme.borderWidths.sm, " * 2)"));
|
|
263
260
|
var padding;
|
|
264
261
|
var fontSize;
|
|
265
|
-
if (props.size ===
|
|
262
|
+
if (props.size === 'small') {
|
|
266
263
|
fontSize = props.theme.fontSizes.sm;
|
|
267
264
|
padding = "".concat(props.theme.space.base * 3, "px");
|
|
268
265
|
} else {
|
|
269
266
|
fontSize = props.theme.fontSizes.md;
|
|
270
|
-
if (props.size ===
|
|
267
|
+
if (props.size === 'large') {
|
|
271
268
|
padding = "".concat(props.theme.space.base * 5, "px");
|
|
272
269
|
} else {
|
|
273
270
|
padding = "".concat(props.theme.space.base * 4, "px");
|
|
@@ -280,7 +277,7 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
280
277
|
var StyledButton = styled__default["default"].button.attrs(function (props) {
|
|
281
278
|
return {
|
|
282
279
|
'data-garden-id': COMPONENT_ID$3,
|
|
283
|
-
'data-garden-version': '8.49.
|
|
280
|
+
'data-garden-version': '8.49.3',
|
|
284
281
|
type: props.type || 'button'
|
|
285
282
|
};
|
|
286
283
|
}).withConfig({
|
|
@@ -333,7 +330,7 @@ var COMPONENT_ID$2 = 'buttons.anchor';
|
|
|
333
330
|
var StyledAnchor = styled__default["default"](StyledButton).attrs(function (props) {
|
|
334
331
|
return {
|
|
335
332
|
'data-garden-id': COMPONENT_ID$2,
|
|
336
|
-
'data-garden-version': '8.49.
|
|
333
|
+
'data-garden-version': '8.49.3',
|
|
337
334
|
as: 'a',
|
|
338
335
|
dir: props.theme.rtl ? 'rtl' : undefined,
|
|
339
336
|
isLink: true,
|
|
@@ -374,7 +371,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
|
374
371
|
var COMPONENT_ID$1 = 'buttons.external_icon';
|
|
375
372
|
var StyledExternalIcon = styled__default["default"](SvgNewWindowStroke).attrs({
|
|
376
373
|
'data-garden-id': COMPONENT_ID$1,
|
|
377
|
-
'data-garden-version': '8.49.
|
|
374
|
+
'data-garden-version': '8.49.3'
|
|
378
375
|
}).withConfig({
|
|
379
376
|
displayName: "StyledExternalIcon",
|
|
380
377
|
componentId: "sc-16oz07e-0"
|
|
@@ -405,7 +402,7 @@ var iconStyles = function iconStyles(props) {
|
|
|
405
402
|
};
|
|
406
403
|
var StyledIconButton = styled__default["default"](StyledButton).attrs({
|
|
407
404
|
'data-garden-id': COMPONENT_ID,
|
|
408
|
-
'data-garden-version': '8.49.
|
|
405
|
+
'data-garden-version': '8.49.3'
|
|
409
406
|
}).withConfig({
|
|
410
407
|
displayName: "StyledIconButton",
|
|
411
408
|
componentId: "sc-1t0ughp-0"
|
|
@@ -477,7 +474,7 @@ ButtonComponent.propTypes = {
|
|
|
477
474
|
isLink: PropTypes__default["default"].bool,
|
|
478
475
|
isStretched: PropTypes__default["default"].bool,
|
|
479
476
|
isSelected: PropTypes__default["default"].bool,
|
|
480
|
-
size: PropTypes__default["default"].oneOf(
|
|
477
|
+
size: PropTypes__default["default"].oneOf(SIZE)
|
|
481
478
|
};
|
|
482
479
|
ButtonComponent.defaultProps = {
|
|
483
480
|
size: 'medium'
|
|
@@ -557,7 +554,7 @@ var IconButton = React.forwardRef(function (_ref, ref) {
|
|
|
557
554
|
IconButton.displayName = 'IconButton';
|
|
558
555
|
IconButton.propTypes = {
|
|
559
556
|
isDanger: PropTypes__default["default"].bool,
|
|
560
|
-
size: PropTypes__default["default"].oneOf(
|
|
557
|
+
size: PropTypes__default["default"].oneOf(SIZE),
|
|
561
558
|
isNeutral: PropTypes__default["default"].bool,
|
|
562
559
|
isPrimary: PropTypes__default["default"].bool,
|
|
563
560
|
isBasic: PropTypes__default["default"].bool,
|
package/dist/index.esm.js
CHANGED
|
@@ -108,10 +108,12 @@ function _objectWithoutProperties(source, excluded) {
|
|
|
108
108
|
return target;
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
+
var SIZE = ['small', 'medium', 'large'];
|
|
112
|
+
|
|
111
113
|
var COMPONENT_ID$5 = 'buttons.button_group_view';
|
|
112
114
|
var StyledButtonGroup = styled.div.attrs({
|
|
113
115
|
'data-garden-id': COMPONENT_ID$5,
|
|
114
|
-
'data-garden-version': '8.49.
|
|
116
|
+
'data-garden-version': '8.49.3'
|
|
115
117
|
}).withConfig({
|
|
116
118
|
displayName: "StyledButtonGroup",
|
|
117
119
|
componentId: "sc-1fbpzef-0"
|
|
@@ -143,7 +145,7 @@ var StyledIcon = styled(function (_ref) {
|
|
|
143
145
|
return React__default.cloneElement(Children.only(children), props);
|
|
144
146
|
}).attrs({
|
|
145
147
|
'data-garden-id': COMPONENT_ID$4,
|
|
146
|
-
'data-garden-version': '8.49.
|
|
148
|
+
'data-garden-version': '8.49.3'
|
|
147
149
|
}).withConfig({
|
|
148
150
|
displayName: "StyledIcon",
|
|
149
151
|
componentId: "sc-19meqgg-0"
|
|
@@ -159,11 +161,6 @@ StyledIcon.defaultProps = {
|
|
|
159
161
|
};
|
|
160
162
|
|
|
161
163
|
var COMPONENT_ID$3 = 'buttons.button';
|
|
162
|
-
var SIZE = {
|
|
163
|
-
SMALL: 'small',
|
|
164
|
-
MEDIUM: 'medium',
|
|
165
|
-
LARGE: 'large'
|
|
166
|
-
};
|
|
167
164
|
var getBorderRadius = function getBorderRadius(props) {
|
|
168
165
|
if (props.isLink) {
|
|
169
166
|
return 0;
|
|
@@ -176,9 +173,9 @@ var getDisabledBackgroundColor = function getDisabledBackgroundColor(props) {
|
|
|
176
173
|
return getColor('neutralHue', 200, props.theme);
|
|
177
174
|
};
|
|
178
175
|
var getHeight = function getHeight(props) {
|
|
179
|
-
if (props.size ===
|
|
176
|
+
if (props.size === 'small') {
|
|
180
177
|
return "".concat(props.theme.space.base * 8, "px");
|
|
181
|
-
} else if (props.size ===
|
|
178
|
+
} else if (props.size === 'large') {
|
|
182
179
|
return "".concat(props.theme.space.base * 12, "px");
|
|
183
180
|
}
|
|
184
181
|
return "".concat(props.theme.space.base * 10, "px");
|
|
@@ -234,12 +231,12 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
234
231
|
var lineHeight = math("".concat(height, " - (").concat(props.theme.borderWidths.sm, " * 2)"));
|
|
235
232
|
var padding;
|
|
236
233
|
var fontSize;
|
|
237
|
-
if (props.size ===
|
|
234
|
+
if (props.size === 'small') {
|
|
238
235
|
fontSize = props.theme.fontSizes.sm;
|
|
239
236
|
padding = "".concat(props.theme.space.base * 3, "px");
|
|
240
237
|
} else {
|
|
241
238
|
fontSize = props.theme.fontSizes.md;
|
|
242
|
-
if (props.size ===
|
|
239
|
+
if (props.size === 'large') {
|
|
243
240
|
padding = "".concat(props.theme.space.base * 5, "px");
|
|
244
241
|
} else {
|
|
245
242
|
padding = "".concat(props.theme.space.base * 4, "px");
|
|
@@ -252,7 +249,7 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
252
249
|
var StyledButton = styled.button.attrs(function (props) {
|
|
253
250
|
return {
|
|
254
251
|
'data-garden-id': COMPONENT_ID$3,
|
|
255
|
-
'data-garden-version': '8.49.
|
|
252
|
+
'data-garden-version': '8.49.3',
|
|
256
253
|
type: props.type || 'button'
|
|
257
254
|
};
|
|
258
255
|
}).withConfig({
|
|
@@ -305,7 +302,7 @@ var COMPONENT_ID$2 = 'buttons.anchor';
|
|
|
305
302
|
var StyledAnchor = styled(StyledButton).attrs(function (props) {
|
|
306
303
|
return {
|
|
307
304
|
'data-garden-id': COMPONENT_ID$2,
|
|
308
|
-
'data-garden-version': '8.49.
|
|
305
|
+
'data-garden-version': '8.49.3',
|
|
309
306
|
as: 'a',
|
|
310
307
|
dir: props.theme.rtl ? 'rtl' : undefined,
|
|
311
308
|
isLink: true,
|
|
@@ -346,7 +343,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
|
|
|
346
343
|
var COMPONENT_ID$1 = 'buttons.external_icon';
|
|
347
344
|
var StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
|
|
348
345
|
'data-garden-id': COMPONENT_ID$1,
|
|
349
|
-
'data-garden-version': '8.49.
|
|
346
|
+
'data-garden-version': '8.49.3'
|
|
350
347
|
}).withConfig({
|
|
351
348
|
displayName: "StyledExternalIcon",
|
|
352
349
|
componentId: "sc-16oz07e-0"
|
|
@@ -377,7 +374,7 @@ var iconStyles = function iconStyles(props) {
|
|
|
377
374
|
};
|
|
378
375
|
var StyledIconButton = styled(StyledButton).attrs({
|
|
379
376
|
'data-garden-id': COMPONENT_ID,
|
|
380
|
-
'data-garden-version': '8.49.
|
|
377
|
+
'data-garden-version': '8.49.3'
|
|
381
378
|
}).withConfig({
|
|
382
379
|
displayName: "StyledIconButton",
|
|
383
380
|
componentId: "sc-1t0ughp-0"
|
|
@@ -449,7 +446,7 @@ ButtonComponent.propTypes = {
|
|
|
449
446
|
isLink: PropTypes.bool,
|
|
450
447
|
isStretched: PropTypes.bool,
|
|
451
448
|
isSelected: PropTypes.bool,
|
|
452
|
-
size: PropTypes.oneOf(
|
|
449
|
+
size: PropTypes.oneOf(SIZE)
|
|
453
450
|
};
|
|
454
451
|
ButtonComponent.defaultProps = {
|
|
455
452
|
size: 'medium'
|
|
@@ -529,7 +526,7 @@ var IconButton = forwardRef(function (_ref, ref) {
|
|
|
529
526
|
IconButton.displayName = 'IconButton';
|
|
530
527
|
IconButton.propTypes = {
|
|
531
528
|
isDanger: PropTypes.bool,
|
|
532
|
-
size: PropTypes.oneOf(
|
|
529
|
+
size: PropTypes.oneOf(SIZE),
|
|
533
530
|
isNeutral: PropTypes.bool,
|
|
534
531
|
isPrimary: PropTypes.bool,
|
|
535
532
|
isBasic: PropTypes.bool,
|
|
@@ -4,17 +4,8 @@
|
|
|
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 React
|
|
8
|
-
|
|
9
|
-
/** Applies danger styling */
|
|
10
|
-
isDanger?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* Attaches `target="_blank"` and `rel="noopener noreferrer"` to an anchor that
|
|
13
|
-
* navigates to an external resource. This ensures that the anchor is a
|
|
14
|
-
* safe [cross-origin destination link](https://web.dev/external-anchors-use-rel-noopener/).
|
|
15
|
-
**/
|
|
16
|
-
isExternal?: boolean;
|
|
17
|
-
}
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { IAnchorProps } from '../types';
|
|
18
9
|
/**
|
|
19
10
|
* @extends AnchorHTMLAttributes<HTMLAnchorElement>
|
|
20
11
|
*/
|
|
@@ -4,7 +4,8 @@
|
|
|
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 React, {
|
|
7
|
+
import React, { SVGAttributes } from 'react';
|
|
8
|
+
import { IButtonProps } from '../types';
|
|
8
9
|
import { StartIcon } from './components/StartIcon';
|
|
9
10
|
import { EndIcon } from './components/EndIcon';
|
|
10
11
|
/**
|
|
@@ -13,28 +14,6 @@ import { EndIcon } from './components/EndIcon';
|
|
|
13
14
|
export interface IIconProps extends SVGAttributes<SVGSVGElement> {
|
|
14
15
|
isRotated?: boolean;
|
|
15
16
|
}
|
|
16
|
-
export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
17
|
-
/** Applies danger styling */
|
|
18
|
-
isDanger?: boolean;
|
|
19
|
-
/** Specifies the buton size */
|
|
20
|
-
size?: 'small' | 'medium' | 'large';
|
|
21
|
-
/** Stretches the button fill to its container width */
|
|
22
|
-
isStretched?: boolean;
|
|
23
|
-
/** Applies neutral button styling */
|
|
24
|
-
isNeutral?: boolean;
|
|
25
|
-
/** Applies primary button styling */
|
|
26
|
-
isPrimary?: boolean;
|
|
27
|
-
/** Applies basic button styling */
|
|
28
|
-
isBasic?: boolean;
|
|
29
|
-
/** Applies link (anchor) button styling */
|
|
30
|
-
isLink?: boolean;
|
|
31
|
-
/** Applies pill button styling */
|
|
32
|
-
isPill?: boolean;
|
|
33
|
-
/** Applies inset `box-shadow` styling on focus */
|
|
34
|
-
focusInset?: boolean;
|
|
35
|
-
/** @ignore prop used by `ButtonGroup` */
|
|
36
|
-
isSelected?: boolean;
|
|
37
|
-
}
|
|
38
17
|
/**
|
|
39
18
|
* @extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
40
19
|
*/
|
|
@@ -4,18 +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 React
|
|
8
|
-
|
|
9
|
-
/** Defines the currently selected button in the group */
|
|
10
|
-
selectedItem?: any;
|
|
11
|
-
/**
|
|
12
|
-
* Handles button selection
|
|
13
|
-
*
|
|
14
|
-
* @param {any} item The selected item
|
|
15
|
-
*/
|
|
16
|
-
onSelect?: (item: any) => void;
|
|
17
|
-
}
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { IButtonGroupProps } from '../types';
|
|
18
9
|
/**
|
|
10
|
+
* @deprecated this legacy component will be removed in a future release
|
|
11
|
+
*
|
|
19
12
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
20
13
|
*/
|
|
21
14
|
export declare const ButtonGroup: React.ForwardRefExoticComponent<IButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import { IIconButtonProps
|
|
8
|
+
import { IIconButtonProps } from '../types';
|
|
9
9
|
/**
|
|
10
10
|
* @extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
11
11
|
*/
|
|
12
|
-
export declare const ChevronButton: React.ForwardRefExoticComponent<
|
|
12
|
+
export declare const ChevronButton: React.ForwardRefExoticComponent<IIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -4,25 +4,8 @@
|
|
|
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 React
|
|
8
|
-
|
|
9
|
-
/** Applies neutral button styling */
|
|
10
|
-
isNeutral?: boolean;
|
|
11
|
-
/** Applies primary button styling */
|
|
12
|
-
isPrimary?: boolean;
|
|
13
|
-
/** Applies danger button styling */
|
|
14
|
-
isDanger?: boolean;
|
|
15
|
-
/** Applies basic button styling */
|
|
16
|
-
isBasic?: boolean;
|
|
17
|
-
/** Applies pill button styling */
|
|
18
|
-
isPill?: boolean;
|
|
19
|
-
/** Applies inset `box-shadow` styling on focus */
|
|
20
|
-
focusInset?: boolean;
|
|
21
|
-
/** Rotates icon 180 degrees */
|
|
22
|
-
isRotated?: boolean;
|
|
23
|
-
/** Specifies icon button size */
|
|
24
|
-
size?: 'small' | 'medium' | 'large';
|
|
25
|
-
}
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import { IIconButtonProps } from '../types';
|
|
26
9
|
/**
|
|
27
10
|
* @extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
28
11
|
*/
|
|
@@ -5,14 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import {
|
|
9
|
-
export interface IToggleButtonProps extends IButtonProps {
|
|
10
|
-
/**
|
|
11
|
-
* Determines if the button is pressed. Use "mixed" to indicate that
|
|
12
|
-
* the toggle controls other elements which do not share the same value.
|
|
13
|
-
*/
|
|
14
|
-
isPressed?: boolean | 'mixed';
|
|
15
|
-
}
|
|
8
|
+
import { IToggleButtonProps } from '../types';
|
|
16
9
|
/**
|
|
17
10
|
* @extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
18
11
|
*/
|
|
@@ -5,14 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
|
-
import {
|
|
9
|
-
export interface IToggleIconButtonProps extends IIconButtonProps {
|
|
10
|
-
/**
|
|
11
|
-
* Determines if the button is pressed. Use "mixed" to indicate that the
|
|
12
|
-
* toggle controls other elements which do not share the same value.
|
|
13
|
-
*/
|
|
14
|
-
isPressed?: boolean | 'mixed';
|
|
15
|
-
}
|
|
8
|
+
import { IToggleIconButtonProps } from '../types';
|
|
16
9
|
/**
|
|
17
10
|
* @extends ButtonHTMLAttributes<HTMLButtonElement>
|
|
18
11
|
*/
|
|
@@ -4,15 +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 {
|
|
8
|
-
export interface IButtonEndIconProps extends SVGAttributes<SVGElement> {
|
|
9
|
-
/** Rotates icon 180 degrees */
|
|
10
|
-
isRotated?: boolean;
|
|
11
|
-
}
|
|
7
|
+
import { IButtonIconProps } from '../../types';
|
|
12
8
|
/**
|
|
13
9
|
* @extends SVGAttributes<SVGElement>
|
|
14
10
|
*/
|
|
15
11
|
export declare const EndIcon: {
|
|
16
|
-
(props:
|
|
12
|
+
(props: IButtonIconProps): JSX.Element;
|
|
17
13
|
displayName: string;
|
|
18
14
|
};
|
|
@@ -4,15 +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 {
|
|
8
|
-
export interface IButtonStartIconProps extends SVGAttributes<SVGElement> {
|
|
9
|
-
/** Rotates icon 180 degrees */
|
|
10
|
-
isRotated?: boolean;
|
|
11
|
-
}
|
|
7
|
+
import { IButtonIconProps } from '../../types';
|
|
12
8
|
/**
|
|
13
9
|
* @extends SVGAttributes<SVGElement>
|
|
14
10
|
*/
|
|
15
11
|
export declare const StartIcon: {
|
|
16
|
-
(props:
|
|
12
|
+
(props: IButtonIconProps): JSX.Element;
|
|
17
13
|
displayName: string;
|
|
18
14
|
};
|
package/dist/typings/index.d.ts
CHANGED
|
@@ -5,18 +5,12 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
export { Button } from './elements/Button';
|
|
8
|
-
export type {
|
|
9
|
-
export type { IButtonEndIconProps } from './elements/components/EndIcon';
|
|
10
|
-
export type { IButtonStartIconProps } from './elements/components/StartIcon';
|
|
8
|
+
export type { IIconProps } from './elements/Button';
|
|
11
9
|
export { Anchor } from './elements/Anchor';
|
|
12
|
-
export type { IAnchorProps } from './elements/Anchor';
|
|
13
10
|
export { ButtonGroup } from './elements/ButtonGroup';
|
|
14
|
-
export type { IButtonGroupProps } from './elements/ButtonGroup';
|
|
15
11
|
export { ChevronButton } from './elements/ChevronButton';
|
|
16
12
|
export { IconButton } from './elements/IconButton';
|
|
17
|
-
export type { IIconButtonProps, IIconButtonProps as IChevronButtonProps } from './elements/IconButton';
|
|
18
13
|
export { SplitButton } from './elements/SplitButton';
|
|
19
14
|
export { ToggleButton } from './elements/ToggleButton';
|
|
20
|
-
export type { IToggleButtonProps } from './elements/ToggleButton';
|
|
21
15
|
export { ToggleIconButton } from './elements/ToggleIconButton';
|
|
22
|
-
export type { IToggleIconButtonProps } from './
|
|
16
|
+
export type { IButtonProps, IButtonIconProps as IButtonEndIconProps, IButtonIconProps as IButtonStartIconProps, IAnchorProps, IIconButtonProps, IIconButtonProps as IChevronButtonProps, IToggleButtonProps, IToggleIconButtonProps, IButtonGroupProps } from './types';
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
/**
|
|
8
8
|
* Accepts all `<a>` props
|
|
9
9
|
*/
|
|
10
|
-
export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("
|
|
10
|
+
export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").IButtonProps & {
|
|
11
11
|
'data-garden-id': string;
|
|
12
12
|
'data-garden-version': string;
|
|
13
13
|
as: string;
|
|
@@ -5,22 +5,10 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { DefaultTheme, ThemeProps } from 'styled-components';
|
|
8
|
-
|
|
9
|
-
export
|
|
10
|
-
isBasic?: boolean;
|
|
11
|
-
isDanger?: boolean;
|
|
12
|
-
focusInset?: boolean;
|
|
13
|
-
isLink?: boolean;
|
|
14
|
-
isNeutral?: boolean;
|
|
15
|
-
isPrimary?: boolean;
|
|
16
|
-
isPill?: boolean;
|
|
17
|
-
isSelected?: boolean;
|
|
18
|
-
size?: 'small' | 'medium' | 'large';
|
|
19
|
-
isStretched?: boolean;
|
|
20
|
-
disabled?: boolean;
|
|
21
|
-
}
|
|
8
|
+
import { IButtonProps } from '../types';
|
|
9
|
+
export declare const getHeight: (props: IButtonProps & ThemeProps<DefaultTheme>) => string;
|
|
22
10
|
/**
|
|
23
11
|
* 1. FF <input type="submit"> fix
|
|
24
12
|
* 2. <a> element reset
|
|
25
13
|
*/
|
|
26
|
-
export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme,
|
|
14
|
+
export declare const StyledButton: import("styled-components").StyledComponent<"button", DefaultTheme, IButtonProps, never>;
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import { DefaultTheme } from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { IButtonProps } from '../types';
|
|
9
9
|
export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, {
|
|
10
10
|
'data-garden-id': string;
|
|
11
11
|
'data-garden-version': string;
|
|
12
|
-
} &
|
|
12
|
+
} & IButtonProps, "data-garden-id" | "data-garden-version">;
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, SVGAttributes } from 'react';
|
|
8
|
+
export declare const SIZE: readonly ["small", "medium", "large"];
|
|
9
|
+
export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
10
|
+
/** Applies danger styling */
|
|
11
|
+
isDanger?: boolean;
|
|
12
|
+
/** Specifies the button size */
|
|
13
|
+
size?: typeof SIZE[number];
|
|
14
|
+
/** Stretches the button fill to its container width */
|
|
15
|
+
isStretched?: boolean;
|
|
16
|
+
/** Applies neutral button styling */
|
|
17
|
+
isNeutral?: boolean;
|
|
18
|
+
/** Applies primary button styling */
|
|
19
|
+
isPrimary?: boolean;
|
|
20
|
+
/** Applies basic button styling */
|
|
21
|
+
isBasic?: boolean;
|
|
22
|
+
/** Applies link (anchor) button styling */
|
|
23
|
+
isLink?: boolean;
|
|
24
|
+
/** Applies pill button styling */
|
|
25
|
+
isPill?: boolean;
|
|
26
|
+
/** Applies inset `box-shadow` styling on focus */
|
|
27
|
+
focusInset?: boolean;
|
|
28
|
+
/** @ignore prop used by `ButtonGroup` */
|
|
29
|
+
isSelected?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export interface IToggleButtonProps extends IButtonProps {
|
|
32
|
+
/**
|
|
33
|
+
* Determines if the button is pressed. Use "mixed" to indicate that
|
|
34
|
+
* the toggle controls other elements which do not share the same value.
|
|
35
|
+
*/
|
|
36
|
+
isPressed?: boolean | 'mixed';
|
|
37
|
+
}
|
|
38
|
+
export interface IIconButtonProps extends Omit<IButtonProps, 'isStretched' | 'isLink'> {
|
|
39
|
+
/** Rotates icon 180 degrees */
|
|
40
|
+
isRotated?: boolean;
|
|
41
|
+
}
|
|
42
|
+
export interface IToggleIconButtonProps extends IIconButtonProps, Pick<IToggleButtonProps, 'isPressed'> {
|
|
43
|
+
}
|
|
44
|
+
export interface IButtonIconProps extends Pick<IIconButtonProps, 'isRotated'>, SVGAttributes<SVGElement> {
|
|
45
|
+
}
|
|
46
|
+
export interface IAnchorProps extends Pick<IButtonProps, 'isDanger'>, AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
47
|
+
/**
|
|
48
|
+
* Attaches `target="_blank"` and `rel="noopener noreferrer"` to an anchor that
|
|
49
|
+
* navigates to an external resource. This ensures that the anchor is a
|
|
50
|
+
* safe [cross-origin destination link](https://web.dev/external-anchors-use-rel-noopener/).
|
|
51
|
+
**/
|
|
52
|
+
isExternal?: boolean;
|
|
53
|
+
}
|
|
54
|
+
export interface IButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
55
|
+
/** Defines the currently selected button in the group */
|
|
56
|
+
selectedItem?: any;
|
|
57
|
+
/**
|
|
58
|
+
* Handles button selection
|
|
59
|
+
*
|
|
60
|
+
* @param {any} item The selected item
|
|
61
|
+
*/
|
|
62
|
+
onSelect?: (item: any) => void;
|
|
63
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-buttons",
|
|
3
|
-
"version": "8.49.
|
|
3
|
+
"version": "8.49.3",
|
|
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,8 +33,8 @@
|
|
|
33
33
|
"styled-components": "^4.2.0 || ^5.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@zendeskgarden/react-theming": "^8.49.
|
|
37
|
-
"@zendeskgarden/svg-icons": "6.
|
|
36
|
+
"@zendeskgarden/react-theming": "^8.49.3",
|
|
37
|
+
"@zendeskgarden/svg-icons": "6.31.1"
|
|
38
38
|
},
|
|
39
39
|
"keywords": [
|
|
40
40
|
"components",
|
|
@@ -46,5 +46,5 @@
|
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
48
|
"zendeskgarden:src": "src/index.ts",
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "983322364971c051ca6ce478770edfc3310e4c4b"
|
|
50
50
|
}
|