@zendeskgarden/react-loaders 9.11.0 → 9.11.2
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/elements/Inline.js +2 -6
- package/dist/esm/elements/Progress.js +3 -7
- package/dist/esm/elements/Skeleton.js +2 -6
- package/dist/esm/elements/Spinner.js +4 -10
- package/dist/esm/styled/StyledInline.js +1 -1
- package/dist/esm/styled/StyledLoadingPlaceholder.js +1 -1
- package/dist/esm/styled/StyledProgress.js +2 -2
- package/dist/esm/styled/StyledSVG.js +1 -1
- package/dist/esm/styled/StyledSkeleton.js +1 -1
- package/dist/index.cjs.js +17 -35
- package/package.json +3 -3
|
@@ -17,8 +17,8 @@ import { StyledInline, StyledCircle } from '../styled/StyledInline.js';
|
|
|
17
17
|
|
|
18
18
|
const Inline = forwardRef((_ref, ref) => {
|
|
19
19
|
let {
|
|
20
|
-
size,
|
|
21
|
-
color,
|
|
20
|
+
size = 16,
|
|
21
|
+
color = 'inherit',
|
|
22
22
|
...other
|
|
23
23
|
} = _ref;
|
|
24
24
|
const ariaLabel = useText(Inline, other, 'aria-label', 'loading');
|
|
@@ -43,9 +43,5 @@ Inline.propTypes = {
|
|
|
43
43
|
size: PropTypes.number,
|
|
44
44
|
color: PropTypes.string
|
|
45
45
|
};
|
|
46
|
-
Inline.defaultProps = {
|
|
47
|
-
size: 16,
|
|
48
|
-
color: 'inherit'
|
|
49
|
-
};
|
|
50
46
|
|
|
51
47
|
export { Inline };
|
|
@@ -20,8 +20,8 @@ const COMPONENT_ID = 'loaders.progress';
|
|
|
20
20
|
const Progress = React.forwardRef((_ref, ref) => {
|
|
21
21
|
let {
|
|
22
22
|
color,
|
|
23
|
-
value,
|
|
24
|
-
size,
|
|
23
|
+
value = 0,
|
|
24
|
+
size = 'medium',
|
|
25
25
|
'aria-label': label,
|
|
26
26
|
...other
|
|
27
27
|
} = _ref;
|
|
@@ -32,7 +32,7 @@ const Progress = React.forwardRef((_ref, ref) => {
|
|
|
32
32
|
return (
|
|
33
33
|
React.createElement(StyledProgressBackground, Object.assign({
|
|
34
34
|
"data-garden-id": COMPONENT_ID,
|
|
35
|
-
"data-garden-version": '9.11.
|
|
35
|
+
"data-garden-version": '9.11.2',
|
|
36
36
|
"aria-valuemax": 100,
|
|
37
37
|
"aria-valuemin": 0,
|
|
38
38
|
"aria-valuenow": percentage,
|
|
@@ -53,9 +53,5 @@ Progress.propTypes = {
|
|
|
53
53
|
value: PropTypes.number.isRequired,
|
|
54
54
|
size: PropTypes.oneOf(SIZE)
|
|
55
55
|
};
|
|
56
|
-
Progress.defaultProps = {
|
|
57
|
-
value: 0,
|
|
58
|
-
size: 'medium'
|
|
59
|
-
};
|
|
60
56
|
|
|
61
57
|
export { Progress };
|
|
@@ -16,8 +16,8 @@ import '../styled/StyledInline.js';
|
|
|
16
16
|
|
|
17
17
|
const Skeleton = forwardRef((_ref, ref) => {
|
|
18
18
|
let {
|
|
19
|
-
width,
|
|
20
|
-
height,
|
|
19
|
+
width = '100%',
|
|
20
|
+
height = '100%',
|
|
21
21
|
isLight,
|
|
22
22
|
...other
|
|
23
23
|
} = _ref;
|
|
@@ -34,9 +34,5 @@ Skeleton.propTypes = {
|
|
|
34
34
|
height: PropTypes.string,
|
|
35
35
|
isLight: PropTypes.bool
|
|
36
36
|
};
|
|
37
|
-
Skeleton.defaultProps = {
|
|
38
|
-
width: '100%',
|
|
39
|
-
height: '100%'
|
|
40
|
-
};
|
|
41
37
|
|
|
42
38
|
export { Skeleton };
|
|
@@ -38,10 +38,10 @@ const computeFrames = (frames, duration) => {
|
|
|
38
38
|
};
|
|
39
39
|
const Spinner = forwardRef((_ref, ref) => {
|
|
40
40
|
let {
|
|
41
|
-
size,
|
|
42
|
-
duration,
|
|
43
|
-
color,
|
|
44
|
-
delayMS,
|
|
41
|
+
size = 'inherit',
|
|
42
|
+
duration = 1250,
|
|
43
|
+
color = 'inherit',
|
|
44
|
+
delayMS = 750,
|
|
45
45
|
...other
|
|
46
46
|
} = _ref;
|
|
47
47
|
const strokeWidthValues = computeFrames(STROKE_WIDTH_FRAMES, duration);
|
|
@@ -89,11 +89,5 @@ Spinner.propTypes = {
|
|
|
89
89
|
color: PropTypes.string,
|
|
90
90
|
delayMS: PropTypes.number
|
|
91
91
|
};
|
|
92
|
-
Spinner.defaultProps = {
|
|
93
|
-
size: 'inherit',
|
|
94
|
-
duration: 1250,
|
|
95
|
-
color: 'inherit',
|
|
96
|
-
delayMS: 750
|
|
97
|
-
};
|
|
98
92
|
|
|
99
93
|
export { Spinner };
|
|
@@ -38,7 +38,7 @@ const StyledCircle = styled.circle.attrs({
|
|
|
38
38
|
})([""]);
|
|
39
39
|
const StyledInline = styled.svg.attrs(props => ({
|
|
40
40
|
'data-garden-id': COMPONENT_ID,
|
|
41
|
-
'data-garden-version': '9.11.
|
|
41
|
+
'data-garden-version': '9.11.2',
|
|
42
42
|
viewBox: '0 0 16 4',
|
|
43
43
|
width: props.$size,
|
|
44
44
|
height: props.$size * 0.25
|
|
@@ -26,7 +26,7 @@ const sizeStyles = _ref => {
|
|
|
26
26
|
};
|
|
27
27
|
const StyledLoadingPlaceholder = styled.div.attrs({
|
|
28
28
|
'data-garden-id': COMPONENT_ID,
|
|
29
|
-
'data-garden-version': '9.11.
|
|
29
|
+
'data-garden-version': '9.11.2',
|
|
30
30
|
role: 'progressbar'
|
|
31
31
|
}).withConfig({
|
|
32
32
|
displayName: "StyledLoadingPlaceholder",
|
|
@@ -55,7 +55,7 @@ const colorStyles = _ref => {
|
|
|
55
55
|
};
|
|
56
56
|
const StyledProgressBackground = styled.div.attrs({
|
|
57
57
|
'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
|
|
58
|
-
'data-garden-version': '9.11.
|
|
58
|
+
'data-garden-version': '9.11.2'
|
|
59
59
|
}).withConfig({
|
|
60
60
|
displayName: "StyledProgress__StyledProgressBackground",
|
|
61
61
|
componentId: "sc-2g8w4s-0"
|
|
@@ -63,7 +63,7 @@ const StyledProgressBackground = styled.div.attrs({
|
|
|
63
63
|
const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
|
|
64
64
|
const StyledProgressIndicator = styled.div.attrs({
|
|
65
65
|
'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
|
|
66
|
-
'data-garden-version': '9.11.
|
|
66
|
+
'data-garden-version': '9.11.2'
|
|
67
67
|
}).withConfig({
|
|
68
68
|
displayName: "StyledProgress__StyledProgressIndicator",
|
|
69
69
|
componentId: "sc-2g8w4s-1"
|
|
@@ -48,7 +48,7 @@ const delayedVisibilityStyles = _ref3 => {
|
|
|
48
48
|
return undefined;
|
|
49
49
|
};
|
|
50
50
|
const StyledSVG = styled.svg.attrs(props => ({
|
|
51
|
-
'data-garden-version': '9.11.
|
|
51
|
+
'data-garden-version': '9.11.2',
|
|
52
52
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
53
53
|
focusable: 'false',
|
|
54
54
|
viewBox: `0 0 ${props.$width} ${props.$height}`,
|
|
@@ -52,7 +52,7 @@ const gradientStyles = props => {
|
|
|
52
52
|
};
|
|
53
53
|
const StyledSkeleton = styled.div.attrs({
|
|
54
54
|
'data-garden-id': COMPONENT_ID,
|
|
55
|
-
'data-garden-version': '9.11.
|
|
55
|
+
'data-garden-version': '9.11.2'
|
|
56
56
|
}).withConfig({
|
|
57
57
|
displayName: "StyledSkeleton",
|
|
58
58
|
componentId: "sc-1raozze-0"
|
package/dist/index.cjs.js
CHANGED
|
@@ -71,7 +71,7 @@ const sizeStyles$1 = _ref => {
|
|
|
71
71
|
};
|
|
72
72
|
const StyledLoadingPlaceholder = styled__default.default.div.attrs({
|
|
73
73
|
'data-garden-id': COMPONENT_ID$5,
|
|
74
|
-
'data-garden-version': '9.11.
|
|
74
|
+
'data-garden-version': '9.11.2',
|
|
75
75
|
role: 'progressbar'
|
|
76
76
|
}).withConfig({
|
|
77
77
|
displayName: "StyledLoadingPlaceholder",
|
|
@@ -126,7 +126,7 @@ const colorStyles$2 = _ref => {
|
|
|
126
126
|
};
|
|
127
127
|
const StyledProgressBackground = styled__default.default.div.attrs({
|
|
128
128
|
'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
|
|
129
|
-
'data-garden-version': '9.11.
|
|
129
|
+
'data-garden-version': '9.11.2'
|
|
130
130
|
}).withConfig({
|
|
131
131
|
displayName: "StyledProgress__StyledProgressBackground",
|
|
132
132
|
componentId: "sc-2g8w4s-0"
|
|
@@ -134,7 +134,7 @@ const StyledProgressBackground = styled__default.default.div.attrs({
|
|
|
134
134
|
const PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
|
|
135
135
|
const StyledProgressIndicator = styled__default.default.div.attrs({
|
|
136
136
|
'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
|
|
137
|
-
'data-garden-version': '9.11.
|
|
137
|
+
'data-garden-version': '9.11.2'
|
|
138
138
|
}).withConfig({
|
|
139
139
|
displayName: "StyledProgress__StyledProgressIndicator",
|
|
140
140
|
componentId: "sc-2g8w4s-1"
|
|
@@ -185,7 +185,7 @@ const gradientStyles = props => {
|
|
|
185
185
|
};
|
|
186
186
|
const StyledSkeleton = styled__default.default.div.attrs({
|
|
187
187
|
'data-garden-id': COMPONENT_ID$4,
|
|
188
|
-
'data-garden-version': '9.11.
|
|
188
|
+
'data-garden-version': '9.11.2'
|
|
189
189
|
}).withConfig({
|
|
190
190
|
displayName: "StyledSkeleton",
|
|
191
191
|
componentId: "sc-1raozze-0"
|
|
@@ -245,7 +245,7 @@ const delayedVisibilityStyles = _ref3 => {
|
|
|
245
245
|
return undefined;
|
|
246
246
|
};
|
|
247
247
|
const StyledSVG = styled__default.default.svg.attrs(props => ({
|
|
248
|
-
'data-garden-version': '9.11.
|
|
248
|
+
'data-garden-version': '9.11.2',
|
|
249
249
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
250
250
|
focusable: 'false',
|
|
251
251
|
viewBox: `0 0 ${props.$width} ${props.$height}`,
|
|
@@ -286,7 +286,7 @@ const StyledCircle = styled__default.default.circle.attrs({
|
|
|
286
286
|
})([""]);
|
|
287
287
|
const StyledInline = styled__default.default.svg.attrs(props => ({
|
|
288
288
|
'data-garden-id': COMPONENT_ID$3,
|
|
289
|
-
'data-garden-version': '9.11.
|
|
289
|
+
'data-garden-version': '9.11.2',
|
|
290
290
|
viewBox: '0 0 16 4',
|
|
291
291
|
width: props.$size,
|
|
292
292
|
height: props.$size * 0.25
|
|
@@ -339,8 +339,8 @@ const COMPONENT_ID$1 = 'loaders.progress';
|
|
|
339
339
|
const Progress = React__default.default.forwardRef((_ref, ref) => {
|
|
340
340
|
let {
|
|
341
341
|
color,
|
|
342
|
-
value,
|
|
343
|
-
size,
|
|
342
|
+
value = 0,
|
|
343
|
+
size = 'medium',
|
|
344
344
|
'aria-label': label,
|
|
345
345
|
...other
|
|
346
346
|
} = _ref;
|
|
@@ -351,7 +351,7 @@ const Progress = React__default.default.forwardRef((_ref, ref) => {
|
|
|
351
351
|
return (
|
|
352
352
|
React__default.default.createElement(StyledProgressBackground, Object.assign({
|
|
353
353
|
"data-garden-id": COMPONENT_ID$1,
|
|
354
|
-
"data-garden-version": '9.11.
|
|
354
|
+
"data-garden-version": '9.11.2',
|
|
355
355
|
"aria-valuemax": 100,
|
|
356
356
|
"aria-valuemin": 0,
|
|
357
357
|
"aria-valuenow": percentage,
|
|
@@ -372,15 +372,11 @@ Progress.propTypes = {
|
|
|
372
372
|
value: PropTypes__default.default.number.isRequired,
|
|
373
373
|
size: PropTypes__default.default.oneOf(SIZE)
|
|
374
374
|
};
|
|
375
|
-
Progress.defaultProps = {
|
|
376
|
-
value: 0,
|
|
377
|
-
size: 'medium'
|
|
378
|
-
};
|
|
379
375
|
|
|
380
376
|
const Skeleton = React.forwardRef((_ref, ref) => {
|
|
381
377
|
let {
|
|
382
|
-
width,
|
|
383
|
-
height,
|
|
378
|
+
width = '100%',
|
|
379
|
+
height = '100%',
|
|
384
380
|
isLight,
|
|
385
381
|
...other
|
|
386
382
|
} = _ref;
|
|
@@ -397,10 +393,6 @@ Skeleton.propTypes = {
|
|
|
397
393
|
height: PropTypes__default.default.string,
|
|
398
394
|
isLight: PropTypes__default.default.bool
|
|
399
395
|
};
|
|
400
|
-
Skeleton.defaultProps = {
|
|
401
|
-
width: '100%',
|
|
402
|
-
height: '100%'
|
|
403
|
-
};
|
|
404
396
|
|
|
405
397
|
const STROKE_WIDTH_FRAMES = {
|
|
406
398
|
0: 6,
|
|
@@ -488,10 +480,10 @@ const computeFrames = (frames, duration) => {
|
|
|
488
480
|
};
|
|
489
481
|
const Spinner = React.forwardRef((_ref, ref) => {
|
|
490
482
|
let {
|
|
491
|
-
size,
|
|
492
|
-
duration,
|
|
493
|
-
color,
|
|
494
|
-
delayMS,
|
|
483
|
+
size = 'inherit',
|
|
484
|
+
duration = 1250,
|
|
485
|
+
color = 'inherit',
|
|
486
|
+
delayMS = 750,
|
|
495
487
|
...other
|
|
496
488
|
} = _ref;
|
|
497
489
|
const strokeWidthValues = computeFrames(STROKE_WIDTH_FRAMES, duration);
|
|
@@ -539,17 +531,11 @@ Spinner.propTypes = {
|
|
|
539
531
|
color: PropTypes__default.default.string,
|
|
540
532
|
delayMS: PropTypes__default.default.number
|
|
541
533
|
};
|
|
542
|
-
Spinner.defaultProps = {
|
|
543
|
-
size: 'inherit',
|
|
544
|
-
duration: 1250,
|
|
545
|
-
color: 'inherit',
|
|
546
|
-
delayMS: 750
|
|
547
|
-
};
|
|
548
534
|
|
|
549
535
|
const Inline = React.forwardRef((_ref, ref) => {
|
|
550
536
|
let {
|
|
551
|
-
size,
|
|
552
|
-
color,
|
|
537
|
+
size = 16,
|
|
538
|
+
color = 'inherit',
|
|
553
539
|
...other
|
|
554
540
|
} = _ref;
|
|
555
541
|
const ariaLabel = reactTheming.useText(Inline, other, 'aria-label', 'loading');
|
|
@@ -574,10 +560,6 @@ Inline.propTypes = {
|
|
|
574
560
|
size: PropTypes__default.default.number,
|
|
575
561
|
color: PropTypes__default.default.string
|
|
576
562
|
};
|
|
577
|
-
Inline.defaultProps = {
|
|
578
|
-
size: 16,
|
|
579
|
-
color: 'inherit'
|
|
580
|
-
};
|
|
581
563
|
|
|
582
564
|
exports.Dots = Dots;
|
|
583
565
|
exports.Inline = Inline;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-loaders",
|
|
3
|
-
"version": "9.11.
|
|
3
|
+
"version": "9.11.2",
|
|
4
4
|
"description": "Components relating to loaders in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"styled-components": "^5.3.1 || ^6.0.0"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@zendeskgarden/react-theming": "^9.11.
|
|
35
|
+
"@zendeskgarden/react-theming": "^9.11.2"
|
|
36
36
|
},
|
|
37
37
|
"keywords": [
|
|
38
38
|
"components",
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
46
|
"zendeskgarden:src": "src/index.ts",
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "3adb38d25d0a3fa38ff21c7707950623f22b5db7"
|
|
48
48
|
}
|