@patternfly/patternfly 4.196.4 → 4.196.7
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.
- package/RELEASE-NOTES.md +24 -0
- package/base/themes/dark/_chart-globals.scss +39 -0
- package/base/themes/dark/_globals.scss +5 -0
- package/base/themes/dark/_variables.scss +95 -0
- package/components/ChipGroup/chip-group.css +1 -1
- package/components/ChipGroup/chip-group.scss +2 -1
- package/components/LabelGroup/label-group.css +1 -0
- package/components/LabelGroup/label-group.scss +1 -0
- package/docs/components/Form/examples/Form.md +56 -511
- package/docs/demos/Form/examples/BasicForms.md +781 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +2 -1
- package/patternfly.css +2 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/themes/dark/colors.scss +16 -0
- package/sass-utilities/themes/dark/mixins.scss +5 -0
- package/sass-utilities/themes/dark/placeholders.scss +28 -0
- package/sass-utilities/themes/dark/scss-variables.scss +86 -0
|
@@ -435,291 +435,37 @@ cssPrefix: pf-c-form
|
|
|
435
435
|
|
|
436
436
|
```
|
|
437
437
|
|
|
438
|
-
### Field
|
|
438
|
+
### Field group (non-expandable)
|
|
439
439
|
|
|
440
440
|
```html
|
|
441
441
|
<form novalidate class="pf-c-form">
|
|
442
|
-
<div class="pf-c-form__group">
|
|
443
|
-
<div class="pf-c-form__group-label">
|
|
444
|
-
<label class="pf-c-form__label" for="form-expandable-field-groups-label1">
|
|
445
|
-
<span class="pf-c-form__label-text">Label 1</span>
|
|
446
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
447
|
-
</label>
|
|
448
|
-
|
|
449
|
-
<button
|
|
450
|
-
class="pf-c-form__group-label-help"
|
|
451
|
-
aria-label="More information for label 1 field"
|
|
452
|
-
aria-describedby="form-expandable-field-groups-label1"
|
|
453
|
-
>
|
|
454
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
455
|
-
</button>
|
|
456
|
-
</div>
|
|
457
|
-
<div class="pf-c-form__group-control">
|
|
458
|
-
<input
|
|
459
|
-
class="pf-c-form-control"
|
|
460
|
-
type="text"
|
|
461
|
-
id="form-expandable-field-groups-label1"
|
|
462
|
-
name="form-expandable-field-groups-label1"
|
|
463
|
-
required
|
|
464
|
-
/>
|
|
465
|
-
</div>
|
|
466
|
-
</div>
|
|
467
|
-
<div class="pf-c-form__group">
|
|
468
|
-
<div class="pf-c-form__group-label">
|
|
469
|
-
<label class="pf-c-form__label" for="form-expandable-field-groups-label2">
|
|
470
|
-
<span class="pf-c-form__label-text">Label 2</span>
|
|
471
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
472
|
-
</label>
|
|
473
|
-
|
|
474
|
-
<button
|
|
475
|
-
class="pf-c-form__group-label-help"
|
|
476
|
-
aria-label="More information for label 2 field"
|
|
477
|
-
aria-describedby="form-expandable-field-groups-label2"
|
|
478
|
-
>
|
|
479
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
480
|
-
</button>
|
|
481
|
-
</div>
|
|
482
|
-
<div class="pf-c-form__group-control">
|
|
483
|
-
<input
|
|
484
|
-
class="pf-c-form-control"
|
|
485
|
-
type="text"
|
|
486
|
-
id="form-expandable-field-groups-label2"
|
|
487
|
-
name="form-expandable-field-groups-label2"
|
|
488
|
-
required
|
|
489
|
-
/>
|
|
490
|
-
</div>
|
|
491
|
-
</div>
|
|
492
442
|
<div
|
|
493
|
-
class="pf-c-form__field-group
|
|
443
|
+
class="pf-c-form__field-group"
|
|
494
444
|
role="group"
|
|
495
|
-
aria-labelledby="form-
|
|
445
|
+
aria-labelledby="form-field-group-field-group-title"
|
|
496
446
|
>
|
|
497
|
-
<div class="pf-c-form__field-group-toggle">
|
|
498
|
-
<div class="pf-c-form__field-group-toggle-button">
|
|
499
|
-
<button
|
|
500
|
-
class="pf-c-button pf-m-plain"
|
|
501
|
-
type="button"
|
|
502
|
-
aria-expanded="true"
|
|
503
|
-
aria-label="Details"
|
|
504
|
-
id="form-expandable-field-groups-field-group1-toggle"
|
|
505
|
-
aria-labelledby="form-expandable-field-groups-field-group1-title form-expandable-field-groups-field-group1-toggle"
|
|
506
|
-
>
|
|
507
|
-
<span class="pf-c-form__field-group-toggle-icon">
|
|
508
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
509
|
-
</span>
|
|
510
|
-
</button>
|
|
511
|
-
</div>
|
|
512
|
-
</div>
|
|
513
447
|
<div class="pf-c-form__field-group-header">
|
|
514
448
|
<div class="pf-c-form__field-group-header-main">
|
|
515
449
|
<div class="pf-c-form__field-group-header-title">
|
|
516
450
|
<div
|
|
517
451
|
class="pf-c-form__field-group-header-title-text"
|
|
518
|
-
id="form-
|
|
519
|
-
>Field group
|
|
452
|
+
id="form-field-group-field-group-title"
|
|
453
|
+
>Field group Title</div>
|
|
520
454
|
</div>
|
|
521
455
|
<div
|
|
522
456
|
class="pf-c-form__field-group-header-description"
|
|
523
|
-
>Field group
|
|
457
|
+
>Field group description text</div>
|
|
524
458
|
</div>
|
|
525
459
|
<div class="pf-c-form__field-group-header-actions">
|
|
526
|
-
<button class="pf-c-button pf-m-
|
|
527
|
-
<button class="pf-c-button pf-m-secondary" type="button">Add parameter</button>
|
|
460
|
+
<button class="pf-c-button pf-m-secondary" type="button">Action</button>
|
|
528
461
|
</div>
|
|
529
462
|
</div>
|
|
530
|
-
<div class="pf-c-form__field-group-body">
|
|
531
|
-
<div
|
|
532
|
-
class="pf-c-form__field-group pf-m-expanded"
|
|
533
|
-
role="group"
|
|
534
|
-
aria-labelledby="form-expandable-field-groups-field-group2-title"
|
|
535
|
-
>
|
|
536
|
-
<div class="pf-c-form__field-group-toggle">
|
|
537
|
-
<div class="pf-c-form__field-group-toggle-button">
|
|
538
|
-
<button
|
|
539
|
-
class="pf-c-button pf-m-plain"
|
|
540
|
-
type="button"
|
|
541
|
-
aria-expanded="true"
|
|
542
|
-
aria-label="Details"
|
|
543
|
-
id="form-expandable-field-groups-field-group2-toggle"
|
|
544
|
-
aria-labelledby="form-expandable-field-groups-field-group2-title form-expandable-field-groups-field-group2-toggle"
|
|
545
|
-
>
|
|
546
|
-
<span class="pf-c-form__field-group-toggle-icon">
|
|
547
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
548
|
-
</span>
|
|
549
|
-
</button>
|
|
550
|
-
</div>
|
|
551
|
-
</div>
|
|
552
|
-
<div class="pf-c-form__field-group-header">
|
|
553
|
-
<div class="pf-c-form__field-group-header-main">
|
|
554
|
-
<div class="pf-c-form__field-group-header-title">
|
|
555
|
-
<div
|
|
556
|
-
class="pf-c-form__field-group-header-title-text"
|
|
557
|
-
id="form-expandable-field-groups-field-group2-title"
|
|
558
|
-
>Nested field group 1</div>
|
|
559
|
-
</div>
|
|
560
|
-
<div
|
|
561
|
-
class="pf-c-form__field-group-header-description"
|
|
562
|
-
>Nested field group 1 description text.</div>
|
|
563
|
-
</div>
|
|
564
|
-
<div class="pf-c-form__field-group-header-actions">
|
|
565
|
-
<button
|
|
566
|
-
class="pf-c-button pf-m-plain"
|
|
567
|
-
type="button"
|
|
568
|
-
aria-label="Remove"
|
|
569
|
-
>
|
|
570
|
-
<i class="fas fa-trash"></i>
|
|
571
|
-
</button>
|
|
572
|
-
</div>
|
|
573
|
-
</div>
|
|
574
|
-
<div class="pf-c-form__field-group-body">
|
|
575
|
-
<div class="pf-c-form__group">
|
|
576
|
-
<div class="pf-c-form__group-label">
|
|
577
|
-
<label
|
|
578
|
-
class="pf-c-form__label"
|
|
579
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-group2-label1"
|
|
580
|
-
>
|
|
581
|
-
<span class="pf-c-form__label-text">Label 1</span>
|
|
582
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
583
|
-
</label>
|
|
584
|
-
|
|
585
|
-
<button
|
|
586
|
-
class="pf-c-form__group-label-help"
|
|
587
|
-
aria-label="More information for label 1 field"
|
|
588
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group2-label1"
|
|
589
|
-
>
|
|
590
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
591
|
-
</button>
|
|
592
|
-
</div>
|
|
593
|
-
<div class="pf-c-form__group-control">
|
|
594
|
-
<input
|
|
595
|
-
class="pf-c-form-control"
|
|
596
|
-
type="text"
|
|
597
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-group2-label1"
|
|
598
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-group2-label1"
|
|
599
|
-
required
|
|
600
|
-
/>
|
|
601
|
-
</div>
|
|
602
|
-
</div>
|
|
603
|
-
<div class="pf-c-form__group">
|
|
604
|
-
<div class="pf-c-form__group-label">
|
|
605
|
-
<label
|
|
606
|
-
class="pf-c-form__label"
|
|
607
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-group2-label2"
|
|
608
|
-
>
|
|
609
|
-
<span class="pf-c-form__label-text">Label 2</span>
|
|
610
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
611
|
-
</label>
|
|
612
|
-
|
|
613
|
-
<button
|
|
614
|
-
class="pf-c-form__group-label-help"
|
|
615
|
-
aria-label="More information for label 2 field"
|
|
616
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group2-label2"
|
|
617
|
-
>
|
|
618
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
619
|
-
</button>
|
|
620
|
-
</div>
|
|
621
|
-
<div class="pf-c-form__group-control">
|
|
622
|
-
<input
|
|
623
|
-
class="pf-c-form-control"
|
|
624
|
-
type="text"
|
|
625
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-group2-label2"
|
|
626
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-group2-label2"
|
|
627
|
-
required
|
|
628
|
-
/>
|
|
629
|
-
</div>
|
|
630
|
-
</div>
|
|
631
|
-
</div>
|
|
632
|
-
</div>
|
|
633
|
-
<div
|
|
634
|
-
class="pf-c-form__field-group"
|
|
635
|
-
role="group"
|
|
636
|
-
aria-labelledby="form-expandable-field-groups-field-group3-title"
|
|
637
|
-
>
|
|
638
|
-
<div class="pf-c-form__field-group-toggle">
|
|
639
|
-
<div class="pf-c-form__field-group-toggle-button">
|
|
640
|
-
<button
|
|
641
|
-
class="pf-c-button pf-m-plain"
|
|
642
|
-
type="button"
|
|
643
|
-
aria-expanded="false"
|
|
644
|
-
aria-label="Details"
|
|
645
|
-
id="form-expandable-field-groups-field-group3-toggle"
|
|
646
|
-
aria-labelledby="form-expandable-field-groups-field-group3-title form-expandable-field-groups-field-group3-toggle"
|
|
647
|
-
>
|
|
648
|
-
<span class="pf-c-form__field-group-toggle-icon">
|
|
649
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
650
|
-
</span>
|
|
651
|
-
</button>
|
|
652
|
-
</div>
|
|
653
|
-
</div>
|
|
654
|
-
<div class="pf-c-form__field-group-header">
|
|
655
|
-
<div class="pf-c-form__field-group-header-main">
|
|
656
|
-
<div class="pf-c-form__field-group-header-title">
|
|
657
|
-
<div
|
|
658
|
-
class="pf-c-form__field-group-header-title-text"
|
|
659
|
-
id="form-expandable-field-groups-field-group3-title"
|
|
660
|
-
>Nested field group 2</div>
|
|
661
|
-
</div>
|
|
662
|
-
</div>
|
|
663
|
-
<div class="pf-c-form__field-group-header-actions">
|
|
664
|
-
<button
|
|
665
|
-
class="pf-c-button pf-m-plain"
|
|
666
|
-
type="button"
|
|
667
|
-
aria-label="Remove"
|
|
668
|
-
>
|
|
669
|
-
<i class="fas fa-trash"></i>
|
|
670
|
-
</button>
|
|
671
|
-
</div>
|
|
672
|
-
</div>
|
|
673
|
-
</div>
|
|
674
|
-
<div
|
|
675
|
-
class="pf-c-form__field-group"
|
|
676
|
-
role="group"
|
|
677
|
-
aria-labelledby="form-expandable-field-groups-field-group4-title"
|
|
678
|
-
>
|
|
679
|
-
<div class="pf-c-form__field-group-toggle">
|
|
680
|
-
<div class="pf-c-form__field-group-toggle-button">
|
|
681
|
-
<button
|
|
682
|
-
class="pf-c-button pf-m-plain"
|
|
683
|
-
type="button"
|
|
684
|
-
aria-expanded="false"
|
|
685
|
-
aria-label="Details"
|
|
686
|
-
id="form-expandable-field-groups-field-group4-toggle"
|
|
687
|
-
aria-labelledby="form-expandable-field-groups-field-group4-title form-expandable-field-groups-field-group4-toggle"
|
|
688
|
-
>
|
|
689
|
-
<span class="pf-c-form__field-group-toggle-icon">
|
|
690
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
691
|
-
</span>
|
|
692
|
-
</button>
|
|
693
|
-
</div>
|
|
694
|
-
</div>
|
|
695
|
-
<div class="pf-c-form__field-group-header">
|
|
696
|
-
<div class="pf-c-form__field-group-header-main">
|
|
697
|
-
<div class="pf-c-form__field-group-header-title">
|
|
698
|
-
<div
|
|
699
|
-
class="pf-c-form__field-group-header-title-text"
|
|
700
|
-
id="form-expandable-field-groups-field-group4-title"
|
|
701
|
-
>Nested field group 3</div>
|
|
702
|
-
</div>
|
|
703
|
-
<div
|
|
704
|
-
class="pf-c-form__field-group-header-description"
|
|
705
|
-
>Nested field group 3 description text.</div>
|
|
706
|
-
</div>
|
|
707
|
-
<div class="pf-c-form__field-group-header-actions">
|
|
708
|
-
<button
|
|
709
|
-
class="pf-c-button pf-m-plain"
|
|
710
|
-
type="button"
|
|
711
|
-
aria-label="Remove"
|
|
712
|
-
>
|
|
713
|
-
<i class="fas fa-trash"></i>
|
|
714
|
-
</button>
|
|
715
|
-
</div>
|
|
716
|
-
</div>
|
|
717
|
-
</div>
|
|
463
|
+
<div class="pf-c-form__field-group-body" hidden>
|
|
718
464
|
<div class="pf-c-form__group">
|
|
719
465
|
<div class="pf-c-form__group-label">
|
|
720
466
|
<label
|
|
721
467
|
class="pf-c-form__label"
|
|
722
|
-
for="form-
|
|
468
|
+
for="form-field-groupform-field-group-field-group-label1"
|
|
723
469
|
>
|
|
724
470
|
<span class="pf-c-form__label-text">Label 1</span>
|
|
725
471
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -728,7 +474,7 @@ cssPrefix: pf-c-form
|
|
|
728
474
|
<button
|
|
729
475
|
class="pf-c-form__group-label-help"
|
|
730
476
|
aria-label="More information for label 1 field"
|
|
731
|
-
aria-describedby="form-
|
|
477
|
+
aria-describedby="form-field-groupform-field-group-field-group-label1"
|
|
732
478
|
>
|
|
733
479
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
734
480
|
</button>
|
|
@@ -737,8 +483,8 @@ cssPrefix: pf-c-form
|
|
|
737
483
|
<input
|
|
738
484
|
class="pf-c-form-control"
|
|
739
485
|
type="text"
|
|
740
|
-
id="form-
|
|
741
|
-
name="form-
|
|
486
|
+
id="form-field-groupform-field-group-field-group-label1"
|
|
487
|
+
name="form-field-groupform-field-group-field-group-label1"
|
|
742
488
|
required
|
|
743
489
|
/>
|
|
744
490
|
</div>
|
|
@@ -747,7 +493,7 @@ cssPrefix: pf-c-form
|
|
|
747
493
|
<div class="pf-c-form__group-label">
|
|
748
494
|
<label
|
|
749
495
|
class="pf-c-form__label"
|
|
750
|
-
for="form-
|
|
496
|
+
for="form-field-groupform-field-group-field-group-label2"
|
|
751
497
|
>
|
|
752
498
|
<span class="pf-c-form__label-text">Label 2</span>
|
|
753
499
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -756,7 +502,7 @@ cssPrefix: pf-c-form
|
|
|
756
502
|
<button
|
|
757
503
|
class="pf-c-form__group-label-help"
|
|
758
504
|
aria-label="More information for label 2 field"
|
|
759
|
-
aria-describedby="form-
|
|
505
|
+
aria-describedby="form-field-groupform-field-group-field-group-label2"
|
|
760
506
|
>
|
|
761
507
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
762
508
|
</button>
|
|
@@ -765,18 +511,26 @@ cssPrefix: pf-c-form
|
|
|
765
511
|
<input
|
|
766
512
|
class="pf-c-form-control"
|
|
767
513
|
type="text"
|
|
768
|
-
id="form-
|
|
769
|
-
name="form-
|
|
514
|
+
id="form-field-groupform-field-group-field-group-label2"
|
|
515
|
+
name="form-field-groupform-field-group-field-group-label2"
|
|
770
516
|
required
|
|
771
517
|
/>
|
|
772
518
|
</div>
|
|
773
519
|
</div>
|
|
774
520
|
</div>
|
|
775
521
|
</div>
|
|
522
|
+
</form>
|
|
523
|
+
|
|
524
|
+
```
|
|
525
|
+
|
|
526
|
+
### Expandable and nested field groups
|
|
527
|
+
|
|
528
|
+
```html
|
|
529
|
+
<form novalidate class="pf-c-form">
|
|
776
530
|
<div
|
|
777
531
|
class="pf-c-form__field-group"
|
|
778
532
|
role="group"
|
|
779
|
-
aria-labelledby="form-expandable-field-groups-field-
|
|
533
|
+
aria-labelledby="form-expandable-field-groups-field-group-1-title"
|
|
780
534
|
>
|
|
781
535
|
<div class="pf-c-form__field-group-toggle">
|
|
782
536
|
<div class="pf-c-form__field-group-toggle-button">
|
|
@@ -785,8 +539,8 @@ cssPrefix: pf-c-form
|
|
|
785
539
|
type="button"
|
|
786
540
|
aria-expanded="false"
|
|
787
541
|
aria-label="Details"
|
|
788
|
-
id="form-expandable-field-groups-field-
|
|
789
|
-
aria-labelledby="form-expandable-field-groups-field-
|
|
542
|
+
id="form-expandable-field-groups-field-group-1-toggle"
|
|
543
|
+
aria-labelledby="form-expandable-field-groups-field-group-1-title form-expandable-field-groups-field-group-1-toggle"
|
|
790
544
|
>
|
|
791
545
|
<span class="pf-c-form__field-group-toggle-icon">
|
|
792
546
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -799,23 +553,22 @@ cssPrefix: pf-c-form
|
|
|
799
553
|
<div class="pf-c-form__field-group-header-title">
|
|
800
554
|
<div
|
|
801
555
|
class="pf-c-form__field-group-header-title-text"
|
|
802
|
-
id="form-expandable-field-groups-field-
|
|
803
|
-
>Field group
|
|
556
|
+
id="form-expandable-field-groups-field-group-1-title"
|
|
557
|
+
>Field group 1</div>
|
|
804
558
|
</div>
|
|
805
559
|
<div
|
|
806
560
|
class="pf-c-form__field-group-header-description"
|
|
807
|
-
>Field group 1 description text
|
|
561
|
+
>Field group 1 description text</div>
|
|
808
562
|
</div>
|
|
809
563
|
<div class="pf-c-form__field-group-header-actions">
|
|
810
|
-
<button class="pf-c-button pf-m-
|
|
811
|
-
<button class="pf-c-button pf-m-secondary" type="button">Add parameter</button>
|
|
564
|
+
<button class="pf-c-button pf-m-secondary" type="button">Action</button>
|
|
812
565
|
</div>
|
|
813
566
|
</div>
|
|
814
567
|
</div>
|
|
815
568
|
<div
|
|
816
569
|
class="pf-c-form__field-group pf-m-expanded"
|
|
817
570
|
role="group"
|
|
818
|
-
aria-labelledby="form-expandable-field-groups-field-
|
|
571
|
+
aria-labelledby="form-expandable-field-groups-field-group-2-title"
|
|
819
572
|
>
|
|
820
573
|
<div class="pf-c-form__field-group-toggle">
|
|
821
574
|
<div class="pf-c-form__field-group-toggle-button">
|
|
@@ -824,8 +577,8 @@ cssPrefix: pf-c-form
|
|
|
824
577
|
type="button"
|
|
825
578
|
aria-expanded="true"
|
|
826
579
|
aria-label="Details"
|
|
827
|
-
id="form-expandable-field-groups-field-
|
|
828
|
-
aria-labelledby="form-expandable-field-groups-field-
|
|
580
|
+
id="form-expandable-field-groups-field-group-2-toggle"
|
|
581
|
+
aria-labelledby="form-expandable-field-groups-field-group-2-title form-expandable-field-groups-field-group-2-toggle"
|
|
829
582
|
>
|
|
830
583
|
<span class="pf-c-form__field-group-toggle-icon">
|
|
831
584
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -838,12 +591,12 @@ cssPrefix: pf-c-form
|
|
|
838
591
|
<div class="pf-c-form__field-group-header-title">
|
|
839
592
|
<div
|
|
840
593
|
class="pf-c-form__field-group-header-title-text"
|
|
841
|
-
id="form-expandable-field-groups-field-
|
|
842
|
-
>Field group
|
|
594
|
+
id="form-expandable-field-groups-field-group-2-title"
|
|
595
|
+
>Field group 2</div>
|
|
843
596
|
</div>
|
|
844
597
|
<div
|
|
845
598
|
class="pf-c-form__field-group-header-description"
|
|
846
|
-
>Field group
|
|
599
|
+
>Field group 2 description text</div>
|
|
847
600
|
</div>
|
|
848
601
|
</div>
|
|
849
602
|
<div class="pf-c-form__field-group-body">
|
|
@@ -851,7 +604,7 @@ cssPrefix: pf-c-form
|
|
|
851
604
|
<div class="pf-c-form__group-label">
|
|
852
605
|
<label
|
|
853
606
|
class="pf-c-form__label"
|
|
854
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
607
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
|
|
855
608
|
>
|
|
856
609
|
<span class="pf-c-form__label-text">Label 1</span>
|
|
857
610
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -860,7 +613,7 @@ cssPrefix: pf-c-form
|
|
|
860
613
|
<button
|
|
861
614
|
class="pf-c-form__group-label-help"
|
|
862
615
|
aria-label="More information for label 1 field"
|
|
863
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
616
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
|
|
864
617
|
>
|
|
865
618
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
866
619
|
</button>
|
|
@@ -869,8 +622,8 @@ cssPrefix: pf-c-form
|
|
|
869
622
|
<input
|
|
870
623
|
class="pf-c-form-control"
|
|
871
624
|
type="text"
|
|
872
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
873
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
625
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
|
|
626
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
|
|
874
627
|
required
|
|
875
628
|
/>
|
|
876
629
|
</div>
|
|
@@ -879,7 +632,7 @@ cssPrefix: pf-c-form
|
|
|
879
632
|
<div class="pf-c-form__group-label">
|
|
880
633
|
<label
|
|
881
634
|
class="pf-c-form__label"
|
|
882
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
635
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
|
|
883
636
|
>
|
|
884
637
|
<span class="pf-c-form__label-text">Label 2</span>
|
|
885
638
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -888,7 +641,7 @@ cssPrefix: pf-c-form
|
|
|
888
641
|
<button
|
|
889
642
|
class="pf-c-form__group-label-help"
|
|
890
643
|
aria-label="More information for label 2 field"
|
|
891
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
644
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
|
|
892
645
|
>
|
|
893
646
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
894
647
|
</button>
|
|
@@ -897,8 +650,8 @@ cssPrefix: pf-c-form
|
|
|
897
650
|
<input
|
|
898
651
|
class="pf-c-form-control"
|
|
899
652
|
type="text"
|
|
900
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
901
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
653
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
|
|
654
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
|
|
902
655
|
required
|
|
903
656
|
/>
|
|
904
657
|
</div>
|
|
@@ -906,93 +659,16 @@ cssPrefix: pf-c-form
|
|
|
906
659
|
<div
|
|
907
660
|
class="pf-c-form__field-group pf-m-expanded"
|
|
908
661
|
role="group"
|
|
909
|
-
aria-labelledby="form-expandable-field-groups-field-
|
|
662
|
+
aria-labelledby="form-expandable-field-groups-field-group-3-title"
|
|
910
663
|
>
|
|
911
664
|
<div class="pf-c-form__field-group-header">
|
|
912
665
|
<div class="pf-c-form__field-group-header-main">
|
|
913
666
|
<div class="pf-c-form__field-group-header-title">
|
|
914
667
|
<div
|
|
915
668
|
class="pf-c-form__field-group-header-title-text"
|
|
916
|
-
id="form-expandable-field-groups-field-
|
|
917
|
-
>Nested field group
|
|
918
|
-
</div>
|
|
919
|
-
</div>
|
|
920
|
-
</div>
|
|
921
|
-
<div class="pf-c-form__field-group-body">
|
|
922
|
-
<div class="pf-c-form__group">
|
|
923
|
-
<div class="pf-c-form__group-label">
|
|
924
|
-
<label
|
|
925
|
-
class="pf-c-form__label"
|
|
926
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-group7-label1"
|
|
927
|
-
>
|
|
928
|
-
<span class="pf-c-form__label-text">Label 1</span>
|
|
929
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
930
|
-
</label>
|
|
931
|
-
|
|
932
|
-
<button
|
|
933
|
-
class="pf-c-form__group-label-help"
|
|
934
|
-
aria-label="More information for label 1 field"
|
|
935
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group7-label1"
|
|
936
|
-
>
|
|
937
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
938
|
-
</button>
|
|
939
|
-
</div>
|
|
940
|
-
<div class="pf-c-form__group-control">
|
|
941
|
-
<input
|
|
942
|
-
class="pf-c-form-control"
|
|
943
|
-
type="text"
|
|
944
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-group7-label1"
|
|
945
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-group7-label1"
|
|
946
|
-
required
|
|
947
|
-
/>
|
|
948
|
-
</div>
|
|
949
|
-
</div>
|
|
950
|
-
<div class="pf-c-form__group">
|
|
951
|
-
<div class="pf-c-form__group-label">
|
|
952
|
-
<label
|
|
953
|
-
class="pf-c-form__label"
|
|
954
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-group7-label2"
|
|
955
|
-
>
|
|
956
|
-
<span class="pf-c-form__label-text">Label 2</span>
|
|
957
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
958
|
-
</label>
|
|
959
|
-
|
|
960
|
-
<button
|
|
961
|
-
class="pf-c-form__group-label-help"
|
|
962
|
-
aria-label="More information for label 2 field"
|
|
963
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group7-label2"
|
|
964
|
-
>
|
|
965
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
966
|
-
</button>
|
|
967
|
-
</div>
|
|
968
|
-
<div class="pf-c-form__group-control">
|
|
969
|
-
<input
|
|
970
|
-
class="pf-c-form-control"
|
|
971
|
-
type="text"
|
|
972
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-group7-label2"
|
|
973
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-group7-label2"
|
|
974
|
-
required
|
|
975
|
-
/>
|
|
976
|
-
</div>
|
|
977
|
-
</div>
|
|
978
|
-
</div>
|
|
979
|
-
</div>
|
|
980
|
-
<div
|
|
981
|
-
class="pf-c-form__field-group pf-m-expanded"
|
|
982
|
-
role="group"
|
|
983
|
-
aria-labelledby="form-expandable-field-groups-field-group8-title"
|
|
984
|
-
>
|
|
985
|
-
<div class="pf-c-form__field-group-header">
|
|
986
|
-
<div class="pf-c-form__field-group-header-main">
|
|
987
|
-
<div class="pf-c-form__field-group-header-title">
|
|
988
|
-
<div
|
|
989
|
-
class="pf-c-form__field-group-header-title-text"
|
|
990
|
-
id="form-expandable-field-groups-field-group8-title"
|
|
991
|
-
>Nested field group 2 (non-expandable)</div>
|
|
669
|
+
id="form-expandable-field-groups-field-group-3-title"
|
|
670
|
+
>Nested field group 3</div>
|
|
992
671
|
</div>
|
|
993
|
-
<div
|
|
994
|
-
class="pf-c-form__field-group-header-description"
|
|
995
|
-
>Field group 1 description text.</div>
|
|
996
672
|
</div>
|
|
997
673
|
</div>
|
|
998
674
|
<div class="pf-c-form__field-group-body">
|
|
@@ -1000,7 +676,7 @@ cssPrefix: pf-c-form
|
|
|
1000
676
|
<div class="pf-c-form__group-label">
|
|
1001
677
|
<label
|
|
1002
678
|
class="pf-c-form__label"
|
|
1003
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
679
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
|
|
1004
680
|
>
|
|
1005
681
|
<span class="pf-c-form__label-text">Label 1</span>
|
|
1006
682
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -1009,7 +685,7 @@ cssPrefix: pf-c-form
|
|
|
1009
685
|
<button
|
|
1010
686
|
class="pf-c-form__group-label-help"
|
|
1011
687
|
aria-label="More information for label 1 field"
|
|
1012
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
688
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
|
|
1013
689
|
>
|
|
1014
690
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1015
691
|
</button>
|
|
@@ -1018,8 +694,8 @@ cssPrefix: pf-c-form
|
|
|
1018
694
|
<input
|
|
1019
695
|
class="pf-c-form-control"
|
|
1020
696
|
type="text"
|
|
1021
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
1022
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
697
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
|
|
698
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
|
|
1023
699
|
required
|
|
1024
700
|
/>
|
|
1025
701
|
</div>
|
|
@@ -1028,7 +704,7 @@ cssPrefix: pf-c-form
|
|
|
1028
704
|
<div class="pf-c-form__group-label">
|
|
1029
705
|
<label
|
|
1030
706
|
class="pf-c-form__label"
|
|
1031
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
707
|
+
for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
|
|
1032
708
|
>
|
|
1033
709
|
<span class="pf-c-form__label-text">Label 2</span>
|
|
1034
710
|
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
@@ -1037,7 +713,7 @@ cssPrefix: pf-c-form
|
|
|
1037
713
|
<button
|
|
1038
714
|
class="pf-c-form__group-label-help"
|
|
1039
715
|
aria-label="More information for label 2 field"
|
|
1040
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
716
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
|
|
1041
717
|
>
|
|
1042
718
|
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1043
719
|
</button>
|
|
@@ -1046,8 +722,8 @@ cssPrefix: pf-c-form
|
|
|
1046
722
|
<input
|
|
1047
723
|
class="pf-c-form-control"
|
|
1048
724
|
type="text"
|
|
1049
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
1050
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-
|
|
725
|
+
id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
|
|
726
|
+
name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
|
|
1051
727
|
required
|
|
1052
728
|
/>
|
|
1053
729
|
</div>
|
|
@@ -1056,137 +732,6 @@ cssPrefix: pf-c-form
|
|
|
1056
732
|
</div>
|
|
1057
733
|
</div>
|
|
1058
734
|
</div>
|
|
1059
|
-
<div
|
|
1060
|
-
class="pf-c-form__field-group"
|
|
1061
|
-
role="group"
|
|
1062
|
-
aria-labelledby="form-expandable-field-groups-field-group9-title"
|
|
1063
|
-
>
|
|
1064
|
-
<div class="pf-c-form__field-group-header">
|
|
1065
|
-
<div class="pf-c-form__field-group-header-main">
|
|
1066
|
-
<div class="pf-c-form__field-group-header-title">
|
|
1067
|
-
<div
|
|
1068
|
-
class="pf-c-form__field-group-header-title-text"
|
|
1069
|
-
id="form-expandable-field-groups-field-group9-title"
|
|
1070
|
-
>Field group 4 (non-expandable)</div>
|
|
1071
|
-
</div>
|
|
1072
|
-
<div
|
|
1073
|
-
class="pf-c-form__field-group-header-description"
|
|
1074
|
-
>Field group 1 description text.</div>
|
|
1075
|
-
</div>
|
|
1076
|
-
<div class="pf-c-form__field-group-header-actions">
|
|
1077
|
-
<button class="pf-c-button pf-m-link" type="button">Delete all</button>
|
|
1078
|
-
<button class="pf-c-button pf-m-secondary" type="button">Add parameter</button>
|
|
1079
|
-
</div>
|
|
1080
|
-
</div>
|
|
1081
|
-
<div class="pf-c-form__field-group-body" hidden>
|
|
1082
|
-
<div class="pf-c-form__group">
|
|
1083
|
-
<div class="pf-c-form__group-label">
|
|
1084
|
-
<label
|
|
1085
|
-
class="pf-c-form__label"
|
|
1086
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-group9-label1"
|
|
1087
|
-
>
|
|
1088
|
-
<span class="pf-c-form__label-text">Label 1</span>
|
|
1089
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1090
|
-
</label>
|
|
1091
|
-
|
|
1092
|
-
<button
|
|
1093
|
-
class="pf-c-form__group-label-help"
|
|
1094
|
-
aria-label="More information for label 1 field"
|
|
1095
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group9-label1"
|
|
1096
|
-
>
|
|
1097
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1098
|
-
</button>
|
|
1099
|
-
</div>
|
|
1100
|
-
<div class="pf-c-form__group-control">
|
|
1101
|
-
<input
|
|
1102
|
-
class="pf-c-form-control"
|
|
1103
|
-
type="text"
|
|
1104
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-group9-label1"
|
|
1105
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-group9-label1"
|
|
1106
|
-
required
|
|
1107
|
-
/>
|
|
1108
|
-
</div>
|
|
1109
|
-
</div>
|
|
1110
|
-
<div class="pf-c-form__group">
|
|
1111
|
-
<div class="pf-c-form__group-label">
|
|
1112
|
-
<label
|
|
1113
|
-
class="pf-c-form__label"
|
|
1114
|
-
for="form-expandable-field-groupsform-expandable-field-groups-field-group9-label2"
|
|
1115
|
-
>
|
|
1116
|
-
<span class="pf-c-form__label-text">Label 2</span>
|
|
1117
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1118
|
-
</label>
|
|
1119
|
-
|
|
1120
|
-
<button
|
|
1121
|
-
class="pf-c-form__group-label-help"
|
|
1122
|
-
aria-label="More information for label 2 field"
|
|
1123
|
-
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group9-label2"
|
|
1124
|
-
>
|
|
1125
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1126
|
-
</button>
|
|
1127
|
-
</div>
|
|
1128
|
-
<div class="pf-c-form__group-control">
|
|
1129
|
-
<input
|
|
1130
|
-
class="pf-c-form-control"
|
|
1131
|
-
type="text"
|
|
1132
|
-
id="form-expandable-field-groupsform-expandable-field-groups-field-group9-label2"
|
|
1133
|
-
name="form-expandable-field-groupsform-expandable-field-groups-field-group9-label2"
|
|
1134
|
-
required
|
|
1135
|
-
/>
|
|
1136
|
-
</div>
|
|
1137
|
-
</div>
|
|
1138
|
-
</div>
|
|
1139
|
-
</div>
|
|
1140
|
-
<div class="pf-c-form__group">
|
|
1141
|
-
<div class="pf-c-form__group-label">
|
|
1142
|
-
<label class="pf-c-form__label" for="form-expandable-field-groups-label3">
|
|
1143
|
-
<span class="pf-c-form__label-text">Label 3</span>
|
|
1144
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1145
|
-
</label>
|
|
1146
|
-
|
|
1147
|
-
<button
|
|
1148
|
-
class="pf-c-form__group-label-help"
|
|
1149
|
-
aria-label="More information for label 3 field"
|
|
1150
|
-
aria-describedby="form-expandable-field-groups-label3"
|
|
1151
|
-
>
|
|
1152
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1153
|
-
</button>
|
|
1154
|
-
</div>
|
|
1155
|
-
<div class="pf-c-form__group-control">
|
|
1156
|
-
<input
|
|
1157
|
-
class="pf-c-form-control"
|
|
1158
|
-
type="text"
|
|
1159
|
-
id="form-expandable-field-groups-label3"
|
|
1160
|
-
name="form-expandable-field-groups-label3"
|
|
1161
|
-
required
|
|
1162
|
-
/>
|
|
1163
|
-
</div>
|
|
1164
|
-
</div>
|
|
1165
|
-
<div class="pf-c-form__group">
|
|
1166
|
-
<div class="pf-c-form__group-label">
|
|
1167
|
-
<label class="pf-c-form__label" for="form-expandable-field-groups-label4">
|
|
1168
|
-
<span class="pf-c-form__label-text">Label 4</span>
|
|
1169
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1170
|
-
</label>
|
|
1171
|
-
|
|
1172
|
-
<button
|
|
1173
|
-
class="pf-c-form__group-label-help"
|
|
1174
|
-
aria-label="More information for label 4 field"
|
|
1175
|
-
aria-describedby="form-expandable-field-groups-label4"
|
|
1176
|
-
>
|
|
1177
|
-
<i class="pficon pf-icon-help" aria-hidden="true"></i>
|
|
1178
|
-
</button>
|
|
1179
|
-
</div>
|
|
1180
|
-
<div class="pf-c-form__group-control">
|
|
1181
|
-
<input
|
|
1182
|
-
class="pf-c-form-control"
|
|
1183
|
-
type="text"
|
|
1184
|
-
id="form-expandable-field-groups-label4"
|
|
1185
|
-
name="form-expandable-field-groups-label4"
|
|
1186
|
-
required
|
|
1187
|
-
/>
|
|
1188
|
-
</div>
|
|
1189
|
-
</div>
|
|
1190
735
|
</form>
|
|
1191
736
|
|
|
1192
737
|
```
|