@patternfly/patternfly 5.0.0-prerelease.13 → 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 (42) 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/Toolbar/examples/Toolbar.md +1 -2
  15. package/docs/demos/AboutModal/examples/AboutModal.md +6 -14
  16. package/docs/demos/Alert/examples/Alert.md +18 -42
  17. package/docs/demos/BackToTop/examples/BackToTop.md +6 -14
  18. package/docs/demos/Banner/examples/Banner.md +12 -28
  19. package/docs/demos/CardView/examples/CardView.md +6 -14
  20. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -56
  21. package/docs/demos/Dashboard/examples/Dashboard.md +6 -14
  22. package/docs/demos/DataList/examples/DataList.md +24 -56
  23. package/docs/demos/DescriptionList/examples/DescriptionList.md +18 -42
  24. package/docs/demos/Drawer/examples/Drawer.md +30 -70
  25. package/docs/demos/JumpLinks/examples/JumpLinks.md +36 -84
  26. package/docs/demos/Masthead/examples/Masthead.md +54 -126
  27. package/docs/demos/Modal/examples/Modal.md +36 -84
  28. package/docs/demos/Nav/examples/Nav.md +48 -112
  29. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -70
  30. package/docs/demos/Page/examples/Page.md +54 -126
  31. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +42 -98
  32. package/docs/demos/Skeleton/examples/Skeleton.md +6 -14
  33. package/docs/demos/Table/examples/Table.md +90 -210
  34. package/docs/demos/Tabs/examples/Tabs.md +36 -84
  35. package/docs/demos/Toolbar/examples/Toolbar.md +12 -28
  36. package/docs/demos/Wizard/examples/Wizard.md +54 -126
  37. package/package.json +1 -1
  38. package/patternfly-no-globals.css +59 -39
  39. package/patternfly-theme-dark-unversioned.css +59 -39
  40. package/patternfly.css +59 -39
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
package/docs/demos/Page/examples/Page.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">
@@ -269,20 +261,12 @@ wrapperTag: div
269
261
  </span>
270
262
  <div class="pf-v5-c-masthead__main">
271
263
  <a class="pf-v5-c-masthead__brand" href="#">
272
- <picture
273
- class="pf-v5-c-brand pf-m-picture"
274
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
275
- >
276
- <source
277
- media="(min-width: 768px)"
278
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
279
- />
280
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
281
- <img
282
- src="/assets/images/logo__pf--reverse--base.png"
283
- alt="Fallback patternFly default logo"
284
- />
285
- </picture>
264
+ <img
265
+ class="pf-v5-c-brand"
266
+ src="/assets/images/pf-logo.svg"
267
+ alt="PatternFly logo"
268
+ style="--pf-v5-c-brand--Height:36px"
269
+ />
286
270
  </a>
287
271
  </div>
288
272
  <div class="pf-v5-c-masthead__content">
@@ -527,20 +511,12 @@ wrapperTag: div
527
511
  </span>
528
512
  <div class="pf-v5-c-masthead__main">
529
513
  <a class="pf-v5-c-masthead__brand" href="#">
530
- <picture
531
- class="pf-v5-c-brand pf-m-picture"
532
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
533
- >
534
- <source
535
- media="(min-width: 768px)"
536
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
537
- />
538
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
539
- <img
540
- src="/assets/images/logo__pf--reverse--base.png"
541
- alt="Fallback patternFly default logo"
542
- />
543
- </picture>
514
+ <img
515
+ class="pf-v5-c-brand"
516
+ src="/assets/images/pf-logo.svg"
517
+ alt="PatternFly logo"
518
+ style="--pf-v5-c-brand--Height:36px"
519
+ />
544
520
  </a>
545
521
  </div>
546
522
  <div class="pf-v5-c-masthead__content">
@@ -930,20 +906,12 @@ wrapperTag: div
930
906
  </span>
931
907
  <div class="pf-v5-c-masthead__main">
932
908
  <a class="pf-v5-c-masthead__brand" href="#">
933
- <picture
934
- class="pf-v5-c-brand pf-m-picture"
935
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
936
- >
937
- <source
938
- media="(min-width: 768px)"
939
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
940
- />
941
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
942
- <img
943
- src="/assets/images/logo__pf--reverse--base.png"
944
- alt="Fallback patternFly default logo"
945
- />
946
- </picture>
909
+ <img
910
+ class="pf-v5-c-brand"
911
+ src="/assets/images/pf-logo.svg"
912
+ alt="PatternFly logo"
913
+ style="--pf-v5-c-brand--Height:36px"
914
+ />
947
915
  </a>
948
916
  </div>
949
917
  <div class="pf-v5-c-masthead__content">
@@ -1295,20 +1263,12 @@ wrapperTag: div
1295
1263
  </span>
1296
1264
  <div class="pf-v5-c-masthead__main">
1297
1265
  <a class="pf-v5-c-masthead__brand" href="#">
1298
- <picture
1299
- class="pf-v5-c-brand pf-m-picture"
1300
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
1301
- >
1302
- <source
1303
- media="(min-width: 768px)"
1304
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1305
- />
1306
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1307
- <img
1308
- src="/assets/images/logo__pf--reverse--base.png"
1309
- alt="Fallback patternFly default logo"
1310
- />
1311
- </picture>
1266
+ <img
1267
+ class="pf-v5-c-brand"
1268
+ src="/assets/images/pf-logo.svg"
1269
+ alt="PatternFly logo"
1270
+ style="--pf-v5-c-brand--Height:36px"
1271
+ />
1312
1272
  </a>
1313
1273
  </div>
1314
1274
  <div class="pf-v5-c-masthead__content">
@@ -1660,20 +1620,12 @@ wrapperTag: div
1660
1620
  </span>
1661
1621
  <div class="pf-v5-c-masthead__main">
1662
1622
  <a class="pf-v5-c-masthead__brand" href="#">
1663
- <picture
1664
- class="pf-v5-c-brand pf-m-picture"
1665
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
1666
- >
1667
- <source
1668
- media="(min-width: 768px)"
1669
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1670
- />
1671
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1672
- <img
1673
- src="/assets/images/logo__pf--reverse--base.png"
1674
- alt="Fallback patternFly default logo"
1675
- />
1676
- </picture>
1623
+ <img
1624
+ class="pf-v5-c-brand"
1625
+ src="/assets/images/pf-logo.svg"
1626
+ alt="PatternFly logo"
1627
+ style="--pf-v5-c-brand--Height:36px"
1628
+ />
1677
1629
  </a>
1678
1630
  </div>
1679
1631
  <div class="pf-v5-c-masthead__content">
@@ -2025,20 +1977,12 @@ wrapperTag: div
2025
1977
  </span>
2026
1978
  <div class="pf-v5-c-masthead__main">
2027
1979
  <a class="pf-v5-c-masthead__brand" href="#">
2028
- <picture
2029
- class="pf-v5-c-brand pf-m-picture"
2030
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2031
- >
2032
- <source
2033
- media="(min-width: 768px)"
2034
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2035
- />
2036
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2037
- <img
2038
- src="/assets/images/logo__pf--reverse--base.png"
2039
- alt="Fallback patternFly default logo"
2040
- />
2041
- </picture>
1980
+ <img
1981
+ class="pf-v5-c-brand"
1982
+ src="/assets/images/pf-logo.svg"
1983
+ alt="PatternFly logo"
1984
+ style="--pf-v5-c-brand--Height:36px"
1985
+ />
2042
1986
  </a>
2043
1987
  </div>
2044
1988
  <div class="pf-v5-c-masthead__content">
@@ -2392,20 +2336,12 @@ wrapperTag: div
2392
2336
  </span>
2393
2337
  <div class="pf-v5-c-masthead__main">
2394
2338
  <a class="pf-v5-c-masthead__brand" href="#">
2395
- <picture
2396
- class="pf-v5-c-brand pf-m-picture"
2397
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2398
- >
2399
- <source
2400
- media="(min-width: 768px)"
2401
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2402
- />
2403
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2404
- <img
2405
- src="/assets/images/logo__pf--reverse--base.png"
2406
- alt="Fallback patternFly default logo"
2407
- />
2408
- </picture>
2339
+ <img
2340
+ class="pf-v5-c-brand"
2341
+ src="/assets/images/pf-logo.svg"
2342
+ alt="PatternFly logo"
2343
+ style="--pf-v5-c-brand--Height:36px"
2344
+ />
2409
2345
  </a>
2410
2346
  </div>
2411
2347
  <div class="pf-v5-c-masthead__content">
@@ -2764,20 +2700,12 @@ wrapperTag: div
2764
2700
  </span>
2765
2701
  <div class="pf-v5-c-masthead__main">
2766
2702
  <a class="pf-v5-c-masthead__brand" href="#">
2767
- <picture
2768
- class="pf-v5-c-brand pf-m-picture"
2769
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2770
- >
2771
- <source
2772
- media="(min-width: 768px)"
2773
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2774
- />
2775
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2776
- <img
2777
- src="/assets/images/logo__pf--reverse--base.png"
2778
- alt="Fallback patternFly default logo"
2779
- />
2780
- </picture>
2703
+ <img
2704
+ class="pf-v5-c-brand"
2705
+ src="/assets/images/pf-logo.svg"
2706
+ alt="PatternFly logo"
2707
+ style="--pf-v5-c-brand--Height:36px"
2708
+ />
2781
2709
  </a>
2782
2710
  </div>
2783
2711
  <div class="pf-v5-c-masthead__content">
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -29,20 +29,12 @@ wrapperTag: div
29
29
  </span>
30
30
  <div class="pf-v5-c-masthead__main">
31
31
  <a class="pf-v5-c-masthead__brand" href="#">
32
- <picture
33
- class="pf-v5-c-brand pf-m-picture"
34
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
35
- >
36
- <source
37
- media="(min-width: 768px)"
38
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
39
- />
40
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
41
- <img
42
- src="/assets/images/logo__pf--reverse--base.png"
43
- alt="Fallback patternFly default logo"
44
- />
45
- </picture>
32
+ <img
33
+ class="pf-v5-c-brand"
34
+ src="/assets/images/pf-logo.svg"
35
+ alt="PatternFly logo"
36
+ style="--pf-v5-c-brand--Height:36px"
37
+ />
46
38
  </a>
47
39
  </div>
48
40
  <div class="pf-v5-c-masthead__content">
@@ -1283,20 +1275,12 @@ wrapperTag: div
1283
1275
  </span>
1284
1276
  <div class="pf-v5-c-masthead__main">
1285
1277
  <a class="pf-v5-c-masthead__brand" href="#">
1286
- <picture
1287
- class="pf-v5-c-brand pf-m-picture"
1288
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
1289
- >
1290
- <source
1291
- media="(min-width: 768px)"
1292
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1293
- />
1294
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1295
- <img
1296
- src="/assets/images/logo__pf--reverse--base.png"
1297
- alt="Fallback patternFly default logo"
1298
- />
1299
- </picture>
1278
+ <img
1279
+ class="pf-v5-c-brand"
1280
+ src="/assets/images/pf-logo.svg"
1281
+ alt="PatternFly logo"
1282
+ style="--pf-v5-c-brand--Height:36px"
1283
+ />
1300
1284
  </a>
1301
1285
  </div>
1302
1286
  <div class="pf-v5-c-masthead__content">
@@ -2464,20 +2448,12 @@ wrapperTag: div
2464
2448
  </span>
2465
2449
  <div class="pf-v5-c-masthead__main">
2466
2450
  <a class="pf-v5-c-masthead__brand" href="#">
2467
- <picture
2468
- class="pf-v5-c-brand pf-m-picture"
2469
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2470
- >
2471
- <source
2472
- media="(min-width: 768px)"
2473
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2474
- />
2475
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2476
- <img
2477
- src="/assets/images/logo__pf--reverse--base.png"
2478
- alt="Fallback patternFly default logo"
2479
- />
2480
- </picture>
2451
+ <img
2452
+ class="pf-v5-c-brand"
2453
+ src="/assets/images/pf-logo.svg"
2454
+ alt="PatternFly logo"
2455
+ style="--pf-v5-c-brand--Height:36px"
2456
+ />
2481
2457
  </a>
2482
2458
  </div>
2483
2459
  <div class="pf-v5-c-masthead__content">
@@ -3537,20 +3513,12 @@ wrapperTag: div
3537
3513
  </span>
3538
3514
  <div class="pf-v5-c-masthead__main">
3539
3515
  <a class="pf-v5-c-masthead__brand" href="#">
3540
- <picture
3541
- class="pf-v5-c-brand pf-m-picture"
3542
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
3543
- >
3544
- <source
3545
- media="(min-width: 768px)"
3546
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
3547
- />
3548
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
3549
- <img
3550
- src="/assets/images/logo__pf--reverse--base.png"
3551
- alt="Fallback patternFly default logo"
3552
- />
3553
- </picture>
3516
+ <img
3517
+ class="pf-v5-c-brand"
3518
+ src="/assets/images/pf-logo.svg"
3519
+ alt="PatternFly logo"
3520
+ style="--pf-v5-c-brand--Height:36px"
3521
+ />
3554
3522
  </a>
3555
3523
  </div>
3556
3524
  <div class="pf-v5-c-masthead__content">
@@ -5015,20 +4983,12 @@ wrapperTag: div
5015
4983
  </span>
5016
4984
  <div class="pf-v5-c-masthead__main">
5017
4985
  <a class="pf-v5-c-masthead__brand" href="#">
5018
- <picture
5019
- class="pf-v5-c-brand pf-m-picture"
5020
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
5021
- >
5022
- <source
5023
- media="(min-width: 768px)"
5024
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
5025
- />
5026
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
5027
- <img
5028
- src="/assets/images/logo__pf--reverse--base.png"
5029
- alt="Fallback patternFly default logo"
5030
- />
5031
- </picture>
4986
+ <img
4987
+ class="pf-v5-c-brand"
4988
+ src="/assets/images/pf-logo.svg"
4989
+ alt="PatternFly logo"
4990
+ style="--pf-v5-c-brand--Height:36px"
4991
+ />
5032
4992
  </a>
5033
4993
  </div>
5034
4994
  <div class="pf-v5-c-masthead__content">
@@ -5403,20 +5363,12 @@ wrapperTag: div
5403
5363
  </span>
5404
5364
  <div class="pf-v5-c-masthead__main">
5405
5365
  <a class="pf-v5-c-masthead__brand" href="#">
5406
- <picture
5407
- class="pf-v5-c-brand pf-m-picture"
5408
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
5409
- >
5410
- <source
5411
- media="(min-width: 768px)"
5412
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
5413
- />
5414
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
5415
- <img
5416
- src="/assets/images/logo__pf--reverse--base.png"
5417
- alt="Fallback patternFly default logo"
5418
- />
5419
- </picture>
5366
+ <img
5367
+ class="pf-v5-c-brand"
5368
+ src="/assets/images/pf-logo.svg"
5369
+ alt="PatternFly logo"
5370
+ style="--pf-v5-c-brand--Height:36px"
5371
+ />
5420
5372
  </a>
5421
5373
  </div>
5422
5374
  <div class="pf-v5-c-masthead__content">
@@ -6025,20 +5977,12 @@ wrapperTag: div
6025
5977
  </span>
6026
5978
  <div class="pf-v5-c-masthead__main">
6027
5979
  <a class="pf-v5-c-masthead__brand" href="#">
6028
- <picture
6029
- class="pf-v5-c-brand pf-m-picture"
6030
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
6031
- >
6032
- <source
6033
- media="(min-width: 768px)"
6034
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
6035
- />
6036
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
6037
- <img
6038
- src="/assets/images/logo__pf--reverse--base.png"
6039
- alt="Fallback patternFly default logo"
6040
- />
6041
- </picture>
5980
+ <img
5981
+ class="pf-v5-c-brand"
5982
+ src="/assets/images/pf-logo.svg"
5983
+ alt="PatternFly logo"
5984
+ style="--pf-v5-c-brand--Height:36px"
5985
+ />
6042
5986
  </a>
6043
5987
  </div>
6044
5988
  <div class="pf-v5-c-masthead__content">
package/docs/demos/Skeleton/examples/Skeleton.md CHANGED
@@ -25,20 +25,12 @@ section: components
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
27
  <a class="pf-v5-c-masthead__brand" href="#">
28
- <picture
29
- class="pf-v5-c-brand pf-m-picture"
30
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
31
- >
32
- <source
33
- media="(min-width: 768px)"
34
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
35
- />
36
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
37
- <img
38
- src="/assets/images/logo__pf--reverse--base.png"
39
- alt="Fallback patternFly default logo"
40
- />
41
- </picture>
28
+ <img
29
+ class="pf-v5-c-brand"
30
+ src="/assets/images/pf-logo.svg"
31
+ alt="PatternFly logo"
32
+ style="--pf-v5-c-brand--Height:36px"
33
+ />
42
34
  </a>
43
35
  </div>
44
36
  <div class="pf-v5-c-masthead__content">