@zendeskgarden/react-loaders 8.42.2 → 8.44.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.
Files changed (5) hide show
  1. package/dist/index.cjs.js +22 -10
  2. package/dist/index.esm.js +22 -10
  3. package/dist/typings/styled/StyledLoadingPlaceholder.d.ts +2 -0
  4. package/dist/typings/styled/StyledSVG.d.ts +2 -0
  5. package/package.json +3 -3
package/dist/index.cjs.js CHANGED
@@ -193,12 +193,16 @@ StyledDotsCircleThree.defaultProps = {
193
193
  var COMPONENT_ID$5 = 'loaders.loading_placeholder';
194
194
  var StyledLoadingPlaceholder = styled__default['default'].div.attrs({
195
195
  'data-garden-id': COMPONENT_ID$5,
196
- 'data-garden-version': '8.42.2',
196
+ 'data-garden-version': '8.44.2',
197
197
  role: 'progressbar'
198
198
  }).withConfig({
199
199
  displayName: "StyledLoadingPlaceholder",
200
200
  componentId: "sc-x3bwsx-0"
201
- })(["display:inline;width:1em;height:0.9em;font-size:", ";", ""], function (props) {
201
+ })(["display:inline-block;width:", ";height:", ";font-size:", ";", ""], function (props) {
202
+ return props.width || '1em';
203
+ }, function (props) {
204
+ return props.height || '0.9em';
205
+ }, function (props) {
202
206
  return props.fontSize;
203
207
  }, function (props) {
204
208
  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
@@ -224,7 +228,7 @@ var PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
224
228
  var StyledProgressBackground = styled__default['default'].div.attrs(function (props) {
225
229
  return {
226
230
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
227
- 'data-garden-version': '8.42.2',
231
+ 'data-garden-version': '8.44.2',
228
232
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
229
233
  };
230
234
  }).withConfig({
@@ -248,7 +252,7 @@ var PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
248
252
  var StyledProgressIndicator = styled__default['default'].div.attrs(function (props) {
249
253
  return {
250
254
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
251
- 'data-garden-version': '8.42.2',
255
+ 'data-garden-version': '8.44.2',
252
256
  height: props.height || sizeToHeight(props.size, props.theme),
253
257
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
254
258
  };
@@ -294,7 +298,7 @@ var retrieveSkeletonGradient = function retrieveSkeletonGradient(_ref3) {
294
298
  };
295
299
  var StyledSkeleton = styled__default['default'].div.attrs({
296
300
  'data-garden-id': COMPONENT_ID$4,
297
- 'data-garden-version': '8.42.2'
301
+ 'data-garden-version': '8.44.2'
298
302
  }).withConfig({
299
303
  displayName: "StyledSkeleton",
300
304
  componentId: "sc-1raozze-0"
@@ -335,7 +339,7 @@ StyledSpinnerCircle.defaultProps = {
335
339
 
336
340
  var StyledSVG = styled__default['default'].svg.attrs(function (props) {
337
341
  return {
338
- 'data-garden-version': '8.42.2',
342
+ 'data-garden-version': '8.44.2',
339
343
  xmlns: 'http://www.w3.org/2000/svg',
340
344
  width: props.width,
341
345
  height: props.height,
@@ -346,7 +350,11 @@ var StyledSVG = styled__default['default'].svg.attrs(function (props) {
346
350
  }).withConfig({
347
351
  displayName: "StyledSVG",
348
352
  componentId: "sc-1xtc3kx-0"
349
- })(["width:1em;height:0.9em;color:", ";font-size:", ";", ";"], function (props) {
353
+ })(["width:", ";height:", ";color:", ";font-size:", ";", ";"], function (props) {
354
+ return props.containerWidth || '1em';
355
+ }, function (props) {
356
+ return props.containerHeight || '0.9em';
357
+ }, function (props) {
350
358
  return props.color || 'inherit';
351
359
  }, function (props) {
352
360
  return props.fontSize || 'inherit';
@@ -373,7 +381,7 @@ StyledCircle.defaultProps = {
373
381
  var StyledInlineTypingSVG = styled__default['default'].svg.attrs(function (props) {
374
382
  return {
375
383
  'data-garden-id': COMPONENT_ID$3,
376
- 'data-garden-version': '8.42.2',
384
+ 'data-garden-version': '8.44.2',
377
385
  viewBox: '0 0 16 4',
378
386
  width: props.size,
379
387
  height: props.size * 0.25
@@ -472,7 +480,7 @@ var Progress = React__default['default'].forwardRef(function (_ref, ref) {
472
480
  var percentage = Math.max(0, Math.min(100, value));
473
481
  return React__default['default'].createElement(StyledProgressBackground, _extends({
474
482
  "data-garden-id": COMPONENT_ID$1,
475
- "data-garden-version": '8.42.2',
483
+ "data-garden-version": '8.44.2',
476
484
  "aria-valuemax": 100,
477
485
  "aria-valuemin": 0,
478
486
  "aria-valuenow": percentage,
@@ -630,6 +638,8 @@ var Spinner = function Spinner(_ref3) {
630
638
  var HEIGHT = 80;
631
639
  if (!delayComplete && delayMS !== 0) {
632
640
  return React__default['default'].createElement(StyledLoadingPlaceholder, {
641
+ width: "1em",
642
+ height: "1em",
633
643
  fontSize: size
634
644
  }, "\xA0");
635
645
  }
@@ -638,7 +648,9 @@ var Spinner = function Spinner(_ref3) {
638
648
  color: color,
639
649
  width: WIDTH,
640
650
  height: HEIGHT,
641
- dataGardenId: COMPONENT_ID
651
+ dataGardenId: COMPONENT_ID,
652
+ containerHeight: "1em",
653
+ containerWidth: "1em"
642
654
  }, other), React__default['default'].createElement(StyledSpinnerCircle, {
643
655
  dasharrayValue: dasharrayValue,
644
656
  strokeWidthValue: strokeWidthValue,
package/dist/index.esm.js CHANGED
@@ -183,12 +183,16 @@ StyledDotsCircleThree.defaultProps = {
183
183
  var COMPONENT_ID$5 = 'loaders.loading_placeholder';
184
184
  var StyledLoadingPlaceholder = styled.div.attrs({
185
185
  'data-garden-id': COMPONENT_ID$5,
186
- 'data-garden-version': '8.42.2',
186
+ 'data-garden-version': '8.44.2',
187
187
  role: 'progressbar'
188
188
  }).withConfig({
189
189
  displayName: "StyledLoadingPlaceholder",
190
190
  componentId: "sc-x3bwsx-0"
191
- })(["display:inline;width:1em;height:0.9em;font-size:", ";", ""], function (props) {
191
+ })(["display:inline-block;width:", ";height:", ";font-size:", ";", ""], function (props) {
192
+ return props.width || '1em';
193
+ }, function (props) {
194
+ return props.height || '0.9em';
195
+ }, function (props) {
192
196
  return props.fontSize;
193
197
  }, function (props) {
194
198
  return retrieveComponentStyles(COMPONENT_ID$5, props);
@@ -214,7 +218,7 @@ var PROGRESS_BACKGROUND_COMPONENT_ID = 'loaders.progress_background';
214
218
  var StyledProgressBackground = styled.div.attrs(function (props) {
215
219
  return {
216
220
  'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID,
217
- 'data-garden-version': '8.42.2',
221
+ 'data-garden-version': '8.44.2',
218
222
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
219
223
  };
220
224
  }).withConfig({
@@ -238,7 +242,7 @@ var PROGESS_INDICATOR_COMPONENT_ID = 'loaders.progress_indicator';
238
242
  var StyledProgressIndicator = styled.div.attrs(function (props) {
239
243
  return {
240
244
  'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID,
241
- 'data-garden-version': '8.42.2',
245
+ 'data-garden-version': '8.44.2',
242
246
  height: props.height || sizeToHeight(props.size, props.theme),
243
247
  borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme)
244
248
  };
@@ -284,7 +288,7 @@ var retrieveSkeletonGradient = function retrieveSkeletonGradient(_ref3) {
284
288
  };
285
289
  var StyledSkeleton = styled.div.attrs({
286
290
  'data-garden-id': COMPONENT_ID$4,
287
- 'data-garden-version': '8.42.2'
291
+ 'data-garden-version': '8.44.2'
288
292
  }).withConfig({
289
293
  displayName: "StyledSkeleton",
290
294
  componentId: "sc-1raozze-0"
@@ -325,7 +329,7 @@ StyledSpinnerCircle.defaultProps = {
325
329
 
326
330
  var StyledSVG = styled.svg.attrs(function (props) {
327
331
  return {
328
- 'data-garden-version': '8.42.2',
332
+ 'data-garden-version': '8.44.2',
329
333
  xmlns: 'http://www.w3.org/2000/svg',
330
334
  width: props.width,
331
335
  height: props.height,
@@ -336,7 +340,11 @@ var StyledSVG = styled.svg.attrs(function (props) {
336
340
  }).withConfig({
337
341
  displayName: "StyledSVG",
338
342
  componentId: "sc-1xtc3kx-0"
339
- })(["width:1em;height:0.9em;color:", ";font-size:", ";", ";"], function (props) {
343
+ })(["width:", ";height:", ";color:", ";font-size:", ";", ";"], function (props) {
344
+ return props.containerWidth || '1em';
345
+ }, function (props) {
346
+ return props.containerHeight || '0.9em';
347
+ }, function (props) {
340
348
  return props.color || 'inherit';
341
349
  }, function (props) {
342
350
  return props.fontSize || 'inherit';
@@ -363,7 +371,7 @@ StyledCircle.defaultProps = {
363
371
  var StyledInlineTypingSVG = styled.svg.attrs(function (props) {
364
372
  return {
365
373
  'data-garden-id': COMPONENT_ID$3,
366
- 'data-garden-version': '8.42.2',
374
+ 'data-garden-version': '8.44.2',
367
375
  viewBox: '0 0 16 4',
368
376
  width: props.size,
369
377
  height: props.size * 0.25
@@ -462,7 +470,7 @@ var Progress = React.forwardRef(function (_ref, ref) {
462
470
  var percentage = Math.max(0, Math.min(100, value));
463
471
  return React.createElement(StyledProgressBackground, _extends({
464
472
  "data-garden-id": COMPONENT_ID$1,
465
- "data-garden-version": '8.42.2',
473
+ "data-garden-version": '8.44.2',
466
474
  "aria-valuemax": 100,
467
475
  "aria-valuemin": 0,
468
476
  "aria-valuenow": percentage,
@@ -620,6 +628,8 @@ var Spinner = function Spinner(_ref3) {
620
628
  var HEIGHT = 80;
621
629
  if (!delayComplete && delayMS !== 0) {
622
630
  return React.createElement(StyledLoadingPlaceholder, {
631
+ width: "1em",
632
+ height: "1em",
623
633
  fontSize: size
624
634
  }, "\xA0");
625
635
  }
@@ -628,7 +638,9 @@ var Spinner = function Spinner(_ref3) {
628
638
  color: color,
629
639
  width: WIDTH,
630
640
  height: HEIGHT,
631
- dataGardenId: COMPONENT_ID
641
+ dataGardenId: COMPONENT_ID,
642
+ containerHeight: "1em",
643
+ containerWidth: "1em"
632
644
  }, other), React.createElement(StyledSpinnerCircle, {
633
645
  dasharrayValue: dasharrayValue,
634
646
  strokeWidthValue: strokeWidthValue,
package/dist/typings/styled/StyledLoadingPlaceholder.d.ts CHANGED
@@ -10,4 +10,6 @@ export declare const StyledLoadingPlaceholder: import("styled-components").Style
10
10
  role: "progressbar";
11
11
  } & {
12
12
  fontSize: string | number;
13
+ width?: string | undefined;
14
+ height?: string | undefined;
13
15
  }, "role" | "data-garden-id" | "data-garden-version">;
package/dist/typings/styled/StyledSVG.d.ts CHANGED
@@ -10,6 +10,8 @@ interface IStyledSVGProps {
10
10
  fontSize?: string | number;
11
11
  width: number | string;
12
12
  height: number | string;
13
+ containerWidth?: string;
14
+ containerHeight?: string;
13
15
  }
14
16
  export declare const StyledSVG: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, IStyledSVGProps, never>;
15
17
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-loaders",
3
- "version": "8.42.2",
3
+ "version": "8.44.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": "^4.2.0 || ^5.0.0"
33
33
  },
34
34
  "devDependencies": {
35
- "@zendeskgarden/react-theming": "^8.42.2"
35
+ "@zendeskgarden/react-theming": "^8.44.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": "4d3dfab413c6a167dcaf6f9cc674160455881407"
47
+ "gitHead": "179b8d53e7f0a73528ae31c10d8f7e39ab73d7ca"
48
48
  }