@patternfly/patternfly 5.1.0-prerelease.9 → 5.2.0-prerelease.1

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 (118) hide show
  1. package/README.md +6 -6
  2. package/base/_common.scss +9 -8
  3. package/base/_variables.scss +5 -1
  4. package/base/patternfly-common.css +4 -11
  5. package/base/patternfly-variables.css +5 -1
  6. package/components/AboutModalBox/about-modal-box.css +5 -0
  7. package/components/AboutModalBox/about-modal-box.scss +7 -0
  8. package/components/Accordion/accordion.css +3 -0
  9. package/components/Accordion/accordion.scss +2 -0
  10. package/components/Alert/alert.css +3 -0
  11. package/components/Alert/alert.scss +2 -0
  12. package/components/BackgroundImage/background-image.css +4 -1
  13. package/components/BackgroundImage/background-image.scss +6 -1
  14. package/components/Banner/banner.css +0 -3
  15. package/components/Breadcrumb/breadcrumb.css +3 -0
  16. package/components/Breadcrumb/breadcrumb.scss +2 -0
  17. package/components/Button/button.css +3 -0
  18. package/components/Button/button.scss +4 -0
  19. package/components/CalendarMonth/calendar-month.css +4 -0
  20. package/components/CalendarMonth/calendar-month.scss +2 -0
  21. package/components/Card/card.css +4 -1
  22. package/components/Card/card.scss +3 -1
  23. package/components/ClipboardCopy/clipboard-copy.css +3 -0
  24. package/components/ClipboardCopy/clipboard-copy.scss +2 -0
  25. package/components/DataList/data-list.css +3 -0
  26. package/components/DataList/data-list.scss +2 -0
  27. package/components/Drawer/drawer.css +45 -1
  28. package/components/Drawer/drawer.scss +43 -9
  29. package/components/DualListSelector/dual-list-selector.css +6 -2
  30. package/components/DualListSelector/dual-list-selector.scss +7 -2
  31. package/components/ExpandableSection/expandable-section.css +4 -0
  32. package/components/ExpandableSection/expandable-section.scss +2 -0
  33. package/components/Form/form.css +3 -0
  34. package/components/Form/form.scss +2 -0
  35. package/components/Icon/icon.scss +1 -1
  36. package/components/JumpLinks/jump-links.css +3 -0
  37. package/components/JumpLinks/jump-links.scss +2 -0
  38. package/components/Menu/menu.css +11 -0
  39. package/components/Menu/menu.scss +12 -2
  40. package/components/Nav/nav.css +20 -0
  41. package/components/Nav/nav.scss +22 -2
  42. package/components/NotificationDrawer/notification-drawer.css +4 -0
  43. package/components/NotificationDrawer/notification-drawer.scss +2 -0
  44. package/components/Page/page.css +4 -0
  45. package/components/Page/page.scss +6 -1
  46. package/components/Pagination/pagination.css +1 -1
  47. package/components/Pagination/pagination.scss +1 -1
  48. package/components/Popover/popover.css +62 -33
  49. package/components/Popover/popover.scss +88 -71
  50. package/components/Progress/progress.css +6 -4
  51. package/components/Progress/progress.scss +9 -4
  52. package/components/Skeleton/skeleton.css +4 -0
  53. package/components/Skeleton/skeleton.scss +2 -0
  54. package/components/Slider/slider.css +30 -6
  55. package/components/Slider/slider.scss +50 -19
  56. package/components/Switch/switch.css +5 -1
  57. package/components/Switch/switch.scss +5 -1
  58. package/components/Table/table-scrollable.css +2 -2
  59. package/components/Table/table-scrollable.scss +4 -2
  60. package/components/Table/table-tree-view.css +5 -1
  61. package/components/Table/table-tree-view.scss +7 -2
  62. package/components/Table/table.css +4 -0
  63. package/components/Table/table.scss +2 -0
  64. package/components/Tabs/tabs.css +10 -0
  65. package/components/Tabs/tabs.scss +8 -0
  66. package/components/Toolbar/toolbar.scss +2 -0
  67. package/components/Tooltip/tooltip.css +55 -26
  68. package/components/Tooltip/tooltip.scss +71 -54
  69. package/components/TreeView/tree-view.css +6 -0
  70. package/components/TreeView/tree-view.scss +10 -3
  71. package/components/Truncate/truncate.css +9 -0
  72. package/components/Truncate/truncate.scss +16 -3
  73. package/components/Wizard/wizard.css +6 -3
  74. package/components/Wizard/wizard.scss +8 -3
  75. package/docs/components/Button/examples/Button.md +15 -3
  76. package/docs/components/Card/examples/Card.md +15 -15
  77. package/docs/components/Check/examples/Check.md +71 -59
  78. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +106 -0
  79. package/docs/components/CodeEditor/examples/CodeEditor.md +3 -3
  80. package/docs/components/DualListSelector/examples/DualListSelector.md +64 -16
  81. package/docs/components/LogViewer/examples/LogViewer.md +120 -30
  82. package/docs/components/Menu/examples/Menu.css +8 -0
  83. package/docs/components/Menu/examples/Menu.md +90 -73
  84. package/docs/components/MenuToggle/examples/MenuToggle.md +60 -39
  85. package/docs/components/ModalBox/examples/ModalBox.css +3 -8
  86. package/docs/components/Nav/examples/Navigation.css +3 -26
  87. package/docs/components/Nav/examples/Navigation.md +99 -0
  88. package/docs/components/OptionsMenu/deprecated/options-menu.md +12 -3
  89. package/docs/components/Popover/examples/Popover.css +4 -9
  90. package/docs/components/Radio/examples/Radio.md +63 -55
  91. package/docs/components/Select/deprecated/Select.md +184 -177
  92. package/docs/components/Table/examples/Table.md +2 -2
  93. package/docs/components/Toolbar/examples/Toolbar.md +525 -431
  94. package/docs/components/Tooltip/examples/Tooltip.css +4 -0
  95. package/docs/components/Tooltip/examples/Tooltip.md +3 -1
  96. package/docs/components/Truncate/examples/Truncate.md +2 -2
  97. package/docs/demos/Card/examples/Card.md +23 -7
  98. package/docs/demos/CardView/examples/CardView.md +24 -20
  99. package/docs/demos/DataList/examples/DataList.md +8 -2
  100. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -124
  101. package/docs/demos/Skeleton/examples/Skeleton.md +7 -35
  102. package/docs/demos/Table/examples/Table.md +336 -252
  103. package/docs/demos/Tabs/examples/Tabs.md +28 -21
  104. package/docs/demos/Toolbar/examples/Toolbar.css +5 -0
  105. package/docs/demos/Toolbar/examples/Toolbar.md +44 -44
  106. package/package.json +6 -5
  107. package/patternfly-base-no-globals-theme-dark-unversioned.css +9 -12
  108. package/patternfly-base-no-globals.css +9 -12
  109. package/patternfly-base-theme-dark-unversioned.css +9 -12
  110. package/patternfly-base.css +9 -12
  111. package/patternfly-no-globals.css +356 -104
  112. package/patternfly-theme-dark-unversioned.css +356 -104
  113. package/patternfly.css +356 -104
  114. package/patternfly.min.css +1 -1
  115. package/patternfly.min.css.map +1 -1
  116. package/sass-utilities/functions.scss +6 -0
  117. package/sass-utilities/mixins.scss +55 -20
  118. package/sass-utilities/themes/dark/mixins.scss +3 -1
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -1636,73 +1636,77 @@ section: components
1636
1636
  >
1637
1637
  <label
1638
1638
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1639
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-active"
1639
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-active"
1640
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-active-input"
1640
1641
  >
1641
1642
  <input
1642
1643
  class="pf-v5-c-check__input"
1643
1644
  type="checkbox"
1644
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-active"
1645
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-active"
1645
+ aria-describedby="table-tabs-example-tabs-toolbar-select-checkbox-status-active-description"
1646
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-active-input"
1647
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-active-input"
1646
1648
  />
1647
-
1648
1649
  <span class="pf-v5-c-check__label">Active</span>
1649
1650
  <span
1650
1651
  class="pf-v5-c-check__description"
1652
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-active-description"
1651
1653
  >This is a description</span>
1652
1654
  </label>
1653
1655
  <label
1654
1656
  class="pf-v5-c-check pf-v5-c-select__menu-item pf-m-description"
1655
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled"
1657
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled"
1658
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-input"
1656
1659
  >
1657
1660
  <input
1658
1661
  class="pf-v5-c-check__input"
1659
1662
  type="checkbox"
1660
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled"
1661
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled"
1663
+ aria-describedby="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-description"
1664
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-input"
1665
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-input"
1662
1666
  />
1663
-
1664
1667
  <span class="pf-v5-c-check__label">Canceled</span>
1665
1668
  <span
1666
1669
  class="pf-v5-c-check__description"
1670
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-description"
1667
1671
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1668
1672
  </label>
1669
1673
  <label
1670
1674
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1671
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-paused"
1675
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-paused"
1676
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-paused-input"
1672
1677
  >
1673
1678
  <input
1674
1679
  class="pf-v5-c-check__input"
1675
1680
  type="checkbox"
1676
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-paused"
1677
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-paused"
1681
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-paused-input"
1682
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-paused-input"
1678
1683
  />
1679
-
1680
1684
  <span class="pf-v5-c-check__label">Paused</span>
1681
1685
  </label>
1682
1686
  <label
1683
1687
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1684
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-warning"
1688
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-warning"
1689
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-warning-input"
1685
1690
  >
1686
1691
  <input
1687
1692
  class="pf-v5-c-check__input"
1688
1693
  type="checkbox"
1689
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-warning"
1690
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-warning"
1694
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-warning-input"
1695
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-warning-input"
1691
1696
  />
1692
-
1693
1697
  <span class="pf-v5-c-check__label">Warning</span>
1694
1698
  </label>
1695
1699
  <label
1696
1700
  class="pf-v5-c-check pf-v5-c-select__menu-item"
1697
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted"
1701
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted"
1702
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted-input"
1698
1703
  >
1699
1704
  <input
1700
1705
  class="pf-v5-c-check__input"
1701
1706
  type="checkbox"
1702
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted"
1703
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted"
1707
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted-input"
1708
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted-input"
1704
1709
  />
1705
-
1706
1710
  <span class="pf-v5-c-check__label">Restarted</span>
1707
1711
  </label>
1708
1712
  </fieldset>
@@ -1717,7 +1721,10 @@ section: components
1717
1721
  type="button"
1718
1722
  aria-label="Sort"
1719
1723
  >
1720
- <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
1724
+ <i
1725
+ class="fas fa-sort-amount-down pf-v5-m-mirror-inline-rtl"
1726
+ aria-hidden="true"
1727
+ ></i>
1721
1728
  </button>
1722
1729
  </div>
1723
1730
 
package/docs/demos/Toolbar/examples/Toolbar.css CHANGED
@@ -5,6 +5,11 @@
5
5
  min-height: 420px;
6
6
  }
7
7
 
8
+ #ws-html-demos-c-toolbar-toolbar-attribute-value-single-select-filter-on-desktop,
9
+ #ws-html-demos-c-toolbar-toolbar-attribute-value-checkbox-select-filter-on-desktop {
10
+ min-height: 320px;
11
+ }
12
+
8
13
  #ws-html-demos-c-toolbar-toolbar-attribute-value-search-filter-on-mobile {
9
14
  min-height: 175px;
10
15
  }
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -2292,70 +2292,70 @@ section: components
2292
2292
  >
2293
2293
  <label
2294
2294
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2295
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-active"
2295
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-active"
2296
+ for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-active-input"
2296
2297
  >
2297
2298
  <input
2298
2299
  class="pf-v5-c-check__input"
2299
2300
  type="checkbox"
2300
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-active"
2301
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-active"
2301
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-active-input"
2302
+ name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-active-input"
2303
+ checked
2302
2304
  />
2303
-
2304
2305
  <span class="pf-v5-c-check__label">Active</span>
2305
2306
  </label>
2306
2307
  <label
2307
2308
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2308
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-canceled"
2309
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-canceled"
2310
+ for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-canceled-input"
2309
2311
  >
2310
2312
  <input
2311
2313
  class="pf-v5-c-check__input"
2312
2314
  type="checkbox"
2313
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-canceled"
2314
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-canceled"
2315
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-canceled-input"
2316
+ name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-canceled-input"
2315
2317
  checked
2316
2318
  />
2317
-
2318
2319
  <span class="pf-v5-c-check__label">Canceled</span>
2319
2320
  </label>
2320
2321
  <label
2321
2322
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2322
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-paused"
2323
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-paused"
2324
+ for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-paused-input"
2323
2325
  >
2324
2326
  <input
2325
2327
  class="pf-v5-c-check__input"
2326
2328
  type="checkbox"
2327
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-paused"
2328
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-paused"
2329
- checked
2329
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-paused-input"
2330
+ name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-paused-input"
2330
2331
  />
2331
-
2332
2332
  <span class="pf-v5-c-check__label">Paused</span>
2333
2333
  </label>
2334
2334
  <label
2335
2335
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2336
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-warning"
2336
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-warning"
2337
+ for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-warning-input"
2337
2338
  >
2338
2339
  <input
2339
2340
  class="pf-v5-c-check__input"
2340
2341
  type="checkbox"
2341
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-warning"
2342
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-warning"
2342
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-warning-input"
2343
+ name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-warning-input"
2344
+ checked
2343
2345
  />
2344
-
2345
2346
  <span class="pf-v5-c-check__label">Warning</span>
2346
2347
  </label>
2347
2348
  <label
2348
2349
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2349
- for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-restarted"
2350
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-restarted"
2351
+ for="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-restarted-input"
2350
2352
  >
2351
2353
  <input
2352
2354
  class="pf-v5-c-check__input"
2353
2355
  type="checkbox"
2354
- id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-restarted"
2355
- name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-restarted"
2356
- checked
2356
+ id="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-restarted-input"
2357
+ name="toolbar-attribute-value-checkbox-select-filter-desktop-example-select-filter-status-check-restarted-input"
2357
2358
  />
2358
-
2359
2359
  <span class="pf-v5-c-check__label">Restarted</span>
2360
2360
  </label>
2361
2361
  </fieldset>
@@ -2839,70 +2839,70 @@ section: components
2839
2839
  >
2840
2840
  <label
2841
2841
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2842
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-active"
2842
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-active"
2843
+ for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-active-input"
2843
2844
  >
2844
2845
  <input
2845
2846
  class="pf-v5-c-check__input"
2846
2847
  type="checkbox"
2847
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-active"
2848
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-active"
2848
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-active-input"
2849
+ name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-active-input"
2850
+ checked
2849
2851
  />
2850
-
2851
2852
  <span class="pf-v5-c-check__label">Active</span>
2852
2853
  </label>
2853
2854
  <label
2854
2855
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2855
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-canceled"
2856
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-canceled"
2857
+ for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-canceled-input"
2856
2858
  >
2857
2859
  <input
2858
2860
  class="pf-v5-c-check__input"
2859
2861
  type="checkbox"
2860
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-canceled"
2861
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-canceled"
2862
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-canceled-input"
2863
+ name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-canceled-input"
2862
2864
  checked
2863
2865
  />
2864
-
2865
2866
  <span class="pf-v5-c-check__label">Canceled</span>
2866
2867
  </label>
2867
2868
  <label
2868
2869
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2869
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-paused"
2870
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-paused"
2871
+ for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-paused-input"
2870
2872
  >
2871
2873
  <input
2872
2874
  class="pf-v5-c-check__input"
2873
2875
  type="checkbox"
2874
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-paused"
2875
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-paused"
2876
- checked
2876
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-paused-input"
2877
+ name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-paused-input"
2877
2878
  />
2878
-
2879
2879
  <span class="pf-v5-c-check__label">Paused</span>
2880
2880
  </label>
2881
2881
  <label
2882
2882
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2883
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-warning"
2883
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-warning"
2884
+ for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-warning-input"
2884
2885
  >
2885
2886
  <input
2886
2887
  class="pf-v5-c-check__input"
2887
2888
  type="checkbox"
2888
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-warning"
2889
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-warning"
2889
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-warning-input"
2890
+ name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-warning-input"
2891
+ checked
2890
2892
  />
2891
-
2892
2893
  <span class="pf-v5-c-check__label">Warning</span>
2893
2894
  </label>
2894
2895
  <label
2895
2896
  class="pf-v5-c-check pf-v5-c-select__menu-item"
2896
- for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-restarted"
2897
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-restarted"
2898
+ for="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-restarted-input"
2897
2899
  >
2898
2900
  <input
2899
2901
  class="pf-v5-c-check__input"
2900
2902
  type="checkbox"
2901
- id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-restarted"
2902
- name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-restarted"
2903
- checked
2903
+ id="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-restarted-input"
2904
+ name="toolbar-attribute-value-checkbox-select-filter-mobile-example-select-filter-status-expanded-check-restarted-input"
2904
2905
  />
2905
-
2906
2906
  <span class="pf-v5-c-check__label">Restarted</span>
2907
2907
  </label>
2908
2908
  </fieldset>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.1.0-prerelease.9",
4
+ "version": "5.2.0-prerelease.1",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -45,12 +45,13 @@
45
45
  "@commitlint/config-conventional": "^17.6.7",
46
46
  "@fortawesome/fontawesome": "^1.1.8",
47
47
  "@octokit/rest": "^20.0.1",
48
- "@patternfly/documentation-framework": "5.1.7",
48
+ "@patternfly/documentation-framework": "5.2.17",
49
49
  "@patternfly/patternfly-a11y": "4.3.1",
50
- "@patternfly/react-code-editor": "5.0.0",
51
- "@patternfly/react-core": "5.0.0",
52
- "@patternfly/react-table": "5.0.0",
50
+ "@patternfly/react-code-editor": "5.1.1",
51
+ "@patternfly/react-core": "5.1.1",
52
+ "@patternfly/react-table": "5.1.1",
53
53
  "@starptech/prettyhtml": "^0.10.0",
54
+ "backstopjs": "^6.2.2",
54
55
  "cheerio": "^1.0.0-rc.12",
55
56
  "commander": "^11.0.0",
56
57
  "cssnano": "^6.0.1",
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -259,7 +259,11 @@
259
259
  --pf-v5-global--arrow--width-lg: 1.5625rem;
260
260
  --pf-v5-global--target-size--MinWidth: 44px;
261
261
  --pf-v5-global--target-size--MinHeight: 44px;
262
- --pf-v5-global--rtl--transform--flip: 1;
262
+ --pf-v5-global--inverse--multiplier: 1;
263
+ }
264
+
265
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) {
266
+ --pf-v5-global--inverse--multiplier: -1;
263
267
  }
264
268
 
265
269
  :where(.pf-theme-dark) {
@@ -492,26 +496,19 @@
492
496
  }
493
497
 
494
498
  .pf-v5-m-dir-rtl {
499
+ --pf-v5-global--inverse--multiplier: -1;
495
500
  direction: rtl;
496
501
  }
497
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
498
- --pf-v5-global--rtl--transform--flip: -1;
499
- }
500
502
 
501
- .pf-v5-m-dir-ltr,
502
- .ws-dir-ltr {
503
- --pf-v5-global--rtl--transform--flip: 1;
503
+ .pf-v5-m-dir-ltr {
504
+ --pf-v5-global--inverse--multiplier: 1;
504
505
  direction: ltr;
505
506
  }
506
507
 
507
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
508
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-mirror-inline-rtl {
508
509
  scale: -1 1;
509
510
  }
510
511
 
511
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
512
- --pf-v5-global--rtl--transform--flip: -1;
513
- }
514
-
515
512
  :where(.pf-theme-dark) {
516
513
  color-scheme: dark;
517
514
  }
package/patternfly-base-no-globals.css CHANGED
@@ -259,7 +259,11 @@
259
259
  --pf-v5-global--arrow--width-lg: 1.5625rem;
260
260
  --pf-v5-global--target-size--MinWidth: 44px;
261
261
  --pf-v5-global--target-size--MinHeight: 44px;
262
- --pf-v5-global--rtl--transform--flip: 1;
262
+ --pf-v5-global--inverse--multiplier: 1;
263
+ }
264
+
265
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) {
266
+ --pf-v5-global--inverse--multiplier: -1;
263
267
  }
264
268
 
265
269
  :where(.pf-v5-theme-dark) {
@@ -492,26 +496,19 @@
492
496
  }
493
497
 
494
498
  .pf-v5-m-dir-rtl {
499
+ --pf-v5-global--inverse--multiplier: -1;
495
500
  direction: rtl;
496
501
  }
497
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
498
- --pf-v5-global--rtl--transform--flip: -1;
499
- }
500
502
 
501
- .pf-v5-m-dir-ltr,
502
- .ws-dir-ltr {
503
- --pf-v5-global--rtl--transform--flip: 1;
503
+ .pf-v5-m-dir-ltr {
504
+ --pf-v5-global--inverse--multiplier: 1;
504
505
  direction: ltr;
505
506
  }
506
507
 
507
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
508
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-mirror-inline-rtl {
508
509
  scale: -1 1;
509
510
  }
510
511
 
511
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
512
- --pf-v5-global--rtl--transform--flip: -1;
513
- }
514
-
515
512
  :where(.pf-v5-theme-dark) {
516
513
  color-scheme: dark;
517
514
  }
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -259,7 +259,11 @@
259
259
  --pf-v5-global--arrow--width-lg: 1.5625rem;
260
260
  --pf-v5-global--target-size--MinWidth: 44px;
261
261
  --pf-v5-global--target-size--MinHeight: 44px;
262
- --pf-v5-global--rtl--transform--flip: 1;
262
+ --pf-v5-global--inverse--multiplier: 1;
263
+ }
264
+
265
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) {
266
+ --pf-v5-global--inverse--multiplier: -1;
263
267
  }
264
268
 
265
269
  :where(.pf-theme-dark) {
@@ -492,26 +496,19 @@
492
496
  }
493
497
 
494
498
  .pf-v5-m-dir-rtl {
499
+ --pf-v5-global--inverse--multiplier: -1;
495
500
  direction: rtl;
496
501
  }
497
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
498
- --pf-v5-global--rtl--transform--flip: -1;
499
- }
500
502
 
501
- .pf-v5-m-dir-ltr,
502
- .ws-dir-ltr {
503
- --pf-v5-global--rtl--transform--flip: 1;
503
+ .pf-v5-m-dir-ltr {
504
+ --pf-v5-global--inverse--multiplier: 1;
504
505
  direction: ltr;
505
506
  }
506
507
 
507
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
508
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-mirror-inline-rtl {
508
509
  scale: -1 1;
509
510
  }
510
511
 
511
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
512
- --pf-v5-global--rtl--transform--flip: -1;
513
- }
514
-
515
512
  :where(html,
516
513
  body,
517
514
  p,
package/patternfly-base.css CHANGED
@@ -259,7 +259,11 @@
259
259
  --pf-v5-global--arrow--width-lg: 1.5625rem;
260
260
  --pf-v5-global--target-size--MinWidth: 44px;
261
261
  --pf-v5-global--target-size--MinHeight: 44px;
262
- --pf-v5-global--rtl--transform--flip: 1;
262
+ --pf-v5-global--inverse--multiplier: 1;
263
+ }
264
+
265
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) {
266
+ --pf-v5-global--inverse--multiplier: -1;
263
267
  }
264
268
 
265
269
  :where(.pf-v5-theme-dark) {
@@ -492,26 +496,19 @@
492
496
  }
493
497
 
494
498
  .pf-v5-m-dir-rtl {
499
+ --pf-v5-global--inverse--multiplier: -1;
495
500
  direction: rtl;
496
501
  }
497
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-dir-rtl {
498
- --pf-v5-global--rtl--transform--flip: -1;
499
- }
500
502
 
501
- .pf-v5-m-dir-ltr,
502
- .ws-dir-ltr {
503
- --pf-v5-global--rtl--transform--flip: 1;
503
+ .pf-v5-m-dir-ltr {
504
+ --pf-v5-global--inverse--multiplier: 1;
504
505
  direction: ltr;
505
506
  }
506
507
 
507
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-rtl-flip-inline {
508
+ :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-m-mirror-inline-rtl {
508
509
  scale: -1 1;
509
510
  }
510
511
 
511
- :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) {
512
- --pf-v5-global--rtl--transform--flip: -1;
513
- }
514
-
515
512
  :where(html,
516
513
  body,
517
514
  p,