@patternfly/react-core 4.232.13 → 4.233.0

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 (48) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/esm/components/ExpandableSection/ExpandableSection.d.ts +17 -3
  3. package/dist/esm/components/ExpandableSection/ExpandableSection.d.ts.map +1 -1
  4. package/dist/esm/components/ExpandableSection/ExpandableSection.js +39 -8
  5. package/dist/esm/components/ExpandableSection/ExpandableSection.js.map +1 -1
  6. package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.d.ts +2 -0
  7. package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.d.ts.map +1 -1
  8. package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.js +4 -4
  9. package/dist/esm/components/ExpandableSection/ExpandableSectionToggle.js.map +1 -1
  10. package/dist/esm/components/InputGroup/InputGroup.d.ts.map +1 -1
  11. package/dist/esm/components/InputGroup/InputGroup.js +5 -3
  12. package/dist/esm/components/InputGroup/InputGroup.js.map +1 -1
  13. package/dist/esm/components/NumberInput/NumberInput.d.ts +5 -0
  14. package/dist/esm/components/NumberInput/NumberInput.d.ts.map +1 -1
  15. package/dist/esm/components/NumberInput/NumberInput.js +5 -4
  16. package/dist/esm/components/NumberInput/NumberInput.js.map +1 -1
  17. package/dist/js/components/ExpandableSection/ExpandableSection.d.ts +17 -3
  18. package/dist/js/components/ExpandableSection/ExpandableSection.d.ts.map +1 -1
  19. package/dist/js/components/ExpandableSection/ExpandableSection.js +40 -9
  20. package/dist/js/components/ExpandableSection/ExpandableSection.js.map +1 -1
  21. package/dist/js/components/ExpandableSection/ExpandableSectionToggle.d.ts +2 -0
  22. package/dist/js/components/ExpandableSection/ExpandableSectionToggle.d.ts.map +1 -1
  23. package/dist/js/components/ExpandableSection/ExpandableSectionToggle.js +4 -4
  24. package/dist/js/components/ExpandableSection/ExpandableSectionToggle.js.map +1 -1
  25. package/dist/js/components/InputGroup/InputGroup.d.ts.map +1 -1
  26. package/dist/js/components/InputGroup/InputGroup.js +5 -3
  27. package/dist/js/components/InputGroup/InputGroup.js.map +1 -1
  28. package/dist/js/components/NumberInput/NumberInput.d.ts +5 -0
  29. package/dist/js/components/NumberInput/NumberInput.d.ts.map +1 -1
  30. package/dist/js/components/NumberInput/NumberInput.js +4 -3
  31. package/dist/js/components/NumberInput/NumberInput.js.map +1 -1
  32. package/dist/umd/react-core.css +69 -69
  33. package/dist/umd/react-core.js +56 -18
  34. package/dist/umd/react-core.min.css +921 -921
  35. package/dist/umd/react-core.min.js +5 -5
  36. package/package.json +6 -6
  37. package/src/components/ExpandableSection/ExpandableSection.tsx +73 -19
  38. package/src/components/ExpandableSection/ExpandableSectionToggle.tsx +15 -9
  39. package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx +27 -1
  40. package/src/components/ExpandableSection/examples/ExpandableSection.md +7 -0
  41. package/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx +27 -0
  42. package/src/components/InputGroup/InputGroup.tsx +5 -3
  43. package/src/components/InputGroup/__tests__/InputGroup.test.tsx +30 -0
  44. package/src/components/NumberInput/NumberInput.tsx +14 -8
  45. package/src/components/NumberInput/__tests__/NumberInput.test.tsx +16 -0
  46. package/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap +292 -18
  47. package/src/components/NumberInput/examples/NumberInput.md +5 -0
  48. package/src/components/NumberInput/examples/WithStatus.tsx +59 -0
package/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snap CHANGED
@@ -12,7 +12,7 @@ exports[`numberInput disables lower threshold 1`] = `
12
12
  aria-disabled="true"
13
13
  aria-label="Minus"
14
14
  class="pf-c-button pf-m-control pf-m-disabled"
15
- data-ouia-component-id="OUIA-Generated-Button-control-7"
15
+ data-ouia-component-id="OUIA-Generated-Button-control-13"
16
16
  data-ouia-component-type="PF4/Button"
17
17
  data-ouia-safe="true"
18
18
  disabled=""
@@ -37,8 +37,12 @@ exports[`numberInput disables lower threshold 1`] = `
37
37
  </span>
38
38
  </button>
39
39
  <input
40
+ aria-invalid="false"
40
41
  aria-label="Input"
41
42
  class="pf-c-form-control"
43
+ data-ouia-component-id="OUIA-Generated-TextInputBase-7"
44
+ data-ouia-component-type="PF4/TextInput"
45
+ data-ouia-safe="true"
42
46
  readonly=""
43
47
  type="number"
44
48
  value="0"
@@ -47,7 +51,7 @@ exports[`numberInput disables lower threshold 1`] = `
47
51
  aria-disabled="false"
48
52
  aria-label="Plus"
49
53
  class="pf-c-button pf-m-control"
50
- data-ouia-component-id="OUIA-Generated-Button-control-8"
54
+ data-ouia-component-id="OUIA-Generated-Button-control-14"
51
55
  data-ouia-component-type="PF4/Button"
52
56
  data-ouia-safe="true"
53
57
  type="button"
@@ -87,7 +91,7 @@ exports[`numberInput disables upper threshold 1`] = `
87
91
  aria-disabled="false"
88
92
  aria-label="Minus"
89
93
  class="pf-c-button pf-m-control"
90
- data-ouia-component-id="OUIA-Generated-Button-control-9"
94
+ data-ouia-component-id="OUIA-Generated-Button-control-15"
91
95
  data-ouia-component-type="PF4/Button"
92
96
  data-ouia-safe="true"
93
97
  type="button"
@@ -111,8 +115,12 @@ exports[`numberInput disables upper threshold 1`] = `
111
115
  </span>
112
116
  </button>
113
117
  <input
118
+ aria-invalid="false"
114
119
  aria-label="Input"
115
120
  class="pf-c-form-control"
121
+ data-ouia-component-id="OUIA-Generated-TextInputBase-8"
122
+ data-ouia-component-type="PF4/TextInput"
123
+ data-ouia-safe="true"
116
124
  readonly=""
117
125
  type="number"
118
126
  value="100"
@@ -121,7 +129,7 @@ exports[`numberInput disables upper threshold 1`] = `
121
129
  aria-disabled="true"
122
130
  aria-label="Plus"
123
131
  class="pf-c-button pf-m-control pf-m-disabled"
124
- data-ouia-component-id="OUIA-Generated-Button-control-10"
132
+ data-ouia-component-id="OUIA-Generated-Button-control-16"
125
133
  data-ouia-component-type="PF4/Button"
126
134
  data-ouia-safe="true"
127
135
  disabled=""
@@ -162,7 +170,7 @@ exports[`numberInput passes button props successfully 1`] = `
162
170
  aria-disabled="false"
163
171
  aria-label="Minus"
164
172
  class="pf-c-button pf-m-control"
165
- data-ouia-component-id="OUIA-Generated-Button-control-19"
173
+ data-ouia-component-id="OUIA-Generated-Button-control-25"
166
174
  data-ouia-component-type="PF4/Button"
167
175
  data-ouia-safe="true"
168
176
  id="minus-id"
@@ -187,8 +195,12 @@ exports[`numberInput passes button props successfully 1`] = `
187
195
  </span>
188
196
  </button>
189
197
  <input
198
+ aria-invalid="false"
190
199
  aria-label="Input"
191
200
  class="pf-c-form-control"
201
+ data-ouia-component-id="OUIA-Generated-TextInputBase-13"
202
+ data-ouia-component-type="PF4/TextInput"
203
+ data-ouia-safe="true"
192
204
  readonly=""
193
205
  type="number"
194
206
  value="5"
@@ -197,7 +209,7 @@ exports[`numberInput passes button props successfully 1`] = `
197
209
  aria-disabled="false"
198
210
  aria-label="Plus"
199
211
  class="pf-c-button pf-m-control"
200
- data-ouia-component-id="OUIA-Generated-Button-control-20"
212
+ data-ouia-component-id="OUIA-Generated-Button-control-26"
201
213
  data-ouia-component-type="PF4/Button"
202
214
  data-ouia-safe="true"
203
215
  id="plus-id"
@@ -238,7 +250,7 @@ exports[`numberInput passes input props successfully 1`] = `
238
250
  aria-disabled="false"
239
251
  aria-label="Minus"
240
252
  class="pf-c-button pf-m-control"
241
- data-ouia-component-id="OUIA-Generated-Button-control-17"
253
+ data-ouia-component-id="OUIA-Generated-Button-control-23"
242
254
  data-ouia-component-type="PF4/Button"
243
255
  data-ouia-safe="true"
244
256
  type="button"
@@ -262,8 +274,12 @@ exports[`numberInput passes input props successfully 1`] = `
262
274
  </span>
263
275
  </button>
264
276
  <input
277
+ aria-invalid="false"
265
278
  aria-label="Input"
266
279
  class="pf-c-form-control"
280
+ data-ouia-component-id="OUIA-Generated-TextInputBase-12"
281
+ data-ouia-component-type="PF4/TextInput"
282
+ data-ouia-safe="true"
267
283
  name="test-name"
268
284
  type="number"
269
285
  value="5"
@@ -272,7 +288,7 @@ exports[`numberInput passes input props successfully 1`] = `
272
288
  aria-disabled="false"
273
289
  aria-label="Plus"
274
290
  class="pf-c-button pf-m-control"
275
- data-ouia-component-id="OUIA-Generated-Button-control-18"
291
+ data-ouia-component-id="OUIA-Generated-Button-control-24"
276
292
  data-ouia-component-type="PF4/Button"
277
293
  data-ouia-safe="true"
278
294
  type="button"
@@ -313,7 +329,7 @@ exports[`numberInput renders custom width 1`] = `
313
329
  aria-disabled="false"
314
330
  aria-label="Minus"
315
331
  class="pf-c-button pf-m-control"
316
- data-ouia-component-id="OUIA-Generated-Button-control-15"
332
+ data-ouia-component-id="OUIA-Generated-Button-control-21"
317
333
  data-ouia-component-type="PF4/Button"
318
334
  data-ouia-safe="true"
319
335
  type="button"
@@ -337,8 +353,12 @@ exports[`numberInput renders custom width 1`] = `
337
353
  </span>
338
354
  </button>
339
355
  <input
356
+ aria-invalid="false"
340
357
  aria-label="Input"
341
358
  class="pf-c-form-control"
359
+ data-ouia-component-id="OUIA-Generated-TextInputBase-11"
360
+ data-ouia-component-type="PF4/TextInput"
361
+ data-ouia-safe="true"
342
362
  readonly=""
343
363
  type="number"
344
364
  value="5"
@@ -347,7 +367,7 @@ exports[`numberInput renders custom width 1`] = `
347
367
  aria-disabled="false"
348
368
  aria-label="Plus"
349
369
  class="pf-c-button pf-m-control"
350
- data-ouia-component-id="OUIA-Generated-Button-control-16"
370
+ data-ouia-component-id="OUIA-Generated-Button-control-22"
351
371
  data-ouia-component-type="PF4/Button"
352
372
  data-ouia-safe="true"
353
373
  type="button"
@@ -412,8 +432,12 @@ exports[`numberInput renders defaults & extra props 1`] = `
412
432
  </span>
413
433
  </button>
414
434
  <input
435
+ aria-invalid="false"
415
436
  aria-label="Input"
416
437
  class="pf-c-form-control"
438
+ data-ouia-component-id="OUIA-Generated-TextInputBase-1"
439
+ data-ouia-component-type="PF4/TextInput"
440
+ data-ouia-safe="true"
417
441
  readonly=""
418
442
  type="number"
419
443
  value="0"
@@ -462,7 +486,7 @@ exports[`numberInput renders disabled 1`] = `
462
486
  aria-disabled="true"
463
487
  aria-label="Minus"
464
488
  class="pf-c-button pf-m-control pf-m-disabled"
465
- data-ouia-component-id="OUIA-Generated-Button-control-5"
489
+ data-ouia-component-id="OUIA-Generated-Button-control-11"
466
490
  data-ouia-component-type="PF4/Button"
467
491
  data-ouia-safe="true"
468
492
  disabled=""
@@ -487,8 +511,12 @@ exports[`numberInput renders disabled 1`] = `
487
511
  </span>
488
512
  </button>
489
513
  <input
514
+ aria-invalid="false"
490
515
  aria-label="Input"
491
516
  class="pf-c-form-control"
517
+ data-ouia-component-id="OUIA-Generated-TextInputBase-6"
518
+ data-ouia-component-type="PF4/TextInput"
519
+ data-ouia-safe="true"
492
520
  disabled=""
493
521
  readonly=""
494
522
  type="number"
@@ -498,7 +526,7 @@ exports[`numberInput renders disabled 1`] = `
498
526
  aria-disabled="true"
499
527
  aria-label="Plus"
500
528
  class="pf-c-button pf-m-control pf-m-disabled"
501
- data-ouia-component-id="OUIA-Generated-Button-control-6"
529
+ data-ouia-component-id="OUIA-Generated-Button-control-12"
502
530
  data-ouia-component-type="PF4/Button"
503
531
  data-ouia-safe="true"
504
532
  disabled=""
@@ -527,6 +555,162 @@ exports[`numberInput renders disabled 1`] = `
527
555
  </DocumentFragment>
528
556
  `;
529
557
 
558
+ exports[`numberInput renders error validated 1`] = `
559
+ <DocumentFragment>
560
+ <div
561
+ class="pf-c-number-input pf-m-status"
562
+ >
563
+ <div
564
+ class="pf-c-input-group"
565
+ >
566
+ <button
567
+ aria-disabled="false"
568
+ aria-label="Minus"
569
+ class="pf-c-button pf-m-control"
570
+ data-ouia-component-id="OUIA-Generated-Button-control-5"
571
+ data-ouia-component-type="PF4/Button"
572
+ data-ouia-safe="true"
573
+ type="button"
574
+ >
575
+ <span
576
+ class="pf-c-number-input__icon"
577
+ >
578
+ <svg
579
+ aria-hidden="true"
580
+ fill="currentColor"
581
+ height="1em"
582
+ role="img"
583
+ style="vertical-align: -0.125em;"
584
+ viewBox="0 0 448 512"
585
+ width="1em"
586
+ >
587
+ <path
588
+ d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
589
+ />
590
+ </svg>
591
+ </span>
592
+ </button>
593
+ <input
594
+ aria-invalid="true"
595
+ aria-label="Input"
596
+ class="pf-c-form-control"
597
+ data-ouia-component-id="OUIA-Generated-TextInputBase-3"
598
+ data-ouia-component-type="PF4/TextInput"
599
+ data-ouia-safe="true"
600
+ readonly=""
601
+ type="number"
602
+ value="0"
603
+ />
604
+ <button
605
+ aria-disabled="false"
606
+ aria-label="Plus"
607
+ class="pf-c-button pf-m-control"
608
+ data-ouia-component-id="OUIA-Generated-Button-control-6"
609
+ data-ouia-component-type="PF4/Button"
610
+ data-ouia-safe="true"
611
+ type="button"
612
+ >
613
+ <span
614
+ class="pf-c-number-input__icon"
615
+ >
616
+ <svg
617
+ aria-hidden="true"
618
+ fill="currentColor"
619
+ height="1em"
620
+ role="img"
621
+ style="vertical-align: -0.125em;"
622
+ viewBox="0 0 448 512"
623
+ width="1em"
624
+ >
625
+ <path
626
+ d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
627
+ />
628
+ </svg>
629
+ </span>
630
+ </button>
631
+ </div>
632
+ </div>
633
+ </DocumentFragment>
634
+ `;
635
+
636
+ exports[`numberInput renders success validated 1`] = `
637
+ <DocumentFragment>
638
+ <div
639
+ class="pf-c-number-input pf-m-status"
640
+ >
641
+ <div
642
+ class="pf-c-input-group"
643
+ >
644
+ <button
645
+ aria-disabled="false"
646
+ aria-label="Minus"
647
+ class="pf-c-button pf-m-control"
648
+ data-ouia-component-id="OUIA-Generated-Button-control-3"
649
+ data-ouia-component-type="PF4/Button"
650
+ data-ouia-safe="true"
651
+ type="button"
652
+ >
653
+ <span
654
+ class="pf-c-number-input__icon"
655
+ >
656
+ <svg
657
+ aria-hidden="true"
658
+ fill="currentColor"
659
+ height="1em"
660
+ role="img"
661
+ style="vertical-align: -0.125em;"
662
+ viewBox="0 0 448 512"
663
+ width="1em"
664
+ >
665
+ <path
666
+ d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
667
+ />
668
+ </svg>
669
+ </span>
670
+ </button>
671
+ <input
672
+ aria-invalid="false"
673
+ aria-label="Input"
674
+ class="pf-c-form-control pf-m-success"
675
+ data-ouia-component-id="OUIA-Generated-TextInputBase-2"
676
+ data-ouia-component-type="PF4/TextInput"
677
+ data-ouia-safe="true"
678
+ readonly=""
679
+ type="number"
680
+ value="0"
681
+ />
682
+ <button
683
+ aria-disabled="false"
684
+ aria-label="Plus"
685
+ class="pf-c-button pf-m-control"
686
+ data-ouia-component-id="OUIA-Generated-Button-control-4"
687
+ data-ouia-component-type="PF4/Button"
688
+ data-ouia-safe="true"
689
+ type="button"
690
+ >
691
+ <span
692
+ class="pf-c-number-input__icon"
693
+ >
694
+ <svg
695
+ aria-hidden="true"
696
+ fill="currentColor"
697
+ height="1em"
698
+ role="img"
699
+ style="vertical-align: -0.125em;"
700
+ viewBox="0 0 448 512"
701
+ width="1em"
702
+ >
703
+ <path
704
+ d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
705
+ />
706
+ </svg>
707
+ </span>
708
+ </button>
709
+ </div>
710
+ </div>
711
+ </DocumentFragment>
712
+ `;
713
+
530
714
  exports[`numberInput renders unit & position 1`] = `
531
715
  <DocumentFragment>
532
716
  <div
@@ -544,7 +728,7 @@ exports[`numberInput renders unit & position 1`] = `
544
728
  aria-disabled="false"
545
729
  aria-label="Minus"
546
730
  class="pf-c-button pf-m-control"
547
- data-ouia-component-id="OUIA-Generated-Button-control-13"
731
+ data-ouia-component-id="OUIA-Generated-Button-control-19"
548
732
  data-ouia-component-type="PF4/Button"
549
733
  data-ouia-safe="true"
550
734
  type="button"
@@ -568,8 +752,12 @@ exports[`numberInput renders unit & position 1`] = `
568
752
  </span>
569
753
  </button>
570
754
  <input
755
+ aria-invalid="false"
571
756
  aria-label="Input"
572
757
  class="pf-c-form-control"
758
+ data-ouia-component-id="OUIA-Generated-TextInputBase-10"
759
+ data-ouia-component-type="PF4/TextInput"
760
+ data-ouia-safe="true"
573
761
  readonly=""
574
762
  type="number"
575
763
  value="5"
@@ -578,7 +766,7 @@ exports[`numberInput renders unit & position 1`] = `
578
766
  aria-disabled="false"
579
767
  aria-label="Plus"
580
768
  class="pf-c-button pf-m-control"
581
- data-ouia-component-id="OUIA-Generated-Button-control-14"
769
+ data-ouia-component-id="OUIA-Generated-Button-control-20"
582
770
  data-ouia-component-type="PF4/Button"
583
771
  data-ouia-safe="true"
584
772
  type="button"
@@ -618,7 +806,7 @@ exports[`numberInput renders unit 1`] = `
618
806
  aria-disabled="false"
619
807
  aria-label="Minus"
620
808
  class="pf-c-button pf-m-control"
621
- data-ouia-component-id="OUIA-Generated-Button-control-11"
809
+ data-ouia-component-id="OUIA-Generated-Button-control-17"
622
810
  data-ouia-component-type="PF4/Button"
623
811
  data-ouia-safe="true"
624
812
  type="button"
@@ -642,8 +830,12 @@ exports[`numberInput renders unit 1`] = `
642
830
  </span>
643
831
  </button>
644
832
  <input
833
+ aria-invalid="false"
645
834
  aria-label="Input"
646
835
  class="pf-c-form-control"
836
+ data-ouia-component-id="OUIA-Generated-TextInputBase-9"
837
+ data-ouia-component-type="PF4/TextInput"
838
+ data-ouia-safe="true"
647
839
  readonly=""
648
840
  type="number"
649
841
  value="5"
@@ -652,7 +844,7 @@ exports[`numberInput renders unit 1`] = `
652
844
  aria-disabled="false"
653
845
  aria-label="Plus"
654
846
  class="pf-c-button pf-m-control"
655
- data-ouia-component-id="OUIA-Generated-Button-control-12"
847
+ data-ouia-component-id="OUIA-Generated-Button-control-18"
656
848
  data-ouia-component-type="PF4/Button"
657
849
  data-ouia-safe="true"
658
850
  type="button"
@@ -697,7 +889,7 @@ exports[`numberInput renders value 1`] = `
697
889
  aria-disabled="false"
698
890
  aria-label="Minus"
699
891
  class="pf-c-button pf-m-control"
700
- data-ouia-component-id="OUIA-Generated-Button-control-3"
892
+ data-ouia-component-id="OUIA-Generated-Button-control-9"
701
893
  data-ouia-component-type="PF4/Button"
702
894
  data-ouia-safe="true"
703
895
  type="button"
@@ -721,8 +913,12 @@ exports[`numberInput renders value 1`] = `
721
913
  </span>
722
914
  </button>
723
915
  <input
916
+ aria-invalid="false"
724
917
  aria-label="Input"
725
918
  class="pf-c-form-control"
919
+ data-ouia-component-id="OUIA-Generated-TextInputBase-5"
920
+ data-ouia-component-type="PF4/TextInput"
921
+ data-ouia-safe="true"
726
922
  readonly=""
727
923
  type="number"
728
924
  value="90"
@@ -731,7 +927,85 @@ exports[`numberInput renders value 1`] = `
731
927
  aria-disabled="false"
732
928
  aria-label="Plus"
733
929
  class="pf-c-button pf-m-control"
734
- data-ouia-component-id="OUIA-Generated-Button-control-4"
930
+ data-ouia-component-id="OUIA-Generated-Button-control-10"
931
+ data-ouia-component-type="PF4/Button"
932
+ data-ouia-safe="true"
933
+ type="button"
934
+ >
935
+ <span
936
+ class="pf-c-number-input__icon"
937
+ >
938
+ <svg
939
+ aria-hidden="true"
940
+ fill="currentColor"
941
+ height="1em"
942
+ role="img"
943
+ style="vertical-align: -0.125em;"
944
+ viewBox="0 0 448 512"
945
+ width="1em"
946
+ >
947
+ <path
948
+ d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
949
+ />
950
+ </svg>
951
+ </span>
952
+ </button>
953
+ </div>
954
+ </div>
955
+ </DocumentFragment>
956
+ `;
957
+
958
+ exports[`numberInput renders warning validated 1`] = `
959
+ <DocumentFragment>
960
+ <div
961
+ class="pf-c-number-input pf-m-status"
962
+ >
963
+ <div
964
+ class="pf-c-input-group"
965
+ >
966
+ <button
967
+ aria-disabled="false"
968
+ aria-label="Minus"
969
+ class="pf-c-button pf-m-control"
970
+ data-ouia-component-id="OUIA-Generated-Button-control-7"
971
+ data-ouia-component-type="PF4/Button"
972
+ data-ouia-safe="true"
973
+ type="button"
974
+ >
975
+ <span
976
+ class="pf-c-number-input__icon"
977
+ >
978
+ <svg
979
+ aria-hidden="true"
980
+ fill="currentColor"
981
+ height="1em"
982
+ role="img"
983
+ style="vertical-align: -0.125em;"
984
+ viewBox="0 0 448 512"
985
+ width="1em"
986
+ >
987
+ <path
988
+ d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
989
+ />
990
+ </svg>
991
+ </span>
992
+ </button>
993
+ <input
994
+ aria-invalid="false"
995
+ aria-label="Input"
996
+ class="pf-c-form-control pf-m-warning"
997
+ data-ouia-component-id="OUIA-Generated-TextInputBase-4"
998
+ data-ouia-component-type="PF4/TextInput"
999
+ data-ouia-safe="true"
1000
+ readonly=""
1001
+ type="number"
1002
+ value="0"
1003
+ />
1004
+ <button
1005
+ aria-disabled="false"
1006
+ aria-label="Plus"
1007
+ class="pf-c-button pf-m-control"
1008
+ data-ouia-component-id="OUIA-Generated-Button-control-8"
735
1009
  data-ouia-component-type="PF4/Button"
736
1010
  data-ouia-safe="true"
737
1011
  type="button"
package/src/components/NumberInput/examples/NumberInput.md CHANGED
@@ -270,6 +270,11 @@ class DisabledNumberInput extends React.Component {
270
270
  );
271
271
  }
272
272
  }
273
+
274
+ ```
275
+ ### With status
276
+
277
+ ```ts file="./WithStatus.tsx"
273
278
  ```
274
279
 
275
280
  ### Varying sizes
package/src/components/NumberInput/examples/WithStatus.tsx ADDED
@@ -0,0 +1,59 @@
1
+ import React from 'react';
2
+ import { NumberInput, ValidatedOptions } from '@patternfly/react-core';
3
+
4
+ export const WithStatus: React.FunctionComponent = () => {
5
+ const max = 10;
6
+ const min = 0;
7
+
8
+ const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.success);
9
+ const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);
10
+
11
+ const onPlus = () => {
12
+ const newVal = value + 1;
13
+ setValue(newVal);
14
+ validate(newVal);
15
+ };
16
+
17
+ const onMinus = () => {
18
+ const newVal = value - 1;
19
+ setValue(newVal);
20
+ validate(newVal);
21
+ };
22
+
23
+ const onChange = event => {
24
+ const newVal = isNaN(event.target.value) ? 5 : Number(event.target.value);
25
+ setValue(newVal);
26
+ validate(newVal);
27
+ };
28
+
29
+ const validate = newVal => {
30
+ const diff = Math.abs(5 - newVal);
31
+ if (diff > 3) {
32
+ setValidated(ValidatedOptions.error);
33
+ } else if (diff > 1) {
34
+ setValidated(ValidatedOptions.warning);
35
+ } else {
36
+ setValidated(ValidatedOptions.success);
37
+ }
38
+ };
39
+ return (
40
+ <>
41
+ In the following example, the validated status will update based on the value of the number input and how far from
42
+ the number 5 it is.
43
+ <br />
44
+ <NumberInput
45
+ validated={validated}
46
+ value={value}
47
+ min={0}
48
+ max={10}
49
+ onMinus={onMinus}
50
+ onPlus={onPlus}
51
+ onChange={onChange}
52
+ inputName="input"
53
+ inputAriaLabel="number input"
54
+ minusBtnAriaLabel="minus"
55
+ plusBtnAriaLabel="plus"
56
+ />
57
+ </>
58
+ );
59
+ };