@charcoal-ui/react 4.0.0-beta.11 → 4.0.0-beta.13

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 (33) hide show
  1. package/dist/components/IconButton/index.d.ts +1 -2
  2. package/dist/components/IconButton/index.d.ts.map +1 -1
  3. package/dist/components/Modal/useCustomModalOverlay.d.ts +1 -1
  4. package/dist/components/Modal/useCustomModalOverlay.d.ts.map +1 -1
  5. package/dist/index.cjs.js +8 -6
  6. package/dist/index.cjs.js.map +1 -1
  7. package/dist/index.esm.js +8 -6
  8. package/dist/index.esm.js.map +1 -1
  9. package/package.json +11 -15
  10. package/src/_lib/index.ts +1 -1
  11. package/src/components/Button/__snapshots__/index.story.storyshot +9 -9
  12. package/src/components/Checkbox/CheckboxInput/__snapshots__/index.story.storyshot +6 -6
  13. package/src/components/Checkbox/__snapshots__/index.story.storyshot +6 -6
  14. package/src/components/Clickable/__snapshots__/index.story.storyshot +2 -2
  15. package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot +3 -3
  16. package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot +3 -3
  17. package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot +5 -5
  18. package/src/components/DropdownSelector/__snapshots__/index.story.storyshot +53 -53
  19. package/src/components/Icon/__snapshots__/index.story.storyshot +1 -1
  20. package/src/components/IconButton/__snapshots__/index.story.storyshot +3 -3
  21. package/src/components/IconButton/index.tsx +3 -6
  22. package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot +8 -8
  23. package/src/components/Modal/__snapshots__/index.story.storyshot +45 -28
  24. package/src/components/Modal/index.story.tsx +2 -0
  25. package/src/components/Modal/index.tsx +1 -1
  26. package/src/components/Modal/useCustomModalOverlay.tsx +7 -1
  27. package/src/components/Radio/__snapshots__/index.story.storyshot +10 -10
  28. package/src/components/Radio/index.test.tsx +4 -3
  29. package/src/components/SegmentedControl/__snapshots__/index.story.storyshot +2 -2
  30. package/src/components/Switch/__snapshots__/index.story.storyshot +4 -4
  31. package/src/components/TagItem/__snapshots__/index.story.storyshot +16 -16
  32. package/src/components/TextArea/__snapshots__/TextArea.story.storyshot +31 -31
  33. package/src/components/TextField/__snapshots__/TextField.story.storyshot +25 -25
package/src/components/TextArea/__snapshots__/TextArea.story.storyshot CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Storybook Tests react/TextArea AssistiveText 1`] = `
3
+ exports[`Storybook Tests > react/TextArea > AssistiveText 1`] = `
4
4
  <div
5
5
  data-dark={false}
6
6
  >
@@ -11,7 +11,7 @@ exports[`Storybook Tests react/TextArea AssistiveText 1`] = `
11
11
  <div
12
12
  className="charcoal-field-label-root"
13
13
  style={
14
- {
14
+ Object {
15
15
  "border": 0,
16
16
  "clip": "rect(0 0 0 0)",
17
17
  "clipPath": "inset(50%)",
@@ -42,7 +42,7 @@ exports[`Storybook Tests react/TextArea AssistiveText 1`] = `
42
42
  aria-invalid={false}
43
43
  className="charcoal-text-area-container"
44
44
  style={
45
- {
45
+ Object {
46
46
  "--charcoal-text-area-rows": "4",
47
47
  }
48
48
  }
@@ -69,7 +69,7 @@ exports[`Storybook Tests react/TextArea AssistiveText 1`] = `
69
69
  </div>
70
70
  `;
71
71
 
72
- exports[`Storybook Tests react/TextArea AutoHeight 1`] = `
72
+ exports[`Storybook Tests > react/TextArea > AutoHeight 1`] = `
73
73
  <div
74
74
  data-dark={false}
75
75
  >
@@ -80,7 +80,7 @@ exports[`Storybook Tests react/TextArea AutoHeight 1`] = `
80
80
  <div
81
81
  className="charcoal-field-label-root"
82
82
  style={
83
- {
83
+ Object {
84
84
  "border": 0,
85
85
  "clip": "rect(0 0 0 0)",
86
86
  "clipPath": "inset(50%)",
@@ -111,7 +111,7 @@ exports[`Storybook Tests react/TextArea AutoHeight 1`] = `
111
111
  aria-invalid={false}
112
112
  className="charcoal-text-area-container"
113
113
  style={
114
- {
114
+ Object {
115
115
  "--charcoal-text-area-rows": "4",
116
116
  }
117
117
  }
@@ -130,7 +130,7 @@ exports[`Storybook Tests react/TextArea AutoHeight 1`] = `
130
130
  </div>
131
131
  `;
132
132
 
133
- exports[`Storybook Tests react/TextArea Default 1`] = `
133
+ exports[`Storybook Tests > react/TextArea > Default 1`] = `
134
134
  <div
135
135
  data-dark={false}
136
136
  >
@@ -141,7 +141,7 @@ exports[`Storybook Tests react/TextArea Default 1`] = `
141
141
  <div
142
142
  className="charcoal-field-label-root"
143
143
  style={
144
- {
144
+ Object {
145
145
  "border": 0,
146
146
  "clip": "rect(0 0 0 0)",
147
147
  "clipPath": "inset(50%)",
@@ -179,7 +179,7 @@ exports[`Storybook Tests react/TextArea Default 1`] = `
179
179
  aria-invalid={false}
180
180
  className="charcoal-text-area-container"
181
181
  style={
182
- {
182
+ Object {
183
183
  "--charcoal-text-area-rows": "4",
184
184
  }
185
185
  }
@@ -201,7 +201,7 @@ exports[`Storybook Tests react/TextArea Default 1`] = `
201
201
  </div>
202
202
  `;
203
203
 
204
- exports[`Storybook Tests react/TextArea Disabled 1`] = `
204
+ exports[`Storybook Tests > react/TextArea > Disabled 1`] = `
205
205
  <div
206
206
  data-dark={false}
207
207
  >
@@ -212,7 +212,7 @@ exports[`Storybook Tests react/TextArea Disabled 1`] = `
212
212
  <div
213
213
  className="charcoal-field-label-root"
214
214
  style={
215
- {
215
+ Object {
216
216
  "border": 0,
217
217
  "clip": "rect(0 0 0 0)",
218
218
  "clipPath": "inset(50%)",
@@ -244,7 +244,7 @@ exports[`Storybook Tests react/TextArea Disabled 1`] = `
244
244
  aria-invalid={false}
245
245
  className="charcoal-text-area-container"
246
246
  style={
247
- {
247
+ Object {
248
248
  "--charcoal-text-area-rows": "4",
249
249
  }
250
250
  }
@@ -263,7 +263,7 @@ exports[`Storybook Tests react/TextArea Disabled 1`] = `
263
263
  </div>
264
264
  `;
265
265
 
266
- exports[`Storybook Tests react/TextArea Invalid 1`] = `
266
+ exports[`Storybook Tests > react/TextArea > Invalid 1`] = `
267
267
  <div
268
268
  data-dark={false}
269
269
  >
@@ -274,7 +274,7 @@ exports[`Storybook Tests react/TextArea Invalid 1`] = `
274
274
  <div
275
275
  className="charcoal-field-label-root"
276
276
  style={
277
- {
277
+ Object {
278
278
  "border": 0,
279
279
  "clip": "rect(0 0 0 0)",
280
280
  "clipPath": "inset(50%)",
@@ -305,7 +305,7 @@ exports[`Storybook Tests react/TextArea Invalid 1`] = `
305
305
  aria-invalid={true}
306
306
  className="charcoal-text-area-container"
307
307
  style={
308
- {
308
+ Object {
309
309
  "--charcoal-text-area-rows": "4",
310
310
  }
311
311
  }
@@ -333,7 +333,7 @@ exports[`Storybook Tests react/TextArea Invalid 1`] = `
333
333
  </div>
334
334
  `;
335
335
 
336
- exports[`Storybook Tests react/TextArea Label 1`] = `
336
+ exports[`Storybook Tests > react/TextArea > Label 1`] = `
337
337
  <div
338
338
  data-dark={false}
339
339
  >
@@ -361,7 +361,7 @@ exports[`Storybook Tests react/TextArea Label 1`] = `
361
361
  aria-invalid={false}
362
362
  className="charcoal-text-area-container"
363
363
  style={
364
- {
364
+ Object {
365
365
  "--charcoal-text-area-rows": "4",
366
366
  }
367
367
  }
@@ -380,7 +380,7 @@ exports[`Storybook Tests react/TextArea Label 1`] = `
380
380
  </div>
381
381
  `;
382
382
 
383
- exports[`Storybook Tests react/TextArea Placeholder 1`] = `
383
+ exports[`Storybook Tests > react/TextArea > Placeholder 1`] = `
384
384
  <div
385
385
  data-dark={false}
386
386
  >
@@ -391,7 +391,7 @@ exports[`Storybook Tests react/TextArea Placeholder 1`] = `
391
391
  <div
392
392
  className="charcoal-field-label-root"
393
393
  style={
394
- {
394
+ Object {
395
395
  "border": 0,
396
396
  "clip": "rect(0 0 0 0)",
397
397
  "clipPath": "inset(50%)",
@@ -422,7 +422,7 @@ exports[`Storybook Tests react/TextArea Placeholder 1`] = `
422
422
  aria-invalid={false}
423
423
  className="charcoal-text-area-container"
424
424
  style={
425
- {
425
+ Object {
426
426
  "--charcoal-text-area-rows": "4",
427
427
  }
428
428
  }
@@ -442,7 +442,7 @@ exports[`Storybook Tests react/TextArea Placeholder 1`] = `
442
442
  </div>
443
443
  `;
444
444
 
445
- exports[`Storybook Tests react/TextArea ReadOnly 1`] = `
445
+ exports[`Storybook Tests > react/TextArea > ReadOnly 1`] = `
446
446
  <div
447
447
  data-dark={false}
448
448
  >
@@ -453,7 +453,7 @@ exports[`Storybook Tests react/TextArea ReadOnly 1`] = `
453
453
  <div
454
454
  className="charcoal-field-label-root"
455
455
  style={
456
- {
456
+ Object {
457
457
  "border": 0,
458
458
  "clip": "rect(0 0 0 0)",
459
459
  "clipPath": "inset(50%)",
@@ -484,7 +484,7 @@ exports[`Storybook Tests react/TextArea ReadOnly 1`] = `
484
484
  aria-invalid={false}
485
485
  className="charcoal-text-area-container"
486
486
  style={
487
- {
487
+ Object {
488
488
  "--charcoal-text-area-rows": "4",
489
489
  }
490
490
  }
@@ -505,7 +505,7 @@ exports[`Storybook Tests react/TextArea ReadOnly 1`] = `
505
505
  </div>
506
506
  `;
507
507
 
508
- exports[`Storybook Tests react/TextArea Required 1`] = `
508
+ exports[`Storybook Tests > react/TextArea > Required 1`] = `
509
509
  <div
510
510
  data-dark={false}
511
511
  >
@@ -516,7 +516,7 @@ exports[`Storybook Tests react/TextArea Required 1`] = `
516
516
  <div
517
517
  className="charcoal-field-label-root"
518
518
  style={
519
- {
519
+ Object {
520
520
  "border": 0,
521
521
  "clip": "rect(0 0 0 0)",
522
522
  "clipPath": "inset(50%)",
@@ -552,7 +552,7 @@ exports[`Storybook Tests react/TextArea Required 1`] = `
552
552
  aria-invalid={false}
553
553
  className="charcoal-text-area-container"
554
554
  style={
555
- {
555
+ Object {
556
556
  "--charcoal-text-area-rows": "4",
557
557
  }
558
558
  }
@@ -571,7 +571,7 @@ exports[`Storybook Tests react/TextArea Required 1`] = `
571
571
  </div>
572
572
  `;
573
573
 
574
- exports[`Storybook Tests react/TextArea ShowCount 1`] = `
574
+ exports[`Storybook Tests > react/TextArea > ShowCount 1`] = `
575
575
  <div
576
576
  data-dark={false}
577
577
  >
@@ -582,7 +582,7 @@ exports[`Storybook Tests react/TextArea ShowCount 1`] = `
582
582
  <div
583
583
  className="charcoal-field-label-root"
584
584
  style={
585
- {
585
+ Object {
586
586
  "border": 0,
587
587
  "clip": "rect(0 0 0 0)",
588
588
  "clipPath": "inset(50%)",
@@ -613,7 +613,7 @@ exports[`Storybook Tests react/TextArea ShowCount 1`] = `
613
613
  aria-invalid={false}
614
614
  className="charcoal-text-area-container"
615
615
  style={
616
- {
616
+ Object {
617
617
  "--charcoal-text-area-rows": "5",
618
618
  }
619
619
  }
@@ -638,7 +638,7 @@ exports[`Storybook Tests react/TextArea ShowCount 1`] = `
638
638
  </div>
639
639
  `;
640
640
 
641
- exports[`Storybook Tests react/TextArea SubLabel 1`] = `
641
+ exports[`Storybook Tests > react/TextArea > SubLabel 1`] = `
642
642
  <div
643
643
  data-dark={false}
644
644
  >
@@ -672,7 +672,7 @@ exports[`Storybook Tests react/TextArea SubLabel 1`] = `
672
672
  aria-invalid={false}
673
673
  className="charcoal-text-area-container"
674
674
  style={
675
- {
675
+ Object {
676
676
  "--charcoal-text-area-rows": "4",
677
677
  }
678
678
  }
package/src/components/TextField/__snapshots__/TextField.story.storyshot CHANGED
@@ -1,6 +1,6 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`Storybook Tests react/TextField Affix 1`] = `
3
+ exports[`Storybook Tests > react/TextField > Affix 1`] = `
4
4
  <div
5
5
  data-dark={false}
6
6
  >
@@ -11,7 +11,7 @@ exports[`Storybook Tests react/TextField Affix 1`] = `
11
11
  <div
12
12
  className="charcoal-field-label-root"
13
13
  style={
14
- {
14
+ Object {
15
15
  "border": 0,
16
16
  "clip": "rect(0 0 0 0)",
17
17
  "clipPath": "inset(50%)",
@@ -66,7 +66,7 @@ exports[`Storybook Tests react/TextField Affix 1`] = `
66
66
  </div>
67
67
  `;
68
68
 
69
- exports[`Storybook Tests react/TextField AssistiveText 1`] = `
69
+ exports[`Storybook Tests > react/TextField > AssistiveText 1`] = `
70
70
  <div
71
71
  data-dark={false}
72
72
  >
@@ -77,7 +77,7 @@ exports[`Storybook Tests react/TextField AssistiveText 1`] = `
77
77
  <div
78
78
  className="charcoal-field-label-root"
79
79
  style={
80
- {
80
+ Object {
81
81
  "border": 0,
82
82
  "clip": "rect(0 0 0 0)",
83
83
  "clipPath": "inset(50%)",
@@ -130,7 +130,7 @@ exports[`Storybook Tests react/TextField AssistiveText 1`] = `
130
130
  </div>
131
131
  `;
132
132
 
133
- exports[`Storybook Tests react/TextField Default 1`] = `
133
+ exports[`Storybook Tests > react/TextField > Default 1`] = `
134
134
  <div
135
135
  data-dark={false}
136
136
  >
@@ -141,7 +141,7 @@ exports[`Storybook Tests react/TextField Default 1`] = `
141
141
  <div
142
142
  className="charcoal-field-label-root"
143
143
  style={
144
- {
144
+ Object {
145
145
  "border": 0,
146
146
  "clip": "rect(0 0 0 0)",
147
147
  "clipPath": "inset(50%)",
@@ -195,7 +195,7 @@ exports[`Storybook Tests react/TextField Default 1`] = `
195
195
  </div>
196
196
  `;
197
197
 
198
- exports[`Storybook Tests react/TextField Disabled 1`] = `
198
+ exports[`Storybook Tests > react/TextField > Disabled 1`] = `
199
199
  <div
200
200
  data-dark={false}
201
201
  >
@@ -206,7 +206,7 @@ exports[`Storybook Tests react/TextField Disabled 1`] = `
206
206
  <div
207
207
  className="charcoal-field-label-root"
208
208
  style={
209
- {
209
+ Object {
210
210
  "border": 0,
211
211
  "clip": "rect(0 0 0 0)",
212
212
  "clipPath": "inset(50%)",
@@ -252,7 +252,7 @@ exports[`Storybook Tests react/TextField Disabled 1`] = `
252
252
  </div>
253
253
  `;
254
254
 
255
- exports[`Storybook Tests react/TextField Invalid 1`] = `
255
+ exports[`Storybook Tests > react/TextField > Invalid 1`] = `
256
256
  <div
257
257
  data-dark={false}
258
258
  >
@@ -263,7 +263,7 @@ exports[`Storybook Tests react/TextField Invalid 1`] = `
263
263
  <div
264
264
  className="charcoal-field-label-root"
265
265
  style={
266
- {
266
+ Object {
267
267
  "border": 0,
268
268
  "clip": "rect(0 0 0 0)",
269
269
  "clipPath": "inset(50%)",
@@ -317,7 +317,7 @@ exports[`Storybook Tests react/TextField Invalid 1`] = `
317
317
  </div>
318
318
  `;
319
319
 
320
- exports[`Storybook Tests react/TextField Label 1`] = `
320
+ exports[`Storybook Tests > react/TextField > Label 1`] = `
321
321
  <div
322
322
  data-dark={false}
323
323
  >
@@ -359,7 +359,7 @@ exports[`Storybook Tests react/TextField Label 1`] = `
359
359
  </div>
360
360
  `;
361
361
 
362
- exports[`Storybook Tests react/TextField Number 1`] = `
362
+ exports[`Storybook Tests > react/TextField > Number 1`] = `
363
363
  <div
364
364
  data-dark={false}
365
365
  >
@@ -370,7 +370,7 @@ exports[`Storybook Tests react/TextField Number 1`] = `
370
370
  <div
371
371
  className="charcoal-field-label-root"
372
372
  style={
373
- {
373
+ Object {
374
374
  "border": 0,
375
375
  "clip": "rect(0 0 0 0)",
376
376
  "clipPath": "inset(50%)",
@@ -417,7 +417,7 @@ exports[`Storybook Tests react/TextField Number 1`] = `
417
417
  </div>
418
418
  `;
419
419
 
420
- exports[`Storybook Tests react/TextField Placeholder 1`] = `
420
+ exports[`Storybook Tests > react/TextField > Placeholder 1`] = `
421
421
  <div
422
422
  data-dark={false}
423
423
  >
@@ -428,7 +428,7 @@ exports[`Storybook Tests react/TextField Placeholder 1`] = `
428
428
  <div
429
429
  className="charcoal-field-label-root"
430
430
  style={
431
- {
431
+ Object {
432
432
  "border": 0,
433
433
  "clip": "rect(0 0 0 0)",
434
434
  "clipPath": "inset(50%)",
@@ -474,7 +474,7 @@ exports[`Storybook Tests react/TextField Placeholder 1`] = `
474
474
  </div>
475
475
  `;
476
476
 
477
- exports[`Storybook Tests react/TextField Prefix 1`] = `
477
+ exports[`Storybook Tests > react/TextField > Prefix 1`] = `
478
478
  <div
479
479
  data-dark={false}
480
480
  >
@@ -485,7 +485,7 @@ exports[`Storybook Tests react/TextField Prefix 1`] = `
485
485
  <div
486
486
  className="charcoal-field-label-root"
487
487
  style={
488
- {
488
+ Object {
489
489
  "border": 0,
490
490
  "clip": "rect(0 0 0 0)",
491
491
  "clipPath": "inset(50%)",
@@ -521,7 +521,7 @@ exports[`Storybook Tests react/TextField Prefix 1`] = `
521
521
  >
522
522
  <div
523
523
  style={
524
- {
524
+ Object {
525
525
  "alignItems": "center",
526
526
  "color": "var(--charcoal-text3)",
527
527
  "display": "flex",
@@ -547,7 +547,7 @@ exports[`Storybook Tests react/TextField Prefix 1`] = `
547
547
  </div>
548
548
  `;
549
549
 
550
- exports[`Storybook Tests react/TextField ReadOnly 1`] = `
550
+ exports[`Storybook Tests > react/TextField > ReadOnly 1`] = `
551
551
  <div
552
552
  data-dark={false}
553
553
  >
@@ -558,7 +558,7 @@ exports[`Storybook Tests react/TextField ReadOnly 1`] = `
558
558
  <div
559
559
  className="charcoal-field-label-root"
560
560
  style={
561
- {
561
+ Object {
562
562
  "border": 0,
563
563
  "clip": "rect(0 0 0 0)",
564
564
  "clipPath": "inset(50%)",
@@ -605,7 +605,7 @@ exports[`Storybook Tests react/TextField ReadOnly 1`] = `
605
605
  </div>
606
606
  `;
607
607
 
608
- exports[`Storybook Tests react/TextField RequiredText 1`] = `
608
+ exports[`Storybook Tests > react/TextField > RequiredText 1`] = `
609
609
  <div
610
610
  data-dark={false}
611
611
  >
@@ -652,7 +652,7 @@ exports[`Storybook Tests react/TextField RequiredText 1`] = `
652
652
  </div>
653
653
  `;
654
654
 
655
- exports[`Storybook Tests react/TextField ShowCount 1`] = `
655
+ exports[`Storybook Tests > react/TextField > ShowCount 1`] = `
656
656
  <div
657
657
  data-dark={false}
658
658
  >
@@ -663,7 +663,7 @@ exports[`Storybook Tests react/TextField ShowCount 1`] = `
663
663
  <div
664
664
  className="charcoal-field-label-root"
665
665
  style={
666
- {
666
+ Object {
667
667
  "border": 0,
668
668
  "clip": "rect(0 0 0 0)",
669
669
  "clipPath": "inset(50%)",
@@ -718,7 +718,7 @@ exports[`Storybook Tests react/TextField ShowCount 1`] = `
718
718
  </div>
719
719
  `;
720
720
 
721
- exports[`Storybook Tests react/TextField SubLabel 1`] = `
721
+ exports[`Storybook Tests > react/TextField > SubLabel 1`] = `
722
722
  <div
723
723
  data-dark={false}
724
724
  >
@@ -729,7 +729,7 @@ exports[`Storybook Tests react/TextField SubLabel 1`] = `
729
729
  <div
730
730
  className="charcoal-field-label-root"
731
731
  style={
732
- {
732
+ Object {
733
733
  "border": 0,
734
734
  "clip": "rect(0 0 0 0)",
735
735
  "clipPath": "inset(50%)",