@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/demos/DataList/examples/DataList.md CHANGED
@@ -26,20 +26,12 @@ wrapperTag: div
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <picture
30
- class="pf-v5-c-brand pf-m-picture"
31
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
32
- >
33
- <source
34
- media="(min-width: 768px)"
35
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
36
- />
37
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
38
- <img
39
- src="/assets/images/logo__pf--reverse--base.png"
40
- alt="Fallback patternFly default logo"
41
- />
42
- </picture>
29
+ <img
30
+ class="pf-v5-c-brand"
31
+ src="/assets/images/pf-logo.svg"
32
+ alt="PatternFly logo"
33
+ style="--pf-v5-c-brand--Height:36px"
34
+ />
43
35
  </a>
44
36
  </div>
45
37
  <div class="pf-v5-c-masthead__content">
@@ -827,7 +819,7 @@ wrapperTag: div
827
819
  </button>
828
820
  </div>
829
821
  <div class="pf-v5-c-pagination__nav-page-select">
830
- <div class="pf-v5-c-form-control">
822
+ <span class="pf-v5-c-form-control">
831
823
  <input
832
824
  aria-label="Current page"
833
825
  type="number"
@@ -835,7 +827,7 @@ wrapperTag: div
835
827
  max="4"
836
828
  value="1"
837
829
  />
838
- </div>
830
+ </span>
839
831
  <span aria-hidden="true">of 4</span>
840
832
  </div>
841
833
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -887,20 +879,12 @@ wrapperTag: div
887
879
  </span>
888
880
  <div class="pf-v5-c-masthead__main">
889
881
  <a class="pf-v5-c-masthead__brand" href="#">
890
- <picture
891
- class="pf-v5-c-brand pf-m-picture"
892
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
893
- >
894
- <source
895
- media="(min-width: 768px)"
896
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
897
- />
898
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
899
- <img
900
- src="/assets/images/logo__pf--reverse--base.png"
901
- alt="Fallback patternFly default logo"
902
- />
903
- </picture>
882
+ <img
883
+ class="pf-v5-c-brand"
884
+ src="/assets/images/pf-logo.svg"
885
+ alt="PatternFly logo"
886
+ style="--pf-v5-c-brand--Height:36px"
887
+ />
904
888
  </a>
905
889
  </div>
906
890
  <div class="pf-v5-c-masthead__content">
@@ -1678,7 +1662,7 @@ wrapperTag: div
1678
1662
  </button>
1679
1663
  </div>
1680
1664
  <div class="pf-v5-c-pagination__nav-page-select">
1681
- <div class="pf-v5-c-form-control">
1665
+ <span class="pf-v5-c-form-control">
1682
1666
  <input
1683
1667
  aria-label="Current page"
1684
1668
  type="number"
@@ -1686,7 +1670,7 @@ wrapperTag: div
1686
1670
  max="4"
1687
1671
  value="1"
1688
1672
  />
1689
- </div>
1673
+ </span>
1690
1674
  <span aria-hidden="true">of 4</span>
1691
1675
  </div>
1692
1676
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -1738,20 +1722,12 @@ wrapperTag: div
1738
1722
  </span>
1739
1723
  <div class="pf-v5-c-masthead__main">
1740
1724
  <a class="pf-v5-c-masthead__brand" href="#">
1741
- <picture
1742
- class="pf-v5-c-brand pf-m-picture"
1743
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
1744
- >
1745
- <source
1746
- media="(min-width: 768px)"
1747
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1748
- />
1749
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1750
- <img
1751
- src="/assets/images/logo__pf--reverse--base.png"
1752
- alt="Fallback patternFly default logo"
1753
- />
1754
- </picture>
1725
+ <img
1726
+ class="pf-v5-c-brand"
1727
+ src="/assets/images/pf-logo.svg"
1728
+ alt="PatternFly logo"
1729
+ style="--pf-v5-c-brand--Height:36px"
1730
+ />
1755
1731
  </a>
1756
1732
  </div>
1757
1733
  <div class="pf-v5-c-masthead__content">
@@ -3301,7 +3277,7 @@ wrapperTag: div
3301
3277
  </button>
3302
3278
  </div>
3303
3279
  <div class="pf-v5-c-pagination__nav-page-select">
3304
- <div class="pf-v5-c-form-control">
3280
+ <span class="pf-v5-c-form-control">
3305
3281
  <input
3306
3282
  aria-label="Current page"
3307
3283
  type="number"
@@ -3309,7 +3285,7 @@ wrapperTag: div
3309
3285
  max="4"
3310
3286
  value="1"
3311
3287
  />
3312
- </div>
3288
+ </span>
3313
3289
  <span aria-hidden="true">of 4</span>
3314
3290
  </div>
3315
3291
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -3364,20 +3340,12 @@ wrapperTag: div
3364
3340
  </span>
3365
3341
  <div class="pf-v5-c-masthead__main">
3366
3342
  <a class="pf-v5-c-masthead__brand" href="#">
3367
- <picture
3368
- class="pf-v5-c-brand pf-m-picture"
3369
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
3370
- >
3371
- <source
3372
- media="(min-width: 768px)"
3373
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
3374
- />
3375
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
3376
- <img
3377
- src="/assets/images/logo__pf--reverse--base.png"
3378
- alt="Fallback patternFly default logo"
3379
- />
3380
- </picture>
3343
+ <img
3344
+ class="pf-v5-c-brand"
3345
+ src="/assets/images/pf-logo.svg"
3346
+ alt="PatternFly logo"
3347
+ style="--pf-v5-c-brand--Height:36px"
3348
+ />
3381
3349
  </a>
3382
3350
  </div>
3383
3351
  <div class="pf-v5-c-masthead__content">
@@ -4182,7 +4150,7 @@ wrapperTag: div
4182
4150
  </button>
4183
4151
  </div>
4184
4152
  <div class="pf-v5-c-pagination__nav-page-select">
4185
- <div class="pf-v5-c-form-control">
4153
+ <span class="pf-v5-c-form-control">
4186
4154
  <input
4187
4155
  aria-label="Current page"
4188
4156
  type="number"
@@ -4190,7 +4158,7 @@ wrapperTag: div
4190
4158
  max="4"
4191
4159
  value="1"
4192
4160
  />
4193
- </div>
4161
+ </span>
4194
4162
  <span aria-hidden="true">of 4</span>
4195
4163
  </div>
4196
4164
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -26,20 +26,12 @@ cssPrefix: pf-d-description-list
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <picture
30
- class="pf-v5-c-brand pf-m-picture"
31
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
32
- >
33
- <source
34
- media="(min-width: 768px)"
35
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
36
- />
37
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
38
- <img
39
- src="/assets/images/logo__pf--reverse--base.png"
40
- alt="Fallback patternFly default logo"
41
- />
42
- </picture>
29
+ <img
30
+ class="pf-v5-c-brand"
31
+ src="/assets/images/pf-logo.svg"
32
+ alt="PatternFly logo"
33
+ style="--pf-v5-c-brand--Height:36px"
34
+ />
43
35
  </a>
44
36
  </div>
45
37
  <div class="pf-v5-c-masthead__content">
@@ -329,20 +321,12 @@ cssPrefix: pf-d-description-list
329
321
  </span>
330
322
  <div class="pf-v5-c-masthead__main">
331
323
  <a class="pf-v5-c-masthead__brand" href="#">
332
- <picture
333
- class="pf-v5-c-brand pf-m-picture"
334
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
335
- >
336
- <source
337
- media="(min-width: 768px)"
338
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
339
- />
340
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
341
- <img
342
- src="/assets/images/logo__pf--reverse--base.png"
343
- alt="Fallback patternFly default logo"
344
- />
345
- </picture>
324
+ <img
325
+ class="pf-v5-c-brand"
326
+ src="/assets/images/pf-logo.svg"
327
+ alt="PatternFly logo"
328
+ style="--pf-v5-c-brand--Height:36px"
329
+ />
346
330
  </a>
347
331
  </div>
348
332
  <div class="pf-v5-c-masthead__content">
@@ -936,20 +920,12 @@ cssPrefix: pf-d-description-list
936
920
  </span>
937
921
  <div class="pf-v5-c-masthead__main">
938
922
  <a class="pf-v5-c-masthead__brand" href="#">
939
- <picture
940
- class="pf-v5-c-brand pf-m-picture"
941
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
942
- >
943
- <source
944
- media="(min-width: 768px)"
945
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
946
- />
947
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
948
- <img
949
- src="/assets/images/logo__pf--reverse--base.png"
950
- alt="Fallback patternFly default logo"
951
- />
952
- </picture>
923
+ <img
924
+ class="pf-v5-c-brand"
925
+ src="/assets/images/pf-logo.svg"
926
+ alt="PatternFly logo"
927
+ style="--pf-v5-c-brand--Height:36px"
928
+ />
953
929
  </a>
954
930
  </div>
955
931
  <div class="pf-v5-c-masthead__content">
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -26,20 +26,12 @@ wrapperTag: div
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
28
  <a class="pf-v5-c-masthead__brand" href="#">
29
- <picture
30
- class="pf-v5-c-brand pf-m-picture"
31
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
32
- >
33
- <source
34
- media="(min-width: 768px)"
35
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
36
- />
37
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
38
- <img
39
- src="/assets/images/logo__pf--reverse--base.png"
40
- alt="Fallback patternFly default logo"
41
- />
42
- </picture>
29
+ <img
30
+ class="pf-v5-c-brand"
31
+ src="/assets/images/pf-logo.svg"
32
+ alt="PatternFly logo"
33
+ style="--pf-v5-c-brand--Height:36px"
34
+ />
43
35
  </a>
44
36
  </div>
45
37
  <div class="pf-v5-c-masthead__content">
@@ -468,20 +460,12 @@ wrapperTag: div
468
460
  </span>
469
461
  <div class="pf-v5-c-masthead__main">
470
462
  <a class="pf-v5-c-masthead__brand" href="#">
471
- <picture
472
- class="pf-v5-c-brand pf-m-picture"
473
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
474
- >
475
- <source
476
- media="(min-width: 768px)"
477
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
478
- />
479
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
480
- <img
481
- src="/assets/images/logo__pf--reverse--base.png"
482
- alt="Fallback patternFly default logo"
483
- />
484
- </picture>
463
+ <img
464
+ class="pf-v5-c-brand"
465
+ src="/assets/images/pf-logo.svg"
466
+ alt="PatternFly logo"
467
+ style="--pf-v5-c-brand--Height:36px"
468
+ />
485
469
  </a>
486
470
  </div>
487
471
  <div class="pf-v5-c-masthead__content">
@@ -732,20 +716,12 @@ wrapperTag: div
732
716
  </span>
733
717
  <div class="pf-v5-c-masthead__main">
734
718
  <a class="pf-v5-c-masthead__brand" href="#">
735
- <picture
736
- class="pf-v5-c-brand pf-m-picture"
737
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
738
- >
739
- <source
740
- media="(min-width: 768px)"
741
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
742
- />
743
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
744
- <img
745
- src="/assets/images/logo__pf--reverse--base.png"
746
- alt="Fallback patternFly default logo"
747
- />
748
- </picture>
719
+ <img
720
+ class="pf-v5-c-brand"
721
+ src="/assets/images/pf-logo.svg"
722
+ alt="PatternFly logo"
723
+ style="--pf-v5-c-brand--Height:36px"
724
+ />
749
725
  </a>
750
726
  </div>
751
727
  <div class="pf-v5-c-masthead__content">
@@ -996,20 +972,12 @@ wrapperTag: div
996
972
  </span>
997
973
  <div class="pf-v5-c-masthead__main">
998
974
  <a class="pf-v5-c-masthead__brand" href="#">
999
- <picture
1000
- class="pf-v5-c-brand pf-m-picture"
1001
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
1002
- >
1003
- <source
1004
- media="(min-width: 768px)"
1005
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1006
- />
1007
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1008
- <img
1009
- src="/assets/images/logo__pf--reverse--base.png"
1010
- alt="Fallback patternFly default logo"
1011
- />
1012
- </picture>
975
+ <img
976
+ class="pf-v5-c-brand"
977
+ src="/assets/images/pf-logo.svg"
978
+ alt="PatternFly logo"
979
+ style="--pf-v5-c-brand--Height:36px"
980
+ />
1013
981
  </a>
1014
982
  </div>
1015
983
  <div class="pf-v5-c-masthead__content">
@@ -1278,20 +1246,12 @@ wrapperTag: div
1278
1246
  </span>
1279
1247
  <div class="pf-v5-c-masthead__main">
1280
1248
  <a class="pf-v5-c-masthead__brand" href="#">
1281
- <picture
1282
- class="pf-v5-c-brand pf-m-picture"
1283
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
1284
- >
1285
- <source
1286
- media="(min-width: 768px)"
1287
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1288
- />
1289
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1290
- <img
1291
- src="/assets/images/logo__pf--reverse--base.png"
1292
- alt="Fallback patternFly default logo"
1293
- />
1294
- </picture>
1249
+ <img
1250
+ class="pf-v5-c-brand"
1251
+ src="/assets/images/pf-logo.svg"
1252
+ alt="PatternFly logo"
1253
+ style="--pf-v5-c-brand--Height:36px"
1254
+ />
1295
1255
  </a>
1296
1256
  </div>
1297
1257
  <div class="pf-v5-c-masthead__content">