@patternfly/patternfly 4.216.1 → 4.216.2
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/Form/form.css +1 -0
- package/components/Form/form.scss +1 -0
- package/docs/components/Form/examples/Form.md +90 -148
- package/docs/components/Login/examples/Login.md +20 -50
- package/docs/components/SearchInput/examples/SearchInput.md +16 -32
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +16 -32
- package/docs/components/Wizard/examples/Wizard.md +105 -210
- package/docs/demos/Alert/examples/Alert.md +16 -40
- package/docs/demos/Button/examples/Button.md +12 -30
- package/docs/demos/Form/examples/BasicForms.md +97 -176
- package/docs/demos/HelperText/examples/HelperText.md +8 -19
- package/docs/demos/Modal/examples/Modal.md +18 -27
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +6 -10
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +24 -40
- package/docs/demos/Wizard/examples/Wizard.md +168 -336
- package/package.json +1 -1
- package/patternfly-no-reset.css +1 -0
- package/patternfly.css +1 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
package/components/Form/form.css
CHANGED
|
@@ -304,6 +304,7 @@ $pf-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "lg",
|
|
|
304
304
|
font-size: var(--pf-c-form__group-label-help--FontSize);
|
|
305
305
|
line-height: 1;
|
|
306
306
|
color: var(--pf-c-form__group-label-help--Color);
|
|
307
|
+
cursor: pointer;
|
|
307
308
|
border: 0;
|
|
308
309
|
transform: translateY(var(--pf-c-form__group-label-help--TranslateY));
|
|
309
310
|
|
|
@@ -9,18 +9,15 @@ cssPrefix: pf-c-form
|
|
|
9
9
|
```html
|
|
10
10
|
<form class="pf-c-form" novalidate>
|
|
11
11
|
<div class="pf-c-form__group">
|
|
12
|
-
<div class="pf-c-form__group-label">
|
|
13
|
-
|
|
14
|
-
<span class="pf-c-form__label-text">Name</span>
|
|
15
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
16
|
-
</label>
|
|
17
|
-
<button
|
|
12
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-vertical-name">
|
|
13
|
+
<span class="pf-c-form__label-text">Name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
18
14
|
class="pf-c-form__group-label-help"
|
|
19
15
|
aria-label="More information for name field"
|
|
20
16
|
aria-describedby="form-vertical-name"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
role="button"
|
|
18
|
+
type="button"
|
|
19
|
+
tabindex="0"
|
|
20
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
24
21
|
</div>
|
|
25
22
|
<div class="pf-c-form__group-control">
|
|
26
23
|
<input
|
|
@@ -41,11 +38,8 @@ cssPrefix: pf-c-form
|
|
|
41
38
|
```html
|
|
42
39
|
<form class="pf-c-form pf-m-horizontal" novalidate>
|
|
43
40
|
<div class="pf-c-form__group">
|
|
44
|
-
<div class="pf-c-form__group-label">
|
|
45
|
-
|
|
46
|
-
<span class="pf-c-form__label-text">Name</span>
|
|
47
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
48
|
-
</label>
|
|
41
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-horizontal-name">
|
|
42
|
+
<span class="pf-c-form__label-text">Name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
49
43
|
</div>
|
|
50
44
|
<div class="pf-c-form__group-control">
|
|
51
45
|
<input
|
|
@@ -58,17 +52,15 @@ cssPrefix: pf-c-form
|
|
|
58
52
|
</div>
|
|
59
53
|
</div>
|
|
60
54
|
<div class="pf-c-form__group">
|
|
61
|
-
<div class="pf-c-form__group-label">
|
|
62
|
-
|
|
63
|
-
<span class="pf-c-form__label-text">Information</span>
|
|
64
|
-
</label>
|
|
65
|
-
<button
|
|
55
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-horizontal-info">
|
|
56
|
+
<span class="pf-c-form__label-text">Information</span></label> <span
|
|
66
57
|
class="pf-c-form__group-label-help"
|
|
67
58
|
aria-label="More information for information field"
|
|
68
59
|
aria-describedby="form-horizontal-info"
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
60
|
+
role="button"
|
|
61
|
+
type="button"
|
|
62
|
+
tabindex="0"
|
|
63
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
72
64
|
</div>
|
|
73
65
|
<div class="pf-c-form__group-control">
|
|
74
66
|
<textarea
|
|
@@ -88,17 +80,15 @@ cssPrefix: pf-c-form
|
|
|
88
80
|
<div
|
|
89
81
|
class="pf-c-form__group-label pf-m-no-padding-top"
|
|
90
82
|
id="form-horizontal-checkbox-legend"
|
|
91
|
-
>
|
|
92
|
-
|
|
93
|
-
<span class="pf-c-form__label-text">Label (no top padding)</span>
|
|
94
|
-
</span>
|
|
95
|
-
<button
|
|
83
|
+
><span class="pf-c-form__label">
|
|
84
|
+
<span class="pf-c-form__label-text">Label (no top padding)</span></span> <span
|
|
96
85
|
class="pf-c-form__group-label-help"
|
|
97
86
|
aria-label="More information for label field"
|
|
98
87
|
aria-describedby="form-horizontal-checkbox-legend"
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
88
|
+
role="button"
|
|
89
|
+
type="button"
|
|
90
|
+
tabindex="0"
|
|
91
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
102
92
|
</div>
|
|
103
93
|
<div class="pf-c-form__group-control pf-m-stack">
|
|
104
94
|
<div class="pf-c-check">
|
|
@@ -135,21 +125,18 @@ cssPrefix: pf-c-form
|
|
|
135
125
|
```html
|
|
136
126
|
<form class="pf-c-form pf-m-horizontal-on-sm" novalidate>
|
|
137
127
|
<div class="pf-c-form__group">
|
|
138
|
-
<div class="pf-c-form__group-label"
|
|
139
|
-
<label
|
|
128
|
+
<div class="pf-c-form__group-label"><label
|
|
140
129
|
class="pf-c-form__label"
|
|
141
130
|
for="form-horizontal-custom-breakpoint-name"
|
|
142
131
|
>
|
|
143
|
-
<span class="pf-c-form__label-text">Name</span
|
|
144
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
145
|
-
</label>
|
|
146
|
-
<button
|
|
132
|
+
<span class="pf-c-form__label-text">Name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
147
133
|
class="pf-c-form__group-label-help"
|
|
148
134
|
aria-label="More information for name field"
|
|
149
135
|
aria-describedby="form-horizontal-custom-breakpoint-name"
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
136
|
+
role="button"
|
|
137
|
+
type="button"
|
|
138
|
+
tabindex="0"
|
|
139
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
153
140
|
</div>
|
|
154
141
|
<div class="pf-c-form__group-control">
|
|
155
142
|
<input
|
|
@@ -171,13 +158,11 @@ cssPrefix: pf-c-form
|
|
|
171
158
|
<form class="pf-c-form" novalidate>
|
|
172
159
|
<section class="pf-c-form__section" role="group">
|
|
173
160
|
<div class="pf-c-form__group">
|
|
174
|
-
<div class="pf-c-form__group-label"
|
|
175
|
-
<label
|
|
161
|
+
<div class="pf-c-form__group-label"><label
|
|
176
162
|
class="pf-c-form__label"
|
|
177
163
|
for="form-section-example-form-section-1-input"
|
|
178
164
|
>
|
|
179
|
-
<span class="pf-c-form__label-text">Form section 1 inputs</span>
|
|
180
|
-
</label>
|
|
165
|
+
<span class="pf-c-form__label-text">Form section 1 inputs</span></label>
|
|
181
166
|
</div>
|
|
182
167
|
<div class="pf-c-form__group-control">
|
|
183
168
|
<input
|
|
@@ -190,13 +175,11 @@ cssPrefix: pf-c-form
|
|
|
190
175
|
</div>
|
|
191
176
|
</div>
|
|
192
177
|
<div class="pf-c-form__group">
|
|
193
|
-
<div class="pf-c-form__group-label"
|
|
194
|
-
<label
|
|
178
|
+
<div class="pf-c-form__group-label"><label
|
|
195
179
|
class="pf-c-form__label"
|
|
196
180
|
for="form-section-example-form-section-1-input-2"
|
|
197
181
|
>
|
|
198
|
-
<span class="pf-c-form__label-text">Form section 1 inputs</span>
|
|
199
|
-
</label>
|
|
182
|
+
<span class="pf-c-form__label-text">Form section 1 inputs</span></label>
|
|
200
183
|
</div>
|
|
201
184
|
<div class="pf-c-form__group-control">
|
|
202
185
|
<input
|
|
@@ -220,13 +203,11 @@ cssPrefix: pf-c-form
|
|
|
220
203
|
aria-hidden="true"
|
|
221
204
|
>Section 2 title (optional)</div>
|
|
222
205
|
<div class="pf-c-form__group">
|
|
223
|
-
<div class="pf-c-form__group-label"
|
|
224
|
-
<label
|
|
206
|
+
<div class="pf-c-form__group-label"><label
|
|
225
207
|
class="pf-c-form__label"
|
|
226
208
|
for="form-section-example-form-section-2-input"
|
|
227
209
|
>
|
|
228
|
-
<span class="pf-c-form__label-text">Form section 2 inputs</span>
|
|
229
|
-
</label>
|
|
210
|
+
<span class="pf-c-form__label-text">Form section 2 inputs</span></label>
|
|
230
211
|
</div>
|
|
231
212
|
<div class="pf-c-form__group-control">
|
|
232
213
|
<input
|
|
@@ -239,13 +220,11 @@ cssPrefix: pf-c-form
|
|
|
239
220
|
</div>
|
|
240
221
|
</div>
|
|
241
222
|
<div class="pf-c-form__group">
|
|
242
|
-
<div class="pf-c-form__group-label"
|
|
243
|
-
<label
|
|
223
|
+
<div class="pf-c-form__group-label"><label
|
|
244
224
|
class="pf-c-form__label"
|
|
245
225
|
for="form-section-example-form-section-2-input-2"
|
|
246
226
|
>
|
|
247
|
-
<span class="pf-c-form__label-text">Form section 2 inputs</span>
|
|
248
|
-
</label>
|
|
227
|
+
<span class="pf-c-form__label-text">Form section 2 inputs</span></label>
|
|
249
228
|
</div>
|
|
250
229
|
<div class="pf-c-form__group-control">
|
|
251
230
|
<input
|
|
@@ -267,11 +246,8 @@ cssPrefix: pf-c-form
|
|
|
267
246
|
```html
|
|
268
247
|
<form class="pf-c-form" novalidate>
|
|
269
248
|
<div class="pf-c-form__group">
|
|
270
|
-
<div class="pf-c-form__group-label">
|
|
271
|
-
|
|
272
|
-
<span class="pf-c-form__label-text">Name</span>
|
|
273
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
274
|
-
</label>
|
|
249
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-help-text-name">
|
|
250
|
+
<span class="pf-c-form__label-text">Name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
275
251
|
</div>
|
|
276
252
|
<div class="pf-c-form__group-control">
|
|
277
253
|
<input
|
|
@@ -290,11 +266,8 @@ cssPrefix: pf-c-form
|
|
|
290
266
|
</div>
|
|
291
267
|
</div>
|
|
292
268
|
<div class="pf-c-form__group">
|
|
293
|
-
<div class="pf-c-form__group-label">
|
|
294
|
-
|
|
295
|
-
<span class="pf-c-form__label-text">E-mail</span>
|
|
296
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
297
|
-
</label>
|
|
269
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-help-text-email">
|
|
270
|
+
<span class="pf-c-form__label-text">E-mail</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
298
271
|
</div>
|
|
299
272
|
<div class="pf-c-form__group-control">
|
|
300
273
|
<input
|
|
@@ -313,11 +286,8 @@ cssPrefix: pf-c-form
|
|
|
313
286
|
</div>
|
|
314
287
|
</div>
|
|
315
288
|
<div class="pf-c-form__group">
|
|
316
|
-
<div class="pf-c-form__group-label">
|
|
317
|
-
|
|
318
|
-
<span class="pf-c-form__label-text">Address</span>
|
|
319
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
320
|
-
</label>
|
|
289
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-help-text-address">
|
|
290
|
+
<span class="pf-c-form__label-text">Address</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
321
291
|
</div>
|
|
322
292
|
<div class="pf-c-form__group-control">
|
|
323
293
|
<input
|
|
@@ -337,10 +307,8 @@ cssPrefix: pf-c-form
|
|
|
337
307
|
</div>
|
|
338
308
|
</div>
|
|
339
309
|
<div class="pf-c-form__group">
|
|
340
|
-
<div class="pf-c-form__group-label">
|
|
341
|
-
|
|
342
|
-
<span class="pf-c-form__label-text">Comment</span>
|
|
343
|
-
</label>
|
|
310
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-help-text-comment">
|
|
311
|
+
<span class="pf-c-form__label-text">Comment</span></label>
|
|
344
312
|
</div>
|
|
345
313
|
<div class="pf-c-form__group-control">
|
|
346
314
|
<input
|
|
@@ -359,10 +327,8 @@ cssPrefix: pf-c-form
|
|
|
359
327
|
</div>
|
|
360
328
|
</div>
|
|
361
329
|
<div class="pf-c-form__group">
|
|
362
|
-
<div class="pf-c-form__group-label">
|
|
363
|
-
|
|
364
|
-
<span class="pf-c-form__label-text">Information</span>
|
|
365
|
-
</label>
|
|
330
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-help-text-info">
|
|
331
|
+
<span class="pf-c-form__label-text">Information</span></label>
|
|
366
332
|
</div>
|
|
367
333
|
<textarea
|
|
368
334
|
class="pf-c-form-control"
|
|
@@ -392,18 +358,15 @@ cssPrefix: pf-c-form
|
|
|
392
358
|
<form class="pf-c-form" novalidate>
|
|
393
359
|
<div class="pf-c-form__group">
|
|
394
360
|
<div class="pf-c-form__group-label pf-m-info">
|
|
395
|
-
<div class="pf-c-form__group-label-main">
|
|
396
|
-
|
|
397
|
-
<span class="pf-c-form__label-text">Name</span>
|
|
398
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
399
|
-
</label>
|
|
400
|
-
<button
|
|
361
|
+
<div class="pf-c-form__group-label-main"><label class="pf-c-form__label" for="form-additional-info-name">
|
|
362
|
+
<span class="pf-c-form__label-text">Name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
401
363
|
class="pf-c-form__group-label-help"
|
|
402
364
|
aria-label="More information for name field"
|
|
403
365
|
aria-describedby="form-additional-info-name"
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
366
|
+
role="button"
|
|
367
|
+
type="button"
|
|
368
|
+
tabindex="0"
|
|
369
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
407
370
|
</div>
|
|
408
371
|
<div class="pf-c-form__group-label-info">info</div>
|
|
409
372
|
</div>
|
|
@@ -462,22 +425,18 @@ cssPrefix: pf-c-form
|
|
|
462
425
|
</div>
|
|
463
426
|
<div class="pf-c-form__field-group-body" hidden>
|
|
464
427
|
<div class="pf-c-form__group">
|
|
465
|
-
<div class="pf-c-form__group-label"
|
|
466
|
-
<label
|
|
428
|
+
<div class="pf-c-form__group-label"><label
|
|
467
429
|
class="pf-c-form__label"
|
|
468
430
|
for="form-field-groupform-field-group-field-group-label1"
|
|
469
431
|
>
|
|
470
|
-
<span class="pf-c-form__label-text">Label 1</span
|
|
471
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
472
|
-
</label>
|
|
473
|
-
|
|
474
|
-
<button
|
|
432
|
+
<span class="pf-c-form__label-text">Label 1</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
475
433
|
class="pf-c-form__group-label-help"
|
|
476
434
|
aria-label="More information for label 1 field"
|
|
477
435
|
aria-describedby="form-field-groupform-field-group-field-group-label1"
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
436
|
+
role="button"
|
|
437
|
+
type="button"
|
|
438
|
+
tabindex="0"
|
|
439
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
481
440
|
</div>
|
|
482
441
|
<div class="pf-c-form__group-control">
|
|
483
442
|
<input
|
|
@@ -490,22 +449,18 @@ cssPrefix: pf-c-form
|
|
|
490
449
|
</div>
|
|
491
450
|
</div>
|
|
492
451
|
<div class="pf-c-form__group">
|
|
493
|
-
<div class="pf-c-form__group-label"
|
|
494
|
-
<label
|
|
452
|
+
<div class="pf-c-form__group-label"><label
|
|
495
453
|
class="pf-c-form__label"
|
|
496
454
|
for="form-field-groupform-field-group-field-group-label2"
|
|
497
455
|
>
|
|
498
|
-
<span class="pf-c-form__label-text">Label 2</span
|
|
499
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
500
|
-
</label>
|
|
501
|
-
|
|
502
|
-
<button
|
|
456
|
+
<span class="pf-c-form__label-text">Label 2</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
503
457
|
class="pf-c-form__group-label-help"
|
|
504
458
|
aria-label="More information for label 2 field"
|
|
505
459
|
aria-describedby="form-field-groupform-field-group-field-group-label2"
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
460
|
+
role="button"
|
|
461
|
+
type="button"
|
|
462
|
+
tabindex="0"
|
|
463
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
509
464
|
</div>
|
|
510
465
|
<div class="pf-c-form__group-control">
|
|
511
466
|
<input
|
|
@@ -601,22 +556,18 @@ cssPrefix: pf-c-form
|
|
|
601
556
|
</div>
|
|
602
557
|
<div class="pf-c-form__field-group-body">
|
|
603
558
|
<div class="pf-c-form__group">
|
|
604
|
-
<div class="pf-c-form__group-label"
|
|
605
|
-
<label
|
|
559
|
+
<div class="pf-c-form__group-label"><label
|
|
606
560
|
class="pf-c-form__label"
|
|
607
561
|
for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
|
|
608
562
|
>
|
|
609
|
-
<span class="pf-c-form__label-text">Label 1</span
|
|
610
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
611
|
-
</label>
|
|
612
|
-
|
|
613
|
-
<button
|
|
563
|
+
<span class="pf-c-form__label-text">Label 1</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
614
564
|
class="pf-c-form__group-label-help"
|
|
615
565
|
aria-label="More information for label 1 field"
|
|
616
566
|
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
567
|
+
role="button"
|
|
568
|
+
type="button"
|
|
569
|
+
tabindex="0"
|
|
570
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
620
571
|
</div>
|
|
621
572
|
<div class="pf-c-form__group-control">
|
|
622
573
|
<input
|
|
@@ -629,22 +580,18 @@ cssPrefix: pf-c-form
|
|
|
629
580
|
</div>
|
|
630
581
|
</div>
|
|
631
582
|
<div class="pf-c-form__group">
|
|
632
|
-
<div class="pf-c-form__group-label"
|
|
633
|
-
<label
|
|
583
|
+
<div class="pf-c-form__group-label"><label
|
|
634
584
|
class="pf-c-form__label"
|
|
635
585
|
for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
|
|
636
586
|
>
|
|
637
|
-
<span class="pf-c-form__label-text">Label 2</span
|
|
638
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
639
|
-
</label>
|
|
640
|
-
|
|
641
|
-
<button
|
|
587
|
+
<span class="pf-c-form__label-text">Label 2</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
642
588
|
class="pf-c-form__group-label-help"
|
|
643
589
|
aria-label="More information for label 2 field"
|
|
644
590
|
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
591
|
+
role="button"
|
|
592
|
+
type="button"
|
|
593
|
+
tabindex="0"
|
|
594
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
648
595
|
</div>
|
|
649
596
|
<div class="pf-c-form__group-control">
|
|
650
597
|
<input
|
|
@@ -673,22 +620,18 @@ cssPrefix: pf-c-form
|
|
|
673
620
|
</div>
|
|
674
621
|
<div class="pf-c-form__field-group-body">
|
|
675
622
|
<div class="pf-c-form__group">
|
|
676
|
-
<div class="pf-c-form__group-label"
|
|
677
|
-
<label
|
|
623
|
+
<div class="pf-c-form__group-label"><label
|
|
678
624
|
class="pf-c-form__label"
|
|
679
625
|
for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
|
|
680
626
|
>
|
|
681
|
-
<span class="pf-c-form__label-text">Label 1</span
|
|
682
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
683
|
-
</label>
|
|
684
|
-
|
|
685
|
-
<button
|
|
627
|
+
<span class="pf-c-form__label-text">Label 1</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
686
628
|
class="pf-c-form__group-label-help"
|
|
687
629
|
aria-label="More information for label 1 field"
|
|
688
630
|
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
631
|
+
role="button"
|
|
632
|
+
type="button"
|
|
633
|
+
tabindex="0"
|
|
634
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
692
635
|
</div>
|
|
693
636
|
<div class="pf-c-form__group-control">
|
|
694
637
|
<input
|
|
@@ -701,22 +644,18 @@ cssPrefix: pf-c-form
|
|
|
701
644
|
</div>
|
|
702
645
|
</div>
|
|
703
646
|
<div class="pf-c-form__group">
|
|
704
|
-
<div class="pf-c-form__group-label"
|
|
705
|
-
<label
|
|
647
|
+
<div class="pf-c-form__group-label"><label
|
|
706
648
|
class="pf-c-form__label"
|
|
707
649
|
for="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
|
|
708
650
|
>
|
|
709
|
-
<span class="pf-c-form__label-text">Label 2</span
|
|
710
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
711
|
-
</label>
|
|
712
|
-
|
|
713
|
-
<button
|
|
651
|
+
<span class="pf-c-form__label-text">Label 2</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
714
652
|
class="pf-c-form__group-label-help"
|
|
715
653
|
aria-label="More information for label 2 field"
|
|
716
654
|
aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
655
|
+
role="button"
|
|
656
|
+
type="button"
|
|
657
|
+
tabindex="0"
|
|
658
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
720
659
|
</div>
|
|
721
660
|
<div class="pf-c-form__group-control">
|
|
722
661
|
<input
|
|
@@ -738,6 +677,8 @@ cssPrefix: pf-c-form
|
|
|
738
677
|
|
|
739
678
|
## Documentation
|
|
740
679
|
|
|
680
|
+
To avoid the form label's required indicator or help tooltip icon from wrapping separately from the form label text, all whitespace characters between the last word of the label text, the required indicator (`.pf-c-form__label-required`), and help tooltip icon (`.pf-c-form__label-help`) must be removed, and ` ` characters added in between to maintain spacing. Also the help tooltip icon's `.pf-c-form__label-required` element must be a `<span>` instead of a `<button>` due to layout limitations of the `<button>` element imposed by user agent styles.
|
|
681
|
+
|
|
741
682
|
### Accessibility
|
|
742
683
|
|
|
743
684
|
| Attribute | Applied to | Outcome |
|
|
@@ -751,6 +692,7 @@ cssPrefix: pf-c-form
|
|
|
751
692
|
| `aria-hidden="true"` | `.pf-c-form__label-required` | Hides the required indicator from assistive technologies. |
|
|
752
693
|
| `role="group"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** |
|
|
753
694
|
| `role="radiogroup"` | `.pf-c-form__group` | Provides group role for radio input groups. **Required for radio input groups** |
|
|
695
|
+
| `role="button"` | `.pf-c-form__group-label-help` | Provides button role for group label help spans. **Required for group label help.** |
|
|
754
696
|
| `id` | `.pf-c-form__group-label` | Generates an `id` for use in the `aria-labelledby` attribute in a checkbox or radio form group. |
|
|
755
697
|
| `id` | `.pf-c-form__field-group-title-text` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
|
|
756
698
|
| `id` | `.pf-c-form__field-group-toggle-button > button` | Generates an `id` for use in the `aria-labelledby` attribute in an expandable field group's toggle button. |
|
|
@@ -775,7 +717,7 @@ cssPrefix: pf-c-form
|
|
|
775
717
|
| `.pf-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
|
|
776
718
|
| `.pf-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
|
|
777
719
|
| `.pf-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
|
|
778
|
-
| `.pf-c-form__group-label-help` | `<button>`
|
|
720
|
+
| `.pf-c-form__group-label-help` | `<button>`, `<span>` | Initiates a field level help span/button. |
|
|
779
721
|
| `.pf-c-form__group-control` | `<div>` | Initiates a form group control section. |
|
|
780
722
|
| `.pf-c-form__actions` | `<div>` | Iniates a row of actions. |
|
|
781
723
|
| `.pf-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
|
|
@@ -56,11 +56,8 @@ wrapperTag: div
|
|
|
56
56
|
</span>
|
|
57
57
|
Invalid login credentials.
|
|
58
58
|
</p>
|
|
59
|
-
<div class="pf-c-form__group">
|
|
60
|
-
|
|
61
|
-
<span class="pf-c-form__label-text">Username</span>
|
|
62
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
63
|
-
</label>
|
|
59
|
+
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
|
|
60
|
+
<span class="pf-c-form__label-text">Username</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
64
61
|
|
|
65
62
|
<input
|
|
66
63
|
class="pf-c-form-control"
|
|
@@ -71,11 +68,8 @@ wrapperTag: div
|
|
|
71
68
|
name="login-demo-form-username"
|
|
72
69
|
/>
|
|
73
70
|
</div>
|
|
74
|
-
<div class="pf-c-form__group">
|
|
75
|
-
|
|
76
|
-
<span class="pf-c-form__label-text">Password</span>
|
|
77
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
78
|
-
</label>
|
|
71
|
+
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-password">
|
|
72
|
+
<span class="pf-c-form__label-text">Password</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
79
73
|
|
|
80
74
|
<input
|
|
81
75
|
class="pf-c-form-control"
|
|
@@ -278,14 +272,11 @@ wrapperTag: div
|
|
|
278
272
|
</span>
|
|
279
273
|
Invalid login credentials.
|
|
280
274
|
</p>
|
|
281
|
-
<div class="pf-c-form__group"
|
|
282
|
-
<label
|
|
275
|
+
<div class="pf-c-form__group"><label
|
|
283
276
|
class="pf-c-form__label"
|
|
284
277
|
for="invalid-login-demo-form-username"
|
|
285
278
|
>
|
|
286
|
-
<span class="pf-c-form__label-text">Username</span>
|
|
287
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
288
|
-
</label>
|
|
279
|
+
<span class="pf-c-form__label-text">Username</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
289
280
|
|
|
290
281
|
<input
|
|
291
282
|
class="pf-c-form-control"
|
|
@@ -296,14 +287,11 @@ wrapperTag: div
|
|
|
296
287
|
aria-invalid="true"
|
|
297
288
|
/>
|
|
298
289
|
</div>
|
|
299
|
-
<div class="pf-c-form__group"
|
|
300
|
-
<label
|
|
290
|
+
<div class="pf-c-form__group"><label
|
|
301
291
|
class="pf-c-form__label"
|
|
302
292
|
for="invalid-login-demo-form-password"
|
|
303
293
|
>
|
|
304
|
-
<span class="pf-c-form__label-text">Password</span>
|
|
305
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
306
|
-
</label>
|
|
294
|
+
<span class="pf-c-form__label-text">Password</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
307
295
|
|
|
308
296
|
<input
|
|
309
297
|
class="pf-c-form-control"
|
|
@@ -506,11 +494,8 @@ wrapperTag: div
|
|
|
506
494
|
</span>
|
|
507
495
|
Invalid login credentials.
|
|
508
496
|
</p>
|
|
509
|
-
<div class="pf-c-form__group">
|
|
510
|
-
|
|
511
|
-
<span class="pf-c-form__label-text">Username</span>
|
|
512
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
513
|
-
</label>
|
|
497
|
+
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
|
|
498
|
+
<span class="pf-c-form__label-text">Username</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
514
499
|
|
|
515
500
|
<input
|
|
516
501
|
class="pf-c-form-control"
|
|
@@ -521,11 +506,8 @@ wrapperTag: div
|
|
|
521
506
|
name="login-demo-form-username"
|
|
522
507
|
/>
|
|
523
508
|
</div>
|
|
524
|
-
<div class="pf-c-form__group">
|
|
525
|
-
|
|
526
|
-
<span class="pf-c-form__label-text">Password</span>
|
|
527
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
528
|
-
</label>
|
|
509
|
+
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-password">
|
|
510
|
+
<span class="pf-c-form__label-text">Password</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
529
511
|
|
|
530
512
|
<div class="pf-c-input-group">
|
|
531
513
|
<input
|
|
@@ -739,11 +721,8 @@ wrapperTag: div
|
|
|
739
721
|
</span>
|
|
740
722
|
Invalid login credentials.
|
|
741
723
|
</p>
|
|
742
|
-
<div class="pf-c-form__group">
|
|
743
|
-
|
|
744
|
-
<span class="pf-c-form__label-text">Username</span>
|
|
745
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
746
|
-
</label>
|
|
724
|
+
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
|
|
725
|
+
<span class="pf-c-form__label-text">Username</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
747
726
|
|
|
748
727
|
<input
|
|
749
728
|
class="pf-c-form-control"
|
|
@@ -754,11 +733,8 @@ wrapperTag: div
|
|
|
754
733
|
name="login-demo-form-username"
|
|
755
734
|
/>
|
|
756
735
|
</div>
|
|
757
|
-
<div class="pf-c-form__group">
|
|
758
|
-
|
|
759
|
-
<span class="pf-c-form__label-text">Password</span>
|
|
760
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
761
|
-
</label>
|
|
736
|
+
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-password">
|
|
737
|
+
<span class="pf-c-form__label-text">Password</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
762
738
|
|
|
763
739
|
<div class="pf-c-input-group">
|
|
764
740
|
<input
|
|
@@ -1018,11 +994,8 @@ wrapperTag: div
|
|
|
1018
994
|
</span>
|
|
1019
995
|
Invalid login credentials.
|
|
1020
996
|
</p>
|
|
1021
|
-
<div class="pf-c-form__group">
|
|
1022
|
-
|
|
1023
|
-
<span class="pf-c-form__label-text">Username</span>
|
|
1024
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1025
|
-
</label>
|
|
997
|
+
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
|
|
998
|
+
<span class="pf-c-form__label-text">Username</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
1026
999
|
|
|
1027
1000
|
<input
|
|
1028
1001
|
class="pf-c-form-control"
|
|
@@ -1033,11 +1006,8 @@ wrapperTag: div
|
|
|
1033
1006
|
name="login-demo-form-username"
|
|
1034
1007
|
/>
|
|
1035
1008
|
</div>
|
|
1036
|
-
<div class="pf-c-form__group">
|
|
1037
|
-
|
|
1038
|
-
<span class="pf-c-form__label-text">Password</span>
|
|
1039
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
1040
|
-
</label>
|
|
1009
|
+
<div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-password">
|
|
1010
|
+
<span class="pf-c-form__label-text">Password</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
1041
1011
|
|
|
1042
1012
|
<input
|
|
1043
1013
|
class="pf-c-form-control"
|