@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/Tabs/examples/Tabs.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">
@@ -518,20 +510,12 @@ section: components
518
510
  </span>
519
511
  <div class="pf-v5-c-masthead__main">
520
512
  <a class="pf-v5-c-masthead__brand" href="#">
521
- <picture
522
- class="pf-v5-c-brand pf-m-picture"
523
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
524
- >
525
- <source
526
- media="(min-width: 768px)"
527
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
528
- />
529
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
530
- <img
531
- src="/assets/images/logo__pf--reverse--base.png"
532
- alt="Fallback patternFly default logo"
533
- />
534
- </picture>
513
+ <img
514
+ class="pf-v5-c-brand"
515
+ src="/assets/images/pf-logo.svg"
516
+ alt="PatternFly logo"
517
+ style="--pf-v5-c-brand--Height:36px"
518
+ />
535
519
  </a>
536
520
  </div>
537
521
  <div class="pf-v5-c-masthead__content">
@@ -1013,20 +997,12 @@ section: components
1013
997
  </span>
1014
998
  <div class="pf-v5-c-masthead__main">
1015
999
  <a class="pf-v5-c-masthead__brand" href="#">
1016
- <picture
1017
- class="pf-v5-c-brand pf-m-picture"
1018
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
1019
- >
1020
- <source
1021
- media="(min-width: 768px)"
1022
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1023
- />
1024
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1025
- <img
1026
- src="/assets/images/logo__pf--reverse--base.png"
1027
- alt="Fallback patternFly default logo"
1028
- />
1029
- </picture>
1000
+ <img
1001
+ class="pf-v5-c-brand"
1002
+ src="/assets/images/pf-logo.svg"
1003
+ alt="PatternFly logo"
1004
+ style="--pf-v5-c-brand--Height:36px"
1005
+ />
1030
1006
  </a>
1031
1007
  </div>
1032
1008
  <div class="pf-v5-c-masthead__content">
@@ -1411,20 +1387,12 @@ section: components
1411
1387
  </span>
1412
1388
  <div class="pf-v5-c-masthead__main">
1413
1389
  <a class="pf-v5-c-masthead__brand" href="#">
1414
- <picture
1415
- class="pf-v5-c-brand pf-m-picture"
1416
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
1417
- >
1418
- <source
1419
- media="(min-width: 768px)"
1420
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1421
- />
1422
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1423
- <img
1424
- src="/assets/images/logo__pf--reverse--base.png"
1425
- alt="Fallback patternFly default logo"
1426
- />
1427
- </picture>
1390
+ <img
1391
+ class="pf-v5-c-brand"
1392
+ src="/assets/images/pf-logo.svg"
1393
+ alt="PatternFly logo"
1394
+ style="--pf-v5-c-brand--Height:36px"
1395
+ />
1428
1396
  </a>
1429
1397
  </div>
1430
1398
  <div class="pf-v5-c-masthead__content">
@@ -2678,20 +2646,12 @@ section: components
2678
2646
  </span>
2679
2647
  <div class="pf-v5-c-masthead__main">
2680
2648
  <a class="pf-v5-c-masthead__brand" href="#">
2681
- <picture
2682
- class="pf-v5-c-brand pf-m-picture"
2683
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2684
- >
2685
- <source
2686
- media="(min-width: 768px)"
2687
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2688
- />
2689
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2690
- <img
2691
- src="/assets/images/logo__pf--reverse--base.png"
2692
- alt="Fallback patternFly default logo"
2693
- />
2694
- </picture>
2649
+ <img
2650
+ class="pf-v5-c-brand"
2651
+ src="/assets/images/pf-logo.svg"
2652
+ alt="PatternFly logo"
2653
+ style="--pf-v5-c-brand--Height:36px"
2654
+ />
2695
2655
  </a>
2696
2656
  </div>
2697
2657
  <div class="pf-v5-c-masthead__content">
@@ -2919,20 +2879,12 @@ section: components
2919
2879
  </span>
2920
2880
  <div class="pf-v5-c-masthead__main">
2921
2881
  <a class="pf-v5-c-masthead__brand" href="#">
2922
- <picture
2923
- class="pf-v5-c-brand pf-m-picture"
2924
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2925
- >
2926
- <source
2927
- media="(min-width: 768px)"
2928
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2929
- />
2930
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2931
- <img
2932
- src="/assets/images/logo__pf--reverse--base.png"
2933
- alt="Fallback patternFly default logo"
2934
- />
2935
- </picture>
2882
+ <img
2883
+ class="pf-v5-c-brand"
2884
+ src="/assets/images/pf-logo.svg"
2885
+ alt="PatternFly logo"
2886
+ style="--pf-v5-c-brand--Height:36px"
2887
+ />
2936
2888
  </a>
2937
2889
  </div>
2938
2890
  <div class="pf-v5-c-masthead__content">
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -277,20 +277,12 @@ section: components
277
277
  </span>
278
278
  <div class="pf-v5-c-masthead__main">
279
279
  <a class="pf-v5-c-masthead__brand" href="#">
280
- <picture
281
- class="pf-v5-c-brand pf-m-picture"
282
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
283
- >
284
- <source
285
- media="(min-width: 768px)"
286
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
287
- />
288
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
289
- <img
290
- src="/assets/images/logo__pf--reverse--base.png"
291
- alt="Fallback patternFly default logo"
292
- />
293
- </picture>
280
+ <img
281
+ class="pf-v5-c-brand"
282
+ src="/assets/images/pf-logo.svg"
283
+ alt="PatternFly logo"
284
+ style="--pf-v5-c-brand--Height:36px"
285
+ />
294
286
  </a>
295
287
  </div>
296
288
  <div class="pf-v5-c-masthead__content">
@@ -555,7 +547,7 @@ section: components
555
547
  aria-label="search filter"
556
548
  role="group"
557
549
  >
558
- <div class="pf-v5-c-form-control">
550
+ <span class="pf-v5-c-form-control">
559
551
  <input
560
552
  type="text"
561
553
  value="2020-03-05"
@@ -563,7 +555,7 @@ section: components
563
555
  name="toolbar-with-validation-example-helper-text-input"
564
556
  aria-label="Date picker"
565
557
  />
566
- </div>
558
+ </span>
567
559
  <button
568
560
  class="pf-v5-c-button pf-m-control"
569
561
  type="button"
@@ -590,7 +582,7 @@ section: components
590
582
  aria-label="search filter"
591
583
  role="group"
592
584
  >
593
- <div class="pf-v5-c-form-control pf-m-error">
585
+ <span class="pf-v5-c-form-control pf-m-error">
594
586
  <input
595
587
  aria-invalid="true"
596
588
  type="text"
@@ -599,17 +591,17 @@ section: components
599
591
  name="toolbar-with-validation-example-invalid-input"
600
592
  aria-label="Date picker"
601
593
  />
602
- <div class="pf-v5-c-form-control__utilities">
603
- <div
594
+ <span class="pf-v5-c-form-control__utilities">
595
+ <span
604
596
  class="pf-v5-c-form-control__icon pf-m-status"
605
597
  >
606
598
  <i
607
599
  class="fas fa-exclamation-circle"
608
600
  aria-hidden="true"
609
601
  ></i>
610
- </div>
611
- </div>
612
- </div>
602
+ </span>
603
+ </span>
604
+ </span>
613
605
  <button
614
606
  class="pf-v5-c-button pf-m-control"
615
607
  type="button"
@@ -2907,20 +2899,12 @@ section: components
2907
2899
  </span>
2908
2900
  <div class="pf-v5-c-masthead__main">
2909
2901
  <a class="pf-v5-c-masthead__brand" href="#">
2910
- <picture
2911
- class="pf-v5-c-brand pf-m-picture"
2912
- style="--pf-v5-c-brand--Width: 180px; --pf-v5-c-brand--Width-on-md: 180px; --pf-v5-c-brand--Width-on-2xl: 220px;"
2913
- >
2914
- <source
2915
- media="(min-width: 768px)"
2916
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
2917
- />
2918
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
2919
- <img
2920
- src="/assets/images/logo__pf--reverse--base.png"
2921
- alt="Fallback patternFly default logo"
2922
- />
2923
- </picture>
2902
+ <img
2903
+ class="pf-v5-c-brand"
2904
+ src="/assets/images/pf-logo.svg"
2905
+ alt="PatternFly logo"
2906
+ style="--pf-v5-c-brand--Height:36px"
2907
+ />
2924
2908
  </a>
2925
2909
  </div>
2926
2910
  <div class="pf-v5-c-masthead__content">
@@ -3939,7 +3923,7 @@ section: components
3939
3923
  </button>
3940
3924
  </div>
3941
3925
  <div class="pf-v5-c-pagination__nav-page-select">
3942
- <div class="pf-v5-c-form-control">
3926
+ <span class="pf-v5-c-form-control">
3943
3927
  <input
3944
3928
  aria-label="Current page"
3945
3929
  type="number"
@@ -3947,7 +3931,7 @@ section: components
3947
3931
  max="4"
3948
3932
  value="1"
3949
3933
  />
3950
- </div>
3934
+ </span>
3951
3935
  <span aria-hidden="true">of 4</span>
3952
3936
  </div>
3953
3937
  <div class="pf-v5-c-pagination__nav-control pf-m-next">