@patternfly/patternfly 5.0.0-alpha.52 → 5.0.0-alpha.54

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 (47) hide show
  1. package/components/Divider/divider.css +12 -12
  2. package/components/FormControl/form-control.css +164 -214
  3. package/components/FormControl/form-control.scss +175 -281
  4. package/components/FormControl/themes/dark/form-control.scss +1 -2
  5. package/components/Masthead/masthead.css +12 -12
  6. package/components/NumberInput/number-input.css +0 -1
  7. package/components/NumberInput/number-input.scss +0 -1
  8. package/components/Pagination/pagination.css +12 -12
  9. package/components/Tabs/tabs.css +24 -24
  10. package/components/Toolbar/toolbar.css +54 -54
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  13. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  14. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  15. package/docs/components/Form/examples/Form.md +165 -145
  16. package/docs/components/FormControl/examples/FormControl.md +439 -475
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  18. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  19. package/docs/components/Login/examples/Login.md +92 -82
  20. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  21. package/docs/components/Pagination/examples/Pagination.md +100 -89
  22. package/docs/components/Select/examples/Select.md +77 -68
  23. package/docs/components/Slider/examples/Slider.md +31 -44
  24. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  25. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  26. package/docs/components/Wizard/examples/Wizard.md +280 -245
  27. package/docs/demos/Alert/examples/Alert.md +69 -57
  28. package/docs/demos/Button/examples/Button.md +54 -48
  29. package/docs/demos/CardView/examples/CardView.md +9 -8
  30. package/docs/demos/DataList/examples/DataList.md +36 -32
  31. package/docs/demos/Form/examples/BasicForms.md +247 -227
  32. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  33. package/docs/demos/Modal/examples/Modal.md +14 -21
  34. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  35. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  36. package/docs/demos/Table/examples/Table.md +99 -88
  37. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  38. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  39. package/layouts/Flex/flex.css +60 -120
  40. package/layouts/Flex/flex.scss +1 -1
  41. package/package.json +3 -3
  42. package/patternfly-no-globals.css +335 -446
  43. package/patternfly.css +335 -446
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
  46. package/sass-utilities/functions.scss +6 -9
  47. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -13,14 +13,15 @@ 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
- <input
17
- class="pf-v5-c-form-control"
18
- required
19
- type="text"
20
- id="-name"
21
- name="-name"
22
- aria-describedby="-name-helper"
23
- />
16
+ <div class="pf-v5-c-form-control">
17
+ <input
18
+ required
19
+ type="text"
20
+ id="-name"
21
+ name="-name"
22
+ aria-describedby="-name-helper"
23
+ />
24
+ </div>
24
25
 
25
26
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
26
27
  <div class="pf-v5-c-helper-text">
@@ -38,12 +39,9 @@ subsection: forms
38
39
  <span class="pf-v5-c-form__label-text">Email</span></label>
39
40
  </div>
40
41
  <div class="pf-v5-c-form__group-control">
41
- <input
42
- class="pf-v5-c-form-control"
43
- type="email"
44
- id="-email"
45
- name="-email"
46
- />
42
+ <div class="pf-v5-c-form-control">
43
+ <input type="email" id="-email" name="-email" />
44
+ </div>
47
45
  </div>
48
46
  </div>
49
47
  <div class="pf-v5-c-form__group">
@@ -58,14 +56,15 @@ subsection: forms
58
56
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
59
57
  </div>
60
58
  <div class="pf-v5-c-form__group-control">
61
- <input
62
- class="pf-v5-c-form-control"
63
- required
64
- type="tel"
65
- placeholder="555-555-5555"
66
- id="-phone"
67
- name="-phone"
68
- />
59
+ <div class="pf-v5-c-form-control">
60
+ <input
61
+ required
62
+ type="tel"
63
+ placeholder="555-555-5555"
64
+ id="-phone"
65
+ name="-phone"
66
+ />
67
+ </div>
69
68
  </div>
70
69
  </div>
71
70
  <div
@@ -174,14 +173,15 @@ subsection: forms
174
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>
175
174
  </div>
176
175
  <div class="pf-v5-c-form__group-control">
177
- <input
178
- class="pf-v5-c-form-control"
179
- required
180
- type="text"
181
- id="form-demo-horizontal-name"
182
- name="form-demo-horizontal-name"
183
- aria-describedby="form-demo-horizontal-name-helper"
184
- />
176
+ <div class="pf-v5-c-form-control">
177
+ <input
178
+ required
179
+ type="text"
180
+ id="form-demo-horizontal-name"
181
+ name="form-demo-horizontal-name"
182
+ aria-describedby="form-demo-horizontal-name-helper"
183
+ />
184
+ </div>
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,12 +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
- <input
205
- class="pf-v5-c-form-control"
206
- type="email"
207
- id="form-demo-horizontal-email"
208
- name="form-demo-horizontal-email"
209
- />
204
+ <div class="pf-v5-c-form-control">
205
+ <input
206
+ type="email"
207
+ id="form-demo-horizontal-email"
208
+ name="form-demo-horizontal-email"
209
+ />
210
+ </div>
210
211
  </div>
211
212
  </div>
212
213
  <div class="pf-v5-c-form__group">
@@ -214,13 +215,14 @@ subsection: forms
214
215
  <span class="pf-v5-c-form__label-text">Phone number</span></label>
215
216
  </div>
216
217
  <div class="pf-v5-c-form__group-control">
217
- <input
218
- class="pf-v5-c-form-control"
219
- type="tel"
220
- placeholder="Example, (555) 555-5555"
221
- id="form-demo-horizontal-phone"
222
- name="form-demo-horizontal-phone"
223
- />
218
+ <div class="pf-v5-c-form-control">
219
+ <input
220
+ type="tel"
221
+ placeholder="Example, (555) 555-5555"
222
+ id="form-demo-horizontal-phone"
223
+ name="form-demo-horizontal-phone"
224
+ />
225
+ </div>
224
226
  </div>
225
227
  </div>
226
228
  <div
@@ -305,14 +307,15 @@ subsection: forms
305
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>
306
308
  </div>
307
309
  <div class="pf-v5-c-form__group-control">
308
- <input
309
- class="pf-v5-c-form-control"
310
- required
311
- type="text"
312
- id="form-demo-grid-name"
313
- name="form-demo-grid-name"
314
- aria-describedby="form-demo-grid-name-helper"
315
- />
310
+ <div class="pf-v5-c-form-control">
311
+ <input
312
+ required
313
+ type="text"
314
+ id="form-demo-grid-name"
315
+ name="form-demo-grid-name"
316
+ aria-describedby="form-demo-grid-name-helper"
317
+ />
318
+ </div>
316
319
 
317
320
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
318
321
  <div class="pf-v5-c-helper-text">
@@ -330,13 +333,14 @@ subsection: forms
330
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>
331
334
  </div>
332
335
  <div class="pf-v5-c-form__group-control">
333
- <input
334
- class="pf-v5-c-form-control"
335
- required
336
- type="text"
337
- id="form-demo-grid-title"
338
- name="form-demo-grid-title"
339
- />
336
+ <div class="pf-v5-c-form-control">
337
+ <input
338
+ required
339
+ type="text"
340
+ id="form-demo-grid-title"
341
+ name="form-demo-grid-title"
342
+ />
343
+ </div>
340
344
  </div>
341
345
  </div>
342
346
  <div class="pf-v5-c-form__group">
@@ -344,13 +348,14 @@ subsection: forms
344
348
  <span class="pf-v5-c-form__label-text">Phone number</span></label>
345
349
  </div>
346
350
  <div class="pf-v5-c-form__group-control">
347
- <input
348
- class="pf-v5-c-form-control"
349
- type="tel"
350
- id="form-demo-grid-phone"
351
- name="form-demo-grid-phone"
352
- placeholder="555-555-5555"
353
- />
351
+ <div class="pf-v5-c-form-control">
352
+ <input
353
+ type="tel"
354
+ id="form-demo-grid-phone"
355
+ name="form-demo-grid-phone"
356
+ placeholder="555-555-5555"
357
+ />
358
+ </div>
354
359
  </div>
355
360
  </div>
356
361
  <div class="pf-v5-c-form__group">
@@ -358,12 +363,13 @@ subsection: forms
358
363
  <span class="pf-v5-c-form__label-text">Email</span></label>
359
364
  </div>
360
365
  <div class="pf-v5-c-form__group-control">
361
- <input
362
- class="pf-v5-c-form-control"
363
- type="email"
364
- id="form-demo-grid-email"
365
- name="form-demo-grid-email"
366
- />
366
+ <div class="pf-v5-c-form-control">
367
+ <input
368
+ type="email"
369
+ id="form-demo-grid-email"
370
+ name="form-demo-grid-email"
371
+ />
372
+ </div>
367
373
  </div>
368
374
  </div>
369
375
  <div class="pf-v5-c-form__group">
@@ -371,12 +377,13 @@ subsection: forms
371
377
  <span class="pf-v5-c-form__label-text">Street address</span></label>
372
378
  </div>
373
379
  <div class="pf-v5-c-form__group-control">
374
- <input
375
- class="pf-v5-c-form-control"
376
- type="text"
377
- id="form-demo-grid-address"
378
- name="form-demo-grid-address"
379
- />
380
+ <div class="pf-v5-c-form-control">
381
+ <input
382
+ type="text"
383
+ id="form-demo-grid-address"
384
+ name="form-demo-grid-address"
385
+ />
386
+ </div>
380
387
  </div>
381
388
  </div>
382
389
  <div class="pf-v5-l-grid pf-m-all-6-col pf-m-gutter">
@@ -385,11 +392,9 @@ subsection: forms
385
392
  <span class="pf-v5-c-form__label-text">City</span></label>
386
393
  </div>
387
394
  <div class="pf-v5-c-form__group-control">
388
- <input
389
- class="pf-v5-c-form-control"
390
- id="form-demo-grid-city"
391
- name="form-demo-grid-city"
392
- />
395
+ <div class="pf-v5-c-form-control">
396
+ <input id="form-demo-grid-city" name="form-demo-grid-city" />
397
+ </div>
393
398
  </div>
394
399
  </div>
395
400
  <div class="pf-v5-c-form__group">
@@ -397,63 +402,66 @@ subsection: forms
397
402
  <span class="pf-v5-c-form__label-text">State</span></label>
398
403
  </div>
399
404
  <div class="pf-v5-c-form__group-control">
400
- <select
401
- class="pf-v5-c-form-control"
402
- id="form-demo-grid-state"
403
- name="form-demo-grid-state"
404
- >
405
- <option value selected>Select one</option>
406
- <option value="AL">Alabama</option>
407
- <option value="AK">Alaska</option>
408
- <option value="AZ">Arizona</option>
409
- <option value="AR">Arkansas</option>
410
- <option value="CA">California</option>
411
- <option value="CO">Colorado</option>
412
- <option value="CT">Connecticut</option>
413
- <option value="DE">Delaware</option>
414
- <option value="FL">Florida</option>
415
- <option value="GA">Georgia</option>
416
- <option value="HI">Hawaii</option>
417
- <option value="ID">Idaho</option>
418
- <option value="IL">Illinois</option>
419
- <option value="IN">Indiana</option>
420
- <option value="IA">Iowa</option>
421
- <option value="KS">Kansas</option>
422
- <option value="KY">Kentucky</option>
423
- <option value="LA">Louisiana</option>
424
- <option value="ME">Maine</option>
425
- <option value="MD">Maryland</option>
426
- <option value="MA">Massachusetts</option>
427
- <option value="MI">Michigan</option>
428
- <option value="MN">Minnesota</option>
429
- <option value="MS">Mississippi</option>
430
- <option value="MO">Missouri</option>
431
- <option value="MT">Montana</option>
432
- <option value="NE">Nebraska</option>
433
- <option value="NV">Nevada</option>
434
- <option value="NH">New Hampshire</option>
435
- <option value="NJ">New Jersey</option>
436
- <option value="NM">New Mexico</option>
437
- <option value="NY">New York</option>
438
- <option value="NC">North Carolina</option>
439
- <option value="ND">North Dakota</option>
440
- <option value="OH">Ohio</option>
441
- <option value="OK">Oklahoma</option>
442
- <option value="OR">Oregon</option>
443
- <option value="PA">Pennsylvania</option>
444
- <option value="RI">Rhode Island</option>
445
- <option value="SC">South Carolina</option>
446
- <option value="SD">South Dakota</option>
447
- <option value="TN">Tennessee</option>
448
- <option value="TX">Texas</option>
449
- <option value="UT">Utah</option>
450
- <option value="VT">Vermont</option>
451
- <option value="VA">Virginia</option>
452
- <option value="WA">Washington</option>
453
- <option value="WV">West Virginia</option>
454
- <option value="WI">Wisconsin</option>
455
- <option value="WY">Wyoming</option>
456
- </select>
405
+ <div class="pf-v5-c-form-control">
406
+ <select id="form-demo-grid-state" name="form-demo-grid-state">
407
+ <option value selected>Select one</option>
408
+ <option value="AL">Alabama</option>
409
+ <option value="AK">Alaska</option>
410
+ <option value="AZ">Arizona</option>
411
+ <option value="AR">Arkansas</option>
412
+ <option value="CA">California</option>
413
+ <option value="CO">Colorado</option>
414
+ <option value="CT">Connecticut</option>
415
+ <option value="DE">Delaware</option>
416
+ <option value="FL">Florida</option>
417
+ <option value="GA">Georgia</option>
418
+ <option value="HI">Hawaii</option>
419
+ <option value="ID">Idaho</option>
420
+ <option value="IL">Illinois</option>
421
+ <option value="IN">Indiana</option>
422
+ <option value="IA">Iowa</option>
423
+ <option value="KS">Kansas</option>
424
+ <option value="KY">Kentucky</option>
425
+ <option value="LA">Louisiana</option>
426
+ <option value="ME">Maine</option>
427
+ <option value="MD">Maryland</option>
428
+ <option value="MA">Massachusetts</option>
429
+ <option value="MI">Michigan</option>
430
+ <option value="MN">Minnesota</option>
431
+ <option value="MS">Mississippi</option>
432
+ <option value="MO">Missouri</option>
433
+ <option value="MT">Montana</option>
434
+ <option value="NE">Nebraska</option>
435
+ <option value="NV">Nevada</option>
436
+ <option value="NH">New Hampshire</option>
437
+ <option value="NJ">New Jersey</option>
438
+ <option value="NM">New Mexico</option>
439
+ <option value="NY">New York</option>
440
+ <option value="NC">North Carolina</option>
441
+ <option value="ND">North Dakota</option>
442
+ <option value="OH">Ohio</option>
443
+ <option value="OK">Oklahoma</option>
444
+ <option value="OR">Oregon</option>
445
+ <option value="PA">Pennsylvania</option>
446
+ <option value="RI">Rhode Island</option>
447
+ <option value="SC">South Carolina</option>
448
+ <option value="SD">South Dakota</option>
449
+ <option value="TN">Tennessee</option>
450
+ <option value="TX">Texas</option>
451
+ <option value="UT">Utah</option>
452
+ <option value="VT">Vermont</option>
453
+ <option value="VA">Virginia</option>
454
+ <option value="WA">Washington</option>
455
+ <option value="WV">West Virginia</option>
456
+ <option value="WI">Wisconsin</option>
457
+ <option value="WY">Wyoming</option>
458
+ </select>
459
+ <div class="pf-v5-c-form-control__utilities">
460
+ <div class="pf-v5-c-form-control__toggle-icon">
461
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
462
+ </div>
463
+ </div>
464
+ </div>
457
465
  </div>
458
466
  </div>
459
467
  </div>
@@ -499,13 +507,14 @@ subsection: forms
499
507
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
500
508
  </div>
501
509
  <div class="pf-v5-c-form__group-control">
502
- <input
503
- class="pf-v5-c-form-control"
504
- required
505
- type="text"
506
- id="form-demo-sections-repeatable-fields-clientid"
507
- name="form-demo-sections-repeatable-fields-clientid"
508
- />
510
+ <div class="pf-v5-c-form-control">
511
+ <input
512
+ required
513
+ type="text"
514
+ id="form-demo-sections-repeatable-fields-clientid"
515
+ name="form-demo-sections-repeatable-fields-clientid"
516
+ />
517
+ </div>
509
518
  </div>
510
519
  </div>
511
520
  <div class="pf-v5-c-form__group">
@@ -523,13 +532,14 @@ subsection: forms
523
532
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
524
533
  </div>
525
534
  <div class="pf-v5-c-form__group-control">
526
- <input
527
- class="pf-v5-c-form-control"
528
- required
529
- type="text"
530
- id="form-demo-sections-repeatable-fields-name"
531
- name="form-demo-sections-repeatable-fields-name"
532
- />
535
+ <div class="pf-v5-c-form-control">
536
+ <input
537
+ required
538
+ type="text"
539
+ id="form-demo-sections-repeatable-fields-name"
540
+ name="form-demo-sections-repeatable-fields-name"
541
+ />
542
+ </div>
533
543
  </div>
534
544
  </div>
535
545
  <div class="pf-v5-c-form__group">
@@ -547,13 +557,14 @@ subsection: forms
547
557
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
548
558
  </div>
549
559
  <div class="pf-v5-c-form__group-control">
550
- <input
551
- class="pf-v5-c-form-control"
552
- required
553
- type="text"
554
- id="form-demo-sections-repeatable-fields-description"
555
- name="form-demo-sections-repeatable-fields-description"
556
- />
560
+ <div class="pf-v5-c-form-control">
561
+ <input
562
+ required
563
+ type="text"
564
+ id="form-demo-sections-repeatable-fields-description"
565
+ name="form-demo-sections-repeatable-fields-description"
566
+ />
567
+ </div>
557
568
  </div>
558
569
  </div>
559
570
  </section>
@@ -582,13 +593,14 @@ subsection: forms
582
593
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
583
594
  </div>
584
595
  <div class="pf-v5-c-form__group-control">
585
- <input
586
- class="pf-v5-c-form-control"
587
- required
588
- type="text"
589
- id="form-demo-sections-repeatable-fields-section2-rooturl"
590
- name="form-demo-sections-repeatable-fields-section2-rooturl"
591
- />
596
+ <div class="pf-v5-c-form-control">
597
+ <input
598
+ required
599
+ type="text"
600
+ id="form-demo-sections-repeatable-fields-section2-rooturl"
601
+ name="form-demo-sections-repeatable-fields-section2-rooturl"
602
+ />
603
+ </div>
592
604
  </div>
593
605
  </div>
594
606
  <div class="pf-v5-c-form__group">
@@ -608,14 +620,15 @@ subsection: forms
608
620
  <div class="pf-v5-c-form__group-control pf-m-stack">
609
621
  <div class="pf-v5-c-input-group">
610
622
  <div class="pf-v5-c-input-group__item pf-m-fill">
611
- <input
612
- class="pf-v5-c-form-control"
613
- required
614
- type="text"
615
- id="form-demo-sections-repeatable-fields-section2-uris-input-1"
616
- name="form-demo-sections-repeatable-fields-section2-uris-input-1"
617
- aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-1"
618
- />
623
+ <div class="pf-v5-c-form-control">
624
+ <input
625
+ required
626
+ type="text"
627
+ id="form-demo-sections-repeatable-fields-section2-uris-input-1"
628
+ name="form-demo-sections-repeatable-fields-section2-uris-input-1"
629
+ aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-1"
630
+ />
631
+ </div>
619
632
  </div>
620
633
  <div class="pf-v5-c-input-group__item pf-m-plain">
621
634
  <button
@@ -629,14 +642,15 @@ subsection: forms
629
642
  </div>
630
643
  <div class="pf-v5-c-input-group">
631
644
  <div class="pf-v5-c-input-group__item pf-m-fill">
632
- <input
633
- class="pf-v5-c-form-control"
634
- required
635
- type="text"
636
- id="form-demo-sections-repeatable-fields-section2-uris-input-2"
637
- name="form-demo-sections-repeatable-fields-section2-uris-input-2"
638
- aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-2"
639
- />
645
+ <div class="pf-v5-c-form-control">
646
+ <input
647
+ required
648
+ type="text"
649
+ id="form-demo-sections-repeatable-fields-section2-uris-input-2"
650
+ name="form-demo-sections-repeatable-fields-section2-uris-input-2"
651
+ aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-2"
652
+ />
653
+ </div>
640
654
  </div>
641
655
  <div class="pf-v5-c-input-group__item pf-m-plain">
642
656
  <button
@@ -650,14 +664,15 @@ subsection: forms
650
664
  </div>
651
665
  <div class="pf-v5-c-input-group">
652
666
  <div class="pf-v5-c-input-group__item pf-m-fill">
653
- <input
654
- class="pf-v5-c-form-control"
655
- required
656
- type="text"
657
- id="form-demo-sections-repeatable-fields-section2-uris-input-3"
658
- name="form-demo-sections-repeatable-fields-section2-uris-input-3"
659
- aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-3"
660
- />
667
+ <div class="pf-v5-c-form-control">
668
+ <input
669
+ required
670
+ type="text"
671
+ id="form-demo-sections-repeatable-fields-section2-uris-input-3"
672
+ name="form-demo-sections-repeatable-fields-section2-uris-input-3"
673
+ aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-3"
674
+ />
675
+ </div>
661
676
  </div>
662
677
  <div class="pf-v5-c-input-group__item pf-m-plain">
663
678
  <button
@@ -692,13 +707,14 @@ subsection: forms
692
707
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
693
708
  </div>
694
709
  <div class="pf-v5-c-form__group-control">
695
- <input
696
- class="pf-v5-c-form-control"
697
- required
698
- type="text"
699
- id="form-demo-sections-repeatable-fields-section2-home-url"
700
- name="form-demo-sections-repeatable-fields-section2-home-url"
701
- />
710
+ <div class="pf-v5-c-form-control">
711
+ <input
712
+ required
713
+ type="text"
714
+ id="form-demo-sections-repeatable-fields-section2-home-url"
715
+ name="form-demo-sections-repeatable-fields-section2-home-url"
716
+ />
717
+ </div>
702
718
  </div>
703
719
  </div>
704
720
  </section>
@@ -725,13 +741,14 @@ subsection: forms
725
741
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
726
742
  </div>
727
743
  <div class="pf-v5-c-form__group-control">
728
- <input
729
- class="pf-v5-c-form-control"
730
- type="text"
731
- id="form-demo-sections-complex-form-name"
732
- name="form-demo-sections-complex-form-name"
733
- required
734
- />
744
+ <div class="pf-v5-c-form-control">
745
+ <input
746
+ type="text"
747
+ id="form-demo-sections-complex-form-name"
748
+ name="form-demo-sections-complex-form-name"
749
+ required
750
+ />
751
+ </div>
735
752
  </div>
736
753
  </div>
737
754
 
@@ -1058,14 +1075,15 @@ subsection: forms
1058
1075
  <div class="pf-v5-c-form__group-control pf-m-stack">
1059
1076
  <div class="pf-v5-c-input-group">
1060
1077
  <div class="pf-v5-c-input-group__item pf-m-fill">
1061
- <input
1062
- class="pf-v5-c-form-control"
1063
- required
1064
- type="text"
1065
- id="-node-selector-terms-input-1"
1066
- name="-node-selector-terms-input-1"
1067
- aria-labelledby="-node-selector-terms -node-selector-terms-title"
1068
- />
1078
+ <div class="pf-v5-c-form-control">
1079
+ <input
1080
+ required
1081
+ type="text"
1082
+ id="-node-selector-terms-input-1"
1083
+ name="-node-selector-terms-input-1"
1084
+ aria-labelledby="-node-selector-terms -node-selector-terms-title"
1085
+ />
1086
+ </div>
1069
1087
  </div>
1070
1088
  <div class="pf-v5-c-input-group__item pf-m-plain">
1071
1089
  <button
@@ -1205,12 +1223,13 @@ subsection: forms
1205
1223
  <span class="pf-v5-c-form__label-text">Hostname</span></label>
1206
1224
  </div>
1207
1225
  <div class="pf-v5-c-form__group-control">
1208
- <input
1209
- class="pf-v5-c-form-control"
1210
- type="text"
1211
- id="form-demo-sections-complex-form-routing-hostname"
1212
- name="form-demo-sections-complex-form-routing-hostname"
1213
- />
1226
+ <div class="pf-v5-c-form-control">
1227
+ <input
1228
+ type="text"
1229
+ id="form-demo-sections-complex-form-routing-hostname"
1230
+ name="form-demo-sections-complex-form-routing-hostname"
1231
+ />
1232
+ </div>
1214
1233
 
1215
1234
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
1216
1235
  <div class="pf-v5-c-helper-text">
@@ -1234,14 +1253,15 @@ subsection: forms
1234
1253
  <span class="pf-v5-c-form__label-text">Path</span></label>
1235
1254
  </div>
1236
1255
  <div class="pf-v5-c-form__group-control">
1237
- <input
1238
- class="pf-v5-c-form-control"
1239
- type="text"
1240
- placeholder="/"
1241
- id="form-demo-sections-complex-form-routing-path"
1242
- name="form-demo-sections-complex-form-routing-path"
1243
- required
1244
- />
1256
+ <div class="pf-v5-c-form-control">
1257
+ <input
1258
+ type="text"
1259
+ placeholder="/"
1260
+ id="form-demo-sections-complex-form-routing-path"
1261
+ name="form-demo-sections-complex-form-routing-path"
1262
+ required
1263
+ />
1264
+ </div>
1245
1265
 
1246
1266
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
1247
1267
  <div class="pf-v5-c-helper-text">