@patternfly/patternfly 5.0.0-alpha.66 → 5.0.0-alpha.68

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 (99) hide show
  1. package/base/_variables.scss +1 -1
  2. package/base/patternfly-globals.css +1 -1
  3. package/base/patternfly-variables.css +2 -2
  4. package/components/AboutModalBox/about-modal-box.css +2 -2
  5. package/components/Accordion/accordion.css +1 -1
  6. package/components/Alert/alert.css +1 -1
  7. package/components/AppLauncher/app-launcher.css +1 -1
  8. package/components/Badge/badge.css +1 -1
  9. package/components/Banner/banner.css +3 -3
  10. package/components/Button/button.css +2 -2
  11. package/components/CalendarMonth/calendar-month.css +3 -3
  12. package/components/Card/card.css +2 -2
  13. package/components/Chip/chip.css +1 -1
  14. package/components/ClipboardCopy/clipboard-copy.css +3 -3
  15. package/components/CodeEditor/code-editor.css +1 -1
  16. package/components/ContextSelector/context-selector.css +5 -5
  17. package/components/DataList/data-list.css +1 -1
  18. package/components/DatePicker/date-picker.css +1 -1
  19. package/components/DragDrop/drag-drop.css +1 -1
  20. package/components/Drawer/drawer.css +2 -2
  21. package/components/Dropdown/dropdown.css +3 -3
  22. package/components/DualListSelector/dual-list-selector.css +1 -1
  23. package/components/Form/form.css +1 -1
  24. package/components/FormControl/form-control.css +3 -3
  25. package/components/HelperText/helper-text.css +1 -1
  26. package/components/Hint/hint.css +1 -1
  27. package/components/InputGroup/input-group.css +2 -4
  28. package/components/InputGroup/input-group.scss +0 -4
  29. package/components/Label/label.css +1 -1
  30. package/components/LogViewer/log-viewer.css +2 -2
  31. package/components/Login/login.css +5 -5
  32. package/components/Masthead/masthead.css +3 -3
  33. package/components/Menu/menu.css +1 -1
  34. package/components/MenuToggle/menu-toggle.css +2 -2
  35. package/components/ModalBox/modal-box.css +1 -1
  36. package/components/Nav/nav.css +6 -6
  37. package/components/NotificationBadge/notification-badge.css +1 -1
  38. package/components/NotificationDrawer/notification-drawer.css +1 -1
  39. package/components/NumberInput/number-input.css +4 -2
  40. package/components/NumberInput/number-input.scss +5 -2
  41. package/components/OptionsMenu/options-menu.css +2 -2
  42. package/components/Page/page.css +14 -14
  43. package/components/Pagination/pagination.css +6 -4
  44. package/components/Pagination/pagination.scss +7 -1
  45. package/components/Panel/panel.css +1 -1
  46. package/components/Popover/popover.css +1 -1
  47. package/components/Progress/progress.css +1 -1
  48. package/components/Select/select.css +2 -2
  49. package/components/SimpleList/simple-list.css +1 -1
  50. package/components/Skeleton/skeleton.css +1 -1
  51. package/components/Switch/switch.css +1 -1
  52. package/components/Table/table.css +2 -2
  53. package/components/Tabs/tabs.css +1 -1
  54. package/components/TextInputGroup/text-input-group.css +1 -1
  55. package/components/Tile/tile.css +1 -1
  56. package/components/ToggleGroup/toggle-group.css +1 -1
  57. package/components/Tooltip/tooltip.css +1 -1
  58. package/components/TreeView/tree-view.css +1 -1
  59. package/components/Wizard/wizard.css +3 -3
  60. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +4 -4
  61. package/docs/components/DatePicker/examples/DatePicker.md +6 -1
  62. package/docs/components/FileUpload/examples/FileUpload.md +21 -16
  63. package/docs/components/Form/examples/Form.md +51 -31
  64. package/docs/components/FormControl/examples/FormControl.md +1 -1
  65. package/docs/components/InlineEdit/examples/InlineEdit.md +11 -156
  66. package/docs/components/InputGroup/examples/InputGroup.md +9 -4
  67. package/docs/components/Login/examples/Login.md +20 -17
  68. package/docs/components/NumberInput/examples/NumberInput.md +7 -2
  69. package/docs/components/Pagination/examples/Pagination.md +1 -1
  70. package/docs/components/Select/examples/Select.md +4 -2
  71. package/docs/components/Wizard/examples/Wizard.md +7 -70
  72. package/docs/demos/Alert/examples/Alert.md +26 -8
  73. package/docs/demos/Button/examples/Button.md +12 -12
  74. package/docs/demos/Form/examples/BasicForms.md +18 -18
  75. package/docs/demos/HelperText/examples/HelperText.md +18 -3
  76. package/docs/demos/Modal/examples/Modal.md +6 -6
  77. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  78. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  79. package/docs/demos/Toolbar/examples/Toolbar.md +11 -1
  80. package/docs/demos/Wizard/examples/Wizard.md +0 -56
  81. package/package.json +1 -1
  82. package/patternfly-addons.css +78 -78
  83. package/patternfly-base-no-globals-theme-dark-unversioned.css +3 -3
  84. package/patternfly-base-no-globals.css +3 -3
  85. package/patternfly-base-theme-dark-unversioned.css +3 -3
  86. package/patternfly-base.css +3 -3
  87. package/patternfly-charts-theme-dark-unversioned.css +1 -1
  88. package/patternfly-charts-theme-dark.css +1 -1
  89. package/patternfly-charts.css +1 -1
  90. package/patternfly-charts.scss +1 -1
  91. package/patternfly-no-globals.css +314 -312
  92. package/patternfly-theme-dark-unversioned.css +314 -312
  93. package/patternfly.css +314 -312
  94. package/patternfly.min.css +1 -1
  95. package/patternfly.min.css.map +1 -1
  96. package/sass-utilities/_init.scss +2 -2
  97. package/themes/dark/_patternfly-charts-theme-dark.scss +1 -1
  98. package/utilities/BackgroundColor/BackgroundColor.css +30 -30
  99. package/utilities/Text/text.css +48 -48
package/docs/components/NumberInput/examples/NumberInput.md CHANGED
@@ -237,13 +237,13 @@ cssPrefix: pf-v5-c-number-input
237
237
  </button>
238
238
  </div>
239
239
  <div class="pf-v5-c-input-group__item pf-m-fill">
240
- <div class="pf-v5-c-form-control">
240
+ <div class="pf-v5-c-form-control pf-m-disabled">
241
241
  <input
242
+ disabled
242
243
  type="number"
243
244
  value="100"
244
245
  name="number-input-disabled-name"
245
246
  aria-label="Number input"
246
- disabled
247
247
  />
248
248
  </div>
249
249
  </div>
@@ -327,6 +327,11 @@ cssPrefix: pf-v5-c-number-input
327
327
  name="number-input-status-warning-name"
328
328
  aria-label="Number input"
329
329
  />
330
+ <div class="pf-v5-c-form-control__utilities">
331
+ <div class="pf-v5-c-form-control__icon pf-m-status">
332
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
333
+ </div>
334
+ </div>
330
335
  </div>
331
336
  </div>
332
337
  <div class="pf-v5-c-input-group__item">
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -732,7 +732,7 @@ cssPrefix: pf-v5-c-pagination
732
732
  </button>
733
733
  </div>
734
734
  <div class="pf-v5-c-pagination__nav-page-select">
735
- <div class="pf-v5-c-form-control">
735
+ <div class="pf-v5-c-form-control pf-m-disabled">
736
736
  <input
737
737
  disabled
738
738
  aria-label="Current page"
package/docs/components/Select/examples/Select.md CHANGED
@@ -764,13 +764,15 @@ The single select should be used when the user is selecting an option from a lis
764
764
 
765
765
  <div class="pf-v5-c-select__toggle pf-m-typeahead pf-m-disabled">
766
766
  <div class="pf-v5-c-select__toggle-wrapper">
767
- <div class="pf-v5-c-form-control pf-v5-c-select__toggle-typeahead">
767
+ <div
768
+ class="pf-v5-c-form-control pf-m-disabled pf-v5-c-select__toggle-typeahead"
769
+ >
768
770
  <input
771
+ disabled
769
772
  type="text"
770
773
  id="select-single-typeahead-disabled-typeahead"
771
774
  aria-label="Type to filter"
772
775
  placeholder="Choose a state"
773
- disabled
774
776
  />
775
777
  </div>
776
778
  </div>
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -94,7 +94,6 @@ wrapperTag: div
94
94
  <div class="pf-v5-c-form__group-control">
95
95
  <div class="pf-v5-c-form-control">
96
96
  <input
97
- required
98
97
  type="text"
99
98
  id="wizard-basic-form-field1"
100
99
  name="wizard-basic-form-field1"
@@ -115,7 +114,6 @@ wrapperTag: div
115
114
  <div class="pf-v5-c-form__group-control">
116
115
  <div class="pf-v5-c-form-control">
117
116
  <input
118
- required
119
117
  type="text"
120
118
  id="wizard-basic-form-field2"
121
119
  name="wizard-basic-form-field2"
@@ -136,7 +134,6 @@ wrapperTag: div
136
134
  <div class="pf-v5-c-form__group-control">
137
135
  <div class="pf-v5-c-form-control">
138
136
  <input
139
- required
140
137
  type="text"
141
138
  id="wizard-basic-form-field3"
142
139
  name="wizard-basic-form-field3"
@@ -157,7 +154,6 @@ wrapperTag: div
157
154
  <div class="pf-v5-c-form__group-control">
158
155
  <div class="pf-v5-c-form-control">
159
156
  <input
160
- required
161
157
  type="text"
162
158
  id="wizard-basic-form-field4"
163
159
  name="wizard-basic-form-field4"
@@ -178,7 +174,6 @@ wrapperTag: div
178
174
  <div class="pf-v5-c-form__group-control">
179
175
  <div class="pf-v5-c-form-control">
180
176
  <input
181
- required
182
177
  type="text"
183
178
  id="wizard-basic-form-field5"
184
179
  name="wizard-basic-form-field5"
@@ -199,7 +194,6 @@ wrapperTag: div
199
194
  <div class="pf-v5-c-form__group-control">
200
195
  <div class="pf-v5-c-form-control">
201
196
  <input
202
- required
203
197
  type="text"
204
198
  id="wizard-basic-form-field6"
205
199
  name="wizard-basic-form-field6"
@@ -220,7 +214,6 @@ wrapperTag: div
220
214
  <div class="pf-v5-c-form__group-control">
221
215
  <div class="pf-v5-c-form-control">
222
216
  <input
223
- required
224
217
  type="text"
225
218
  id="wizard-basic-form-field7"
226
219
  name="wizard-basic-form-field7"
@@ -327,12 +320,7 @@ wrapperTag: div
327
320
  </div>
328
321
  <div class="pf-v5-c-form__group-control">
329
322
  <div class="pf-v5-c-form-control">
330
- <input
331
- required
332
- type="text"
333
- id="-form-field1"
334
- name="-form-field1"
335
- />
323
+ <input type="text" id="-form-field1" name="-form-field1" />
336
324
  </div>
337
325
  </div>
338
326
  </div>
@@ -345,12 +333,7 @@ wrapperTag: div
345
333
  </div>
346
334
  <div class="pf-v5-c-form__group-control">
347
335
  <div class="pf-v5-c-form-control">
348
- <input
349
- required
350
- type="text"
351
- id="-form-field2"
352
- name="-form-field2"
353
- />
336
+ <input type="text" id="-form-field2" name="-form-field2" />
354
337
  </div>
355
338
  </div>
356
339
  </div>
@@ -363,12 +346,7 @@ wrapperTag: div
363
346
  </div>
364
347
  <div class="pf-v5-c-form__group-control">
365
348
  <div class="pf-v5-c-form-control">
366
- <input
367
- required
368
- type="text"
369
- id="-form-field3"
370
- name="-form-field3"
371
- />
349
+ <input type="text" id="-form-field3" name="-form-field3" />
372
350
  </div>
373
351
  </div>
374
352
  </div>
@@ -381,12 +359,7 @@ wrapperTag: div
381
359
  </div>
382
360
  <div class="pf-v5-c-form__group-control">
383
361
  <div class="pf-v5-c-form-control">
384
- <input
385
- required
386
- type="text"
387
- id="-form-field4"
388
- name="-form-field4"
389
- />
362
+ <input type="text" id="-form-field4" name="-form-field4" />
390
363
  </div>
391
364
  </div>
392
365
  </div>
@@ -399,12 +372,7 @@ wrapperTag: div
399
372
  </div>
400
373
  <div class="pf-v5-c-form__group-control">
401
374
  <div class="pf-v5-c-form-control">
402
- <input
403
- required
404
- type="text"
405
- id="-form-field5"
406
- name="-form-field5"
407
- />
375
+ <input type="text" id="-form-field5" name="-form-field5" />
408
376
  </div>
409
377
  </div>
410
378
  </div>
@@ -417,12 +385,7 @@ wrapperTag: div
417
385
  </div>
418
386
  <div class="pf-v5-c-form__group-control">
419
387
  <div class="pf-v5-c-form-control">
420
- <input
421
- required
422
- type="text"
423
- id="-form-field6"
424
- name="-form-field6"
425
- />
388
+ <input type="text" id="-form-field6" name="-form-field6" />
426
389
  </div>
427
390
  </div>
428
391
  </div>
@@ -435,12 +398,7 @@ wrapperTag: div
435
398
  </div>
436
399
  <div class="pf-v5-c-form__group-control">
437
400
  <div class="pf-v5-c-form-control">
438
- <input
439
- required
440
- type="text"
441
- id="-form-field7"
442
- name="-form-field7"
443
- />
401
+ <input type="text" id="-form-field7" name="-form-field7" />
444
402
  </div>
445
403
  </div>
446
404
  </div>
@@ -554,7 +512,6 @@ wrapperTag: div
554
512
  <div class="pf-v5-c-form__group-control">
555
513
  <div class="pf-v5-c-form-control">
556
514
  <input
557
- required
558
515
  type="text"
559
516
  id="wizard-with-drawer-example-form-field1"
560
517
  name="wizard-with-drawer-example-form-field1"
@@ -575,7 +532,6 @@ wrapperTag: div
575
532
  <div class="pf-v5-c-form__group-control">
576
533
  <div class="pf-v5-c-form-control">
577
534
  <input
578
- required
579
535
  type="text"
580
536
  id="wizard-with-drawer-example-form-field2"
581
537
  name="wizard-with-drawer-example-form-field2"
@@ -596,7 +552,6 @@ wrapperTag: div
596
552
  <div class="pf-v5-c-form__group-control">
597
553
  <div class="pf-v5-c-form-control">
598
554
  <input
599
- required
600
555
  type="text"
601
556
  id="wizard-with-drawer-example-form-field3"
602
557
  name="wizard-with-drawer-example-form-field3"
@@ -617,7 +572,6 @@ wrapperTag: div
617
572
  <div class="pf-v5-c-form__group-control">
618
573
  <div class="pf-v5-c-form-control">
619
574
  <input
620
- required
621
575
  type="text"
622
576
  id="wizard-with-drawer-example-form-field4"
623
577
  name="wizard-with-drawer-example-form-field4"
@@ -638,7 +592,6 @@ wrapperTag: div
638
592
  <div class="pf-v5-c-form__group-control">
639
593
  <div class="pf-v5-c-form-control">
640
594
  <input
641
- required
642
595
  type="text"
643
596
  id="wizard-with-drawer-example-form-field5"
644
597
  name="wizard-with-drawer-example-form-field5"
@@ -659,7 +612,6 @@ wrapperTag: div
659
612
  <div class="pf-v5-c-form__group-control">
660
613
  <div class="pf-v5-c-form-control">
661
614
  <input
662
- required
663
615
  type="text"
664
616
  id="wizard-with-drawer-example-form-field6"
665
617
  name="wizard-with-drawer-example-form-field6"
@@ -680,7 +632,6 @@ wrapperTag: div
680
632
  <div class="pf-v5-c-form__group-control">
681
633
  <div class="pf-v5-c-form-control">
682
634
  <input
683
- required
684
635
  type="text"
685
636
  id="wizard-with-drawer-example-form-field7"
686
637
  name="wizard-with-drawer-example-form-field7"
@@ -818,7 +769,6 @@ wrapperTag: div
818
769
  <div class="pf-v5-c-form__group-control">
819
770
  <div class="pf-v5-c-form-control">
820
771
  <input
821
- required
822
772
  type="text"
823
773
  id="wizard-expandable-collapsed-form-field1"
824
774
  name="wizard-expandable-collapsed-form-field1"
@@ -839,7 +789,6 @@ wrapperTag: div
839
789
  <div class="pf-v5-c-form__group-control">
840
790
  <div class="pf-v5-c-form-control">
841
791
  <input
842
- required
843
792
  type="text"
844
793
  id="wizard-expandable-collapsed-form-field2"
845
794
  name="wizard-expandable-collapsed-form-field2"
@@ -860,7 +809,6 @@ wrapperTag: div
860
809
  <div class="pf-v5-c-form__group-control">
861
810
  <div class="pf-v5-c-form-control">
862
811
  <input
863
- required
864
812
  type="text"
865
813
  id="wizard-expandable-collapsed-form-field3"
866
814
  name="wizard-expandable-collapsed-form-field3"
@@ -881,7 +829,6 @@ wrapperTag: div
881
829
  <div class="pf-v5-c-form__group-control">
882
830
  <div class="pf-v5-c-form-control">
883
831
  <input
884
- required
885
832
  type="text"
886
833
  id="wizard-expandable-collapsed-form-field4"
887
834
  name="wizard-expandable-collapsed-form-field4"
@@ -902,7 +849,6 @@ wrapperTag: div
902
849
  <div class="pf-v5-c-form__group-control">
903
850
  <div class="pf-v5-c-form-control">
904
851
  <input
905
- required
906
852
  type="text"
907
853
  id="wizard-expandable-collapsed-form-field5"
908
854
  name="wizard-expandable-collapsed-form-field5"
@@ -923,7 +869,6 @@ wrapperTag: div
923
869
  <div class="pf-v5-c-form__group-control">
924
870
  <div class="pf-v5-c-form-control">
925
871
  <input
926
- required
927
872
  type="text"
928
873
  id="wizard-expandable-collapsed-form-field6"
929
874
  name="wizard-expandable-collapsed-form-field6"
@@ -944,7 +889,6 @@ wrapperTag: div
944
889
  <div class="pf-v5-c-form__group-control">
945
890
  <div class="pf-v5-c-form-control">
946
891
  <input
947
- required
948
892
  type="text"
949
893
  id="wizard-expandable-collapsed-form-field7"
950
894
  name="wizard-expandable-collapsed-form-field7"
@@ -1065,7 +1009,6 @@ wrapperTag: div
1065
1009
  <div class="pf-v5-c-form__group-control">
1066
1010
  <div class="pf-v5-c-form-control">
1067
1011
  <input
1068
- required
1069
1012
  type="text"
1070
1013
  id="wizard-expandable-expanded-form-field1"
1071
1014
  name="wizard-expandable-expanded-form-field1"
@@ -1086,7 +1029,6 @@ wrapperTag: div
1086
1029
  <div class="pf-v5-c-form__group-control">
1087
1030
  <div class="pf-v5-c-form-control">
1088
1031
  <input
1089
- required
1090
1032
  type="text"
1091
1033
  id="wizard-expandable-expanded-form-field2"
1092
1034
  name="wizard-expandable-expanded-form-field2"
@@ -1107,7 +1049,6 @@ wrapperTag: div
1107
1049
  <div class="pf-v5-c-form__group-control">
1108
1050
  <div class="pf-v5-c-form-control">
1109
1051
  <input
1110
- required
1111
1052
  type="text"
1112
1053
  id="wizard-expandable-expanded-form-field3"
1113
1054
  name="wizard-expandable-expanded-form-field3"
@@ -1128,7 +1069,6 @@ wrapperTag: div
1128
1069
  <div class="pf-v5-c-form__group-control">
1129
1070
  <div class="pf-v5-c-form-control">
1130
1071
  <input
1131
- required
1132
1072
  type="text"
1133
1073
  id="wizard-expandable-expanded-form-field4"
1134
1074
  name="wizard-expandable-expanded-form-field4"
@@ -1149,7 +1089,6 @@ wrapperTag: div
1149
1089
  <div class="pf-v5-c-form__group-control">
1150
1090
  <div class="pf-v5-c-form-control">
1151
1091
  <input
1152
- required
1153
1092
  type="text"
1154
1093
  id="wizard-expandable-expanded-form-field5"
1155
1094
  name="wizard-expandable-expanded-form-field5"
@@ -1170,7 +1109,6 @@ wrapperTag: div
1170
1109
  <div class="pf-v5-c-form__group-control">
1171
1110
  <div class="pf-v5-c-form-control">
1172
1111
  <input
1173
- required
1174
1112
  type="text"
1175
1113
  id="wizard-expandable-expanded-form-field6"
1176
1114
  name="wizard-expandable-expanded-form-field6"
@@ -1191,7 +1129,6 @@ wrapperTag: div
1191
1129
  <div class="pf-v5-c-form__group-control">
1192
1130
  <div class="pf-v5-c-form-control">
1193
1131
  <input
1194
- required
1195
1132
  type="text"
1196
1133
  id="wizard-expandable-expanded-form-field7"
1197
1134
  name="wizard-expandable-expanded-form-field7"
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -2004,7 +2004,7 @@ section: components
2004
2004
  >&#42;</span></label>
2005
2005
  </div>
2006
2006
  <div class="pf-v5-c-form__group-control">
2007
- <div class="pf-v5-c-form-control">
2007
+ <div class="pf-v5-c-form-control pf-m-required pf-m-error">
2008
2008
  <input
2009
2009
  required
2010
2010
  type="text"
@@ -2013,6 +2013,11 @@ section: components
2013
2013
  aria-invalid="true"
2014
2014
  aria-describedby="alert-horizontal-example-form-name-helper"
2015
2015
  />
2016
+ <div class="pf-v5-c-form-control__utilities">
2017
+ <div class="pf-v5-c-form-control__icon pf-m-status">
2018
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2019
+ </div>
2020
+ </div>
2016
2021
  </div>
2017
2022
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
2018
2023
  <div class="pf-v5-c-helper-text">
@@ -2037,13 +2042,13 @@ section: components
2037
2042
  >&#42;</span></label>
2038
2043
  </div>
2039
2044
  <div class="pf-v5-c-form__group-control">
2040
- <div class="pf-v5-c-form-control">
2045
+ <div class="pf-v5-c-form-control pf-m-required">
2041
2046
  <input
2047
+ required
2042
2048
  type="text"
2043
2049
  value="patternfly@patternfly.com"
2044
2050
  id="alert-horizontal-example-form-email"
2045
2051
  name="alert-horizontal-example-form-email"
2046
- required
2047
2052
  />
2048
2053
  </div>
2049
2054
  </div>
@@ -2059,7 +2064,7 @@ section: components
2059
2064
  >&#42;</span></label>
2060
2065
  </div>
2061
2066
  <div class="pf-v5-c-form__group-control">
2062
- <div class="pf-v5-c-form-control">
2067
+ <div class="pf-v5-c-form-control pf-m-required pf-m-error">
2063
2068
  <input
2064
2069
  required
2065
2070
  type="text"
@@ -2068,6 +2073,11 @@ section: components
2068
2073
  aria-invalid="true"
2069
2074
  aria-describedby="alert-horizontal-example-form-phone-helper"
2070
2075
  />
2076
+ <div class="pf-v5-c-form-control__utilities">
2077
+ <div class="pf-v5-c-form-control__icon pf-m-status">
2078
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2079
+ </div>
2080
+ </div>
2071
2081
  </div>
2072
2082
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
2073
2083
  <div class="pf-v5-c-helper-text">
@@ -3118,7 +3128,7 @@ section: components
3118
3128
  >&#42;</span></label>
3119
3129
  </div>
3120
3130
  <div class="pf-v5-c-form__group-control">
3121
- <div class="pf-v5-c-form-control">
3131
+ <div class="pf-v5-c-form-control pf-m-required pf-m-error">
3122
3132
  <input
3123
3133
  required
3124
3134
  type="text"
@@ -3127,6 +3137,11 @@ section: components
3127
3137
  aria-invalid="true"
3128
3138
  aria-describedby="alert-stacked-example-form-helper"
3129
3139
  />
3140
+ <div class="pf-v5-c-form-control__utilities">
3141
+ <div class="pf-v5-c-form-control__icon pf-m-status">
3142
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
3143
+ </div>
3144
+ </div>
3130
3145
  </div>
3131
3146
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
3132
3147
  <div class="pf-v5-c-helper-text">
@@ -3151,13 +3166,13 @@ section: components
3151
3166
  >&#42;</span></label>
3152
3167
  </div>
3153
3168
  <div class="pf-v5-c-form__group-control">
3154
- <div class="pf-v5-c-form-control">
3169
+ <div class="pf-v5-c-form-control pf-m-required">
3155
3170
  <input
3171
+ required
3156
3172
  type="text"
3157
3173
  value="patternfly.com"
3158
3174
  id="alert-stacked-example-form-email"
3159
3175
  name="alert-stacked-example-form-email"
3160
- required
3161
3176
  />
3162
3177
  </div>
3163
3178
  </div>
@@ -3184,7 +3199,7 @@ section: components
3184
3199
  aria-hidden="true"
3185
3200
  >&#42;</span></label>
3186
3201
  </div>
3187
- <div class="pf-v5-c-form-control">
3202
+ <div class="pf-v5-c-form-control pf-m-required pf-m-error">
3188
3203
  <select
3189
3204
  class
3190
3205
  required
@@ -3200,6 +3215,9 @@ section: components
3200
3215
  <option value="Option 4">NY</option>
3201
3216
  </select>
3202
3217
  <div class="pf-v5-c-form-control__utilities">
3218
+ <div class="pf-v5-c-form-control__icon pf-m-status">
3219
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
3220
+ </div>
3203
3221
  <div class="pf-v5-c-form-control__toggle-icon">
3204
3222
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3205
3223
  </div>
package/docs/demos/Button/examples/Button.md CHANGED
@@ -13,13 +13,13 @@ cssPrefix: pf-d-button
13
13
  <span class="pf-v5-c-form__label-text">Username</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
14
14
  </div>
15
15
  <div class="pf-v5-c-form__group-control">
16
- <div class="pf-v5-c-form-control">
16
+ <div class="pf-v5-c-form-control pf-m-required">
17
17
  <input
18
+ required
18
19
  type="text"
19
20
  id="progress-button-example-login"
20
21
  name="progress-button-example-login"
21
22
  value="johndoe"
22
- required
23
23
  />
24
24
  </div>
25
25
  </div>
@@ -29,13 +29,13 @@ cssPrefix: pf-d-button
29
29
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
30
30
  </div>
31
31
  <div class="pf-v5-c-form__group-control">
32
- <div class="pf-v5-c-form-control">
32
+ <div class="pf-v5-c-form-control pf-m-required">
33
33
  <input
34
+ required
34
35
  type="password"
35
36
  value="p@ssw0rd"
36
37
  id="progress-button-example-password"
37
38
  name="progress-button-example-password"
38
- required
39
39
  />
40
40
  </div>
41
41
  </div>
@@ -64,13 +64,13 @@ cssPrefix: pf-d-button
64
64
  <span class="pf-v5-c-form__label-text">Username</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
65
65
  </div>
66
66
  <div class="pf-v5-c-form__group-control">
67
- <div class="pf-v5-c-form-control">
67
+ <div class="pf-v5-c-form-control pf-m-required">
68
68
  <input
69
+ required
69
70
  type="text"
70
71
  id="progress-button-loading-example-login"
71
72
  name="progress-button-loading-example-login"
72
73
  value="johndoe"
73
- required
74
74
  />
75
75
  </div>
76
76
  </div>
@@ -83,13 +83,13 @@ cssPrefix: pf-d-button
83
83
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
84
84
  </div>
85
85
  <div class="pf-v5-c-form__group-control">
86
- <div class="pf-v5-c-form-control">
86
+ <div class="pf-v5-c-form-control pf-m-required">
87
87
  <input
88
+ required
88
89
  type="password"
89
90
  value="p@ssw0rd"
90
91
  id="progress-button-loading-example-password"
91
92
  name="progress-button-loading-example-password"
92
- required
93
93
  />
94
94
  </div>
95
95
  </div>
@@ -136,13 +136,13 @@ cssPrefix: pf-d-button
136
136
  <span class="pf-v5-c-form__label-text">Username</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
137
137
  </div>
138
138
  <div class="pf-v5-c-form__group-control">
139
- <div class="pf-v5-c-form-control">
139
+ <div class="pf-v5-c-form-control pf-m-required">
140
140
  <input
141
+ required
141
142
  type="text"
142
143
  id="progress-button-complete-example-login"
143
144
  name="progress-button-complete-example-login"
144
145
  value="johndoe"
145
- required
146
146
  />
147
147
  </div>
148
148
  </div>
@@ -155,13 +155,13 @@ cssPrefix: pf-d-button
155
155
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
156
156
  </div>
157
157
  <div class="pf-v5-c-form__group-control">
158
- <div class="pf-v5-c-form-control">
158
+ <div class="pf-v5-c-form-control pf-m-required">
159
159
  <input
160
+ required
160
161
  type="password"
161
162
  value="p@ssw0rd"
162
163
  id="progress-button-complete-example-password"
163
164
  name="progress-button-complete-example-password"
164
- required
165
165
  />
166
166
  </div>
167
167
  </div>