@patternfly/patternfly 5.0.0-alpha.52 → 5.0.0-alpha.54

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.
Files changed (47) hide show
  1. package/components/Divider/divider.css +12 -12
  2. package/components/FormControl/form-control.css +164 -214
  3. package/components/FormControl/form-control.scss +175 -281
  4. package/components/FormControl/themes/dark/form-control.scss +1 -2
  5. package/components/Masthead/masthead.css +12 -12
  6. package/components/NumberInput/number-input.css +0 -1
  7. package/components/NumberInput/number-input.scss +0 -1
  8. package/components/Pagination/pagination.css +12 -12
  9. package/components/Tabs/tabs.css +24 -24
  10. package/components/Toolbar/toolbar.css +54 -54
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  13. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  14. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  15. package/docs/components/Form/examples/Form.md +165 -145
  16. package/docs/components/FormControl/examples/FormControl.md +439 -475
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  18. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  19. package/docs/components/Login/examples/Login.md +92 -82
  20. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  21. package/docs/components/Pagination/examples/Pagination.md +100 -89
  22. package/docs/components/Select/examples/Select.md +77 -68
  23. package/docs/components/Slider/examples/Slider.md +31 -44
  24. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  25. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  26. package/docs/components/Wizard/examples/Wizard.md +280 -245
  27. package/docs/demos/Alert/examples/Alert.md +69 -57
  28. package/docs/demos/Button/examples/Button.md +54 -48
  29. package/docs/demos/CardView/examples/CardView.md +9 -8
  30. package/docs/demos/DataList/examples/DataList.md +36 -32
  31. package/docs/demos/Form/examples/BasicForms.md +247 -227
  32. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  33. package/docs/demos/Modal/examples/Modal.md +14 -21
  34. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  35. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  36. package/docs/demos/Table/examples/Table.md +99 -88
  37. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  38. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  39. package/layouts/Flex/flex.css +60 -120
  40. package/layouts/Flex/flex.scss +1 -1
  41. package/package.json +3 -3
  42. package/patternfly-no-globals.css +335 -446
  43. package/patternfly.css +335 -446
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
  46. package/sass-utilities/functions.scss +6 -9
  47. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/docs/components/Form/examples/Form.md CHANGED
@@ -21,13 +21,14 @@ cssPrefix: pf-v5-c-form
21
21
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
22
22
  </div>
23
23
  <div class="pf-v5-c-form__group-control">
24
- <input
25
- class="pf-v5-c-form-control"
26
- type="text"
27
- id="form-vertical-name"
28
- name="form-vertical-name"
29
- required
30
- />
24
+ <div class="pf-v5-c-form-control">
25
+ <input
26
+ type="text"
27
+ id="form-vertical-name"
28
+ name="form-vertical-name"
29
+ required
30
+ />
31
+ </div>
31
32
  </div>
32
33
  </div>
33
34
  </form>
@@ -43,13 +44,14 @@ cssPrefix: pf-v5-c-form
43
44
  <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
44
45
  </div>
45
46
  <div class="pf-v5-c-form__group-control">
46
- <input
47
- class="pf-v5-c-form-control"
48
- type="text"
49
- id="form-horizontal-name"
50
- name="form-horizontal-name"
51
- required
52
- />
47
+ <div class="pf-v5-c-form-control">
48
+ <input
49
+ type="text"
50
+ id="form-horizontal-name"
51
+ name="form-horizontal-name"
52
+ required
53
+ />
54
+ </div>
53
55
  </div>
54
56
  </div>
55
57
  <div class="pf-v5-c-form__group">
@@ -64,13 +66,14 @@ cssPrefix: pf-v5-c-form
64
66
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
65
67
  </div>
66
68
  <div class="pf-v5-c-form__group-control">
67
- <textarea
68
- class="pf-v5-c-form-control"
69
- type="text"
70
- id="form-horizontal-info"
71
- name="form-horizontal-info"
72
- aria-label="Textarea example"
73
- ></textarea>
69
+ <div class="pf-v5-c-form-control">
70
+ <textarea
71
+ type="text"
72
+ id="form-horizontal-info"
73
+ name="form-horizontal-info"
74
+ aria-label="Textarea example"
75
+ ></textarea>
76
+ </div>
74
77
  </div>
75
78
  </div>
76
79
  <div
@@ -143,13 +146,14 @@ cssPrefix: pf-v5-c-form
143
146
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
144
147
  </div>
145
148
  <div class="pf-v5-c-form__group-control">
146
- <input
147
- class="pf-v5-c-form-control"
148
- type="text"
149
- id="form-horizontal-custom-breakpoint-name"
150
- name="form-horizontal-custom-breakpoint-name"
151
- required
152
- />
149
+ <div class="pf-v5-c-form-control">
150
+ <input
151
+ type="text"
152
+ id="form-horizontal-custom-breakpoint-name"
153
+ name="form-horizontal-custom-breakpoint-name"
154
+ required
155
+ />
156
+ </div>
153
157
  </div>
154
158
  </div>
155
159
  </form>
@@ -169,13 +173,14 @@ cssPrefix: pf-v5-c-form
169
173
  <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
170
174
  </div>
171
175
  <div class="pf-v5-c-form__group-control">
172
- <input
173
- class="pf-v5-c-form-control"
174
- type="text"
175
- id="form-section-example-section-1-input"
176
- name="form-section-example-section-1-input"
177
- required
178
- />
176
+ <div class="pf-v5-c-form-control">
177
+ <input
178
+ type="text"
179
+ id="form-section-example-section-1-input"
180
+ name="form-section-example-section-1-input"
181
+ required
182
+ />
183
+ </div>
179
184
  </div>
180
185
  </div>
181
186
  <div class="pf-v5-c-form__group">
@@ -186,13 +191,14 @@ cssPrefix: pf-v5-c-form
186
191
  <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
187
192
  </div>
188
193
  <div class="pf-v5-c-form__group-control">
189
- <input
190
- class="pf-v5-c-form-control"
191
- type="text"
192
- id="form-section-example-section-1-input-2"
193
- name="form-section-example-section-1-input-2"
194
- required
195
- />
194
+ <div class="pf-v5-c-form-control">
195
+ <input
196
+ type="text"
197
+ id="form-section-example-section-1-input-2"
198
+ name="form-section-example-section-1-input-2"
199
+ required
200
+ />
201
+ </div>
196
202
  </div>
197
203
  </div>
198
204
  </section>
@@ -214,13 +220,14 @@ cssPrefix: pf-v5-c-form
214
220
  <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
215
221
  </div>
216
222
  <div class="pf-v5-c-form__group-control">
217
- <input
218
- class="pf-v5-c-form-control"
219
- type="text"
220
- id="form-section-example-section-2-input"
221
- name="form-section-example-section-2-input"
222
- required
223
- />
223
+ <div class="pf-v5-c-form-control">
224
+ <input
225
+ type="text"
226
+ id="form-section-example-section-2-input"
227
+ name="form-section-example-section-2-input"
228
+ required
229
+ />
230
+ </div>
224
231
  </div>
225
232
  </div>
226
233
  <div class="pf-v5-c-form__group">
@@ -231,13 +238,14 @@ cssPrefix: pf-v5-c-form
231
238
  <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
232
239
  </div>
233
240
  <div class="pf-v5-c-form__group-control">
234
- <input
235
- class="pf-v5-c-form-control"
236
- type="text"
237
- id="form-section-example-section-2-input-2"
238
- name="form-section-example-section-2-input-2"
239
- required
240
- />
241
+ <div class="pf-v5-c-form-control">
242
+ <input
243
+ type="text"
244
+ id="form-section-example-section-2-input-2"
245
+ name="form-section-example-section-2-input-2"
246
+ required
247
+ />
248
+ </div>
241
249
  </div>
242
250
  </div>
243
251
  </section>
@@ -254,14 +262,15 @@ cssPrefix: pf-v5-c-form
254
262
  <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
255
263
  </div>
256
264
  <div class="pf-v5-c-form__group-control">
257
- <input
258
- class="pf-v5-c-form-control"
259
- required
260
- type="text"
261
- id="form-help-text-name"
262
- name="form-help-text-name"
263
- aria-describedby="form-help-text-name-helper"
264
- />
265
+ <div class="pf-v5-c-form-control">
266
+ <input
267
+ required
268
+ type="text"
269
+ id="form-help-text-name"
270
+ name="form-help-text-name"
271
+ aria-describedby="form-help-text-name-helper"
272
+ />
273
+ </div>
265
274
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
266
275
  <div class="pf-v5-c-helper-text">
267
276
  <div
@@ -279,14 +288,15 @@ cssPrefix: pf-v5-c-form
279
288
  <span class="pf-v5-c-form__label-text">E-mail</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
280
289
  </div>
281
290
  <div class="pf-v5-c-form__group-control">
282
- <input
283
- class="pf-v5-c-form-control pf-m-warning"
284
- required
285
- type="text"
286
- id="form-help-text-email"
287
- name="form-help-text-email"
288
- aria-describedby="form-help-text-email-helper"
289
- />
291
+ <div class="pf-v5-c-form-control pf-m-warning">
292
+ <input
293
+ required
294
+ type="text"
295
+ id="form-help-text-email"
296
+ name="form-help-text-email"
297
+ aria-describedby="form-help-text-email-helper"
298
+ />
299
+ </div>
290
300
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
291
301
  <div class="pf-v5-c-helper-text">
292
302
  <div
@@ -306,15 +316,16 @@ cssPrefix: pf-v5-c-form
306
316
  <span class="pf-v5-c-form__label-text">Address</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
307
317
  </div>
308
318
  <div class="pf-v5-c-form__group-control">
309
- <input
310
- class="pf-v5-c-form-control"
311
- required
312
- type="text"
313
- id="-address"
314
- name="-address"
315
- aria-invalid="true"
316
- aria-describedby="-address-helper"
317
- />
319
+ <div class="pf-v5-c-form-control">
320
+ <input
321
+ required
322
+ type="text"
323
+ id="-address"
324
+ name="-address"
325
+ aria-invalid="true"
326
+ aria-describedby="-address-helper"
327
+ />
328
+ </div>
318
329
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
319
330
  <div class="pf-v5-c-helper-text">
320
331
  <div
@@ -334,14 +345,15 @@ cssPrefix: pf-v5-c-form
334
345
  <span class="pf-v5-c-form__label-text">Comment</span></label>
335
346
  </div>
336
347
  <div class="pf-v5-c-form__group-control">
337
- <input
338
- class="pf-v5-c-form-control pf-m-success"
339
- value="This is a valid comment"
340
- type="text"
341
- id="form-help-text-comment"
342
- name="form-help-text-comment"
343
- aria-describedby="form-help-text-comment-helper"
344
- />
348
+ <div class="pf-v5-c-form-control pf-m-success">
349
+ <input
350
+ value="This is a valid comment"
351
+ type="text"
352
+ id="form-help-text-comment"
353
+ name="form-help-text-comment"
354
+ aria-describedby="form-help-text-comment-helper"
355
+ />
356
+ </div>
345
357
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
346
358
  <div class="pf-v5-c-helper-text">
347
359
  <div
@@ -361,13 +373,14 @@ cssPrefix: pf-v5-c-form
361
373
  <span class="pf-v5-c-form__label-text">Information</span></label>
362
374
  </div>
363
375
  <div class="pf-v5-c-form__group-control">
364
- <textarea
365
- class="pf-v5-c-form-control"
366
- id="form-help-text-info"
367
- name="form-help-text-info"
368
- aria-invalid="true"
369
- aria-describedby="form-help-text-info-helper"
370
- ></textarea>
376
+ <div class="pf-v5-c-form-control">
377
+ <textarea
378
+ id="form-help-text-info"
379
+ name="form-help-text-info"
380
+ aria-invalid="true"
381
+ aria-describedby="form-help-text-info-helper"
382
+ ></textarea>
383
+ </div>
371
384
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
372
385
  <div class="pf-v5-c-helper-text">
373
386
  <div
@@ -408,13 +421,14 @@ cssPrefix: pf-v5-c-form
408
421
  <div class="pf-v5-c-form__group-label-info">info</div>
409
422
  </div>
410
423
  <div class="pf-v5-c-form__group-control">
411
- <input
412
- class="pf-v5-c-form-control"
413
- type="text"
414
- id="form-additional-info-name"
415
- name="form-additional-info-name"
416
- required
417
- />
424
+ <div class="pf-v5-c-form-control">
425
+ <input
426
+ type="text"
427
+ id="form-additional-info-name"
428
+ name="form-additional-info-name"
429
+ required
430
+ />
431
+ </div>
418
432
  </div>
419
433
  </div>
420
434
  </form>
@@ -476,13 +490,14 @@ cssPrefix: pf-v5-c-form
476
490
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
477
491
  </div>
478
492
  <div class="pf-v5-c-form__group-control">
479
- <input
480
- class="pf-v5-c-form-control"
481
- type="text"
482
- id="form-field-group-field-group-label1"
483
- name="form-field-group-field-group-label1"
484
- required
485
- />
493
+ <div class="pf-v5-c-form-control">
494
+ <input
495
+ type="text"
496
+ id="form-field-group-field-group-label1"
497
+ name="form-field-group-field-group-label1"
498
+ required
499
+ />
500
+ </div>
486
501
  </div>
487
502
  </div>
488
503
  <div class="pf-v5-c-form__group">
@@ -500,13 +515,14 @@ cssPrefix: pf-v5-c-form
500
515
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
501
516
  </div>
502
517
  <div class="pf-v5-c-form__group-control">
503
- <input
504
- class="pf-v5-c-form-control"
505
- type="text"
506
- id="form-field-group-field-group-label2"
507
- name="form-field-group-field-group-label2"
508
- required
509
- />
518
+ <div class="pf-v5-c-form-control">
519
+ <input
520
+ type="text"
521
+ id="form-field-group-field-group-label2"
522
+ name="form-field-group-field-group-label2"
523
+ required
524
+ />
525
+ </div>
510
526
  </div>
511
527
  </div>
512
528
  </div>
@@ -607,13 +623,14 @@ cssPrefix: pf-v5-c-form
607
623
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
608
624
  </div>
609
625
  <div class="pf-v5-c-form__group-control">
610
- <input
611
- class="pf-v5-c-form-control"
612
- type="text"
613
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
614
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
615
- required
616
- />
626
+ <div class="pf-v5-c-form-control">
627
+ <input
628
+ type="text"
629
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
630
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
631
+ required
632
+ />
633
+ </div>
617
634
  </div>
618
635
  </div>
619
636
  <div class="pf-v5-c-form__group">
@@ -631,13 +648,14 @@ cssPrefix: pf-v5-c-form
631
648
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
632
649
  </div>
633
650
  <div class="pf-v5-c-form__group-control">
634
- <input
635
- class="pf-v5-c-form-control"
636
- type="text"
637
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
638
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
639
- required
640
- />
651
+ <div class="pf-v5-c-form-control">
652
+ <input
653
+ type="text"
654
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
655
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
656
+ required
657
+ />
658
+ </div>
641
659
  </div>
642
660
  </div>
643
661
  <div
@@ -674,13 +692,14 @@ cssPrefix: pf-v5-c-form
674
692
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
675
693
  </div>
676
694
  <div class="pf-v5-c-form__group-control">
677
- <input
678
- class="pf-v5-c-form-control"
679
- type="text"
680
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
681
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
682
- required
683
- />
695
+ <div class="pf-v5-c-form-control">
696
+ <input
697
+ type="text"
698
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
699
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
700
+ required
701
+ />
702
+ </div>
684
703
  </div>
685
704
  </div>
686
705
  <div class="pf-v5-c-form__group">
@@ -701,13 +720,14 @@ cssPrefix: pf-v5-c-form
701
720
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
702
721
  </div>
703
722
  <div class="pf-v5-c-form__group-control">
704
- <input
705
- class="pf-v5-c-form-control"
706
- type="text"
707
- id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
708
- name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
709
- required
710
- />
723
+ <div class="pf-v5-c-form-control">
724
+ <input
725
+ type="text"
726
+ id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
727
+ name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
728
+ required
729
+ />
730
+ </div>
711
731
  </div>
712
732
  </div>
713
733
  </div>