@patternfly/react-styles 5.0.0-alpha.4 → 5.0.0-alpha.5

package/css/components/Table/table-scrollable.css

@@ -1,37 +1,42 @@
 .pf-c-table {
-  --pf-c-table__sticky-column--cell-min-width--base: 12.5rem;
-  --pf-c-table__sticky-column--MinWidth: var(--pf-c-table__sticky-column--cell-min-width--base);
-  --pf-c-table__sticky-column--Left: 0;
-  --pf-c-table__sticky-column--ZIndex: var(--pf-global--ZIndex--md);
-  --pf-c-table__sticky-column--Top: 0;
-  --pf-c-table__sticky-column--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-table__sticky-column--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-table__sticky-column--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
-  --pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-table__sticky-column--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
-  --pf-c-table--m-sticky-header--thead__sticky-column--ZIndex: calc(var(--pf-c-table__sticky-column--ZIndex) + 1);
+  --pf-c-table__sticky-cell--MinWidth--base: 12.5rem;
+  --pf-c-table__sticky-cell--MinWidth: var(--pf-c-table__sticky-cell--MinWidth--base);
+  --pf-c-table__sticky-cell--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-table__sticky-cell--Right: auto;
+  --pf-c-table__sticky-cell--Left: auto;
+  --pf-c-table__sticky-cell--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-cell--m-border-right--before--BorderRightColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor: var(--pf-global--BorderColor--100);
+  --pf-c-table__sticky-cell--m-right--Right: 0;
+  --pf-c-table__sticky-cell--m-left--Left: 0;
+  --pf-c-table--m-sticky-header__sticky-cell--ZIndex: calc(var(--pf-c-table__sticky-cell--ZIndex) + 1);
 }
-.pf-c-table .pf-c-table__sticky-column {
+.pf-c-table .pf-c-table__sticky-cell {
+  --pf-c-table--cell--Overflow: visible;
+  --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-c-table--m-sticky-header__sticky-cell--ZIndex);
   position: sticky;
-  left: var(--pf-c-table__sticky-column--Left);
-  z-index: var(--pf-c-table__sticky-column--ZIndex);
-  min-width: var(--pf-c-table__sticky-column--MinWidth);
-  background-color: var(--pf-c-table__sticky-column--BackgroundColor);
+  right: var(--pf-c-table__sticky-cell--Right);
+  left: var(--pf-c-table__sticky-cell--Left);
+  z-index: var(--pf-c-table__sticky-cell--ZIndex);
+  min-width: var(--pf-c-table__sticky-cell--MinWidth);
+  background-color: var(--pf-c-table__sticky-cell--BackgroundColor);
   background-clip: padding-box;
 }
-.pf-c-table .pf-c-table__sticky-column.pf-m-border-right::before {
-  --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightWidth);
-  --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-column--m-border-right--before--BorderRightColor);
+.pf-c-table .pf-c-table__sticky-cell.pf-m-border-right::before {
+  --pf-c-table--cell--m-border-right--before--BorderRightWidth: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightWidth);
+  --pf-c-table--cell--m-border-right--before--BorderRightColor: var(--pf-c-table__sticky-cell--m-border-right--before--BorderRightColor);
 }
-.pf-c-table .pf-c-table__sticky-column.pf-m-border-left::before {
-  --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftWidth);
-  --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-column--m-border-left--before--BorderLeftColor);
+.pf-c-table .pf-c-table__sticky-cell.pf-m-border-left::before {
+  --pf-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
+  --pf-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
 }
-.pf-c-table.pf-m-sticky-header {
-  --pf-c-table--cell--Overflow: visible;
+.pf-c-table .pf-c-table__sticky-cell.pf-m-right {
+  --pf-c-table__sticky-cell--Right: var(--pf-c-table__sticky-cell--m-right--Right);
 }
-.pf-c-table.pf-m-sticky-header thead .pf-c-table__sticky-column {
-  z-index: var(--pf-c-table--m-sticky-header--thead__sticky-column--ZIndex);
+.pf-c-table .pf-c-table__sticky-cell.pf-m-left {
+  --pf-c-table__sticky-cell--Left: var(--pf-c-table__sticky-cell--m-left--Left);
 }
 
 .pf-c-scroll-outer-wrapper {

package/css/components/Table/table-scrollable.d.ts

@@ -3,11 +3,12 @@ declare const _default: {
   "modifiers": {
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "stickyHeader": "pf-m-sticky-header"
+    "right": "pf-m-right",
+    "left": "pf-m-left"
   },
   "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
   "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
   "table": "pf-c-table",
-  "tableStickyColumn": "pf-c-table__sticky-column"
+  "tableStickyCell": "pf-c-table__sticky-cell"
 };
 export default _default;

package/css/components/Table/table-scrollable.js

@@ -5,10 +5,11 @@ exports.default = {
   "modifiers": {
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "stickyHeader": "pf-m-sticky-header"
+    "right": "pf-m-right",
+    "left": "pf-m-left"
   },
   "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
   "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
   "table": "pf-c-table",
-  "tableStickyColumn": "pf-c-table__sticky-column"
+  "tableStickyCell": "pf-c-table__sticky-cell"
 };

package/css/components/Table/table-scrollable.mjs

@@ -3,10 +3,11 @@ export default {
   "modifiers": {
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "stickyHeader": "pf-m-sticky-header"
+    "right": "pf-m-right",
+    "left": "pf-m-left"
   },
   "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
   "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
   "table": "pf-c-table",
-  "tableStickyColumn": "pf-c-table__sticky-column"
+  "tableStickyCell": "pf-c-table__sticky-cell"
 };

package/css/components/Table/table.css

@@ -261,6 +261,7 @@
   --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-table__subhead--Color: var(--pf-global--Color--200);
   --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
+  --pf-c-table--m-sticky-header--cell--ZIndex: var(--pf-global--ZIndex--xs);
   color: var(--pf-global--Color--100);
   width: 100%;
   background-color: var(--pf-c-table--BackgroundColor);
@@ -289,7 +290,7 @@
   border-bottom: 0;
 }
 .pf-c-table.pf-m-sticky-header > thead > tr > * {
-  z-index: var(--pf-global--ZIndex--xs);
+  z-index: var(--pf-c-table--m-sticky-header--cell--ZIndex);
 }
 .pf-c-table.pf-m-sticky-header > thead:not(.pf-m-nested-column-header) > tr > * {
   position: sticky;
@@ -660,9 +661,9 @@
 .pf-c-table__button-content,
 .pf-c-table__column-help {
   display: grid;
+  grid-template-columns: auto max-content;
   align-items: end;
   justify-content: start;
-  grid-template-columns: auto max-content;
 }
 .pf-c-table__button-content .pf-c-table__text,
 .pf-c-table__column-help .pf-c-table__text {

package/css/components/TextInputGroup/text-input-group.css

@@ -78,9 +78,9 @@
 
 .pf-c-text-input-group__text {
   display: inline-grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "text-input";
   flex: 1;
+  grid-template-areas: "text-input";
+  grid-template-columns: 1fr;
 }
 .pf-c-text-input-group__text::before, .pf-c-text-input-group__text::after {
   position: absolute;

package/css/components/Tile/tile.css

@@ -42,11 +42,11 @@
   --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
   position: relative;
   display: inline-grid;
+  grid-template-rows: min-content;
   padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
   text-align: center;
   cursor: pointer;
   background-color: var(--pf-c-tile--BackgroundColor);
-  grid-template-rows: min-content;
   transition: var(--pf-c-tile--Transition);
   transform: translateY(var(--pf-c-tile--TranslateY));
 }

package/css/components/Timestamp/timestamp.css

@@ -17,12 +17,12 @@
   outline-offset: var(--pf-c-timestamp--OutlineOffset);
 }
 .pf-c-timestamp.pf-m-help-text {
-  cursor: pointer;
   text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
-  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
   text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
-  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
   text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  cursor: pointer;
 }
 .pf-c-timestamp.pf-m-help-text:hover {
   --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);

package/css/components/Toolbar/toolbar.css

@@ -49,26 +49,30 @@
 
 .pf-c-toolbar {
   --pf-c-toolbar--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-toolbar--RowGap: var(--pf-global--spacer--lg);
+  --pf-c-toolbar--RowGap--base: var(--pf-global--spacer--lg);
+  --pf-c-toolbar--RowGap: var(--pf-c-toolbar--RowGap--base);
   --pf-c-toolbar--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-toolbar--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-toolbar--item--RowGap--base: var(--pf-global--spacer--xs);
   --pf-c-toolbar__item--Display: block;
   --pf-c-toolbar__item--MinWidth--base: auto;
   --pf-c-toolbar__item--AlignSelf: auto;
   --pf-c-toolbar__group--Display: flex;
   --pf-c-toolbar__group--AlignItems: baseline;
   --pf-c-toolbar__group--AlignSelf: auto;
+  --pf-c-toolbar__group--RowGap: var(--pf-c-toolbar--item--RowGap--base);
   --pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-toolbar--m-sticky--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-toolbar__content--Display: flex;
+  --pf-c-toolbar__content--RowGap: var(--pf-c-toolbar--RowGap--base);
   --pf-c-toolbar__content--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-toolbar__content--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-toolbar__content-section--Display: flex;
   --pf-c-toolbar__content-section--AlignItems: baseline;
+  --pf-c-toolbar__content-section--RowGap: var(--pf-c-toolbar--item--RowGap--base);
   --pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md);
   --pf-c-toolbar--m-page-insets--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-toolbar__expandable-content--Display: grid;
-  --pf-c-toolbar__expandable-content--PaddingTop: var(--pf-c-toolbar--RowGap);
   --pf-c-toolbar__expandable-content--PaddingRight: var(--pf-c-toolbar__content--PaddingRight);
   --pf-c-toolbar__expandable-content--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-toolbar__expandable-content--PaddingLeft: var(--pf-c-toolbar__content--PaddingLeft);
@@ -111,8 +115,8 @@
   --pf-c-toolbar--m-full-height__item--Display: flex;
   --pf-c-toolbar--m-full-height__item--AlignItems: center;
   position: relative;
-  row-gap: var(--pf-c-toolbar--RowGap);
   display: grid;
+  row-gap: var(--pf-c-toolbar--RowGap);
   padding-top: var(--pf-c-toolbar--PaddingTop);
   padding-bottom: var(--pf-c-toolbar--PaddingBottom);
   background-color: var(--pf-c-toolbar--BackgroundColor);
@@ -186,6 +190,7 @@
 .pf-c-toolbar__group {
   --pf-c-toolbar--spacer: var(--pf-c-toolbar__group--spacer);
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__group--Display);
+  row-gap: var(--pf-c-toolbar__group--RowGap);
   align-items: var(--pf-c-toolbar__group--AlignItems);
   align-self: var(--pf-c-toolbar__group--AlignSelf);
   margin-right: var(--pf-c-toolbar--spacer);
@@ -352,6 +357,7 @@
 .pf-c-toolbar__content {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content--Display);
   position: relative;
+  row-gap: var(--pf-c-toolbar__content--RowGap);
   align-items: center;
   padding-right: var(--pf-c-toolbar__content--PaddingRight);
   padding-left: var(--pf-c-toolbar__content--PaddingLeft);
@@ -359,6 +365,7 @@
 
 .pf-c-toolbar__content-section {
   --pf-hidden-visible--visible--Display: var(--pf-c-toolbar__content-section--Display);
+  row-gap: var(--pf-c-toolbar__content-section--RowGap);
   align-items: var(--pf-c-toolbar__content-section--AlignItems);
   width: 100%;
 }
@@ -368,13 +375,13 @@
 
 .pf-c-toolbar__expandable-content {
   position: absolute;
-  top: 100%;
+  top: calc(100% + var(--pf-c-toolbar__content--RowGap));
   right: 0;
   left: 0;
   z-index: var(--pf-c-toolbar__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: var(--pf-c-toolbar__expandable-content--PaddingTop) var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
+  padding: 0 var(--pf-c-toolbar__expandable-content--PaddingRight) var(--pf-c-toolbar__expandable-content--PaddingBottom) var(--pf-c-toolbar__expandable-content--PaddingLeft);
   background-color: var(--pf-c-toolbar__expandable-content--BackgroundColor);
   box-shadow: var(--pf-c-toolbar__expandable-content--BoxShadow);
 }
@@ -405,9 +412,9 @@
 .pf-c-toolbar__group.pf-m-chip-container {
   display: flex;
   flex-wrap: wrap;
+  grid-row-gap: 0;
   align-items: baseline;
   margin-top: var(--pf-c-toolbar__group--m-chip-container--MarginTop);
-  grid-row-gap: 0;
 }
 .pf-c-toolbar__content.pf-m-chip-container .pf-c-toolbar__item,
 .pf-c-toolbar__group.pf-m-chip-container .pf-c-toolbar__item {

package/css/components/Wizard/wizard.css

@@ -47,6 +47,10 @@
   --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
   --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
+  --pf-c-wizard__title-text--FontSize: var(--pf-global--FontSize--3xl);
+  --pf-c-wizard__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-wizard__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-wizard__title-text--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
   --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
@@ -230,6 +234,8 @@
   position: absolute;
   top: var(--pf-c-wizard__close--Top);
   right: var(--pf-c-wizard__close--Right);
+}
+.pf-c-wizard__header .pf-c-wizard__close button {
   font-size: var(--pf-c-wizard__close--FontSize);
 }
 
@@ -238,6 +244,13 @@
   word-wrap: break-word;
 }
 
+.pf-c-wizard__title-text {
+  font-family: var(--pf-c-wizard__title-text--FontFamily);
+  font-size: var(--pf-c-wizard__title-text--FontSize);
+  font-weight: var(--pf-c-wizard__title-text--FontWeight);
+  line-height: var(--pf-c-wizard__title-text--LineHeight);
+}
+
 .pf-c-wizard__description {
   display: none;
   padding-top: var(--pf-c-wizard__description--PaddingTop);
@@ -486,8 +499,8 @@
   position: relative;
   z-index: var(--pf-c-wizard__footer--ZIndex);
   display: flex;
-  flex-wrap: wrap;
   flex-shrink: 0;
+  flex-wrap: wrap;
   padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
   background-color: var(--pf-c-wizard__footer--BackgroundColor);
 }

package/css/components/Wizard/wizard.d.ts

@@ -32,6 +32,7 @@ declare const _default: {
   "wizardNavList": "pf-c-wizard__nav-list",
   "wizardOuterWrap": "pf-c-wizard__outer-wrap",
   "wizardTitle": "pf-c-wizard__title",
+  "wizardTitleText": "pf-c-wizard__title-text",
   "wizardToggle": "pf-c-wizard__toggle",
   "wizardToggleIcon": "pf-c-wizard__toggle-icon",
   "wizardToggleList": "pf-c-wizard__toggle-list",

package/css/components/Wizard/wizard.js

@@ -34,6 +34,7 @@ exports.default = {
   "wizardNavList": "pf-c-wizard__nav-list",
   "wizardOuterWrap": "pf-c-wizard__outer-wrap",
   "wizardTitle": "pf-c-wizard__title",
+  "wizardTitleText": "pf-c-wizard__title-text",
   "wizardToggle": "pf-c-wizard__toggle",
   "wizardToggleIcon": "pf-c-wizard__toggle-icon",
   "wizardToggleList": "pf-c-wizard__toggle-list",

package/css/components/Wizard/wizard.mjs

@@ -32,6 +32,7 @@ export default {
   "wizardNavList": "pf-c-wizard__nav-list",
   "wizardOuterWrap": "pf-c-wizard__outer-wrap",
   "wizardTitle": "pf-c-wizard__title",
+  "wizardTitleText": "pf-c-wizard__title-text",
   "wizardToggle": "pf-c-wizard__toggle",
   "wizardToggleIcon": "pf-c-wizard__toggle-icon",
   "wizardToggleList": "pf-c-wizard__toggle-list",

package/css/docs/components/Table/examples/Table.css

@@ -9,6 +9,10 @@
   top: -18px;
 }
 
+#ws-core-c-table-sticky-header .ws-preview-html {
+  height: 300px;
+}
+
 #ws-core-c-table-sticky-columns-and-header .ws-preview-html {
   height: 600px;
 }

package/css/layouts/Gallery/gallery.css

@@ -7,8 +7,8 @@
   --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
   --pf-l-gallery--GridTemplateRows: auto;
   display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
   grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
   --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
   --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
 }

package/css/layouts/Grid/grid.css

@@ -8,10 +8,10 @@
 }
 .pf-l-grid > *,
 .pf-l-grid .pf-l-grid__item {
-  min-width: 0;
-  min-height: 0;
   grid-column-start: var(--pf-l-grid__item--GridColumnStart);
   grid-column-end: var(--pf-l-grid__item--GridColumnEnd);
+  min-width: 0;
+  min-height: 0;
   order: var(--pf-l-grid--item--Order);
 }
 @media (min-width: 576px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.0.0-alpha.4",
+  "version": "5.0.0-alpha.5",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.24",
+    "@patternfly/patternfly": "5.0.0-alpha.33",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "1686e14afb758f8ce45881ca0cdab6bc0ea1c403"
+  "gitHead": "d783cc19e80a771ef14a16b9f2a3a71ce11e6225"
 }