@patternfly/patternfly 6.0.0-alpha.47 → 6.0.0-alpha.49
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/components/DataList/data-list.css +101 -158
- package/components/DataList/data-list.scss +95 -154
- package/components/Form/form.css +2 -35
- package/components/Form/form.scss +2 -35
- package/components/Progress/progress.css +31 -45
- package/components/Progress/progress.scss +36 -55
- package/components/Slider/slider.css +34 -30
- package/components/Slider/slider.scss +46 -43
- package/docs/components/Form/examples/Form.md +122 -89
- package/docs/demos/Form/examples/BasicForms.md +110 -80
- package/docs/demos/Modal/examples/Modal.md +33 -24
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -8
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
- package/package.json +1 -1
- package/patternfly-no-globals.css +169 -265
- package/patternfly-theme-dark-unversioned.css +169 -265
- package/patternfly.css +169 -265
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/DataList/themes/dark/data-list.scss +0 -10
- package/components/Progress/themes/dark/progress.scss +0 -9
|
@@ -11,14 +11,17 @@ cssPrefix: pf-v5-c-form
|
|
|
11
11
|
<form class="pf-v5-c-form" novalidate>
|
|
12
12
|
<div class="pf-v5-c-form__group">
|
|
13
13
|
<div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-vertical-name">
|
|
14
|
-
<span class="pf-v5-c-form__label-text">Name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
<span class="pf-v5-c-form__label-text">Name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
15
|
+
<span
|
|
16
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
17
|
+
type="button"
|
|
18
|
+
role="button"
|
|
19
|
+
tabindex="0"
|
|
20
|
+
aria-label="More information for name field"
|
|
21
|
+
aria-describedby="form-vertical-name"
|
|
22
|
+
>
|
|
23
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
24
|
+
</span></span>
|
|
22
25
|
</div>
|
|
23
26
|
<div class="pf-v5-c-form__group-control">
|
|
24
27
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -56,14 +59,17 @@ cssPrefix: pf-v5-c-form
|
|
|
56
59
|
</div>
|
|
57
60
|
<div class="pf-v5-c-form__group">
|
|
58
61
|
<div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-horizontal-info">
|
|
59
|
-
<span class="pf-v5-c-form__label-text">Information</span></label> <span
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
62
|
+
<span class="pf-v5-c-form__label-text">Information</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
63
|
+
<span
|
|
64
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
65
|
+
type="button"
|
|
66
|
+
role="button"
|
|
67
|
+
tabindex="0"
|
|
68
|
+
aria-label="More information for information field"
|
|
69
|
+
aria-describedby="form-horizontal-info"
|
|
70
|
+
>
|
|
71
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
72
|
+
</span></span>
|
|
67
73
|
</div>
|
|
68
74
|
<div class="pf-v5-c-form__group-control">
|
|
69
75
|
<span class="pf-v5-c-form-control">
|
|
@@ -85,14 +91,17 @@ cssPrefix: pf-v5-c-form
|
|
|
85
91
|
class="pf-v5-c-form__group-label pf-m-no-padding-top"
|
|
86
92
|
id="form-horizontalform-horizontal-checkbox-legend"
|
|
87
93
|
><span class="pf-v5-c-form__label">
|
|
88
|
-
<span class="pf-v5-c-form__label-text">Label (no top padding)</span></span> <span
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
94
|
+
<span class="pf-v5-c-form__label-text">Label (no top padding)</span></span> <span class="pf-v5-c-form__group-label-help">
|
|
95
|
+
<span
|
|
96
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
97
|
+
type="button"
|
|
98
|
+
role="button"
|
|
99
|
+
tabindex="0"
|
|
100
|
+
aria-label="More information for label field"
|
|
101
|
+
aria-describedby="form-horizontal-checkbox-legend"
|
|
102
|
+
>
|
|
103
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
104
|
+
</span></span>
|
|
96
105
|
</div>
|
|
97
106
|
<div class="pf-v5-c-form__group-control pf-m-stack">
|
|
98
107
|
<div class="pf-v5-c-check">
|
|
@@ -136,14 +145,17 @@ cssPrefix: pf-v5-c-form
|
|
|
136
145
|
class="pf-v5-c-form__label"
|
|
137
146
|
for="form-horizontal-custom-breakpoint-name"
|
|
138
147
|
>
|
|
139
|
-
<span class="pf-v5-c-form__label-text">Name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
148
|
+
<span class="pf-v5-c-form__label-text">Name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
149
|
+
<span
|
|
150
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
151
|
+
type="button"
|
|
152
|
+
role="button"
|
|
153
|
+
tabindex="0"
|
|
154
|
+
aria-label="More information for name field"
|
|
155
|
+
aria-describedby="form-horizontal-custom-breakpoint-name"
|
|
156
|
+
>
|
|
157
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
158
|
+
</span></span>
|
|
147
159
|
</div>
|
|
148
160
|
<div class="pf-v5-c-form__group-control">
|
|
149
161
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -441,14 +453,17 @@ cssPrefix: pf-v5-c-form
|
|
|
441
453
|
<div class="pf-v5-c-form__group">
|
|
442
454
|
<div class="pf-v5-c-form__group-label pf-m-info">
|
|
443
455
|
<div class="pf-v5-c-form__group-label-main"><label class="pf-v5-c-form__label" for="form-additional-info-name">
|
|
444
|
-
<span class="pf-v5-c-form__label-text">Name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
456
|
+
<span class="pf-v5-c-form__label-text">Name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
457
|
+
<span
|
|
458
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
459
|
+
type="button"
|
|
460
|
+
role="button"
|
|
461
|
+
tabindex="0"
|
|
462
|
+
aria-label="More information for name field"
|
|
463
|
+
aria-describedby="form-additional-infoform-additional-info-name"
|
|
464
|
+
>
|
|
465
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
466
|
+
</span></span>
|
|
452
467
|
</div>
|
|
453
468
|
<div class="pf-v5-c-form__group-label-info">info</div>
|
|
454
469
|
</div>
|
|
@@ -512,14 +527,17 @@ cssPrefix: pf-v5-c-form
|
|
|
512
527
|
class="pf-v5-c-form__label"
|
|
513
528
|
for="form-field-group-field-group-label1"
|
|
514
529
|
>
|
|
515
|
-
<span class="pf-v5-c-form__label-text">Label 1</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
530
|
+
<span class="pf-v5-c-form__label-text">Label 1</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
531
|
+
<span
|
|
532
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
533
|
+
type="button"
|
|
534
|
+
role="button"
|
|
535
|
+
tabindex="0"
|
|
536
|
+
aria-label="More information for label 1 field"
|
|
537
|
+
aria-describedby="form-field-group-field-group-label1"
|
|
538
|
+
>
|
|
539
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
540
|
+
</span></span>
|
|
523
541
|
</div>
|
|
524
542
|
<div class="pf-v5-c-form__group-control">
|
|
525
543
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -537,14 +555,17 @@ cssPrefix: pf-v5-c-form
|
|
|
537
555
|
class="pf-v5-c-form__label"
|
|
538
556
|
for="form-field-group-field-group-label2"
|
|
539
557
|
>
|
|
540
|
-
<span class="pf-v5-c-form__label-text">Label 2</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
558
|
+
<span class="pf-v5-c-form__label-text">Label 2</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
559
|
+
<span
|
|
560
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
561
|
+
type="button"
|
|
562
|
+
role="button"
|
|
563
|
+
tabindex="0"
|
|
564
|
+
aria-label="More information for label 2 field"
|
|
565
|
+
aria-describedby="form-field-group-field-group-label2"
|
|
566
|
+
>
|
|
567
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
568
|
+
</span></span>
|
|
548
569
|
</div>
|
|
549
570
|
<div class="pf-v5-c-form__group-control">
|
|
550
571
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -645,14 +666,17 @@ cssPrefix: pf-v5-c-form
|
|
|
645
666
|
class="pf-v5-c-form__label"
|
|
646
667
|
for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
|
|
647
668
|
>
|
|
648
|
-
<span class="pf-v5-c-form__label-text">Label 1</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
669
|
+
<span class="pf-v5-c-form__label-text">Label 1</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
670
|
+
<span
|
|
671
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
672
|
+
type="button"
|
|
673
|
+
role="button"
|
|
674
|
+
tabindex="0"
|
|
675
|
+
aria-label="More information for label 1 field"
|
|
676
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
|
|
677
|
+
>
|
|
678
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
679
|
+
</span></span>
|
|
656
680
|
</div>
|
|
657
681
|
<div class="pf-v5-c-form__group-control">
|
|
658
682
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -670,14 +694,17 @@ cssPrefix: pf-v5-c-form
|
|
|
670
694
|
class="pf-v5-c-form__label"
|
|
671
695
|
for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
|
|
672
696
|
>
|
|
673
|
-
<span class="pf-v5-c-form__label-text">Label 2</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
697
|
+
<span class="pf-v5-c-form__label-text">Label 2</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
698
|
+
<span
|
|
699
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
700
|
+
type="button"
|
|
701
|
+
role="button"
|
|
702
|
+
tabindex="0"
|
|
703
|
+
aria-label="More information for label 2 field"
|
|
704
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
|
|
705
|
+
>
|
|
706
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
707
|
+
</span></span>
|
|
681
708
|
</div>
|
|
682
709
|
<div class="pf-v5-c-form__group-control">
|
|
683
710
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -714,14 +741,17 @@ cssPrefix: pf-v5-c-form
|
|
|
714
741
|
<span class="pf-v5-c-form__label-text">Label 1</span> <span
|
|
715
742
|
class="pf-v5-c-form__label-required"
|
|
716
743
|
aria-hidden="true"
|
|
717
|
-
>*</span></label> <span
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
744
|
+
>*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
745
|
+
<span
|
|
746
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
747
|
+
type="button"
|
|
748
|
+
role="button"
|
|
749
|
+
tabindex="0"
|
|
750
|
+
aria-label="More information for label 1 field"
|
|
751
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
|
|
752
|
+
>
|
|
753
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
754
|
+
</span></span>
|
|
725
755
|
</div>
|
|
726
756
|
<div class="pf-v5-c-form__group-control">
|
|
727
757
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -742,14 +772,17 @@ cssPrefix: pf-v5-c-form
|
|
|
742
772
|
<span class="pf-v5-c-form__label-text">Label 2</span> <span
|
|
743
773
|
class="pf-v5-c-form__label-required"
|
|
744
774
|
aria-hidden="true"
|
|
745
|
-
>*</span></label> <span
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
775
|
+
>*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
776
|
+
<span
|
|
777
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
778
|
+
type="button"
|
|
779
|
+
role="button"
|
|
780
|
+
tabindex="0"
|
|
781
|
+
aria-label="More information for label 2 field"
|
|
782
|
+
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
|
|
783
|
+
>
|
|
784
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
785
|
+
</span></span>
|
|
753
786
|
</div>
|
|
754
787
|
<div class="pf-v5-c-form__group-control">
|
|
755
788
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -811,7 +844,7 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
|
|
|
811
844
|
| `.pf-v5-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
|
|
812
845
|
| `.pf-v5-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
|
|
813
846
|
| `.pf-v5-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
|
|
814
|
-
| `.pf-v5-c-form__group-label-help` | `<
|
|
847
|
+
| `.pf-v5-c-form__group-label-help` | `<span>` | Initiates field level help. |
|
|
815
848
|
| `.pf-v5-c-form__group-control` | `<div>` | Initiates a form group control section. |
|
|
816
849
|
| `.pf-v5-c-form__actions` | `<div>` | Iniates a row of actions. |
|
|
817
850
|
| `.pf-v5-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
|
|
@@ -49,14 +49,17 @@ subsection: forms
|
|
|
49
49
|
</div>
|
|
50
50
|
<div class="pf-v5-c-form__group">
|
|
51
51
|
<div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="-phone">
|
|
52
|
-
<span class="pf-v5-c-form__label-text">Phone number</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
52
|
+
<span class="pf-v5-c-form__label-text">Phone number</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
53
|
+
<span
|
|
54
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
55
|
+
type="button"
|
|
56
|
+
role="button"
|
|
57
|
+
tabindex="0"
|
|
58
|
+
aria-label="More information for phone number field"
|
|
59
|
+
aria-describedby="-phone"
|
|
60
|
+
>
|
|
61
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
62
|
+
</span></span>
|
|
60
63
|
</div>
|
|
61
64
|
<div class="pf-v5-c-form__group-control">
|
|
62
65
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -240,14 +243,17 @@ subsection: forms
|
|
|
240
243
|
class="pf-v5-c-form__group-label pf-m-no-padding-top"
|
|
241
244
|
id="form-demo-horizontalform-demo-horizontal-contact-legend"
|
|
242
245
|
><span class="pf-v5-c-form__label">
|
|
243
|
-
<span class="pf-v5-c-form__label-text">How can we contact you?</span></span> <span
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
246
|
+
<span class="pf-v5-c-form__label-text">How can we contact you?</span></span> <span class="pf-v5-c-form__group-label-help">
|
|
247
|
+
<span
|
|
248
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
249
|
+
type="button"
|
|
250
|
+
role="button"
|
|
251
|
+
tabindex="0"
|
|
252
|
+
aria-label="More information for contact field"
|
|
253
|
+
aria-describedby="form-demo-horizontal-contact-legend"
|
|
254
|
+
>
|
|
255
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
256
|
+
</span></span>
|
|
251
257
|
</div>
|
|
252
258
|
<div class="pf-v5-c-form__group-control pf-m-stack">
|
|
253
259
|
<div class="pf-v5-c-check">
|
|
@@ -506,14 +512,17 @@ subsection: forms
|
|
|
506
512
|
class="pf-v5-c-form__label"
|
|
507
513
|
for="form-demo-sections-repeatable-fields-clientid"
|
|
508
514
|
>
|
|
509
|
-
<span class="pf-v5-c-form__label-text">Client ID</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
515
|
+
<span class="pf-v5-c-form__label-text">Client ID</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
516
|
+
<span
|
|
517
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
518
|
+
type="button"
|
|
519
|
+
role="button"
|
|
520
|
+
tabindex="0"
|
|
521
|
+
aria-label="More information for client id field"
|
|
522
|
+
aria-describedby="form-demo-sections-repeatable-fields-clientid"
|
|
523
|
+
>
|
|
524
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
525
|
+
</span></span>
|
|
517
526
|
</div>
|
|
518
527
|
<div class="pf-v5-c-form__group-control">
|
|
519
528
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -531,14 +540,17 @@ subsection: forms
|
|
|
531
540
|
class="pf-v5-c-form__label"
|
|
532
541
|
for="form-demo-sections-repeatable-fields-name"
|
|
533
542
|
>
|
|
534
|
-
<span class="pf-v5-c-form__label-text">Full name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
543
|
+
<span class="pf-v5-c-form__label-text">Full name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
544
|
+
<span
|
|
545
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
546
|
+
type="button"
|
|
547
|
+
role="button"
|
|
548
|
+
tabindex="0"
|
|
549
|
+
aria-label="More information for full name field"
|
|
550
|
+
aria-describedby="form-demo-sections-repeatable-fields-name"
|
|
551
|
+
>
|
|
552
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
553
|
+
</span></span>
|
|
542
554
|
</div>
|
|
543
555
|
<div class="pf-v5-c-form__group-control">
|
|
544
556
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -556,14 +568,17 @@ subsection: forms
|
|
|
556
568
|
class="pf-v5-c-form__label"
|
|
557
569
|
for="form-demo-sections-repeatable-fields-description"
|
|
558
570
|
>
|
|
559
|
-
<span class="pf-v5-c-form__label-text">Description</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
571
|
+
<span class="pf-v5-c-form__label-text">Description</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
572
|
+
<span
|
|
573
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
574
|
+
type="button"
|
|
575
|
+
role="button"
|
|
576
|
+
tabindex="0"
|
|
577
|
+
aria-label="More information for description field"
|
|
578
|
+
aria-describedby="form-demo-sections-repeatable-fields-description"
|
|
579
|
+
>
|
|
580
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
581
|
+
</span></span>
|
|
567
582
|
</div>
|
|
568
583
|
<div class="pf-v5-c-form__group-control">
|
|
569
584
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -592,14 +607,17 @@ subsection: forms
|
|
|
592
607
|
class="pf-v5-c-form__label"
|
|
593
608
|
for="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
594
609
|
>
|
|
595
|
-
<span class="pf-v5-c-form__label-text">Root URL</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
610
|
+
<span class="pf-v5-c-form__label-text">Root URL</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
611
|
+
<span
|
|
612
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
613
|
+
type="button"
|
|
614
|
+
role="button"
|
|
615
|
+
tabindex="0"
|
|
616
|
+
aria-label="More information for root URL field"
|
|
617
|
+
aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
618
|
+
>
|
|
619
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
620
|
+
</span></span>
|
|
603
621
|
</div>
|
|
604
622
|
<div class="pf-v5-c-form__group-control">
|
|
605
623
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -617,14 +635,17 @@ subsection: forms
|
|
|
617
635
|
class="pf-v5-c-form__label"
|
|
618
636
|
id="form-demo-sections-repeatable-fields-section2-uris"
|
|
619
637
|
>
|
|
620
|
-
<span class="pf-v5-c-form__label-text">Valid redirect URIs</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
638
|
+
<span class="pf-v5-c-form__label-text">Valid redirect URIs</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
639
|
+
<span
|
|
640
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
641
|
+
type="button"
|
|
642
|
+
role="button"
|
|
643
|
+
tabindex="0"
|
|
644
|
+
aria-label="More information for valid redirect URIs field"
|
|
645
|
+
aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
|
|
646
|
+
>
|
|
647
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
648
|
+
</span></span>
|
|
628
649
|
</div>
|
|
629
650
|
<div class="pf-v5-c-form__group-control pf-m-stack">
|
|
630
651
|
<div class="pf-v5-c-input-group">
|
|
@@ -706,14 +727,17 @@ subsection: forms
|
|
|
706
727
|
class="pf-v5-c-form__label"
|
|
707
728
|
for="form-demo-sections-repeatable-fields-section2-home-url"
|
|
708
729
|
>
|
|
709
|
-
<span class="pf-v5-c-form__label-text">Home URL</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
730
|
+
<span class="pf-v5-c-form__label-text">Home URL</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
731
|
+
<span
|
|
732
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
733
|
+
type="button"
|
|
734
|
+
role="button"
|
|
735
|
+
tabindex="0"
|
|
736
|
+
aria-label="More information for home URL field"
|
|
737
|
+
aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
|
|
738
|
+
>
|
|
739
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
740
|
+
</span></span>
|
|
717
741
|
</div>
|
|
718
742
|
<div class="pf-v5-c-form__group-control">
|
|
719
743
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -740,14 +764,17 @@ subsection: forms
|
|
|
740
764
|
class="pf-v5-c-form__label"
|
|
741
765
|
for="form-demo-sections-complex-form-name"
|
|
742
766
|
>
|
|
743
|
-
<span class="pf-v5-c-form__label-text">Name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
767
|
+
<span class="pf-v5-c-form__label-text">Name</span> <span class="pf-v5-c-form__label-required" aria-hidden="true">*</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
768
|
+
<span
|
|
769
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
770
|
+
type="button"
|
|
771
|
+
role="button"
|
|
772
|
+
tabindex="0"
|
|
773
|
+
aria-label="More information for name field"
|
|
774
|
+
aria-describedby="form-demo-sections-complex-form-name"
|
|
775
|
+
>
|
|
776
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
777
|
+
</span></span>
|
|
751
778
|
</div>
|
|
752
779
|
<div class="pf-v5-c-form__group-control">
|
|
753
780
|
<span class="pf-v5-c-form-control pf-m-required">
|
|
@@ -766,14 +793,17 @@ subsection: forms
|
|
|
766
793
|
class="pf-v5-c-form__label"
|
|
767
794
|
for="form-demo-sections-complex-form-labels"
|
|
768
795
|
>
|
|
769
|
-
<span class="pf-v5-c-form__label-text">Labels</span></label> <span
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
796
|
+
<span class="pf-v5-c-form__label-text">Labels</span></label> <span class="pf-v5-c-form__group-label-help">
|
|
797
|
+
<span
|
|
798
|
+
class="pf-v5-c-button pf-m-plain pf-m-no-padding"
|
|
799
|
+
type="button"
|
|
800
|
+
role="button"
|
|
801
|
+
tabindex="0"
|
|
802
|
+
aria-label="More information for labels field"
|
|
803
|
+
aria-describedby="form-demo-sections-complex-form-labels"
|
|
804
|
+
>
|
|
805
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
806
|
+
</span></span>
|
|
777
807
|
</div>
|
|
778
808
|
<div class="pf-v5-c-form__group-control">
|
|
779
809
|
<div
|