@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
|
@@ -8,11 +8,8 @@ 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">
|
|
12
|
-
|
|
13
|
-
<span class="pf-c-form__label-text">Full name</span>
|
|
14
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
15
|
-
</label>
|
|
11
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-basic-name">
|
|
12
|
+
<span class="pf-c-form__label-text">Full name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
16
13
|
</div>
|
|
17
14
|
<div class="pf-c-form__group-control">
|
|
18
15
|
<input
|
|
@@ -32,10 +29,8 @@ section: components
|
|
|
32
29
|
</div>
|
|
33
30
|
</div>
|
|
34
31
|
<div class="pf-c-form__group">
|
|
35
|
-
<div class="pf-c-form__group-label">
|
|
36
|
-
|
|
37
|
-
<span class="pf-c-form__label-text">Email</span>
|
|
38
|
-
</label>
|
|
32
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-basic-email">
|
|
33
|
+
<span class="pf-c-form__label-text">Email</span></label>
|
|
39
34
|
</div>
|
|
40
35
|
<div class="pf-c-form__group-control">
|
|
41
36
|
<input
|
|
@@ -47,19 +42,15 @@ section: components
|
|
|
47
42
|
</div>
|
|
48
43
|
</div>
|
|
49
44
|
<div class="pf-c-form__group">
|
|
50
|
-
<div class="pf-c-form__group-label">
|
|
51
|
-
|
|
52
|
-
<span class="pf-c-form__label-text">Phone number</span>
|
|
53
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
54
|
-
</label>
|
|
55
|
-
|
|
56
|
-
<button
|
|
45
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-basic-phone">
|
|
46
|
+
<span class="pf-c-form__label-text">Phone number</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
57
47
|
class="pf-c-form__group-label-help"
|
|
58
48
|
aria-label="More information for phone number field"
|
|
59
49
|
aria-describedby="form-demo-basic-phone"
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
50
|
+
role="button"
|
|
51
|
+
type="button"
|
|
52
|
+
tabindex="0"
|
|
53
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
63
54
|
</div>
|
|
64
55
|
<div class="pf-c-form__group-control">
|
|
65
56
|
<input
|
|
@@ -77,10 +68,8 @@ section: components
|
|
|
77
68
|
role="group"
|
|
78
69
|
aria-labelledby="form-demo-basic-contact-legend"
|
|
79
70
|
>
|
|
80
|
-
<div class="pf-c-form__group-label" id="form-demo-basic-contact-legend">
|
|
81
|
-
|
|
82
|
-
<span class="pf-c-form__label-text">How can we contact you?</span>
|
|
83
|
-
</span>
|
|
71
|
+
<div class="pf-c-form__group-label" id="form-demo-basic-contact-legend"><span class="pf-c-form__label">
|
|
72
|
+
<span class="pf-c-form__label-text">How can we contact you?</span></span>
|
|
84
73
|
</div>
|
|
85
74
|
<div class="pf-c-form__group-control pf-m-inline">
|
|
86
75
|
<div class="pf-c-check">
|
|
@@ -129,10 +118,8 @@ section: components
|
|
|
129
118
|
role="radiogroup"
|
|
130
119
|
aria-labelledby="form-demo-basic-time-zone-legend"
|
|
131
120
|
>
|
|
132
|
-
<div class="pf-c-form__group-label" id="form-demo-basic-time-zone-legend">
|
|
133
|
-
|
|
134
|
-
<span class="pf-c-form__label-text">Time zone</span>
|
|
135
|
-
</span>
|
|
121
|
+
<div class="pf-c-form__group-label" id="form-demo-basic-time-zone-legend"><span class="pf-c-form__label">
|
|
122
|
+
<span class="pf-c-form__label-text">Time zone</span></span>
|
|
136
123
|
</div>
|
|
137
124
|
<div class="pf-c-form__group-control pf-m-inline">
|
|
138
125
|
<div class="pf-c-radio">
|
|
@@ -193,11 +180,8 @@ section: components
|
|
|
193
180
|
```html
|
|
194
181
|
<form class="pf-c-form pf-m-horizontal" novalidate>
|
|
195
182
|
<div class="pf-c-form__group -name">
|
|
196
|
-
<div class="pf-c-form__group-label">
|
|
197
|
-
|
|
198
|
-
<span class="pf-c-form__label-text">Full name</span>
|
|
199
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
200
|
-
</label>
|
|
183
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-horizontal">
|
|
184
|
+
<span class="pf-c-form__label-text">Full name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
201
185
|
</div>
|
|
202
186
|
<div class="pf-c-form__group-control">
|
|
203
187
|
<input
|
|
@@ -216,10 +200,8 @@ section: components
|
|
|
216
200
|
</div>
|
|
217
201
|
</div>
|
|
218
202
|
<div class="pf-c-form__group">
|
|
219
|
-
<div class="pf-c-form__group-label">
|
|
220
|
-
|
|
221
|
-
<span class="pf-c-form__label-text">Email</span>
|
|
222
|
-
</label>
|
|
203
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-horizontal-email">
|
|
204
|
+
<span class="pf-c-form__label-text">Email</span></label>
|
|
223
205
|
</div>
|
|
224
206
|
<div class="pf-c-form__group-control">
|
|
225
207
|
<input
|
|
@@ -231,10 +213,8 @@ section: components
|
|
|
231
213
|
</div>
|
|
232
214
|
</div>
|
|
233
215
|
<div class="pf-c-form__group">
|
|
234
|
-
<div class="pf-c-form__group-label">
|
|
235
|
-
|
|
236
|
-
<span class="pf-c-form__label-text">Phone number</span>
|
|
237
|
-
</label>
|
|
216
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-horizontal-phone">
|
|
217
|
+
<span class="pf-c-form__label-text">Phone number</span></label>
|
|
238
218
|
</div>
|
|
239
219
|
<div class="pf-c-form__group-control">
|
|
240
220
|
<input
|
|
@@ -254,18 +234,15 @@ section: components
|
|
|
254
234
|
<div
|
|
255
235
|
class="pf-c-form__group-label pf-m-no-padding-top"
|
|
256
236
|
id="form-demo-horizontal-contact-legend"
|
|
257
|
-
>
|
|
258
|
-
|
|
259
|
-
<span class="pf-c-form__label-text">How can we contact you?</span>
|
|
260
|
-
</span>
|
|
261
|
-
|
|
262
|
-
<button
|
|
237
|
+
><span class="pf-c-form__label">
|
|
238
|
+
<span class="pf-c-form__label-text">How can we contact you?</span></span> <span
|
|
263
239
|
class="pf-c-form__group-label-help"
|
|
264
240
|
aria-label="More information for contact field"
|
|
265
241
|
aria-describedby="form-demo-horizontal-contact-legend"
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
242
|
+
role="button"
|
|
243
|
+
type="button"
|
|
244
|
+
tabindex="0"
|
|
245
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
269
246
|
</div>
|
|
270
247
|
<div class="pf-c-form__group-control pf-m-stack">
|
|
271
248
|
<div class="pf-c-check">
|
|
@@ -327,11 +304,8 @@ section: components
|
|
|
327
304
|
<form class="pf-c-form" novalidate>
|
|
328
305
|
<div class="pf-l-grid pf-m-all-6-col-on-md pf-m-gutter">
|
|
329
306
|
<div class="pf-c-form__group">
|
|
330
|
-
<div class="pf-c-form__group-label">
|
|
331
|
-
|
|
332
|
-
<span class="pf-c-form__label-text">Full name</span>
|
|
333
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
334
|
-
</label>
|
|
307
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-grid-name">
|
|
308
|
+
<span class="pf-c-form__label-text">Full name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
335
309
|
</div>
|
|
336
310
|
<div class="pf-c-form__group-control">
|
|
337
311
|
<input
|
|
@@ -351,11 +325,8 @@ section: components
|
|
|
351
325
|
</div>
|
|
352
326
|
</div>
|
|
353
327
|
<div class="pf-c-form__group">
|
|
354
|
-
<div class="pf-c-form__group-label">
|
|
355
|
-
|
|
356
|
-
<span class="pf-c-form__label-text">Job title</span>
|
|
357
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
358
|
-
</label>
|
|
328
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-grid-title">
|
|
329
|
+
<span class="pf-c-form__label-text">Job title</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
359
330
|
</div>
|
|
360
331
|
<div class="pf-c-form__group-control">
|
|
361
332
|
<input
|
|
@@ -368,10 +339,8 @@ section: components
|
|
|
368
339
|
</div>
|
|
369
340
|
</div>
|
|
370
341
|
<div class="pf-c-form__group">
|
|
371
|
-
<div class="pf-c-form__group-label">
|
|
372
|
-
|
|
373
|
-
<span class="pf-c-form__label-text">Phone number</span>
|
|
374
|
-
</label>
|
|
342
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-grid-phone">
|
|
343
|
+
<span class="pf-c-form__label-text">Phone number</span></label>
|
|
375
344
|
</div>
|
|
376
345
|
<div class="pf-c-form__group-control">
|
|
377
346
|
<input
|
|
@@ -384,10 +353,8 @@ section: components
|
|
|
384
353
|
</div>
|
|
385
354
|
</div>
|
|
386
355
|
<div class="pf-c-form__group">
|
|
387
|
-
<div class="pf-c-form__group-label">
|
|
388
|
-
|
|
389
|
-
<span class="pf-c-form__label-text">Email</span>
|
|
390
|
-
</label>
|
|
356
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-grid-email">
|
|
357
|
+
<span class="pf-c-form__label-text">Email</span></label>
|
|
391
358
|
</div>
|
|
392
359
|
<div class="pf-c-form__group-control">
|
|
393
360
|
<input
|
|
@@ -399,10 +366,8 @@ section: components
|
|
|
399
366
|
</div>
|
|
400
367
|
</div>
|
|
401
368
|
<div class="pf-c-form__group">
|
|
402
|
-
<div class="pf-c-form__group-label">
|
|
403
|
-
|
|
404
|
-
<span class="pf-c-form__label-text">Street address</span>
|
|
405
|
-
</label>
|
|
369
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-grid-address">
|
|
370
|
+
<span class="pf-c-form__label-text">Street address</span></label>
|
|
406
371
|
</div>
|
|
407
372
|
<div class="pf-c-form__group-control">
|
|
408
373
|
<input
|
|
@@ -415,10 +380,8 @@ section: components
|
|
|
415
380
|
</div>
|
|
416
381
|
<div class="pf-l-grid pf-m-all-6-col pf-m-gutter">
|
|
417
382
|
<div class="pf-c-form__group">
|
|
418
|
-
<div class="pf-c-form__group-label">
|
|
419
|
-
|
|
420
|
-
<span class="pf-c-form__label-text">City</span>
|
|
421
|
-
</label>
|
|
383
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-grid-city">
|
|
384
|
+
<span class="pf-c-form__label-text">City</span></label>
|
|
422
385
|
</div>
|
|
423
386
|
<div class="pf-c-form__group-control">
|
|
424
387
|
<input
|
|
@@ -429,10 +392,8 @@ section: components
|
|
|
429
392
|
</div>
|
|
430
393
|
</div>
|
|
431
394
|
<div class="pf-c-form__group">
|
|
432
|
-
<div class="pf-c-form__group-label">
|
|
433
|
-
|
|
434
|
-
<span class="pf-c-form__label-text">State</span>
|
|
435
|
-
</label>
|
|
395
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-demo-grid-state">
|
|
396
|
+
<span class="pf-c-form__label-text">State</span></label>
|
|
436
397
|
</div>
|
|
437
398
|
<div class="pf-c-form__group-control">
|
|
438
399
|
<select
|
|
@@ -523,22 +484,18 @@ section: components
|
|
|
523
484
|
aria-hidden="true"
|
|
524
485
|
>General settings</div>
|
|
525
486
|
<div class="pf-c-form__group">
|
|
526
|
-
<div class="pf-c-form__group-label"
|
|
527
|
-
<label
|
|
487
|
+
<div class="pf-c-form__group-label"><label
|
|
528
488
|
class="pf-c-form__label"
|
|
529
489
|
for="form-demo-sections-repeatable-fields-clientid"
|
|
530
490
|
>
|
|
531
|
-
<span class="pf-c-form__label-text">Client ID</span
|
|
532
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
533
|
-
</label>
|
|
534
|
-
|
|
535
|
-
<button
|
|
491
|
+
<span class="pf-c-form__label-text">Client ID</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
536
492
|
class="pf-c-form__group-label-help"
|
|
537
493
|
aria-label="More information for client id field"
|
|
538
494
|
aria-describedby="form-demo-sections-repeatable-fields-clientid"
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
495
|
+
role="button"
|
|
496
|
+
type="button"
|
|
497
|
+
tabindex="0"
|
|
498
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
542
499
|
</div>
|
|
543
500
|
<div class="pf-c-form__group-control">
|
|
544
501
|
<input
|
|
@@ -551,22 +508,18 @@ section: components
|
|
|
551
508
|
</div>
|
|
552
509
|
</div>
|
|
553
510
|
<div class="pf-c-form__group">
|
|
554
|
-
<div class="pf-c-form__group-label"
|
|
555
|
-
<label
|
|
511
|
+
<div class="pf-c-form__group-label"><label
|
|
556
512
|
class="pf-c-form__label"
|
|
557
513
|
for="form-demo-sections-repeatable-fields-name"
|
|
558
514
|
>
|
|
559
|
-
<span class="pf-c-form__label-text">Full name</span
|
|
560
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
561
|
-
</label>
|
|
562
|
-
|
|
563
|
-
<button
|
|
515
|
+
<span class="pf-c-form__label-text">Full name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
564
516
|
class="pf-c-form__group-label-help"
|
|
565
517
|
aria-label="More information for full name field"
|
|
566
518
|
aria-describedby="form-demo-sections-repeatable-fields-name"
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
519
|
+
role="button"
|
|
520
|
+
type="button"
|
|
521
|
+
tabindex="0"
|
|
522
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
570
523
|
</div>
|
|
571
524
|
<div class="pf-c-form__group-control">
|
|
572
525
|
<input
|
|
@@ -579,22 +532,18 @@ section: components
|
|
|
579
532
|
</div>
|
|
580
533
|
</div>
|
|
581
534
|
<div class="pf-c-form__group">
|
|
582
|
-
<div class="pf-c-form__group-label"
|
|
583
|
-
<label
|
|
535
|
+
<div class="pf-c-form__group-label"><label
|
|
584
536
|
class="pf-c-form__label"
|
|
585
537
|
for="form-demo-sections-repeatable-fields-description"
|
|
586
538
|
>
|
|
587
|
-
<span class="pf-c-form__label-text">Description</span
|
|
588
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
589
|
-
</label>
|
|
590
|
-
|
|
591
|
-
<button
|
|
539
|
+
<span class="pf-c-form__label-text">Description</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
592
540
|
class="pf-c-form__group-label-help"
|
|
593
541
|
aria-label="More information for description field"
|
|
594
542
|
aria-describedby="form-demo-sections-repeatable-fields-description"
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
543
|
+
role="button"
|
|
544
|
+
type="button"
|
|
545
|
+
tabindex="0"
|
|
546
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
598
547
|
</div>
|
|
599
548
|
<div class="pf-c-form__group-control">
|
|
600
549
|
<input
|
|
@@ -618,22 +567,18 @@ section: components
|
|
|
618
567
|
aria-hidden="true"
|
|
619
568
|
>Access settings</div>
|
|
620
569
|
<div class="pf-c-form__group">
|
|
621
|
-
<div class="pf-c-form__group-label"
|
|
622
|
-
<label
|
|
570
|
+
<div class="pf-c-form__group-label"><label
|
|
623
571
|
class="pf-c-form__label"
|
|
624
572
|
for="form-demo-sections-repeatable-fields-rooturl"
|
|
625
573
|
>
|
|
626
|
-
<span class="pf-c-form__label-text">Root URL</span
|
|
627
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
628
|
-
</label>
|
|
629
|
-
|
|
630
|
-
<button
|
|
574
|
+
<span class="pf-c-form__label-text">Root URL</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
631
575
|
class="pf-c-form__group-label-help"
|
|
632
576
|
aria-label="More information for root URL field"
|
|
633
577
|
aria-describedby="form-demo-sections-repeatable-fields-rooturl"
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
578
|
+
role="button"
|
|
579
|
+
type="button"
|
|
580
|
+
tabindex="0"
|
|
581
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
637
582
|
</div>
|
|
638
583
|
<div class="pf-c-form__group-control">
|
|
639
584
|
<input
|
|
@@ -646,22 +591,18 @@ section: components
|
|
|
646
591
|
</div>
|
|
647
592
|
</div>
|
|
648
593
|
<div class="pf-c-form__group">
|
|
649
|
-
<div class="pf-c-form__group-label"
|
|
650
|
-
<label
|
|
594
|
+
<div class="pf-c-form__group-label"><label
|
|
651
595
|
class="pf-c-form__label"
|
|
652
596
|
id="form-demo-sections-repeatable-fields-uris"
|
|
653
597
|
>
|
|
654
|
-
<span class="pf-c-form__label-text">Valid redirect URIs</span
|
|
655
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
656
|
-
</label>
|
|
657
|
-
|
|
658
|
-
<button
|
|
598
|
+
<span class="pf-c-form__label-text">Valid redirect URIs</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
659
599
|
class="pf-c-form__group-label-help"
|
|
660
600
|
aria-label="More information for valid redirect URIs field"
|
|
661
601
|
aria-describedby="form-demo-sections-repeatable-fields-uris"
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
602
|
+
role="button"
|
|
603
|
+
type="button"
|
|
604
|
+
tabindex="0"
|
|
605
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
665
606
|
</div>
|
|
666
607
|
<div class="pf-c-form__group-control pf-m-stack">
|
|
667
608
|
<div class="pf-c-input-group">
|
|
@@ -727,22 +668,18 @@ section: components
|
|
|
727
668
|
</div>
|
|
728
669
|
</div>
|
|
729
670
|
<div class="pf-c-form__group">
|
|
730
|
-
<div class="pf-c-form__group-label"
|
|
731
|
-
<label
|
|
671
|
+
<div class="pf-c-form__group-label"><label
|
|
732
672
|
class="pf-c-form__label"
|
|
733
673
|
for="form-demo-sections-repeatable-fields-home-url"
|
|
734
674
|
>
|
|
735
|
-
<span class="pf-c-form__label-text">Home URL</span
|
|
736
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
737
|
-
</label>
|
|
738
|
-
|
|
739
|
-
<button
|
|
675
|
+
<span class="pf-c-form__label-text">Home URL</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
740
676
|
class="pf-c-form__group-label-help"
|
|
741
677
|
aria-label="More information for home URL field"
|
|
742
678
|
aria-describedby="form-demo-sections-repeatable-fields-home-url"
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
679
|
+
role="button"
|
|
680
|
+
type="button"
|
|
681
|
+
tabindex="0"
|
|
682
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
746
683
|
</div>
|
|
747
684
|
<div class="pf-c-form__group-control">
|
|
748
685
|
<input
|
|
@@ -764,22 +701,18 @@ section: components
|
|
|
764
701
|
```html
|
|
765
702
|
<form class="pf-c-form" novalidate>
|
|
766
703
|
<div class="pf-c-form__group">
|
|
767
|
-
<div class="pf-c-form__group-label"
|
|
768
|
-
<label
|
|
704
|
+
<div class="pf-c-form__group-label"><label
|
|
769
705
|
class="pf-c-form__label"
|
|
770
706
|
for="form-demo-sections-complex-formform-demo-sections-complex-form-name"
|
|
771
707
|
>
|
|
772
|
-
<span class="pf-c-form__label-text">Name</span
|
|
773
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
774
|
-
</label>
|
|
775
|
-
|
|
776
|
-
<button
|
|
708
|
+
<span class="pf-c-form__label-text">Name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label> <span
|
|
777
709
|
class="pf-c-form__group-label-help"
|
|
778
710
|
aria-label="More information for name field"
|
|
779
711
|
aria-describedby="form-demo-sections-complex-formform-demo-sections-complex-form-name"
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
712
|
+
role="button"
|
|
713
|
+
type="button"
|
|
714
|
+
tabindex="0"
|
|
715
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
783
716
|
</div>
|
|
784
717
|
<div class="pf-c-form__group-control">
|
|
785
718
|
<input
|
|
@@ -793,21 +726,18 @@ section: components
|
|
|
793
726
|
</div>
|
|
794
727
|
|
|
795
728
|
<div class="pf-c-form__group">
|
|
796
|
-
<div class="pf-c-form__group-label"
|
|
797
|
-
<label
|
|
729
|
+
<div class="pf-c-form__group-label"><label
|
|
798
730
|
class="pf-c-form__label"
|
|
799
731
|
for="form-demo-sections-complex-formform-demo-sections-complex-form-labels"
|
|
800
732
|
>
|
|
801
|
-
<span class="pf-c-form__label-text">Labels</span
|
|
802
|
-
</label>
|
|
803
|
-
|
|
804
|
-
<button
|
|
733
|
+
<span class="pf-c-form__label-text">Labels</span></label> <span
|
|
805
734
|
class="pf-c-form__group-label-help"
|
|
806
735
|
aria-label="More information for labels field"
|
|
807
736
|
aria-describedby="form-demo-sections-complex-formform-demo-sections-complex-form-labels"
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
737
|
+
role="button"
|
|
738
|
+
type="button"
|
|
739
|
+
tabindex="0"
|
|
740
|
+
><i class="pficon pf-icon-help" aria-hidden="true"></i></span>
|
|
811
741
|
</div>
|
|
812
742
|
<div class="pf-c-form__group-control">
|
|
813
743
|
<div
|
|
@@ -1100,17 +1030,14 @@ section: components
|
|
|
1100
1030
|
aria-labelledby="form-demo-sections-complex-form-node-selector-terms-title"
|
|
1101
1031
|
>
|
|
1102
1032
|
<div class="pf-c-form__group">
|
|
1103
|
-
<div class="pf-c-form__group-label"
|
|
1104
|
-
<label
|
|
1033
|
+
<div class="pf-c-form__group-label"><label
|
|
1105
1034
|
class="pf-c-form__label"
|
|
1106
1035
|
id="form-demo-sections-complex-form-node-selector-terms-title"
|
|
1107
1036
|
>
|
|
1108
|
-
<span class="pf-c-form__label-text">Node selector terms</span
|
|
1109
|
-
<span
|
|
1037
|
+
<span class="pf-c-form__label-text">Node selector terms</span> <span
|
|
1110
1038
|
class="pf-c-form__label-required"
|
|
1111
1039
|
aria-hidden="true"
|
|
1112
|
-
>*</span>
|
|
1113
|
-
</label>
|
|
1040
|
+
>*</span></label>
|
|
1114
1041
|
</div>
|
|
1115
1042
|
<div class="pf-c-form__group-control pf-m-stack">
|
|
1116
1043
|
<div class="pf-c-input-group">
|
|
@@ -1253,13 +1180,11 @@ section: components
|
|
|
1253
1180
|
</div>
|
|
1254
1181
|
</div>
|
|
1255
1182
|
<div class="pf-c-form__group">
|
|
1256
|
-
<div class="pf-c-form__group-label"
|
|
1257
|
-
<label
|
|
1183
|
+
<div class="pf-c-form__group-label"><label
|
|
1258
1184
|
class="pf-c-form__label"
|
|
1259
1185
|
for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-hostname"
|
|
1260
1186
|
>
|
|
1261
|
-
<span class="pf-c-form__label-text">Hostname</span>
|
|
1262
|
-
</label>
|
|
1187
|
+
<span class="pf-c-form__label-text">Hostname</span></label>
|
|
1263
1188
|
</div>
|
|
1264
1189
|
<div class="pf-c-form__group-control">
|
|
1265
1190
|
<input
|
|
@@ -1285,13 +1210,11 @@ section: components
|
|
|
1285
1210
|
</div>
|
|
1286
1211
|
</div>
|
|
1287
1212
|
<div class="pf-c-form__group">
|
|
1288
|
-
<div class="pf-c-form__group-label"
|
|
1289
|
-
<label
|
|
1213
|
+
<div class="pf-c-form__group-label"><label
|
|
1290
1214
|
class="pf-c-form__label"
|
|
1291
1215
|
for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-path"
|
|
1292
1216
|
>
|
|
1293
|
-
<span class="pf-c-form__label-text">Path</span>
|
|
1294
|
-
</label>
|
|
1217
|
+
<span class="pf-c-form__label-text">Path</span></label>
|
|
1295
1218
|
</div>
|
|
1296
1219
|
<div class="pf-c-form__group-control">
|
|
1297
1220
|
<input
|
|
@@ -1326,13 +1249,11 @@ section: components
|
|
|
1326
1249
|
<div
|
|
1327
1250
|
class="pf-c-form__group-label"
|
|
1328
1251
|
id="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security-legend"
|
|
1329
|
-
|
|
1330
|
-
<span
|
|
1252
|
+
><span
|
|
1331
1253
|
class="pf-c-form__label"
|
|
1332
1254
|
for="form-demo-sections-complex-formform-demo-sections-complex-form-routing-security"
|
|
1333
1255
|
>
|
|
1334
|
-
<span class="pf-c-form__label-text">Security</span>
|
|
1335
|
-
</span>
|
|
1256
|
+
<span class="pf-c-form__label-text">Security</span></span>
|
|
1336
1257
|
</div>
|
|
1337
1258
|
<div class="pf-c-form__group-control">
|
|
1338
1259
|
<div class="pf-c-check">
|
|
@@ -9,11 +9,8 @@ section: components
|
|
|
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>
|
|
12
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="helper-text-form-name">
|
|
13
|
+
<span class="pf-c-form__label-text">Name</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
17
14
|
</div>
|
|
18
15
|
<div class="pf-c-form__group-control">
|
|
19
16
|
<input
|
|
@@ -40,11 +37,8 @@ section: components
|
|
|
40
37
|
</div>
|
|
41
38
|
</div>
|
|
42
39
|
<div class="pf-c-form__group">
|
|
43
|
-
<div class="pf-c-form__group-label">
|
|
44
|
-
|
|
45
|
-
<span class="pf-c-form__label-text">E-mail</span>
|
|
46
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
47
|
-
</label>
|
|
40
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="helper-text-form-email">
|
|
41
|
+
<span class="pf-c-form__label-text">E-mail</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
48
42
|
</div>
|
|
49
43
|
<div class="pf-c-form__group-control">
|
|
50
44
|
<input
|
|
@@ -71,11 +65,8 @@ section: components
|
|
|
71
65
|
</div>
|
|
72
66
|
</div>
|
|
73
67
|
<div class="pf-c-form__group">
|
|
74
|
-
<div class="pf-c-form__group-label">
|
|
75
|
-
|
|
76
|
-
<span class="pf-c-form__label-text">Address</span>
|
|
77
|
-
<span class="pf-c-form__label-required" aria-hidden="true">*</span>
|
|
78
|
-
</label>
|
|
68
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="helper-text-form-address">
|
|
69
|
+
<span class="pf-c-form__label-text">Address</span> <span class="pf-c-form__label-required" aria-hidden="true">*</span></label>
|
|
79
70
|
</div>
|
|
80
71
|
<div class="pf-c-form__group-control">
|
|
81
72
|
<input
|
|
@@ -122,10 +113,8 @@ section: components
|
|
|
122
113
|
</div>
|
|
123
114
|
</div>
|
|
124
115
|
<div class="pf-c-form__group">
|
|
125
|
-
<div class="pf-c-form__group-label">
|
|
126
|
-
|
|
127
|
-
<span class="pf-c-form__label-text">Comment</span>
|
|
128
|
-
</label>
|
|
116
|
+
<div class="pf-c-form__group-label"><label class="pf-c-form__label" for="helper-text-form-comment">
|
|
117
|
+
<span class="pf-c-form__label-text">Comment</span></label>
|
|
129
118
|
</div>
|
|
130
119
|
<div class="pf-c-form__group-control">
|
|
131
120
|
<input
|