@patternfly/patternfly 5.0.0-prerelease.12 → 5.0.0-prerelease.14

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 (62) hide show
  1. package/assets/images/pf-logo.svg +28 -0
  2. package/components/Badge/badge.css +1 -0
  3. package/components/Badge/badge.scss +1 -0
  4. package/components/Check/check.css +9 -11
  5. package/components/Check/check.scss +11 -11
  6. package/components/Dropdown/dropdown.css +14 -5
  7. package/components/Dropdown/dropdown.scss +17 -6
  8. package/components/MenuToggle/menu-toggle.css +10 -3
  9. package/components/MenuToggle/menu-toggle.scss +14 -3
  10. package/components/Radio/radio.css +8 -10
  11. package/components/Radio/radio.scss +10 -10
  12. package/components/Toolbar/toolbar.css +17 -10
  13. package/components/Toolbar/toolbar.scss +21 -10
  14. package/docs/components/CalendarMonth/examples/CalendarMonth.md +8 -8
  15. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +12 -12
  16. package/docs/components/DatePicker/examples/DatePicker.md +16 -16
  17. package/docs/components/FileUpload/examples/FileUpload.md +28 -28
  18. package/docs/components/Form/examples/Form.md +56 -56
  19. package/docs/components/FormControl/examples/FormControl.md +134 -134
  20. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -26
  21. package/docs/components/InputGroup/examples/InputGroup.md +24 -24
  22. package/docs/components/Login/examples/Login.md +28 -28
  23. package/docs/components/NumberInput/examples/NumberInput.md +28 -28
  24. package/docs/components/Pagination/examples/Pagination.md +22 -22
  25. package/docs/components/Select/deprecated/Select.md +18 -18
  26. package/docs/components/Slider/examples/Slider.md +14 -14
  27. package/docs/components/TextInputGroup/examples/TextInputGroup.md +16 -16
  28. package/docs/components/Toolbar/examples/Toolbar.md +5 -6
  29. package/docs/components/Wizard/examples/Wizard.md +70 -70
  30. package/docs/demos/AboutModal/examples/AboutModal.md +6 -14
  31. package/docs/demos/Alert/examples/Alert.md +48 -72
  32. package/docs/demos/BackToTop/examples/BackToTop.md +6 -14
  33. package/docs/demos/Banner/examples/Banner.md +12 -28
  34. package/docs/demos/Button/examples/Button.md +12 -12
  35. package/docs/demos/CardView/examples/CardView.md +8 -16
  36. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -56
  37. package/docs/demos/Dashboard/examples/Dashboard.md +6 -14
  38. package/docs/demos/DataList/examples/DataList.md +32 -64
  39. package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -42
  40. package/docs/demos/Drawer/examples/Drawer.md +30 -70
  41. package/docs/demos/Form/examples/BasicForms.md +54 -54
  42. package/docs/demos/HelperText/examples/HelperText.md +20 -20
  43. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -84
  44. package/docs/demos/Masthead/examples/Masthead.md +54 -126
  45. package/docs/demos/Modal/examples/Modal.md +42 -90
  46. package/docs/demos/Nav/examples/Nav.md +48 -112
  47. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -70
  48. package/docs/demos/Page/examples/Page.md +54 -126
  49. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +2 -2
  50. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +8 -8
  51. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +42 -98
  52. package/docs/demos/Skeleton/examples/Skeleton.md +6 -14
  53. package/docs/demos/Table/examples/Table.md +112 -232
  54. package/docs/demos/Tabs/examples/Tabs.md +36 -84
  55. package/docs/demos/Toolbar/examples/Toolbar.md +22 -38
  56. package/docs/demos/Wizard/examples/Wizard.md +166 -238
  57. package/package.json +1 -1
  58. package/patternfly-no-globals.css +59 -39
  59. package/patternfly-theme-dark-unversioned.css +59 -39
  60. package/patternfly.css +59 -39
  61. package/patternfly.min.css +1 -1
  62. package/patternfly.min.css.map +1 -1
package/docs/components/Form/examples/Form.md CHANGED
@@ -21,14 +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
- <div class="pf-v5-c-form-control pf-m-required">
24
+ <span class="pf-v5-c-form-control pf-m-required">
25
25
  <input
26
26
  required
27
27
  type="text"
28
28
  id="form-vertical-name"
29
29
  name="form-vertical-name"
30
30
  />
31
- </div>
31
+ </span>
32
32
  </div>
33
33
  </div>
34
34
  </form>
@@ -44,14 +44,14 @@ cssPrefix: pf-v5-c-form
44
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>
45
45
  </div>
46
46
  <div class="pf-v5-c-form__group-control">
47
- <div class="pf-v5-c-form-control pf-m-required">
47
+ <span class="pf-v5-c-form-control pf-m-required">
48
48
  <input
49
49
  required
50
50
  type="text"
51
51
  id="form-horizontal-name"
52
52
  name="form-horizontal-name"
53
53
  />
54
- </div>
54
+ </span>
55
55
  </div>
56
56
  </div>
57
57
  <div class="pf-v5-c-form__group">
@@ -66,14 +66,14 @@ cssPrefix: pf-v5-c-form
66
66
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
67
67
  </div>
68
68
  <div class="pf-v5-c-form__group-control">
69
- <div class="pf-v5-c-form-control">
69
+ <span class="pf-v5-c-form-control">
70
70
  <textarea
71
71
  type="text"
72
72
  id="form-horizontal-info"
73
73
  name="form-horizontal-info"
74
74
  aria-label="Textarea example"
75
75
  ></textarea>
76
- </div>
76
+ </span>
77
77
  </div>
78
78
  </div>
79
79
  <div
@@ -146,14 +146,14 @@ cssPrefix: pf-v5-c-form
146
146
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
147
147
  </div>
148
148
  <div class="pf-v5-c-form__group-control">
149
- <div class="pf-v5-c-form-control pf-m-required">
149
+ <span class="pf-v5-c-form-control pf-m-required">
150
150
  <input
151
151
  required
152
152
  type="text"
153
153
  id="form-horizontal-custom-breakpoint-name"
154
154
  name="form-horizontal-custom-breakpoint-name"
155
155
  />
156
- </div>
156
+ </span>
157
157
  </div>
158
158
  </div>
159
159
  </form>
@@ -173,14 +173,14 @@ cssPrefix: pf-v5-c-form
173
173
  <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
174
174
  </div>
175
175
  <div class="pf-v5-c-form__group-control">
176
- <div class="pf-v5-c-form-control pf-m-required">
176
+ <span class="pf-v5-c-form-control pf-m-required">
177
177
  <input
178
178
  required
179
179
  type="text"
180
180
  id="form-section-example-section-1-input"
181
181
  name="form-section-example-section-1-input"
182
182
  />
183
- </div>
183
+ </span>
184
184
  </div>
185
185
  </div>
186
186
  <div class="pf-v5-c-form__group">
@@ -191,14 +191,14 @@ cssPrefix: pf-v5-c-form
191
191
  <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
192
192
  </div>
193
193
  <div class="pf-v5-c-form__group-control">
194
- <div class="pf-v5-c-form-control pf-m-required">
194
+ <span class="pf-v5-c-form-control pf-m-required">
195
195
  <input
196
196
  required
197
197
  type="text"
198
198
  id="form-section-example-section-1-input-2"
199
199
  name="form-section-example-section-1-input-2"
200
200
  />
201
- </div>
201
+ </span>
202
202
  </div>
203
203
  </div>
204
204
  </section>
@@ -220,14 +220,14 @@ cssPrefix: pf-v5-c-form
220
220
  <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
221
221
  </div>
222
222
  <div class="pf-v5-c-form__group-control">
223
- <div class="pf-v5-c-form-control pf-m-required">
223
+ <span class="pf-v5-c-form-control pf-m-required">
224
224
  <input
225
225
  required
226
226
  type="text"
227
227
  id="form-section-example-section-2-input"
228
228
  name="form-section-example-section-2-input"
229
229
  />
230
- </div>
230
+ </span>
231
231
  </div>
232
232
  </div>
233
233
  <div class="pf-v5-c-form__group">
@@ -238,14 +238,14 @@ cssPrefix: pf-v5-c-form
238
238
  <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
239
239
  </div>
240
240
  <div class="pf-v5-c-form__group-control">
241
- <div class="pf-v5-c-form-control pf-m-required">
241
+ <span class="pf-v5-c-form-control pf-m-required">
242
242
  <input
243
243
  required
244
244
  type="text"
245
245
  id="form-section-example-section-2-input-2"
246
246
  name="form-section-example-section-2-input-2"
247
247
  />
248
- </div>
248
+ </span>
249
249
  </div>
250
250
  </div>
251
251
  </section>
@@ -262,7 +262,7 @@ cssPrefix: pf-v5-c-form
262
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>
263
263
  </div>
264
264
  <div class="pf-v5-c-form__group-control">
265
- <div class="pf-v5-c-form-control pf-m-required">
265
+ <span class="pf-v5-c-form-control pf-m-required">
266
266
  <input
267
267
  required
268
268
  type="text"
@@ -270,7 +270,7 @@ cssPrefix: pf-v5-c-form
270
270
  name="form-help-text-name"
271
271
  aria-describedby="form-help-text-name-helper"
272
272
  />
273
- </div>
273
+ </span>
274
274
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
275
275
  <div class="pf-v5-c-helper-text">
276
276
  <div
@@ -288,7 +288,7 @@ cssPrefix: pf-v5-c-form
288
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>
289
289
  </div>
290
290
  <div class="pf-v5-c-form__group-control">
291
- <div class="pf-v5-c-form-control pf-m-warning">
291
+ <span class="pf-v5-c-form-control pf-m-warning">
292
292
  <input
293
293
  required
294
294
  type="text"
@@ -296,12 +296,12 @@ cssPrefix: pf-v5-c-form
296
296
  name="form-help-text-email"
297
297
  aria-describedby="form-help-text-email-helper"
298
298
  />
299
- <div class="pf-v5-c-form-control__utilities">
300
- <div class="pf-v5-c-form-control__icon pf-m-status">
299
+ <span class="pf-v5-c-form-control__utilities">
300
+ <span class="pf-v5-c-form-control__icon pf-m-status">
301
301
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
302
- </div>
303
- </div>
304
- </div>
302
+ </span>
303
+ </span>
304
+ </span>
305
305
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
306
306
  <div class="pf-v5-c-helper-text">
307
307
  <div
@@ -321,7 +321,7 @@ cssPrefix: pf-v5-c-form
321
321
  <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>
322
322
  </div>
323
323
  <div class="pf-v5-c-form__group-control">
324
- <div class="pf-v5-c-form-control pf-m-required pf-m-error">
324
+ <span class="pf-v5-c-form-control pf-m-required pf-m-error">
325
325
  <input
326
326
  required
327
327
  type="text"
@@ -330,12 +330,12 @@ cssPrefix: pf-v5-c-form
330
330
  aria-invalid="true"
331
331
  aria-describedby="-address-helper"
332
332
  />
333
- <div class="pf-v5-c-form-control__utilities">
334
- <div class="pf-v5-c-form-control__icon pf-m-status">
333
+ <span class="pf-v5-c-form-control__utilities">
334
+ <span class="pf-v5-c-form-control__icon pf-m-status">
335
335
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
336
- </div>
337
- </div>
338
- </div>
336
+ </span>
337
+ </span>
338
+ </span>
339
339
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
340
340
  <div class="pf-v5-c-helper-text">
341
341
  <div
@@ -355,7 +355,7 @@ cssPrefix: pf-v5-c-form
355
355
  <span class="pf-v5-c-form__label-text">Comment</span></label>
356
356
  </div>
357
357
  <div class="pf-v5-c-form__group-control">
358
- <div class="pf-v5-c-form-control pf-m-success">
358
+ <span class="pf-v5-c-form-control pf-m-success">
359
359
  <input
360
360
  value="This is a valid comment"
361
361
  type="text"
@@ -363,12 +363,12 @@ cssPrefix: pf-v5-c-form
363
363
  name="form-help-text-comment"
364
364
  aria-describedby="form-help-text-comment-helper"
365
365
  />
366
- <div class="pf-v5-c-form-control__utilities">
367
- <div class="pf-v5-c-form-control__icon pf-m-status">
366
+ <span class="pf-v5-c-form-control__utilities">
367
+ <span class="pf-v5-c-form-control__icon pf-m-status">
368
368
  <i class="fas fa-check-circle" aria-hidden="true"></i>
369
- </div>
370
- </div>
371
- </div>
369
+ </span>
370
+ </span>
371
+ </span>
372
372
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
373
373
  <div class="pf-v5-c-helper-text">
374
374
  <div
@@ -388,19 +388,19 @@ cssPrefix: pf-v5-c-form
388
388
  <span class="pf-v5-c-form__label-text">Information</span></label>
389
389
  </div>
390
390
  <div class="pf-v5-c-form__group-control">
391
- <div class="pf-v5-c-form-control pf-m-error pf-m-resize-both">
391
+ <span class="pf-v5-c-form-control pf-m-error pf-m-resize-both">
392
392
  <textarea
393
393
  id="form-help-text-info"
394
394
  name="form-help-text-info"
395
395
  aria-invalid="true"
396
396
  aria-describedby="form-help-text-info-helper"
397
397
  ></textarea>
398
- <div class="pf-v5-c-form-control__utilities">
399
- <div class="pf-v5-c-form-control__icon pf-m-status">
398
+ <span class="pf-v5-c-form-control__utilities">
399
+ <span class="pf-v5-c-form-control__icon pf-m-status">
400
400
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
401
- </div>
402
- </div>
403
- </div>
401
+ </span>
402
+ </span>
403
+ </span>
404
404
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
405
405
  <div class="pf-v5-c-helper-text">
406
406
  <div
@@ -441,14 +441,14 @@ cssPrefix: pf-v5-c-form
441
441
  <div class="pf-v5-c-form__group-label-info">info</div>
442
442
  </div>
443
443
  <div class="pf-v5-c-form__group-control">
444
- <div class="pf-v5-c-form-control pf-m-required">
444
+ <span class="pf-v5-c-form-control pf-m-required">
445
445
  <input
446
446
  required
447
447
  type="text"
448
448
  id="form-additional-info-name"
449
449
  name="form-additional-info-name"
450
450
  />
451
- </div>
451
+ </span>
452
452
  </div>
453
453
  </div>
454
454
  </form>
@@ -510,14 +510,14 @@ cssPrefix: pf-v5-c-form
510
510
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
511
511
  </div>
512
512
  <div class="pf-v5-c-form__group-control">
513
- <div class="pf-v5-c-form-control pf-m-required">
513
+ <span class="pf-v5-c-form-control pf-m-required">
514
514
  <input
515
515
  required
516
516
  type="text"
517
517
  id="form-field-group-field-group-label1"
518
518
  name="form-field-group-field-group-label1"
519
519
  />
520
- </div>
520
+ </span>
521
521
  </div>
522
522
  </div>
523
523
  <div class="pf-v5-c-form__group">
@@ -535,14 +535,14 @@ cssPrefix: pf-v5-c-form
535
535
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
536
536
  </div>
537
537
  <div class="pf-v5-c-form__group-control">
538
- <div class="pf-v5-c-form-control pf-m-required">
538
+ <span class="pf-v5-c-form-control pf-m-required">
539
539
  <input
540
540
  required
541
541
  type="text"
542
542
  id="form-field-group-field-group-label2"
543
543
  name="form-field-group-field-group-label2"
544
544
  />
545
- </div>
545
+ </span>
546
546
  </div>
547
547
  </div>
548
548
  </div>
@@ -643,14 +643,14 @@ cssPrefix: pf-v5-c-form
643
643
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
644
644
  </div>
645
645
  <div class="pf-v5-c-form__group-control">
646
- <div class="pf-v5-c-form-control pf-m-required">
646
+ <span class="pf-v5-c-form-control pf-m-required">
647
647
  <input
648
648
  required
649
649
  type="text"
650
650
  id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
651
651
  name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
652
652
  />
653
- </div>
653
+ </span>
654
654
  </div>
655
655
  </div>
656
656
  <div class="pf-v5-c-form__group">
@@ -668,14 +668,14 @@ cssPrefix: pf-v5-c-form
668
668
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
669
669
  </div>
670
670
  <div class="pf-v5-c-form__group-control">
671
- <div class="pf-v5-c-form-control pf-m-required">
671
+ <span class="pf-v5-c-form-control pf-m-required">
672
672
  <input
673
673
  required
674
674
  type="text"
675
675
  id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
676
676
  name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
677
677
  />
678
- </div>
678
+ </span>
679
679
  </div>
680
680
  </div>
681
681
  <div
@@ -712,14 +712,14 @@ cssPrefix: pf-v5-c-form
712
712
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
713
713
  </div>
714
714
  <div class="pf-v5-c-form__group-control">
715
- <div class="pf-v5-c-form-control pf-m-required">
715
+ <span class="pf-v5-c-form-control pf-m-required">
716
716
  <input
717
717
  required
718
718
  type="text"
719
719
  id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
720
720
  name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
721
721
  />
722
- </div>
722
+ </span>
723
723
  </div>
724
724
  </div>
725
725
  <div class="pf-v5-c-form__group">
@@ -740,14 +740,14 @@ cssPrefix: pf-v5-c-form
740
740
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
741
741
  </div>
742
742
  <div class="pf-v5-c-form__group-control">
743
- <div class="pf-v5-c-form-control pf-m-required">
743
+ <span class="pf-v5-c-form-control pf-m-required">
744
744
  <input
745
745
  required
746
746
  type="text"
747
747
  id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
748
748
  name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
749
749
  />
750
- </div>
750
+ </span>
751
751
  </div>
752
752
  </div>
753
753
  </div>