@patternfly/react-styles 5.4.0-prerelease.1 → 5.4.0-prerelease.10

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.4.0-prerelease.9...@patternfly/react-styles@5.4.0-prerelease.10) (2024-07-11)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [5.4.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.4.0-prerelease.8...@patternfly/react-styles@5.4.0-prerelease.9) (2024-07-02)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [5.4.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.4.0-prerelease.7...@patternfly/react-styles@5.4.0-prerelease.8) (2024-07-01)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [5.4.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.4.0-prerelease.6...@patternfly/react-styles@5.4.0-prerelease.7) (2024-06-13)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [5.4.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.4.0-prerelease.5...@patternfly/react-styles@5.4.0-prerelease.6) (2024-05-31)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [5.4.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.4.0-prerelease.4...@patternfly/react-styles@5.4.0-prerelease.5) (2024-05-20)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [5.4.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.4.0-prerelease.3...@patternfly/react-styles@5.4.0-prerelease.4) (2024-05-15)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [5.4.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.4.0-prerelease.2...@patternfly/react-styles@5.4.0-prerelease.3) (2024-05-10)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# 5.4.0-prerelease.2 (2024-04-30)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 # 5.4.0-prerelease.1 (2024-04-19)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Form/form.css

@@ -32,8 +32,9 @@
   --pf-v5-c-form__group-label-help--Color: var(--pf-v5-global--Color--200);
   --pf-v5-c-form__group-label-help--hover--Color: var(--pf-v5-global--Color--100);
   --pf-v5-c-form__group-label-help--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-form__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-form__group-label-info--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-v5-global--spacer--sm);
@@ -119,6 +120,14 @@
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
     transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
+  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-info {
+    flex-direction: column;
+    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
+    align-items: flex-start;
+  }
+  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label-main {
+    flex-grow: 0;
+  }
   .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control {
     grid-column: 2;
   }
@@ -139,6 +148,14 @@
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
     transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
+  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-info {
+    flex-direction: column;
+    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
+    align-items: flex-start;
+  }
+  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label-main {
+    flex-grow: 0;
+  }
   .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-control {
     grid-column: 2;
   }
@@ -159,6 +176,14 @@
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
     transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
+  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-info {
+    flex-direction: column;
+    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
+    align-items: flex-start;
+  }
+  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label-main {
+    flex-grow: 0;
+  }
   .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-control {
     grid-column: 2;
   }
@@ -179,6 +204,14 @@
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
     transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
+  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-info {
+    flex-direction: column;
+    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
+    align-items: flex-start;
+  }
+  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label-main {
+    flex-grow: 0;
+  }
   .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-control {
     grid-column: 2;
   }
@@ -199,6 +232,14 @@
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
     transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
+  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-info {
+    flex-direction: column;
+    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
+    align-items: flex-start;
+  }
+  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label-main {
+    flex-grow: 0;
+  }
   .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-control {
     grid-column: 2;
   }
@@ -219,6 +260,14 @@
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
     transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
+  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-info {
+    flex-direction: column;
+    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
+    align-items: flex-start;
+  }
+  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label-main {
+    flex-grow: 0;
+  }
   .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-control {
     grid-column: 2;
   }
@@ -239,6 +288,14 @@
     --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
     transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
+  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-info {
+    flex-direction: column;
+    gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
+    align-items: flex-start;
+  }
+  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label-main {
+    flex-grow: 0;
+  }
   .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-control {
     grid-column: 2;
   }
@@ -275,6 +332,7 @@
 }
 .pf-v5-c-form__group-label.pf-m-info {
   display: flex;
+  gap: var(--pf-v5-c-form__group-label--m-info--Gap);
   align-items: flex-end;
 }
 
@@ -283,7 +341,6 @@
 }
 
 .pf-v5-c-form__group-label-info {
-  margin-inline-start: var(--pf-v5-c-form__group-label-info--MarginLeft);
   font-size: var(--pf-v5-c-form__group-label-info--FontSize);
 }
 

package/css/components/Form/form.d.ts

@@ -32,6 +32,7 @@ declare const _default: {
     "horizontal": "pf-m-horizontal",
     "alignRight": "pf-m-align-right",
     "noPaddingTop": "pf-m-no-padding-top",
+    "info": "pf-m-info",
     "horizontalOnXs": "pf-m-horizontal-on-xs",
     "horizontalOnSm": "pf-m-horizontal-on-sm",
     "horizontalOnMd": "pf-m-horizontal-on-md",
@@ -40,7 +41,6 @@ declare const _default: {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "limitWidth": "pf-m-limit-width",
     "action": "pf-m-action",
-    "info": "pf-m-info",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline",
     "stack": "pf-m-stack",

package/css/components/Form/form.js

@@ -34,6 +34,7 @@ exports.default = {
     "horizontal": "pf-m-horizontal",
     "alignRight": "pf-m-align-right",
     "noPaddingTop": "pf-m-no-padding-top",
+    "info": "pf-m-info",
     "horizontalOnXs": "pf-m-horizontal-on-xs",
     "horizontalOnSm": "pf-m-horizontal-on-sm",
     "horizontalOnMd": "pf-m-horizontal-on-md",
@@ -42,7 +43,6 @@ exports.default = {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "limitWidth": "pf-m-limit-width",
     "action": "pf-m-action",
-    "info": "pf-m-info",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline",
     "stack": "pf-m-stack",

package/css/components/Form/form.mjs

@@ -32,6 +32,7 @@ export default {
     "horizontal": "pf-m-horizontal",
     "alignRight": "pf-m-align-right",
     "noPaddingTop": "pf-m-no-padding-top",
+    "info": "pf-m-info",
     "horizontalOnXs": "pf-m-horizontal-on-xs",
     "horizontalOnSm": "pf-m-horizontal-on-sm",
     "horizontalOnMd": "pf-m-horizontal-on-md",
@@ -40,7 +41,6 @@ export default {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "limitWidth": "pf-m-limit-width",
     "action": "pf-m-action",
-    "info": "pf-m-info",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline",
     "stack": "pf-m-stack",

package/css/components/MenuToggle/menu-toggle.css

@@ -113,6 +113,7 @@
   --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-v5-global--spacer--xs);
   --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
@@ -415,6 +416,12 @@
   background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
   border: 0;
 }
+.pf-v5-c-menu-toggle__button.pf-m-text {
+  --pf-v5-c-menu-toggle--m-split-button--last-child--PaddingLeft: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
+  display: inline-flex;
+  align-items: baseline;
+  padding-inline-start: var(--pf-v5-c-menu-toggle__button--m-text--PaddingInlineStart);
+}
 
 .pf-v5-c-menu-toggle__icon {
   flex-shrink: 0;

package/css/components/Pagination/pagination.css

@@ -16,7 +16,6 @@
   --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
   --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-pagination__nav--Display: none;
   --pf-v5-c-pagination--m-display-summary__nav--Display: none;
   --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
@@ -60,9 +59,13 @@
   --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
+  --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-pagination--c-menu-toggle--Display--base: inline-flex;
   --pf-v5-c-pagination--c-menu-toggle--Display: none;
+  --pf-v5-c-pagination--c-menu-toggle--md--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
   --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
-  --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: inline-flex;
+  --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
+  --pf-v5-c-pagination--m-bottom--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--Display--base);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -79,7 +82,7 @@
     --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
     --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
     --pf-v5-c-pagination--m-bottom--BoxShadow: none;
-    --pf-v5-c-pagination--c-menu-toggle--Display: inline-flex;
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--c-menu-toggle--md--Display);
     --pf-v5-c-pagination__nav--Display: inline-flex;
     --pf-v5-c-pagination__total-items--Display: none;
   }
@@ -129,7 +132,7 @@
 }
 .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
   position: absolute;
-  display: block;
+  display: var(--pf-v5-c-pagination--m-bottom--c-menu-toggle--Display);
 }
 .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
   display: flex;

package/css/components/ProgressStepper/progress-stepper.css

@@ -308,6 +308,7 @@
   border: 0;
 }
 .pf-v5-c-progress-stepper__step-title.pf-m-help-text {
+  padding: 0;
   text-decoration: underline;
   text-decoration-thickness: var(--pf-v5-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
   text-decoration-style: dashed;

package/css/docs/components/Sidebar/examples/Sidebar.css

@@ -1,4 +1,6 @@
-.ws-core-c-sidebar .ws-preview-html {
-  height: 200px;
+#ws-core-c-sidebar-sticky-panel,
+#ws-core-c-sidebar-static-panel,
+#ws-core-c-sidebar-responsive-panel-width {
   overflow: auto;
+  max-height: 200px;
 }

package/css/docs/components/Sidebar/examples/Sidebar.d.ts

@@ -1,6 +1,3 @@
 import './Sidebar.css';
-declare const _default: {
-  "wsCoreCSidebar": "ws-core-c-sidebar",
-  "wsPreviewHtml": "ws-preview-html"
-};
+declare const _default: {};
 export default _default;

package/css/docs/components/Sidebar/examples/Sidebar.js

@@ -1,7 +1,4 @@
 "use strict";
 exports.__esModule = true;
 require('./Sidebar.css');
-exports.default = {
-  "wsCoreCSidebar": "ws-core-c-sidebar",
-  "wsPreviewHtml": "ws-preview-html"
-};
+exports.default = {};

package/css/docs/components/Sidebar/examples/Sidebar.mjs

@@ -1,5 +1,2 @@
 import './Sidebar.css';
-export default {
-  "wsCoreCSidebar": "ws-core-c-sidebar",
-  "wsPreviewHtml": "ws-preview-html"
-};
+export default {};

package/css/docs/utilities/Display/examples/Display.css

@@ -1,11 +1,4 @@
-.ws-core-u-display .pf-v5-u-display-inline-block,
-.ws-core-u-display .pf-v5-u-display-block,
-.ws-core-u-display .pf-v5-u-display-flex,
-.ws-core-u-display .pf-v5-u-display-inline-flex,
-.ws-core-u-display .pf-v5-u-display-grid,
-.ws-core-u-display .pf-v5-u-display-inline,
-.ws-core-u-display .pf-v5-u-display-table,
-.ws-core-u-display .pf-v5-u-display-table-cell {
+.ws-core-u-display [class*="pf-v5-u-display-"] {
   padding: .5rem !important;
   border: 2px dashed #393f44;
 }

package/css/docs/utilities/Display/examples/Display.d.ts

@@ -1,13 +1,5 @@
 import './Display.css';
 declare const _default: {
-  "displayBlock": "pf-v5-u-display-block",
-  "displayFlex": "pf-v5-u-display-flex",
-  "displayGrid": "pf-v5-u-display-grid",
-  "displayInline": "pf-v5-u-display-inline",
-  "displayInlineBlock": "pf-v5-u-display-inline-block",
-  "displayInlineFlex": "pf-v5-u-display-inline-flex",
-  "displayTable": "pf-v5-u-display-table",
-  "displayTableCell": "pf-v5-u-display-table-cell",
   "wsCoreUDisplay": "ws-core-u-display"
 };
 export default _default;

package/css/docs/utilities/Display/examples/Display.js

@@ -2,13 +2,5 @@
 exports.__esModule = true;
 require('./Display.css');
 exports.default = {
-  "displayBlock": "pf-v5-u-display-block",
-  "displayFlex": "pf-v5-u-display-flex",
-  "displayGrid": "pf-v5-u-display-grid",
-  "displayInline": "pf-v5-u-display-inline",
-  "displayInlineBlock": "pf-v5-u-display-inline-block",
-  "displayInlineFlex": "pf-v5-u-display-inline-flex",
-  "displayTable": "pf-v5-u-display-table",
-  "displayTableCell": "pf-v5-u-display-table-cell",
   "wsCoreUDisplay": "ws-core-u-display"
 };

package/css/docs/utilities/Display/examples/Display.mjs

@@ -1,12 +1,4 @@
 import './Display.css';
 export default {
-  "displayBlock": "pf-v5-u-display-block",
-  "displayFlex": "pf-v5-u-display-flex",
-  "displayGrid": "pf-v5-u-display-grid",
-  "displayInline": "pf-v5-u-display-inline",
-  "displayInlineBlock": "pf-v5-u-display-inline-block",
-  "displayInlineFlex": "pf-v5-u-display-inline-flex",
-  "displayTable": "pf-v5-u-display-table",
-  "displayTableCell": "pf-v5-u-display-table-cell",
   "wsCoreUDisplay": "ws-core-u-display"
 };

package/css/utilities/Display/display.css

@@ -34,6 +34,14 @@
   display: inline-flex !important;
 }
 
+.pf-v5-u-display-grid {
+  display: grid !important;
+}
+
+.pf-v5-u-display-inline-grid {
+  display: inline-grid !important;
+}
+
 @media screen and (min-width: 576px) {
   .pf-v5-u-display-none-on-sm {
     display: none !important;
@@ -62,6 +70,12 @@
   .pf-v5-u-display-inline-flex-on-sm {
     display: inline-flex !important;
   }
+  .pf-v5-u-display-grid-on-sm {
+    display: grid !important;
+  }
+  .pf-v5-u-display-inline-grid-on-sm {
+    display: inline-grid !important;
+  }
 }
 @media screen and (min-width: 768px) {
   .pf-v5-u-display-none-on-md {
@@ -91,6 +105,12 @@
   .pf-v5-u-display-inline-flex-on-md {
     display: inline-flex !important;
   }
+  .pf-v5-u-display-grid-on-md {
+    display: grid !important;
+  }
+  .pf-v5-u-display-inline-grid-on-md {
+    display: inline-grid !important;
+  }
 }
 @media screen and (min-width: 992px) {
   .pf-v5-u-display-none-on-lg {
@@ -120,6 +140,12 @@
   .pf-v5-u-display-inline-flex-on-lg {
     display: inline-flex !important;
   }
+  .pf-v5-u-display-grid-on-lg {
+    display: grid !important;
+  }
+  .pf-v5-u-display-inline-grid-on-lg {
+    display: inline-grid !important;
+  }
 }
 @media screen and (min-width: 1200px) {
   .pf-v5-u-display-none-on-xl {
@@ -149,6 +175,12 @@
   .pf-v5-u-display-inline-flex-on-xl {
     display: inline-flex !important;
   }
+  .pf-v5-u-display-grid-on-xl {
+    display: grid !important;
+  }
+  .pf-v5-u-display-inline-grid-on-xl {
+    display: inline-grid !important;
+  }
 }
 @media screen and (min-width: 1450px) {
   .pf-v5-u-display-none-on-2xl {
@@ -178,4 +210,10 @@
   .pf-v5-u-display-inline-flex-on-2xl {
     display: inline-flex !important;
   }
+  .pf-v5-u-display-grid-on-2xl {
+    display: grid !important;
+  }
+  .pf-v5-u-display-inline-grid-on-2xl {
+    display: inline-grid !important;
+  }
 }

package/css/utilities/Display/display.d.ts

@@ -12,6 +12,12 @@ declare const _default: {
   "displayFlexOnSm": "pf-v5-u-display-flex-on-sm",
   "displayFlexOnXl": "pf-v5-u-display-flex-on-xl",
   "displayFlexOn_2xl": "pf-v5-u-display-flex-on-2xl",
+  "displayGrid": "pf-v5-u-display-grid",
+  "displayGridOnLg": "pf-v5-u-display-grid-on-lg",
+  "displayGridOnMd": "pf-v5-u-display-grid-on-md",
+  "displayGridOnSm": "pf-v5-u-display-grid-on-sm",
+  "displayGridOnXl": "pf-v5-u-display-grid-on-xl",
+  "displayGridOn_2xl": "pf-v5-u-display-grid-on-2xl",
   "displayInline": "pf-v5-u-display-inline",
   "displayInlineBlock": "pf-v5-u-display-inline-block",
   "displayInlineBlockOnLg": "pf-v5-u-display-inline-block-on-lg",
@@ -25,6 +31,12 @@ declare const _default: {
   "displayInlineFlexOnSm": "pf-v5-u-display-inline-flex-on-sm",
   "displayInlineFlexOnXl": "pf-v5-u-display-inline-flex-on-xl",
   "displayInlineFlexOn_2xl": "pf-v5-u-display-inline-flex-on-2xl",
+  "displayInlineGrid": "pf-v5-u-display-inline-grid",
+  "displayInlineGridOnLg": "pf-v5-u-display-inline-grid-on-lg",
+  "displayInlineGridOnMd": "pf-v5-u-display-inline-grid-on-md",
+  "displayInlineGridOnSm": "pf-v5-u-display-inline-grid-on-sm",
+  "displayInlineGridOnXl": "pf-v5-u-display-inline-grid-on-xl",
+  "displayInlineGridOn_2xl": "pf-v5-u-display-inline-grid-on-2xl",
   "displayInlineOnLg": "pf-v5-u-display-inline-on-lg",
   "displayInlineOnMd": "pf-v5-u-display-inline-on-md",
   "displayInlineOnSm": "pf-v5-u-display-inline-on-sm",

package/css/utilities/Display/display.js

@@ -14,6 +14,12 @@ exports.default = {
   "displayFlexOnSm": "pf-v5-u-display-flex-on-sm",
   "displayFlexOnXl": "pf-v5-u-display-flex-on-xl",
   "displayFlexOn_2xl": "pf-v5-u-display-flex-on-2xl",
+  "displayGrid": "pf-v5-u-display-grid",
+  "displayGridOnLg": "pf-v5-u-display-grid-on-lg",
+  "displayGridOnMd": "pf-v5-u-display-grid-on-md",
+  "displayGridOnSm": "pf-v5-u-display-grid-on-sm",
+  "displayGridOnXl": "pf-v5-u-display-grid-on-xl",
+  "displayGridOn_2xl": "pf-v5-u-display-grid-on-2xl",
   "displayInline": "pf-v5-u-display-inline",
   "displayInlineBlock": "pf-v5-u-display-inline-block",
   "displayInlineBlockOnLg": "pf-v5-u-display-inline-block-on-lg",
@@ -27,6 +33,12 @@ exports.default = {
   "displayInlineFlexOnSm": "pf-v5-u-display-inline-flex-on-sm",
   "displayInlineFlexOnXl": "pf-v5-u-display-inline-flex-on-xl",
   "displayInlineFlexOn_2xl": "pf-v5-u-display-inline-flex-on-2xl",
+  "displayInlineGrid": "pf-v5-u-display-inline-grid",
+  "displayInlineGridOnLg": "pf-v5-u-display-inline-grid-on-lg",
+  "displayInlineGridOnMd": "pf-v5-u-display-inline-grid-on-md",
+  "displayInlineGridOnSm": "pf-v5-u-display-inline-grid-on-sm",
+  "displayInlineGridOnXl": "pf-v5-u-display-inline-grid-on-xl",
+  "displayInlineGridOn_2xl": "pf-v5-u-display-inline-grid-on-2xl",
   "displayInlineOnLg": "pf-v5-u-display-inline-on-lg",
   "displayInlineOnMd": "pf-v5-u-display-inline-on-md",
   "displayInlineOnSm": "pf-v5-u-display-inline-on-sm",

package/css/utilities/Display/display.mjs

@@ -12,6 +12,12 @@ export default {
   "displayFlexOnSm": "pf-v5-u-display-flex-on-sm",
   "displayFlexOnXl": "pf-v5-u-display-flex-on-xl",
   "displayFlexOn_2xl": "pf-v5-u-display-flex-on-2xl",
+  "displayGrid": "pf-v5-u-display-grid",
+  "displayGridOnLg": "pf-v5-u-display-grid-on-lg",
+  "displayGridOnMd": "pf-v5-u-display-grid-on-md",
+  "displayGridOnSm": "pf-v5-u-display-grid-on-sm",
+  "displayGridOnXl": "pf-v5-u-display-grid-on-xl",
+  "displayGridOn_2xl": "pf-v5-u-display-grid-on-2xl",
   "displayInline": "pf-v5-u-display-inline",
   "displayInlineBlock": "pf-v5-u-display-inline-block",
   "displayInlineBlockOnLg": "pf-v5-u-display-inline-block-on-lg",
@@ -25,6 +31,12 @@ export default {
   "displayInlineFlexOnSm": "pf-v5-u-display-inline-flex-on-sm",
   "displayInlineFlexOnXl": "pf-v5-u-display-inline-flex-on-xl",
   "displayInlineFlexOn_2xl": "pf-v5-u-display-inline-flex-on-2xl",
+  "displayInlineGrid": "pf-v5-u-display-inline-grid",
+  "displayInlineGridOnLg": "pf-v5-u-display-inline-grid-on-lg",
+  "displayInlineGridOnMd": "pf-v5-u-display-inline-grid-on-md",
+  "displayInlineGridOnSm": "pf-v5-u-display-inline-grid-on-sm",
+  "displayInlineGridOnXl": "pf-v5-u-display-inline-grid-on-xl",
+  "displayInlineGridOn_2xl": "pf-v5-u-display-inline-grid-on-2xl",
   "displayInlineOnLg": "pf-v5-u-display-inline-on-lg",
   "displayInlineOnMd": "pf-v5-u-display-inline-on-md",
   "displayInlineOnSm": "pf-v5-u-display-inline-on-sm",

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,GAAG,CAAC,GAAG,IAAS;IAC9B,4EAA4E;IAC5E,MAAM,OAAO,GAAG,EAAc,CAAC;IAC/B,MAAM,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;IAEjC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACxC,MAAM,OAAO,GAAG,OAAO,GAAG,CAAC;QAE3B,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE;YAChD,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SACnB;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,EAAE;YAC3C,MAAM,KAAK,GAAG,GAAG,CAAC,GAAI,GAAW,CAAC,CAAC;YACnC,IAAI,KAAK,EAAE;gBACT,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACrB;SACF;aAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;YAC/B,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;gBACrB,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;oBACrC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;iBACnB;aACF;SACF;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,GAAG,CAAC,GAAG,IAAS;IAC9B,4EAA4E;IAC5E,MAAM,OAAO,GAAG,EAAc,CAAC;IAC/B,MAAM,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;IAEjC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACxC,MAAM,OAAO,GAAG,OAAO,GAAG,CAAC;QAE3B,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;YACjD,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;YAC5C,MAAM,KAAK,GAAG,GAAG,CAAC,GAAI,GAAW,CAAC,CAAC;YACnC,IAAI,KAAK,EAAE,CAAC;gBACV,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC;aAAM,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;YAChC,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;gBACtB,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBACtC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACpB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,CAAC"}

package/dist/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,SAAgB,GAAG,CAAC,GAAG,IAAS;IAC9B,4EAA4E;IAC5E,MAAM,OAAO,GAAG,EAAc,CAAC;IAC/B,MAAM,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;IAEjC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACxC,MAAM,OAAO,GAAG,OAAO,GAAG,CAAC;QAE3B,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE;YAChD,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SACnB;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,EAAE;YAC3C,MAAM,KAAK,GAAG,GAAG,CAAC,GAAI,GAAW,CAAC,CAAC;YACnC,IAAI,KAAK,EAAE;gBACT,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACrB;SACF;aAAM,IAAI,OAAO,KAAK,QAAQ,EAAE;YAC/B,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE;gBACrB,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE;oBACrC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;iBACnB;aACF;SACF;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,CAAC;AAzBD,kBAyBC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,SAAgB,GAAG,CAAC,GAAG,IAAS;IAC9B,4EAA4E;IAC5E,MAAM,OAAO,GAAG,EAAc,CAAC;IAC/B,MAAM,MAAM,GAAG,EAAE,CAAC,cAAc,CAAC;IAEjC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACxC,MAAM,OAAO,GAAG,OAAO,GAAG,CAAC;QAE3B,IAAI,OAAO,KAAK,QAAQ,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;YACjD,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,MAAM,EAAE,CAAC;YAC5C,MAAM,KAAK,GAAG,GAAG,CAAC,GAAI,GAAW,CAAC,CAAC;YACnC,IAAI,KAAK,EAAE,CAAC;gBACV,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtB,CAAC;QACH,CAAC;aAAM,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;YAChC,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;gBACtB,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBACtC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBACpB,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,CAAC;AAzBD,kBAyBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.4.0-prerelease.1",
+  "version": "5.4.0-prerelease.10",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -14,18 +14,14 @@
     "access": "public"
   },
   "scripts": {
-    "generate": "rimraf css && node scripts/writeClassMaps.js && node scripts/copyStyles.js",
+    "generate": "rimraf css && node scripts/writeClassMaps.mjs && node scripts/copyStyles.mjs",
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.3.0-prerelease.5",
-    "camel-case": "^3.0.0",
-    "css": "^2.2.3",
-    "fs-extra": "^11.1.1",
-    "glob": "^7.1.2",
-    "jsdom": "^15.1.0",
-    "typescript": "^4.7.4"
+    "@patternfly/patternfly": "5.4.0-prerelease.7",
+    "change-case": "^5.4.4",
+    "fs-extra": "^11.2.0"
   },
   "license": "MIT",
-  "gitHead": "340cea48ffda0cf75fee98ff10fff75d8e03f19d"
+  "gitHead": "b343abb86e05cc2a197da5e4a95f347dfda9bf49"
 }

package/scripts/copyStyles.mjs

@@ -0,0 +1,8 @@
+import { copySync } from 'fs-extra/esm';
+import path from 'node:path';
+import url from 'node:url';
+
+const toDir = path.resolve(import.meta.dirname, '../css');
+const fromDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/package.json')));
+
+copySync(path.join(fromDir, 'assets/images'), path.join(toDir, 'assets/images'));

package/scripts/{generateClassMaps.js → generateClassMaps.mjs}

@@ -1,7 +1,8 @@
-const path = require('path');
-const fs = require('fs-extra');
-const glob = require('glob');
-const camelcase = require('camel-case');
+import { camelCase } from 'change-case';
+import { glob } from 'glob';
+import fs from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
 
 /**
  * @param {string} cssString - CSS string
@@ -14,7 +15,7 @@ function getCSSClasses(cssString) {
  * @param {string} className - Class name
  */
 function formatClassName(className) {
-  return camelcase(className.replace(/pf-(v5-)?((c|l|m|u|is|has)-)?/g, ''));
+  return camelCase(className.replace(/pf-(v5-)?((c|l|m|u|is|has)-)?/g, ''));
 }
 
 /**
@@ -53,8 +54,8 @@ function getClassMaps(cssString) {
 /**
  * @returns {any} Map of file names to classMaps
  */
-function generateClassMaps() {
-  const pfStylesDir = path.dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
+export function generateClassMaps() {
+  const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/patternfly.css')));
 
   const patternflyCSSFiles = glob.sync('**/*.css', {
     cwd: pfStylesDir,
@@ -73,7 +74,3 @@ function generateClassMaps() {
 
   return res;
 }
-
-module.exports = {
-  generateClassMaps
-};

package/scripts/{writeClassMaps.js → writeClassMaps.mjs}

@@ -1,34 +1,36 @@
-const { join, basename, resolve, relative, dirname } = require('path');
-const { outputFileSync, copyFileSync } = require('fs-extra');
-const { generateClassMaps } = require('./generateClassMaps');
+import { outputFileSync } from 'fs-extra/esm';
+import fs from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+import { generateClassMaps } from './generateClassMaps.mjs';
 
-const outDir = resolve(__dirname, '../css');
+const outDir = path.resolve(import.meta.dirname, '../css');
 
 const writeCJSExport = (file, classMap) =>
   outputFileSync(
-    join(outDir, file.replace(/.css$/, '.js')),
+    path.join(outDir, file.replace(/.css$/, '.js')),
     `
 "use strict";
 exports.__esModule = true;
-require('./${basename(file, '.css.js')}');
+require('./${path.basename(file, '.css.js')}');
 exports.default = ${JSON.stringify(classMap, null, 2)};
 `.trim()
   );
 
 const writeESMExport = (file, classMap) =>
   outputFileSync(
-    join(outDir, file.replace(/.css$/, '.mjs')),
+    path.join(outDir, file.replace(/.css$/, '.mjs')),
     `
-import './${basename(file, '.css.js')}';
+import './${path.basename(file, '.css.js')}';
 export default ${JSON.stringify(classMap, null, 2)};
 `.trim()
   );
 
 const writeDTSExport = (file, classMap) =>
   outputFileSync(
-    join(outDir, file.replace(/.css$/, '.d.ts')),
+    path.join(outDir, file.replace(/.css$/, '.d.ts')),
     `
-import './${basename(file, '.css.js')}';
+import './${path.basename(file, '.css.js')}';
 declare const _default: ${JSON.stringify(classMap, null, 2)};
 export default _default;
 `.trim()
@@ -38,15 +40,15 @@ export default _default;
  * @param {any} classMaps Map of file names to classMaps
  */
 function writeClassMaps(classMaps) {
-  const pfStylesDir = dirname(require.resolve('@patternfly/patternfly/patternfly.css'));
+  const pfStylesDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/patternfly.css')));
 
   Object.entries(classMaps).forEach(([file, classMap]) => {
-    const outPath = file.includes(pfStylesDir) ? relative(pfStylesDir, file) : relative('src/css', file);
+    const outPath = file.includes(pfStylesDir) ? path.relative(pfStylesDir, file) : path.relative('src/css', file);
 
     writeCJSExport(outPath, classMap);
     writeDTSExport(outPath, classMap);
     writeESMExport(outPath, classMap);
-    copyFileSync(file, join(outDir, outPath));
+    fs.copyFileSync(file, path.join(outDir, outPath));
   });
 
   // eslint-disable-next-line no-console

package/css/docs/components/Pagination/examples/Pagination.css

@@ -1,3 +0,0 @@
-#ws-core-c-pagination-top-expanded {
-  height: 220px;
-}

package/css/docs/components/Pagination/examples/Pagination.d.ts

@@ -1,3 +0,0 @@
-import './Pagination.css';
-declare const _default: {};
-export default _default;

package/css/docs/components/Pagination/examples/Pagination.js

@@ -1,4 +0,0 @@
-"use strict";
-exports.__esModule = true;
-require('./Pagination.css');
-exports.default = {};

package/css/docs/components/Pagination/examples/Pagination.mjs

@@ -1,2 +0,0 @@
-import './Pagination.css';
-export default {};

package/scripts/copyStyles.js

@@ -1,7 +0,0 @@
-const { copySync } = require('fs-extra');
-const { resolve, dirname, join } = require('path');
-
-const toDir = resolve(__dirname, '../css');
-const fromDir = dirname(require.resolve('@patternfly/patternfly/package.json'));
-
-copySync(join(fromDir, 'assets/images'), join(toDir, 'assets/images'));