@patternfly/patternfly 5.0.0-alpha.32 → 5.0.0-alpha.33
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/DatePicker/date-picker.css +0 -8
- package/components/DatePicker/date-picker.scss +0 -9
- package/components/HelperText/helper-text.css +4 -0
- package/components/HelperText/helper-text.scss +5 -0
- package/docs/components/DatePicker/examples/DatePicker.md +14 -3
- package/docs/components/FileUpload/examples/FileUpload.md +9 -5
- package/docs/components/Form/examples/Form.md +94 -73
- package/docs/components/HelperText/examples/HelperText.md +13 -24
- package/docs/components/Login/examples/Login.md +67 -30
- package/docs/components/Progress/examples/Progress.md +1 -1
- package/docs/demos/Alert/examples/Alert.md +105 -58
- package/docs/demos/Form/examples/BasicForms.md +129 -140
- package/docs/demos/HelperText/examples/HelperText.md +11 -8
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +87 -53
- package/docs/demos/Toolbar/examples/Toolbar.md +17 -5
- package/package.json +2 -2
- package/patternfly-no-reset.css +4 -8
- package/patternfly.css +4 -8
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -8,7 +8,7 @@ section: components
|
|
|
8
8
|
```html
|
|
9
9
|
<form class="pf-c-form" novalidate>
|
|
10
10
|
<div class="pf-c-form__group">
|
|
11
|
-
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="
|
|
11
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-name">
|
|
12
12
|
<span class="pf-c-form__label-text">Full name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
13
13
|
</div>
|
|
14
14
|
<div class="pf-c-form__group-control">
|
|
@@ -16,37 +16,36 @@ section: components
|
|
|
16
16
|
class="pf-c-form-control"
|
|
17
17
|
required
|
|
18
18
|
type="text"
|
|
19
|
-
id="
|
|
20
|
-
name="
|
|
21
|
-
aria-describedby="
|
|
19
|
+
id="-name"
|
|
20
|
+
name="-name"
|
|
21
|
+
aria-describedby="-name-helper"
|
|
22
22
|
/>
|
|
23
23
|
|
|
24
|
-
<
|
|
25
|
-
class="pf-c-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
25
|
+
<div class="pf-c-helper-text">
|
|
26
|
+
<div class="pf-c-helper-text__item" id="-name-helper">
|
|
27
|
+
<span
|
|
28
|
+
class="pf-c-helper-text__item-text"
|
|
29
|
+
>Include your middle name if you have one.</span>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
29
33
|
</div>
|
|
30
34
|
</div>
|
|
31
35
|
<div class="pf-c-form__group">
|
|
32
|
-
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="
|
|
36
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-email">
|
|
33
37
|
<span class="pf-c-form__label-text">Email</span></label>
|
|
34
38
|
</div>
|
|
35
39
|
<div class="pf-c-form__group-control">
|
|
36
|
-
<input
|
|
37
|
-
class="pf-c-form-control"
|
|
38
|
-
type="email"
|
|
39
|
-
id="form-demo-basic-email"
|
|
40
|
-
name="form-demo-basic-email"
|
|
41
|
-
/>
|
|
40
|
+
<input class="pf-c-form-control" type="email" id="-email" name="-email" />
|
|
42
41
|
</div>
|
|
43
42
|
</div>
|
|
44
43
|
<div class="pf-c-form__group">
|
|
45
|
-
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="
|
|
44
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-phone">
|
|
46
45
|
<span class="pf-c-form__label-text">Phone number</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
47
46
|
class="pf-c-form__group-label-help"
|
|
48
47
|
aria-label="More information for phone number field"
|
|
49
|
-
aria-describedby="
|
|
48
|
+
aria-describedby="-phone"
|
|
50
49
|
role="button"
|
|
51
50
|
type="button"
|
|
52
51
|
tabindex="0"
|
|
@@ -58,8 +57,8 @@ section: components
|
|
|
58
57
|
required
|
|
59
58
|
type="tel"
|
|
60
59
|
placeholder="555-555-5555"
|
|
61
|
-
id="
|
|
62
|
-
name="
|
|
60
|
+
id="-phone"
|
|
61
|
+
name="-phone"
|
|
63
62
|
/>
|
|
64
63
|
</div>
|
|
65
64
|
</div>
|
|
@@ -76,40 +75,31 @@ section: components
|
|
|
76
75
|
<input
|
|
77
76
|
class="pf-c-check__input"
|
|
78
77
|
type="checkbox"
|
|
79
|
-
id="
|
|
80
|
-
name="
|
|
78
|
+
id="-contact-check-1"
|
|
79
|
+
name="-contact-check-1"
|
|
81
80
|
/>
|
|
82
81
|
|
|
83
|
-
<label
|
|
84
|
-
class="pf-c-check__label"
|
|
85
|
-
for="form-demo-basic-contact-check-1"
|
|
86
|
-
>Email</label>
|
|
82
|
+
<label class="pf-c-check__label" for="-contact-check-1">Email</label>
|
|
87
83
|
</div>
|
|
88
84
|
<div class="pf-c-check">
|
|
89
85
|
<input
|
|
90
86
|
class="pf-c-check__input"
|
|
91
87
|
type="checkbox"
|
|
92
|
-
id="
|
|
93
|
-
name="
|
|
88
|
+
id="-contact-check-2"
|
|
89
|
+
name="-contact-check-2"
|
|
94
90
|
/>
|
|
95
91
|
|
|
96
|
-
<label
|
|
97
|
-
class="pf-c-check__label"
|
|
98
|
-
for="form-demo-basic-contact-check-2"
|
|
99
|
-
>Phone</label>
|
|
92
|
+
<label class="pf-c-check__label" for="-contact-check-2">Phone</label>
|
|
100
93
|
</div>
|
|
101
94
|
<div class="pf-c-check">
|
|
102
95
|
<input
|
|
103
96
|
class="pf-c-check__input"
|
|
104
97
|
type="checkbox"
|
|
105
|
-
id="
|
|
106
|
-
name="
|
|
98
|
+
id="-contact-check-3"
|
|
99
|
+
name="-contact-check-3"
|
|
107
100
|
/>
|
|
108
101
|
|
|
109
|
-
<label
|
|
110
|
-
class="pf-c-check__label"
|
|
111
|
-
for="form-demo-basic-contact-check-3"
|
|
112
|
-
>Mail</label>
|
|
102
|
+
<label class="pf-c-check__label" for="-contact-check-3">Mail</label>
|
|
113
103
|
</div>
|
|
114
104
|
</div>
|
|
115
105
|
</div>
|
|
@@ -126,40 +116,31 @@ section: components
|
|
|
126
116
|
<input
|
|
127
117
|
class="pf-c-radio__input"
|
|
128
118
|
type="radio"
|
|
129
|
-
id="
|
|
130
|
-
name="
|
|
119
|
+
id="-time-zone-radio-1"
|
|
120
|
+
name="-time-zone-radio"
|
|
131
121
|
/>
|
|
132
122
|
|
|
133
|
-
<label
|
|
134
|
-
class="pf-c-radio__label"
|
|
135
|
-
for="form-demo-basic-time-zone-radio-1"
|
|
136
|
-
>Eastern</label>
|
|
123
|
+
<label class="pf-c-radio__label" for="-time-zone-radio-1">Eastern</label>
|
|
137
124
|
</div>
|
|
138
125
|
<div class="pf-c-radio">
|
|
139
126
|
<input
|
|
140
127
|
class="pf-c-radio__input"
|
|
141
128
|
type="radio"
|
|
142
|
-
id="
|
|
143
|
-
name="
|
|
129
|
+
id="-time-zone-radio-2"
|
|
130
|
+
name="-time-zone-radio"
|
|
144
131
|
/>
|
|
145
132
|
|
|
146
|
-
<label
|
|
147
|
-
class="pf-c-radio__label"
|
|
148
|
-
for="form-demo-basic-time-zone-radio-2"
|
|
149
|
-
>Central</label>
|
|
133
|
+
<label class="pf-c-radio__label" for="-time-zone-radio-2">Central</label>
|
|
150
134
|
</div>
|
|
151
135
|
<div class="pf-c-radio">
|
|
152
136
|
<input
|
|
153
137
|
class="pf-c-radio__input"
|
|
154
138
|
type="radio"
|
|
155
|
-
id="
|
|
156
|
-
name="
|
|
139
|
+
id="-time-zone-radio-3"
|
|
140
|
+
name="-time-zone-radio"
|
|
157
141
|
/>
|
|
158
142
|
|
|
159
|
-
<label
|
|
160
|
-
class="pf-c-radio__label"
|
|
161
|
-
for="form-demo-basic-time-zone-radio-3"
|
|
162
|
-
>Pacific</label>
|
|
143
|
+
<label class="pf-c-radio__label" for="-time-zone-radio-3">Pacific</label>
|
|
163
144
|
</div>
|
|
164
145
|
</div>
|
|
165
146
|
</div>
|
|
@@ -180,7 +161,7 @@ section: components
|
|
|
180
161
|
```html
|
|
181
162
|
<form class="pf-c-form pf-m-horizontal" novalidate>
|
|
182
163
|
<div class="pf-c-form__group -name">
|
|
183
|
-
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-horizontal">
|
|
164
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-horizontal-name">
|
|
184
165
|
<span class="pf-c-form__label-text">Full name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
185
166
|
</div>
|
|
186
167
|
<div class="pf-c-form__group-control">
|
|
@@ -188,16 +169,22 @@ section: components
|
|
|
188
169
|
class="pf-c-form-control"
|
|
189
170
|
required
|
|
190
171
|
type="text"
|
|
191
|
-
id="form-demo-horizontal"
|
|
192
|
-
name="form-demo-horizontal"
|
|
193
|
-
aria-describedby="form-demo-horizontal-helper"
|
|
172
|
+
id="form-demo-horizontal-name"
|
|
173
|
+
name="form-demo-horizontal-name"
|
|
174
|
+
aria-describedby="form-demo-horizontal-name-helper"
|
|
194
175
|
/>
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
176
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
177
|
+
<div class="pf-c-helper-text">
|
|
178
|
+
<div
|
|
179
|
+
class="pf-c-helper-text__item"
|
|
180
|
+
id="form-demo-horizontal-name-helper"
|
|
181
|
+
>
|
|
182
|
+
<span
|
|
183
|
+
class="pf-c-helper-text__item-text"
|
|
184
|
+
>Include your middle name if you have one.</span>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
201
188
|
</div>
|
|
202
189
|
</div>
|
|
203
190
|
<div class="pf-c-form__group">
|
|
@@ -230,11 +217,11 @@ section: components
|
|
|
230
217
|
<div
|
|
231
218
|
class="pf-c-form__group"
|
|
232
219
|
role="group"
|
|
233
|
-
aria-labelledby="form-demo-horizontal-contact-legend"
|
|
220
|
+
aria-labelledby="form-demo-horizontalform-demo-horizontal-contact-legend"
|
|
234
221
|
>
|
|
235
222
|
<div
|
|
236
223
|
class="pf-c-form__group-label pf-m-no-padding-top"
|
|
237
|
-
id="form-demo-horizontal-contact-legend"
|
|
224
|
+
id="form-demo-horizontalform-demo-horizontal-contact-legend"
|
|
238
225
|
><span class="pf-c-form__label">
|
|
239
226
|
<span class="pf-c-form__label-text">How can we contact you?</span></span> <span
|
|
240
227
|
class="pf-c-form__group-label-help"
|
|
@@ -318,11 +305,15 @@ section: components
|
|
|
318
305
|
aria-describedby="form-demo-grid-name-helper"
|
|
319
306
|
/>
|
|
320
307
|
|
|
321
|
-
<
|
|
322
|
-
class="pf-c-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
308
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
309
|
+
<div class="pf-c-helper-text">
|
|
310
|
+
<div class="pf-c-helper-text__item" id="-helper">
|
|
311
|
+
<span
|
|
312
|
+
class="pf-c-helper-text__item-text"
|
|
313
|
+
>Include your middle name if you have one.</span>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
326
317
|
</div>
|
|
327
318
|
</div>
|
|
328
319
|
<div class="pf-c-form__group">
|
|
@@ -570,12 +561,12 @@ section: components
|
|
|
570
561
|
<div class="pf-c-form__group">
|
|
571
562
|
<div class="pf-c-form__group-label"><label
|
|
572
563
|
class="pf-c-form__label"
|
|
573
|
-
for="form-demo-sections-repeatable-fields-rooturl"
|
|
564
|
+
for="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
574
565
|
>
|
|
575
566
|
<span class="pf-c-form__label-text">Root URL</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
576
567
|
class="pf-c-form__group-label-help"
|
|
577
568
|
aria-label="More information for root URL field"
|
|
578
|
-
aria-describedby="form-demo-sections-repeatable-fields-rooturl"
|
|
569
|
+
aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
579
570
|
role="button"
|
|
580
571
|
type="button"
|
|
581
572
|
tabindex="0"
|
|
@@ -586,20 +577,20 @@ section: components
|
|
|
586
577
|
class="pf-c-form-control"
|
|
587
578
|
required
|
|
588
579
|
type="text"
|
|
589
|
-
id="form-demo-sections-repeatable-fields-rooturl"
|
|
590
|
-
name="form-demo-sections-repeatable-fields-rooturl"
|
|
580
|
+
id="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
581
|
+
name="form-demo-sections-repeatable-fields-section2-rooturl"
|
|
591
582
|
/>
|
|
592
583
|
</div>
|
|
593
584
|
</div>
|
|
594
585
|
<div class="pf-c-form__group">
|
|
595
586
|
<div class="pf-c-form__group-label"><label
|
|
596
587
|
class="pf-c-form__label"
|
|
597
|
-
id="form-demo-sections-repeatable-fields-uris"
|
|
588
|
+
id="form-demo-sections-repeatable-fields-section2-uris"
|
|
598
589
|
>
|
|
599
590
|
<span class="pf-c-form__label-text">Valid redirect URIs</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
600
591
|
class="pf-c-form__group-label-help"
|
|
601
592
|
aria-label="More information for valid redirect URIs field"
|
|
602
|
-
aria-describedby="form-demo-sections-repeatable-fields-uris"
|
|
593
|
+
aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
|
|
603
594
|
role="button"
|
|
604
595
|
type="button"
|
|
605
596
|
tabindex="0"
|
|
@@ -612,9 +603,9 @@ section: components
|
|
|
612
603
|
class="pf-c-form-control"
|
|
613
604
|
required
|
|
614
605
|
type="text"
|
|
615
|
-
id="form-demo-sections-repeatable-fields-uris-input-1"
|
|
616
|
-
name="form-demo-sections-repeatable-fields-uris-input-1"
|
|
617
|
-
aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-1"
|
|
606
|
+
id="form-demo-sections-repeatable-fields-section2-uris-input-1"
|
|
607
|
+
name="form-demo-sections-repeatable-fields-section2-uris-input-1"
|
|
608
|
+
aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-1"
|
|
618
609
|
/>
|
|
619
610
|
</div>
|
|
620
611
|
<div class="pf-c-input-group__item pf-m-plain">
|
|
@@ -633,9 +624,9 @@ section: components
|
|
|
633
624
|
class="pf-c-form-control"
|
|
634
625
|
required
|
|
635
626
|
type="text"
|
|
636
|
-
id="form-demo-sections-repeatable-fields-uris-input-2"
|
|
637
|
-
name="form-demo-sections-repeatable-fields-uris-input-2"
|
|
638
|
-
aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-2"
|
|
627
|
+
id="form-demo-sections-repeatable-fields-section2-uris-input-2"
|
|
628
|
+
name="form-demo-sections-repeatable-fields-section2-uris-input-2"
|
|
629
|
+
aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-2"
|
|
639
630
|
/>
|
|
640
631
|
</div>
|
|
641
632
|
<div class="pf-c-input-group__item pf-m-plain">
|
|
@@ -654,9 +645,9 @@ section: components
|
|
|
654
645
|
class="pf-c-form-control"
|
|
655
646
|
required
|
|
656
647
|
type="text"
|
|
657
|
-
id="form-demo-sections-repeatable-fields-uris-input-3"
|
|
658
|
-
name="form-demo-sections-repeatable-fields-uris-input-3"
|
|
659
|
-
aria-labelledby="form-demo-sections-repeatable-fields-uris form-demo-sections-repeatable-fields-uris-input-3"
|
|
648
|
+
id="form-demo-sections-repeatable-fields-section2-uris-input-3"
|
|
649
|
+
name="form-demo-sections-repeatable-fields-section2-uris-input-3"
|
|
650
|
+
aria-labelledby="form-demo-sections-repeatable-fields-section2-uris form-demo-sections-repeatable-fields-section2-uris-input-3"
|
|
660
651
|
/>
|
|
661
652
|
</div>
|
|
662
653
|
<div class="pf-c-input-group__item pf-m-plain">
|
|
@@ -680,12 +671,12 @@ section: components
|
|
|
680
671
|
<div class="pf-c-form__group">
|
|
681
672
|
<div class="pf-c-form__group-label"><label
|
|
682
673
|
class="pf-c-form__label"
|
|
683
|
-
for="form-demo-sections-repeatable-fields-home-url"
|
|
674
|
+
for="form-demo-sections-repeatable-fields-section2-home-url"
|
|
684
675
|
>
|
|
685
676
|
<span class="pf-c-form__label-text">Home URL</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
686
677
|
class="pf-c-form__group-label-help"
|
|
687
678
|
aria-label="More information for home URL field"
|
|
688
|
-
aria-describedby="form-demo-sections-repeatable-fields-home-url"
|
|
679
|
+
aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
|
|
689
680
|
role="button"
|
|
690
681
|
type="button"
|
|
691
682
|
tabindex="0"
|
|
@@ -696,8 +687,8 @@ section: components
|
|
|
696
687
|
class="pf-c-form-control"
|
|
697
688
|
required
|
|
698
689
|
type="text"
|
|
699
|
-
id="form-demo-sections-repeatable-fields-home-url"
|
|
700
|
-
name="form-demo-sections-repeatable-fields-home-url"
|
|
690
|
+
id="form-demo-sections-repeatable-fields-section2-home-url"
|
|
691
|
+
name="form-demo-sections-repeatable-fields-section2-home-url"
|
|
701
692
|
/>
|
|
702
693
|
</div>
|
|
703
694
|
</div>
|
|
@@ -713,12 +704,12 @@ section: components
|
|
|
713
704
|
<div class="pf-c-form__group">
|
|
714
705
|
<div class="pf-c-form__group-label"><label
|
|
715
706
|
class="pf-c-form__label"
|
|
716
|
-
for="form-demo-sections-complex-
|
|
707
|
+
for="form-demo-sections-complex-form-name"
|
|
717
708
|
>
|
|
718
709
|
<span class="pf-c-form__label-text">Name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
719
710
|
class="pf-c-form__group-label-help"
|
|
720
711
|
aria-label="More information for name field"
|
|
721
|
-
aria-describedby="form-demo-sections-complex-
|
|
712
|
+
aria-describedby="form-demo-sections-complex-form-name"
|
|
722
713
|
role="button"
|
|
723
714
|
type="button"
|
|
724
715
|
tabindex="0"
|
|
@@ -728,8 +719,8 @@ section: components
|
|
|
728
719
|
<input
|
|
729
720
|
class="pf-c-form-control"
|
|
730
721
|
type="text"
|
|
731
|
-
id="form-demo-sections-complex-
|
|
732
|
-
name="form-demo-sections-complex-
|
|
722
|
+
id="form-demo-sections-complex-form-name"
|
|
723
|
+
name="form-demo-sections-complex-form-name"
|
|
733
724
|
required
|
|
734
725
|
/>
|
|
735
726
|
</div>
|
|
@@ -738,12 +729,12 @@ section: components
|
|
|
738
729
|
<div class="pf-c-form__group">
|
|
739
730
|
<div class="pf-c-form__group-label"><label
|
|
740
731
|
class="pf-c-form__label"
|
|
741
|
-
for="form-demo-sections-complex-
|
|
732
|
+
for="form-demo-sections-complex-form-labels"
|
|
742
733
|
>
|
|
743
734
|
<span class="pf-c-form__label-text">Labels</span></label> <span
|
|
744
735
|
class="pf-c-form__group-label-help"
|
|
745
736
|
aria-label="More information for labels field"
|
|
746
|
-
aria-describedby="form-demo-sections-complex-
|
|
737
|
+
aria-describedby="form-demo-sections-complex-form-labels"
|
|
747
738
|
role="button"
|
|
748
739
|
type="button"
|
|
749
740
|
tabindex="0"
|
|
@@ -752,7 +743,7 @@ section: components
|
|
|
752
743
|
<div class="pf-c-form__group-control">
|
|
753
744
|
<div
|
|
754
745
|
class="pf-c-text-input-group"
|
|
755
|
-
id="form-demo-sections-complex-
|
|
746
|
+
id="form-demo-sections-complex-form-labels"
|
|
756
747
|
>
|
|
757
748
|
<div class="pf-c-text-input-group__main">
|
|
758
749
|
<div class="pf-c-label-group">
|
|
@@ -1048,7 +1039,7 @@ section: components
|
|
|
1048
1039
|
<div class="pf-c-form__group">
|
|
1049
1040
|
<div class="pf-c-form__group-label"><label
|
|
1050
1041
|
class="pf-c-form__label"
|
|
1051
|
-
id="
|
|
1042
|
+
id="-node-selector-terms-title"
|
|
1052
1043
|
>
|
|
1053
1044
|
<span class="pf-c-form__label-text">Node selector terms</span> <span
|
|
1054
1045
|
class="pf-c-form__label-required"
|
|
@@ -1062,9 +1053,9 @@ section: components
|
|
|
1062
1053
|
class="pf-c-form-control"
|
|
1063
1054
|
required
|
|
1064
1055
|
type="text"
|
|
1065
|
-
id="
|
|
1066
|
-
name="
|
|
1067
|
-
aria-labelledby="
|
|
1056
|
+
id="-node-selector-terms-input-1"
|
|
1057
|
+
name="-node-selector-terms-input-1"
|
|
1058
|
+
aria-labelledby="-node-selector-terms -node-selector-terms-title"
|
|
1068
1059
|
/>
|
|
1069
1060
|
</div>
|
|
1070
1061
|
<div class="pf-c-input-group__item pf-m-plain">
|
|
@@ -1174,22 +1165,21 @@ section: components
|
|
|
1174
1165
|
<input
|
|
1175
1166
|
class="pf-c-check__input"
|
|
1176
1167
|
type="checkbox"
|
|
1177
|
-
id="form-demo-sections-complex-
|
|
1178
|
-
name="form-demo-sections-complex-
|
|
1168
|
+
id="form-demo-sections-complex-form-routing-create-route-create-route"
|
|
1169
|
+
name="form-demo-sections-complex-form-routing-create-route-create-route"
|
|
1179
1170
|
/>
|
|
1180
1171
|
|
|
1181
1172
|
<label
|
|
1182
1173
|
class="pf-c-check__label"
|
|
1183
|
-
for="form-demo-sections-complex-
|
|
1174
|
+
for="form-demo-sections-complex-form-routing-create-route-create-route"
|
|
1184
1175
|
>Create a route to the application</label>
|
|
1185
1176
|
</div>
|
|
1186
|
-
<div
|
|
1187
|
-
class="pf-c-form__helper-text"
|
|
1188
|
-
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-create-route-legend"
|
|
1189
|
-
aria-live="polite"
|
|
1190
|
-
>
|
|
1177
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
1191
1178
|
<div class="pf-c-helper-text">
|
|
1192
|
-
<div
|
|
1179
|
+
<div
|
|
1180
|
+
class="pf-c-helper-text__item"
|
|
1181
|
+
id="form-demo-sections-complex-form-routing-create-route-helper"
|
|
1182
|
+
>
|
|
1193
1183
|
<span
|
|
1194
1184
|
class="pf-c-helper-text__item-text"
|
|
1195
1185
|
>Exposes your appplication at a public URL.</span>
|
|
@@ -1201,7 +1191,7 @@ section: components
|
|
|
1201
1191
|
<div class="pf-c-form__group">
|
|
1202
1192
|
<div class="pf-c-form__group-label"><label
|
|
1203
1193
|
class="pf-c-form__label"
|
|
1204
|
-
for="form-demo-sections-complex-
|
|
1194
|
+
for="form-demo-sections-complex-form-routing-hostname"
|
|
1205
1195
|
>
|
|
1206
1196
|
<span class="pf-c-form__label-text">Hostname</span></label>
|
|
1207
1197
|
</div>
|
|
@@ -1209,17 +1199,16 @@ section: components
|
|
|
1209
1199
|
<input
|
|
1210
1200
|
class="pf-c-form-control"
|
|
1211
1201
|
type="text"
|
|
1212
|
-
id="form-demo-sections-complex-
|
|
1213
|
-
name="form-demo-sections-complex-
|
|
1202
|
+
id="form-demo-sections-complex-form-routing-hostname"
|
|
1203
|
+
name="form-demo-sections-complex-form-routing-hostname"
|
|
1214
1204
|
/>
|
|
1215
1205
|
|
|
1216
|
-
<div
|
|
1217
|
-
class="pf-c-form__helper-text"
|
|
1218
|
-
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname-helper"
|
|
1219
|
-
aria-live="polite"
|
|
1220
|
-
>
|
|
1206
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
1221
1207
|
<div class="pf-c-helper-text">
|
|
1222
|
-
<div
|
|
1208
|
+
<div
|
|
1209
|
+
class="pf-c-helper-text__item"
|
|
1210
|
+
id="form-demo-sections-complex-form-routing-hostname-helper"
|
|
1211
|
+
>
|
|
1223
1212
|
<span
|
|
1224
1213
|
class="pf-c-helper-text__item-text"
|
|
1225
1214
|
>Public hostname for the route. If not specified, a hostname is generated.</span>
|
|
@@ -1231,7 +1220,7 @@ section: components
|
|
|
1231
1220
|
<div class="pf-c-form__group">
|
|
1232
1221
|
<div class="pf-c-form__group-label"><label
|
|
1233
1222
|
class="pf-c-form__label"
|
|
1234
|
-
for="form-demo-sections-complex-
|
|
1223
|
+
for="form-demo-sections-complex-form-routing-path"
|
|
1235
1224
|
>
|
|
1236
1225
|
<span class="pf-c-form__label-text">Path</span></label>
|
|
1237
1226
|
</div>
|
|
@@ -1239,17 +1228,18 @@ section: components
|
|
|
1239
1228
|
<input
|
|
1240
1229
|
class="pf-c-form-control"
|
|
1241
1230
|
type="text"
|
|
1242
|
-
|
|
1243
|
-
|
|
1231
|
+
placeholder="/"
|
|
1232
|
+
id="form-demo-sections-complex-form-routing-path"
|
|
1233
|
+
name="form-demo-sections-complex-form-routing-path"
|
|
1234
|
+
required
|
|
1244
1235
|
/>
|
|
1245
1236
|
|
|
1246
|
-
<div
|
|
1247
|
-
class="pf-c-form__helper-text"
|
|
1248
|
-
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path-helper"
|
|
1249
|
-
aria-live="polite"
|
|
1250
|
-
>
|
|
1237
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
1251
1238
|
<div class="pf-c-helper-text">
|
|
1252
|
-
<div
|
|
1239
|
+
<div
|
|
1240
|
+
class="pf-c-helper-text__item"
|
|
1241
|
+
id="form-demo-sections-complex-form-routing-path-helper"
|
|
1242
|
+
>
|
|
1253
1243
|
<span
|
|
1254
1244
|
class="pf-c-helper-text__item-text"
|
|
1255
1245
|
>Path that the router watches to route traffic to the service.</span>
|
|
@@ -1268,7 +1258,7 @@ section: components
|
|
|
1268
1258
|
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend"
|
|
1269
1259
|
><span
|
|
1270
1260
|
class="pf-c-form__label"
|
|
1271
|
-
for="form-demo-sections-complex-
|
|
1261
|
+
for="form-demo-sections-complex-form-routing-security"
|
|
1272
1262
|
>
|
|
1273
1263
|
<span class="pf-c-form__label-text">Security</span></span>
|
|
1274
1264
|
</div>
|
|
@@ -1277,22 +1267,21 @@ section: components
|
|
|
1277
1267
|
<input
|
|
1278
1268
|
class="pf-c-check__input"
|
|
1279
1269
|
type="checkbox"
|
|
1280
|
-
id="form-demo-sections-complex-
|
|
1281
|
-
name="form-demo-sections-complex-
|
|
1270
|
+
id="form-demo-sections-complex-form-routing-security-check-1"
|
|
1271
|
+
name="form-demo-sections-complex-form-routing-security-check-1"
|
|
1282
1272
|
/>
|
|
1283
1273
|
|
|
1284
1274
|
<label
|
|
1285
1275
|
class="pf-c-check__label"
|
|
1286
|
-
for="form-demo-sections-complex-
|
|
1276
|
+
for="form-demo-sections-complex-form-routing-security-check-1"
|
|
1287
1277
|
>Secure Route</label>
|
|
1288
1278
|
</div>
|
|
1289
|
-
<div
|
|
1290
|
-
class="pf-c-form__helper-text"
|
|
1291
|
-
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-helper"
|
|
1292
|
-
aria-live="polite"
|
|
1293
|
-
>
|
|
1279
|
+
<div class="pf-c-form__helper-text" aria-live="polite">
|
|
1294
1280
|
<div class="pf-c-helper-text">
|
|
1295
|
-
<div
|
|
1281
|
+
<div
|
|
1282
|
+
class="pf-c-helper-text__item"
|
|
1283
|
+
id="form-demo-sections-complex-form-routing-security-helper"
|
|
1284
|
+
>
|
|
1296
1285
|
<span
|
|
1297
1286
|
class="pf-c-helper-text__item-text"
|
|
1298
1287
|
>Routes can be secured using several TLS termination types for serving certificates.</span>
|
|
@@ -22,8 +22,8 @@ section: components
|
|
|
22
22
|
/>
|
|
23
23
|
<div
|
|
24
24
|
class="pf-c-form__helper-text"
|
|
25
|
-
id="helper-text-form-name-helper"
|
|
26
25
|
aria-live="polite"
|
|
26
|
+
id="helper-text-form-name-helper"
|
|
27
27
|
>
|
|
28
28
|
<div class="pf-c-helper-text">
|
|
29
29
|
<div class="pf-c-helper-text__item">
|
|
@@ -48,10 +48,11 @@ section: components
|
|
|
48
48
|
name="helper-text-form-email"
|
|
49
49
|
aria-describedby="helper-text-form-email-helper"
|
|
50
50
|
/>
|
|
51
|
+
|
|
51
52
|
<div
|
|
52
53
|
class="pf-c-form__helper-text"
|
|
53
|
-
id="helper-text-form-email-helper"
|
|
54
54
|
aria-live="polite"
|
|
55
|
+
id="helper-text-form-email-helper"
|
|
55
56
|
>
|
|
56
57
|
<div class="pf-c-helper-text">
|
|
57
58
|
<div class="pf-c-helper-text__item pf-m-warning">
|
|
@@ -77,13 +78,14 @@ section: components
|
|
|
77
78
|
aria-invalid="true"
|
|
78
79
|
aria-describedby="helper-text-form-address-helper"
|
|
79
80
|
/>
|
|
81
|
+
|
|
80
82
|
<div
|
|
81
83
|
class="pf-c-form__helper-text"
|
|
82
|
-
id="helper-text-form-address-helper"
|
|
83
84
|
aria-live="polite"
|
|
85
|
+
id="helper-text-form-address-helper"
|
|
84
86
|
>
|
|
85
87
|
<div class="pf-c-helper-text">
|
|
86
|
-
<div class="pf-c-helper-text__item pf-m-
|
|
88
|
+
<div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
87
89
|
<span class="pf-c-helper-text__item-icon">
|
|
88
90
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
89
91
|
</span>
|
|
@@ -91,7 +93,7 @@ section: components
|
|
|
91
93
|
class="pf-c-helper-text__item-text"
|
|
92
94
|
>This criteria has been met.</span>
|
|
93
95
|
</div>
|
|
94
|
-
<div class="pf-c-helper-text__item pf-m-
|
|
96
|
+
<div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
|
|
95
97
|
<span class="pf-c-helper-text__item-icon">
|
|
96
98
|
<i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
|
|
97
99
|
</span>
|
|
@@ -99,7 +101,7 @@ section: components
|
|
|
99
101
|
class="pf-c-helper-text__item-text"
|
|
100
102
|
>This criteria has not been met.</span>
|
|
101
103
|
</div>
|
|
102
|
-
<div class="pf-c-helper-text__item pf-m-
|
|
104
|
+
<div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
103
105
|
<span class="pf-c-helper-text__item-icon">
|
|
104
106
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
105
107
|
</span>
|
|
@@ -124,13 +126,14 @@ section: components
|
|
|
124
126
|
name="helper-text-form-comment"
|
|
125
127
|
aria-describedby="helper-text-form-comment-helper"
|
|
126
128
|
/>
|
|
129
|
+
|
|
127
130
|
<div
|
|
128
131
|
class="pf-c-form__helper-text"
|
|
129
|
-
id="helper-text-form-comment-helper"
|
|
130
132
|
aria-live="polite"
|
|
133
|
+
id="helper-text-form-comment-helper"
|
|
131
134
|
>
|
|
132
135
|
<div class="pf-c-helper-text">
|
|
133
|
-
<div class="pf-c-helper-text__item pf-m-
|
|
136
|
+
<div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
|
|
134
137
|
<span class="pf-c-helper-text__item-icon">
|
|
135
138
|
<i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
|
|
136
139
|
</span>
|