@patternfly/patternfly 5.0.0-prerelease.12 → 5.0.0-prerelease.14

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 (62) hide show
  1. package/assets/images/pf-logo.svg +28 -0
  2. package/components/Badge/badge.css +1 -0
  3. package/components/Badge/badge.scss +1 -0
  4. package/components/Check/check.css +9 -11
  5. package/components/Check/check.scss +11 -11
  6. package/components/Dropdown/dropdown.css +14 -5
  7. package/components/Dropdown/dropdown.scss +17 -6
  8. package/components/MenuToggle/menu-toggle.css +10 -3
  9. package/components/MenuToggle/menu-toggle.scss +14 -3
  10. package/components/Radio/radio.css +8 -10
  11. package/components/Radio/radio.scss +10 -10
  12. package/components/Toolbar/toolbar.css +17 -10
  13. package/components/Toolbar/toolbar.scss +21 -10
  14. package/docs/components/CalendarMonth/examples/CalendarMonth.md +8 -8
  15. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +12 -12
  16. package/docs/components/DatePicker/examples/DatePicker.md +16 -16
  17. package/docs/components/FileUpload/examples/FileUpload.md +28 -28
  18. package/docs/components/Form/examples/Form.md +56 -56
  19. package/docs/components/FormControl/examples/FormControl.md +134 -134
  20. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -26
  21. package/docs/components/InputGroup/examples/InputGroup.md +24 -24
  22. package/docs/components/Login/examples/Login.md +28 -28
  23. package/docs/components/NumberInput/examples/NumberInput.md +28 -28
  24. package/docs/components/Pagination/examples/Pagination.md +22 -22
  25. package/docs/components/Select/deprecated/Select.md +18 -18
  26. package/docs/components/Slider/examples/Slider.md +14 -14
  27. package/docs/components/TextInputGroup/examples/TextInputGroup.md +16 -16
  28. package/docs/components/Toolbar/examples/Toolbar.md +5 -6
  29. package/docs/components/Wizard/examples/Wizard.md +70 -70
  30. package/docs/demos/AboutModal/examples/AboutModal.md +6 -14
  31. package/docs/demos/Alert/examples/Alert.md +48 -72
  32. package/docs/demos/BackToTop/examples/BackToTop.md +6 -14
  33. package/docs/demos/Banner/examples/Banner.md +12 -28
  34. package/docs/demos/Button/examples/Button.md +12 -12
  35. package/docs/demos/CardView/examples/CardView.md +8 -16
  36. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -56
  37. package/docs/demos/Dashboard/examples/Dashboard.md +6 -14
  38. package/docs/demos/DataList/examples/DataList.md +32 -64
  39. package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -42
  40. package/docs/demos/Drawer/examples/Drawer.md +30 -70
  41. package/docs/demos/Form/examples/BasicForms.md +54 -54
  42. package/docs/demos/HelperText/examples/HelperText.md +20 -20
  43. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -84
  44. package/docs/demos/Masthead/examples/Masthead.md +54 -126
  45. package/docs/demos/Modal/examples/Modal.md +42 -90
  46. package/docs/demos/Nav/examples/Nav.md +48 -112
  47. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -70
  48. package/docs/demos/Page/examples/Page.md +54 -126
  49. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -2
  50. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +8 -8
  51. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +42 -98
  52. package/docs/demos/Skeleton/examples/Skeleton.md +6 -14
  53. package/docs/demos/Table/examples/Table.md +112 -232
  54. package/docs/demos/Tabs/examples/Tabs.md +36 -84
  55. package/docs/demos/Toolbar/examples/Toolbar.md +22 -38
  56. package/docs/demos/Wizard/examples/Wizard.md +166 -238
  57. package/package.json +1 -1
  58. package/patternfly-no-globals.css +59 -39
  59. package/patternfly-theme-dark-unversioned.css +59 -39
  60. package/patternfly.css +59 -39
  61. package/patternfly.min.css +1 -1
  62. package/patternfly.min.css.map +1 -1
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -13,7 +13,7 @@ subsection: forms
13
13
  <span class="pf-v5-c-form__label-text">Full name</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 pf-m-required">
16
+ <span class="pf-v5-c-form-control pf-m-required">
17
17
  <input
18
18
  required
19
19
  type="text"
@@ -21,7 +21,7 @@ subsection: forms
21
21
  name="-name"
22
22
  aria-describedby="-name-helper"
23
23
  />
24
- </div>
24
+ </span>
25
25
 
26
26
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
27
27
  <div class="pf-v5-c-helper-text">
@@ -39,9 +39,9 @@ subsection: forms
39
39
  <span class="pf-v5-c-form__label-text">Email</span></label>
40
40
  </div>
41
41
  <div class="pf-v5-c-form__group-control">
42
- <div class="pf-v5-c-form-control">
42
+ <span class="pf-v5-c-form-control">
43
43
  <input type="email" id="-email" name="-email" />
44
- </div>
44
+ </span>
45
45
  </div>
46
46
  </div>
47
47
  <div class="pf-v5-c-form__group">
@@ -56,7 +56,7 @@ subsection: forms
56
56
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
57
57
  </div>
58
58
  <div class="pf-v5-c-form__group-control">
59
- <div class="pf-v5-c-form-control pf-m-required">
59
+ <span class="pf-v5-c-form-control pf-m-required">
60
60
  <input
61
61
  required
62
62
  type="tel"
@@ -64,7 +64,7 @@ subsection: forms
64
64
  id="-phone"
65
65
  name="-phone"
66
66
  />
67
- </div>
67
+ </span>
68
68
  </div>
69
69
  </div>
70
70
  <div
@@ -173,7 +173,7 @@ subsection: forms
173
173
  <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
174
174
  </div>
175
175
  <div class="pf-v5-c-form__group-control">
176
- <div class="pf-v5-c-form-control pf-m-required">
176
+ <span class="pf-v5-c-form-control pf-m-required">
177
177
  <input
178
178
  required
179
179
  type="text"
@@ -181,7 +181,7 @@ subsection: forms
181
181
  name="form-demo-horizontal-name"
182
182
  aria-describedby="form-demo-horizontal-name-helper"
183
183
  />
184
- </div>
184
+ </span>
185
185
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
186
186
  <div class="pf-v5-c-helper-text">
187
187
  <div
@@ -201,13 +201,13 @@ subsection: forms
201
201
  <span class="pf-v5-c-form__label-text">Email</span></label>
202
202
  </div>
203
203
  <div class="pf-v5-c-form__group-control">
204
- <div class="pf-v5-c-form-control">
204
+ <span class="pf-v5-c-form-control">
205
205
  <input
206
206
  type="email"
207
207
  id="form-demo-horizontal-email"
208
208
  name="form-demo-horizontal-email"
209
209
  />
210
- </div>
210
+ </span>
211
211
  </div>
212
212
  </div>
213
213
  <div class="pf-v5-c-form__group">
@@ -215,14 +215,14 @@ subsection: forms
215
215
  <span class="pf-v5-c-form__label-text">Phone number</span></label>
216
216
  </div>
217
217
  <div class="pf-v5-c-form__group-control">
218
- <div class="pf-v5-c-form-control">
218
+ <span class="pf-v5-c-form-control">
219
219
  <input
220
220
  type="tel"
221
221
  placeholder="Example, (555) 555-5555"
222
222
  id="form-demo-horizontal-phone"
223
223
  name="form-demo-horizontal-phone"
224
224
  />
225
- </div>
225
+ </span>
226
226
  </div>
227
227
  </div>
228
228
  <div
@@ -307,7 +307,7 @@ subsection: forms
307
307
  <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
308
308
  </div>
309
309
  <div class="pf-v5-c-form__group-control">
310
- <div class="pf-v5-c-form-control pf-m-required">
310
+ <span class="pf-v5-c-form-control pf-m-required">
311
311
  <input
312
312
  required
313
313
  type="text"
@@ -315,7 +315,7 @@ subsection: forms
315
315
  name="form-demo-grid-name"
316
316
  aria-describedby="form-demo-grid-name-helper"
317
317
  />
318
- </div>
318
+ </span>
319
319
 
320
320
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
321
321
  <div class="pf-v5-c-helper-text">
@@ -333,14 +333,14 @@ subsection: forms
333
333
  <span class="pf-v5-c-form__label-text">Job title</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
334
334
  </div>
335
335
  <div class="pf-v5-c-form__group-control">
336
- <div class="pf-v5-c-form-control pf-m-required">
336
+ <span class="pf-v5-c-form-control pf-m-required">
337
337
  <input
338
338
  required
339
339
  type="text"
340
340
  id="form-demo-grid-title"
341
341
  name="form-demo-grid-title"
342
342
  />
343
- </div>
343
+ </span>
344
344
  </div>
345
345
  </div>
346
346
  <div class="pf-v5-c-form__group">
@@ -348,14 +348,14 @@ subsection: forms
348
348
  <span class="pf-v5-c-form__label-text">Phone number</span></label>
349
349
  </div>
350
350
  <div class="pf-v5-c-form__group-control">
351
- <div class="pf-v5-c-form-control">
351
+ <span class="pf-v5-c-form-control">
352
352
  <input
353
353
  type="tel"
354
354
  id="form-demo-grid-phone"
355
355
  name="form-demo-grid-phone"
356
356
  placeholder="555-555-5555"
357
357
  />
358
- </div>
358
+ </span>
359
359
  </div>
360
360
  </div>
361
361
  <div class="pf-v5-c-form__group">
@@ -363,13 +363,13 @@ subsection: forms
363
363
  <span class="pf-v5-c-form__label-text">Email</span></label>
364
364
  </div>
365
365
  <div class="pf-v5-c-form__group-control">
366
- <div class="pf-v5-c-form-control">
366
+ <span class="pf-v5-c-form-control">
367
367
  <input
368
368
  type="email"
369
369
  id="form-demo-grid-email"
370
370
  name="form-demo-grid-email"
371
371
  />
372
- </div>
372
+ </span>
373
373
  </div>
374
374
  </div>
375
375
  <div class="pf-v5-c-form__group">
@@ -377,13 +377,13 @@ subsection: forms
377
377
  <span class="pf-v5-c-form__label-text">Street address</span></label>
378
378
  </div>
379
379
  <div class="pf-v5-c-form__group-control">
380
- <div class="pf-v5-c-form-control">
380
+ <span class="pf-v5-c-form-control">
381
381
  <input
382
382
  type="text"
383
383
  id="form-demo-grid-address"
384
384
  name="form-demo-grid-address"
385
385
  />
386
- </div>
386
+ </span>
387
387
  </div>
388
388
  </div>
389
389
  <div class="pf-v5-l-grid pf-m-all-6-col pf-m-gutter">
@@ -392,9 +392,9 @@ subsection: forms
392
392
  <span class="pf-v5-c-form__label-text">City</span></label>
393
393
  </div>
394
394
  <div class="pf-v5-c-form__group-control">
395
- <div class="pf-v5-c-form-control">
395
+ <span class="pf-v5-c-form-control">
396
396
  <input id="form-demo-grid-city" name="form-demo-grid-city" />
397
- </div>
397
+ </span>
398
398
  </div>
399
399
  </div>
400
400
  <div class="pf-v5-c-form__group">
@@ -402,7 +402,7 @@ subsection: forms
402
402
  <span class="pf-v5-c-form__label-text">State</span></label>
403
403
  </div>
404
404
  <div class="pf-v5-c-form__group-control">
405
- <div class="pf-v5-c-form-control">
405
+ <span class="pf-v5-c-form-control">
406
406
  <select id="form-demo-grid-state" name="form-demo-grid-state">
407
407
  <option value selected>Select one</option>
408
408
  <option value="AL">Alabama</option>
@@ -456,12 +456,12 @@ subsection: forms
456
456
  <option value="WI">Wisconsin</option>
457
457
  <option value="WY">Wyoming</option>
458
458
  </select>
459
- <div class="pf-v5-c-form-control__utilities">
460
- <div class="pf-v5-c-form-control__toggle-icon">
459
+ <span class="pf-v5-c-form-control__utilities">
460
+ <span class="pf-v5-c-form-control__toggle-icon">
461
461
  <i class="fas fa-caret-down" aria-hidden="true"></i>
462
- </div>
463
- </div>
464
- </div>
462
+ </span>
463
+ </span>
464
+ </span>
465
465
  </div>
466
466
  </div>
467
467
  </div>
@@ -507,14 +507,14 @@ subsection: forms
507
507
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
508
508
  </div>
509
509
  <div class="pf-v5-c-form__group-control">
510
- <div class="pf-v5-c-form-control pf-m-required">
510
+ <span class="pf-v5-c-form-control pf-m-required">
511
511
  <input
512
512
  required
513
513
  type="text"
514
514
  id="form-demo-sections-repeatable-fields-clientid"
515
515
  name="form-demo-sections-repeatable-fields-clientid"
516
516
  />
517
- </div>
517
+ </span>
518
518
  </div>
519
519
  </div>
520
520
  <div class="pf-v5-c-form__group">
@@ -532,14 +532,14 @@ subsection: forms
532
532
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
533
533
  </div>
534
534
  <div class="pf-v5-c-form__group-control">
535
- <div class="pf-v5-c-form-control pf-m-required">
535
+ <span class="pf-v5-c-form-control pf-m-required">
536
536
  <input
537
537
  required
538
538
  type="text"
539
539
  id="form-demo-sections-repeatable-fields-name"
540
540
  name="form-demo-sections-repeatable-fields-name"
541
541
  />
542
- </div>
542
+ </span>
543
543
  </div>
544
544
  </div>
545
545
  <div class="pf-v5-c-form__group">
@@ -557,14 +557,14 @@ subsection: forms
557
557
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
558
558
  </div>
559
559
  <div class="pf-v5-c-form__group-control">
560
- <div class="pf-v5-c-form-control pf-m-required">
560
+ <span class="pf-v5-c-form-control pf-m-required">
561
561
  <input
562
562
  required
563
563
  type="text"
564
564
  id="form-demo-sections-repeatable-fields-description"
565
565
  name="form-demo-sections-repeatable-fields-description"
566
566
  />
567
- </div>
567
+ </span>
568
568
  </div>
569
569
  </div>
570
570
  </section>
@@ -593,14 +593,14 @@ subsection: forms
593
593
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
594
594
  </div>
595
595
  <div class="pf-v5-c-form__group-control">
596
- <div class="pf-v5-c-form-control pf-m-required">
596
+ <span class="pf-v5-c-form-control pf-m-required">
597
597
  <input
598
598
  required
599
599
  type="text"
600
600
  id="form-demo-sections-repeatable-fields-section2-rooturl"
601
601
  name="form-demo-sections-repeatable-fields-section2-rooturl"
602
602
  />
603
- </div>
603
+ </span>
604
604
  </div>
605
605
  </div>
606
606
  <div class="pf-v5-c-form__group">
@@ -620,7 +620,7 @@ subsection: forms
620
620
  <div class="pf-v5-c-form__group-control pf-m-stack">
621
621
  <div class="pf-v5-c-input-group">
622
622
  <div class="pf-v5-c-input-group__item pf-m-fill">
623
- <div class="pf-v5-c-form-control pf-m-required">
623
+ <span class="pf-v5-c-form-control pf-m-required">
624
624
  <input
625
625
  required
626
626
  type="text"
@@ -628,7 +628,7 @@ subsection: forms
628
628
  name="form-demo-sections-repeatable-fields-section2-uris-input-1"
629
629
  aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-1"
630
630
  />
631
- </div>
631
+ </span>
632
632
  </div>
633
633
  <div class="pf-v5-c-input-group__item pf-m-plain">
634
634
  <button
@@ -642,7 +642,7 @@ subsection: forms
642
642
  </div>
643
643
  <div class="pf-v5-c-input-group">
644
644
  <div class="pf-v5-c-input-group__item pf-m-fill">
645
- <div class="pf-v5-c-form-control pf-m-required">
645
+ <span class="pf-v5-c-form-control pf-m-required">
646
646
  <input
647
647
  required
648
648
  type="text"
@@ -650,7 +650,7 @@ subsection: forms
650
650
  name="form-demo-sections-repeatable-fields-section2-uris-input-2"
651
651
  aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-2"
652
652
  />
653
- </div>
653
+ </span>
654
654
  </div>
655
655
  <div class="pf-v5-c-input-group__item pf-m-plain">
656
656
  <button
@@ -664,7 +664,7 @@ subsection: forms
664
664
  </div>
665
665
  <div class="pf-v5-c-input-group">
666
666
  <div class="pf-v5-c-input-group__item pf-m-fill">
667
- <div class="pf-v5-c-form-control pf-m-required">
667
+ <span class="pf-v5-c-form-control pf-m-required">
668
668
  <input
669
669
  required
670
670
  type="text"
@@ -672,7 +672,7 @@ subsection: forms
672
672
  name="form-demo-sections-repeatable-fields-section2-uris-input-3"
673
673
  aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-3"
674
674
  />
675
- </div>
675
+ </span>
676
676
  </div>
677
677
  <div class="pf-v5-c-input-group__item pf-m-plain">
678
678
  <button
@@ -707,14 +707,14 @@ subsection: forms
707
707
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
708
708
  </div>
709
709
  <div class="pf-v5-c-form__group-control">
710
- <div class="pf-v5-c-form-control pf-m-required">
710
+ <span class="pf-v5-c-form-control pf-m-required">
711
711
  <input
712
712
  required
713
713
  type="text"
714
714
  id="form-demo-sections-repeatable-fields-section2-home-url"
715
715
  name="form-demo-sections-repeatable-fields-section2-home-url"
716
716
  />
717
- </div>
717
+ </span>
718
718
  </div>
719
719
  </div>
720
720
  </section>
@@ -741,14 +741,14 @@ subsection: forms
741
741
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
742
742
  </div>
743
743
  <div class="pf-v5-c-form__group-control">
744
- <div class="pf-v5-c-form-control pf-m-required">
744
+ <span class="pf-v5-c-form-control pf-m-required">
745
745
  <input
746
746
  required
747
747
  type="text"
748
748
  id="form-demo-sections-complex-form-name"
749
749
  name="form-demo-sections-complex-form-name"
750
750
  />
751
- </div>
751
+ </span>
752
752
  </div>
753
753
  </div>
754
754
 
@@ -1075,7 +1075,7 @@ subsection: forms
1075
1075
  <div class="pf-v5-c-form__group-control pf-m-stack">
1076
1076
  <div class="pf-v5-c-input-group">
1077
1077
  <div class="pf-v5-c-input-group__item pf-m-fill">
1078
- <div class="pf-v5-c-form-control pf-m-required">
1078
+ <span class="pf-v5-c-form-control pf-m-required">
1079
1079
  <input
1080
1080
  required
1081
1081
  type="text"
@@ -1083,7 +1083,7 @@ subsection: forms
1083
1083
  name="-node-selector-terms-input-1"
1084
1084
  aria-labelledby="-node-selector-terms -node-selector-terms-title"
1085
1085
  />
1086
- </div>
1086
+ </span>
1087
1087
  </div>
1088
1088
  <div class="pf-v5-c-input-group__item pf-m-plain">
1089
1089
  <button
@@ -1223,13 +1223,13 @@ subsection: forms
1223
1223
  <span class="pf-v5-c-form__label-text">Hostname</span></label>
1224
1224
  </div>
1225
1225
  <div class="pf-v5-c-form__group-control">
1226
- <div class="pf-v5-c-form-control">
1226
+ <span class="pf-v5-c-form-control">
1227
1227
  <input
1228
1228
  type="text"
1229
1229
  id="form-demo-sections-complex-form-routing-hostname"
1230
1230
  name="form-demo-sections-complex-form-routing-hostname"
1231
1231
  />
1232
- </div>
1232
+ </span>
1233
1233
 
1234
1234
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
1235
1235
  <div class="pf-v5-c-helper-text">
@@ -1253,7 +1253,7 @@ subsection: forms
1253
1253
  <span class="pf-v5-c-form__label-text">Path</span></label>
1254
1254
  </div>
1255
1255
  <div class="pf-v5-c-form__group-control">
1256
- <div class="pf-v5-c-form-control pf-m-required">
1256
+ <span class="pf-v5-c-form-control pf-m-required">
1257
1257
  <input
1258
1258
  required
1259
1259
  type="text"
@@ -1261,7 +1261,7 @@ subsection: forms
1261
1261
  id="form-demo-sections-complex-form-routing-path"
1262
1262
  name="form-demo-sections-complex-form-routing-path"
1263
1263
  />
1264
- </div>
1264
+ </span>
1265
1265
 
1266
1266
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
1267
1267
  <div class="pf-v5-c-helper-text">
package/docs/demos/HelperText/examples/HelperText.md CHANGED
@@ -12,7 +12,7 @@ section: components
12
12
  <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
13
13
  </div>
14
14
  <div class="pf-v5-c-form__group-control">
15
- <div class="pf-v5-c-form-control pf-m-required">
15
+ <span class="pf-v5-c-form-control pf-m-required">
16
16
  <input
17
17
  required
18
18
  type="text"
@@ -20,7 +20,7 @@ section: components
20
20
  name="helper-text-form-name"
21
21
  aria-describedby="helper-text-form-name-helper"
22
22
  />
23
- </div>
23
+ </span>
24
24
  <div
25
25
  class="pf-v5-c-form__helper-text"
26
26
  aria-live="polite"
@@ -41,7 +41,7 @@ section: components
41
41
  <span class="pf-v5-c-form__label-text">E-mail</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
42
42
  </div>
43
43
  <div class="pf-v5-c-form__group-control">
44
- <div class="pf-v5-c-form-control pf-m-required pf-m-warning">
44
+ <span class="pf-v5-c-form-control pf-m-required pf-m-warning">
45
45
  <input
46
46
  required
47
47
  type="text"
@@ -49,12 +49,12 @@ section: components
49
49
  name="helper-text-form-email"
50
50
  aria-describedby="helper-text-form-email-helper"
51
51
  />
52
- <div class="pf-v5-c-form-control__utilities">
53
- <div class="pf-v5-c-form-control__icon pf-m-status">
52
+ <span class="pf-v5-c-form-control__utilities">
53
+ <span class="pf-v5-c-form-control__icon pf-m-status">
54
54
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
55
- </div>
56
- </div>
57
- </div>
55
+ </span>
56
+ </span>
57
+ </span>
58
58
 
59
59
  <div
60
60
  class="pf-v5-c-form__helper-text"
@@ -76,7 +76,7 @@ section: components
76
76
  <span class="pf-v5-c-form__label-text">Address</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
77
77
  </div>
78
78
  <div class="pf-v5-c-form__group-control">
79
- <div class="pf-v5-c-form-control pf-m-required pf-m-error">
79
+ <span class="pf-v5-c-form-control pf-m-required pf-m-error">
80
80
  <input
81
81
  required
82
82
  type="text"
@@ -85,12 +85,12 @@ section: components
85
85
  aria-invalid="true"
86
86
  aria-describedby="helper-text-form-address-helper"
87
87
  />
88
- <div class="pf-v5-c-form-control__utilities">
89
- <div class="pf-v5-c-form-control__icon pf-m-status">
88
+ <span class="pf-v5-c-form-control__utilities">
89
+ <span class="pf-v5-c-form-control__icon pf-m-status">
90
90
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
91
- </div>
92
- </div>
93
- </div>
91
+ </span>
92
+ </span>
93
+ </span>
94
94
 
95
95
  <div
96
96
  class="pf-v5-c-form__helper-text"
@@ -131,7 +131,7 @@ section: components
131
131
  <span class="pf-v5-c-form__label-text">Comment</span></label>
132
132
  </div>
133
133
  <div class="pf-v5-c-form__group-control">
134
- <div class="pf-v5-c-form-control pf-m-success">
134
+ <span class="pf-v5-c-form-control pf-m-success">
135
135
  <input
136
136
  value="This is a valid comment"
137
137
  type="text"
@@ -139,12 +139,12 @@ section: components
139
139
  name="helper-text-form-comment"
140
140
  aria-describedby="helper-text-form-comment-helper"
141
141
  />
142
- <div class="pf-v5-c-form-control__utilities">
143
- <div class="pf-v5-c-form-control__icon pf-m-status">
142
+ <span class="pf-v5-c-form-control__utilities">
143
+ <span class="pf-v5-c-form-control__icon pf-m-status">
144
144
  <i class="fas fa-check-circle" aria-hidden="true"></i>
145
- </div>
146
- </div>
147
- </div>
145
+ </span>
146
+ </span>
147
+ </span>
148
148
 
149
149
  <div
150
150
  class="pf-v5-c-form__helper-text"