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

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 5.0.0-alpha.5 (2023-03-18)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 # 5.0.0-alpha.4 (2023-03-02)
 
 ### Bug Fixes

package/css/components/AboutModalBox/about-modal-box.css

@@ -80,8 +80,8 @@
   color: var(--pf-global--Color--100);
   position: relative;
   display: grid;
-  grid-template-rows: max-content max-content auto;
   grid-template-areas: "brand close" "header header" "content content";
+  grid-template-rows: max-content max-content auto;
   width: var(--pf-c-about-modal-box--Width);
   height: var(--pf-c-about-modal-box--Height);
   overflow-x: hidden;
@@ -127,22 +127,22 @@
 }
 @media only screen and (min-width: 576px) {
   .pf-c-about-modal-box {
-    grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
     grid-template-areas: "brand          hero" "header         hero" "content        hero";
+    grid-template-columns: var(--pf-c-about-modal-box--sm--grid-template-columns);
   }
 }
 @media only screen and (min-width: 992px) {
   .pf-c-about-modal-box {
     --pf-c-about-modal-box--Height: var(--pf-c-about-modal-box--lg--Height);
     --pf-c-about-modal-box--Width: var(--pf-c-about-modal-box--lg--Width);
-    grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
     grid-template-rows: max-content max-content auto;
+    grid-template-columns: var(--pf-c-about-modal-box--lg--grid-template-columns);
   }
 }
 
 .pf-c-about-modal-box__brand {
-  grid-area: brand;
   display: flex;
+  grid-area: brand;
   padding: var(--pf-c-about-modal-box__brand--PaddingTop) var(--pf-c-about-modal-box__brand--PaddingRight) var(--pf-c-about-modal-box__brand--PaddingBottom) var(--pf-c-about-modal-box__brand--PaddingLeft);
 }
 
@@ -151,9 +151,9 @@
 }
 
 .pf-c-about-modal-box__header {
-  grid-area: header;
   display: flex;
   flex-direction: column;
+  grid-area: header;
   padding-right: var(--pf-c-about-modal-box__header--PaddingRight);
   padding-bottom: var(--pf-c-about-modal-box__header--PaddingBottom);
   padding-left: var(--pf-c-about-modal-box__header--PaddingLeft);
@@ -184,10 +184,10 @@
 }
 
 .pf-c-about-modal-box__close {
-  grid-area: close;
   position: sticky;
   top: 0;
   display: flex;
+  grid-area: close;
   align-items: flex-start;
   justify-content: flex-end;
   padding-top: var(--pf-c-about-modal-box__close--PaddingTop);
@@ -226,12 +226,12 @@
 @media only screen and (min-width: 576px) {
   .pf-c-about-modal-box__hero {
     display: block;
+    grid-area: hero;
     background-image: var(--pf-c-about-modal-box__hero--sm--BackgroundImage);
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: var(--pf-c-about-modal-box__hero--sm--BackgroundPosition);
     background-size: var(--pf-c-about-modal-box__hero--sm--BackgroundSize);
-    grid-area: hero;
   }
 }
 

package/css/components/Alert/alert.css

@@ -80,13 +80,13 @@
   color: var(--pf-global--Color--100);
   position: relative;
   display: grid;
+  grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
+  grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
   padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
   font-size: var(--pf-c-alert__FontSize);
   background-color: var(--pf-c-alert--BackgroundColor);
   border-top: var(--pf-c-alert--BorderTopWidth) solid var(--pf-c-alert--BorderTopColor);
   box-shadow: var(--pf-c-alert--BoxShadow);
-  grid-template-columns: var(--pf-c-alert--GridTemplateColumns);
-  grid-template-areas: var(--pf-c-alert--GridTemplateAreas);
 }
 .pf-c-alert.pf-m-success {
   --pf-c-alert--BorderTopColor: var(--pf-c-alert--m-success--BorderTopColor);
@@ -147,8 +147,8 @@
 }
 
 .pf-c-alert__icon {
-  grid-area: icon;
   display: flex;
+  grid-area: icon;
   margin-top: var(--pf-c-alert__icon--MarginTop);
   margin-right: var(--pf-c-alert__icon--MarginRight);
   font-size: var(--pf-c-alert__icon--FontSize);

package/css/components/Banner/banner.css

@@ -1,4 +1,4 @@
-.pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
+.pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
   --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -55,18 +55,18 @@
   --pf-c-banner--link--hover--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-banner--link--disabled--Color: var(--pf-c-banner--Color);
   --pf-c-banner--link--disabled--TextDecoration: none;
-  --pf-c-banner--m-info--BackgroundColor: var(--pf-global--palette--blue-200);
-  --pf-c-banner--m-danger--BackgroundColor: var(--pf-global--danger-color--100);
-  --pf-c-banner--m-success--BackgroundColor: var(--pf-global--success-color--100);
-  --pf-c-banner--m-warning--BackgroundColor: var(--pf-global--warning-color--100);
+  --pf-c-banner--m-blue--BackgroundColor: var(--pf-global--palette--blue-200);
+  --pf-c-banner--m-red--BackgroundColor: var(--pf-global--palette--red-100);
+  --pf-c-banner--m-green--BackgroundColor: var(--pf-global--palette--green-500);
+  --pf-c-banner--m-gold--BackgroundColor: var(--pf-global--palette--gold-400);
   --pf-c-banner--m-sticky--ZIndex: var(--pf-global--ZIndex--md);
   --pf-c-banner--m-sticky--BoxShadow: var(--pf-global--BoxShadow--md-bottom);
   color: var(--pf-global--Color--100);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding: var(--pf-c-banner--PaddingTop) var(--pf-c-banner--PaddingRight) var(--pf-c-banner--PaddingBottom) var(--pf-c-banner--PaddingLeft);
   flex-shrink: 0;
+  padding: var(--pf-c-banner--PaddingTop) var(--pf-c-banner--PaddingRight) var(--pf-c-banner--PaddingBottom) var(--pf-c-banner--PaddingLeft);
   font-size: var(--pf-c-banner--FontSize);
   color: var(--pf-c-banner--Color);
   white-space: nowrap;
@@ -78,19 +78,19 @@
     --pf-c-banner--PaddingLeft: var(--pf-c-banner--md--PaddingLeft);
   }
 }
-.pf-c-banner.pf-m-info, .pf-c-banner.pf-m-blue {
+.pf-c-banner.pf-m-blue {
   color: var(--pf-global--Color--100);
-  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-info--BackgroundColor);
+  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-blue--BackgroundColor);
 }
-.pf-c-banner.pf-m-danger, .pf-c-banner.pf-m-red {
-  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-danger--BackgroundColor);
+.pf-c-banner.pf-m-red {
+  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-red--BackgroundColor);
 }
-.pf-c-banner.pf-m-success, .pf-c-banner.pf-m-green {
-  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-success--BackgroundColor);
+.pf-c-banner.pf-m-green {
+  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-green--BackgroundColor);
 }
-.pf-c-banner.pf-m-warning, .pf-c-banner.pf-m-gold {
+.pf-c-banner.pf-m-gold {
   color: var(--pf-global--Color--100);
-  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-warning--BackgroundColor);
+  --pf-c-banner--BackgroundColor: var(--pf-c-banner--m-gold--BackgroundColor);
 }
 .pf-c-banner.pf-m-sticky {
   position: sticky;

package/css/components/Banner/banner.d.ts

@@ -4,17 +4,17 @@ declare const _default: {
   "button": "pf-c-button",
   "card": "pf-c-card",
   "modifiers": {
-    "warning": "pf-m-warning",
     "gold": "pf-m-gold",
-    "info": "pf-m-info",
     "blue": "pf-m-blue",
-    "danger": "pf-m-danger",
     "red": "pf-m-red",
-    "success": "pf-m-success",
     "green": "pf-m-green",
     "sticky": "pf-m-sticky",
     "disabled": "pf-m-disabled",
-    "inline": "pf-m-inline"
+    "inline": "pf-m-inline",
+    "info": "pf-m-info",
+    "danger": "pf-m-danger",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning"
   },
   "themeDark": "pf-theme-dark"
 };

package/css/components/Banner/banner.js

@@ -6,17 +6,17 @@ exports.default = {
   "button": "pf-c-button",
   "card": "pf-c-card",
   "modifiers": {
-    "warning": "pf-m-warning",
     "gold": "pf-m-gold",
-    "info": "pf-m-info",
     "blue": "pf-m-blue",
-    "danger": "pf-m-danger",
     "red": "pf-m-red",
-    "success": "pf-m-success",
     "green": "pf-m-green",
     "sticky": "pf-m-sticky",
     "disabled": "pf-m-disabled",
-    "inline": "pf-m-inline"
+    "inline": "pf-m-inline",
+    "info": "pf-m-info",
+    "danger": "pf-m-danger",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning"
   },
   "themeDark": "pf-theme-dark"
 };

package/css/components/Banner/banner.mjs

@@ -4,17 +4,17 @@ export default {
   "button": "pf-c-button",
   "card": "pf-c-card",
   "modifiers": {
-    "warning": "pf-m-warning",
     "gold": "pf-m-gold",
-    "info": "pf-m-info",
     "blue": "pf-m-blue",
-    "danger": "pf-m-danger",
     "red": "pf-m-red",
-    "success": "pf-m-success",
     "green": "pf-m-green",
     "sticky": "pf-m-sticky",
     "disabled": "pf-m-disabled",
-    "inline": "pf-m-inline"
+    "inline": "pf-m-inline",
+    "info": "pf-m-info",
+    "danger": "pf-m-danger",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning"
   },
   "themeDark": "pf-theme-dark"
 };

package/css/components/CalendarMonth/calendar-month.css

@@ -193,9 +193,9 @@
   box-shadow: var(--pf-c-calendar-month__date--focus--BoxShadow);
 }
 .pf-c-calendar-month__date:disabled {
-  pointer-events: none;
   --pf-c-calendar-month__date--Color: var(--pf-c-calendar-month__date--disabled--Color);
   --pf-c-calendar-month__date--hover--focus--BorderColor: transparent;
+  pointer-events: none;
 }
 
 :where(.pf-theme-dark) .pf-c-calendar-month {

package/css/components/Card/card.css

@@ -6,10 +6,11 @@
   --pf-c-card--child--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-card--child--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-card--c-divider--child--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-card__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-card__title--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-card__title--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-card__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-card__title-text--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-card__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-card__title-text--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-card__body--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__footer--FontSize: var(--pf-global--FontSize--md);
   --pf-c-card__actions--PaddingLeft: var(--pf-global--spacer--md);
@@ -71,7 +72,7 @@
   --pf-c-card--m-compact--child--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-card--m-compact--c-divider--child--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-card--m-compact__title--not--last-child--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-card--m-display-lg__title--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-card--m-display-lg__title-text--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-card--m-display-lg--first-child--PaddingTop: var(--pf-global--spacer--xl);
   --pf-c-card--m-display-lg--child--PaddingRight: var(--pf-global--spacer--xl);
   --pf-c-card--m-display-lg--child--PaddingBottom: var(--pf-global--spacer--xl);
@@ -183,7 +184,7 @@
   --pf-c-card__title--not--last-child--PaddingBottom: var(--pf-c-card--m-compact__title--not--last-child--PaddingBottom);
 }
 .pf-c-card.pf-m-display-lg {
-  --pf-c-card__title--FontSize: var(--pf-c-card--m-display-lg__title--FontSize);
+  --pf-c-card__title-text--FontSize: var(--pf-c-card--m-display-lg__title-text--FontSize);
   --pf-c-card--first-child--PaddingTop: var(--pf-c-card--m-display-lg--first-child--PaddingTop);
   --pf-c-card--child--PaddingRight: var(--pf-c-card--m-display-lg--child--PaddingRight);
   --pf-c-card--child--PaddingBottom: var(--pf-c-card--m-display-lg--child--PaddingBottom);
@@ -249,20 +250,21 @@
   transition: var(--pf-c-card__header-toggle-icon--Transition);
 }
 
-.pf-c-card__title {
-  font-family: var(--pf-c-card__title--FontFamily);
-  font-size: var(--pf-c-card__title--FontSize);
-  font-weight: var(--pf-c-card__title--FontWeight);
+.pf-c-card__title-text {
+  font-family: var(--pf-c-card__title-text--FontFamily);
+  font-size: var(--pf-c-card__title-text--FontSize);
+  font-weight: var(--pf-c-card__title-text--FontWeight);
+  line-height: var(--pf-c-card__title-text--LineHeight);
 }
 
 .pf-c-card__actions {
   display: flex;
+  gap: var(--pf-c-card__actions--Gap);
   align-items: center;
   align-self: flex-start;
   order: 1;
   padding-left: var(--pf-c-card__actions--PaddingLeft);
   margin: var(--pf-c-card__actions--MarginTop) 0 var(--pf-c-card__actions--MarginBottom) auto;
-  gap: var(--pf-c-card__actions--Gap);
 }
 .pf-c-card__actions + .pf-c-card__title,
 .pf-c-card__actions + .pf-c-card__body,

package/css/components/Card/card.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
   "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
   "cardSrInput": "pf-c-card__sr-input",
   "cardTitle": "pf-c-card__title",
+  "cardTitleText": "pf-c-card__title-text",
   "divider": "pf-c-divider",
   "modifiers": {
     "hoverable": "pf-m-hoverable",

package/css/components/Card/card.js

@@ -13,6 +13,7 @@ exports.default = {
   "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
   "cardSrInput": "pf-c-card__sr-input",
   "cardTitle": "pf-c-card__title",
+  "cardTitleText": "pf-c-card__title-text",
   "divider": "pf-c-divider",
   "modifiers": {
     "hoverable": "pf-m-hoverable",

package/css/components/Card/card.mjs

@@ -11,6 +11,7 @@ export default {
   "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
   "cardSrInput": "pf-c-card__sr-input",
   "cardTitle": "pf-c-card__title",
+  "cardTitleText": "pf-c-card__title-text",
   "divider": "pf-c-divider",
   "modifiers": {
     "hoverable": "pf-m-hoverable",

package/css/components/Chip/chip.css

@@ -86,8 +86,8 @@
 
 .pf-c-chip__content {
   display: flex;
-  align-items: center;
   column-gap: var(--pf-c-chip__content--ColumnGap);
+  align-items: center;
   font-size: var(--pf-c-chip__content--FontSize);
 }
 

package/css/components/ChipGroup/chip-group.css

@@ -30,13 +30,13 @@
   --pf-c-chip-group__label--MaxWidth: 18ch;
   --pf-c-chip-group__close--MarginTop: calc(var(--pf-global--spacer--xs) * -1);
   --pf-c-chip-group__close--MarginBottom: calc(var(--pf-global--spacer--xs) * -1);
+  row-gap: var(--pf-c-chip-group--RowGap);
+  column-gap: var(--pf-c-chip-group--ColumnGap);
   max-width: 100%;
   padding-top: var(--pf-c-chip-group--PaddingTop);
   padding-right: var(--pf-c-chip-group--PaddingRight);
   padding-bottom: var(--pf-c-chip-group--PaddingBottom);
   padding-left: var(--pf-c-chip-group--PaddingLeft);
-  row-gap: var(--pf-c-chip-group--RowGap);
-  column-gap: var(--pf-c-chip-group--ColumnGap);
 }
 .pf-c-chip-group.pf-m-category {
   --pf-c-chip-group--PaddingTop: var(--pf-c-chip-group--m-category--PaddingTop);
@@ -51,10 +51,10 @@
   display: flex;
   flex: 1;
   flex-wrap: wrap;
-  align-items: baseline;
-  min-width: 0;
   row-gap: var(--pf-c-chip-group__main--RowGap);
   column-gap: var(--pf-c-chip-group__main--ColumnGap);
+  align-items: baseline;
+  min-width: 0;
 }
 
 .pf-c-chip-group,

package/css/components/Content/content.css

@@ -199,12 +199,12 @@
   margin-left: var(--pf-c-content--ol--MarginLeft);
 }
 .pf-c-content ol ul {
-  margin-top: var(--pf-c-content--ul--nested--MarginTop);
   --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
+  margin-top: var(--pf-c-content--ul--nested--MarginTop);
 }
 .pf-c-content ol ol {
-  margin-top: var(--pf-c-content--ol--nested--MarginTop);
   --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
+  margin-top: var(--pf-c-content--ol--nested--MarginTop);
 }
 .pf-c-content ul {
   padding-left: var(--pf-c-content--ul--PaddingLeft);
@@ -212,12 +212,12 @@
   list-style: var(--pf-c-content--ul--ListStyle);
 }
 .pf-c-content ul ul {
-  margin-top: var(--pf-c-content--ul--nested--MarginTop);
   --pf-c-content--ul--MarginLeft: var(--pf-c-content--ul--nested--MarginLeft);
+  margin-top: var(--pf-c-content--ul--nested--MarginTop);
 }
 .pf-c-content ul ol {
-  margin-top: var(--pf-c-content--ol--nested--MarginTop);
   --pf-c-content--ol--MarginLeft: var(--pf-c-content--ol--nested--MarginLeft);
+  margin-top: var(--pf-c-content--ol--nested--MarginTop);
 }
 .pf-c-content dl {
   display: grid;
@@ -226,8 +226,8 @@
 @media screen and (min-width: 576px) {
   .pf-c-content dl {
     grid-template: auto/auto 1fr;
-    grid-column-gap: var(--pf-c-content--dl--ColumnGap);
     grid-row-gap: var(--pf-c-content--dl--RowGap);
+    grid-column-gap: var(--pf-c-content--dl--ColumnGap);
   }
 }
 .pf-c-content dt {

package/css/components/DataList/data-list-grid.css

@@ -21,8 +21,8 @@
 @media screen and (min-width: 768px) {
   .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -83,8 +83,8 @@
 @media screen and (min-width: 0) {
   .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -145,8 +145,8 @@
 @media screen and (min-width: 576px) {
   .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -207,8 +207,8 @@
 @media screen and (min-width: 768px) {
   .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -269,8 +269,8 @@
 @media screen and (min-width: 992px) {
   .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -331,8 +331,8 @@
 @media screen and (min-width: 1200px) {
   .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -393,8 +393,8 @@
 @media screen and (min-width: 1450px) {
   .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }

package/css/components/DataList/data-list.css

@@ -80,8 +80,8 @@
 @media screen and (min-width: 768px) {
   .pf-c-data-list:not([class*=pf-m-grid]) .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -142,8 +142,8 @@
 @media screen and (min-width: 0) {
   .pf-c-data-list.pf-m-grid-none .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -204,8 +204,8 @@
 @media screen and (min-width: 576px) {
   .pf-c-data-list.pf-m-grid-sm .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -266,8 +266,8 @@
 @media screen and (min-width: 768px) {
   .pf-c-data-list.pf-m-grid-md .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -328,8 +328,8 @@
 @media screen and (min-width: 992px) {
   .pf-c-data-list.pf-m-grid-lg .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -390,8 +390,8 @@
 @media screen and (min-width: 1200px) {
   .pf-c-data-list.pf-m-grid-xl .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -452,8 +452,8 @@
 @media screen and (min-width: 1450px) {
   .pf-c-data-list.pf-m-grid-2xl .pf-c-data-list__item-content {
     display: flex;
-    flex-wrap: wrap;
     flex-grow: 1;
+    flex-wrap: wrap;
     padding-bottom: var(--pf-c-data-list__item-content--md--PaddingBottom);
   }
 }
@@ -813,8 +813,8 @@
 
 .pf-c-data-list__item-action {
   --pf-hidden-visible--visible--Display: var(--pf-c-data-list__item-action--Display);
-  align-items: flex-start;
   align-content: flex-start;
+  align-items: flex-start;
   padding-top: var(--pf-c-data-list__item-action--PaddingTop);
   padding-bottom: var(--pf-c-data-list__item-action--PaddingBottom);
   margin-left: var(--pf-c-data-list__item-action--MarginLeft);
@@ -840,8 +840,8 @@
 
 .pf-c-data-list__item-content {
   display: grid;
-  width: 100%;
   grid-template-columns: auto 1fr;
+  width: 100%;
 }
 
 .pf-c-data-list__cell {
@@ -857,8 +857,8 @@
 }
 .pf-c-data-list__cell.pf-m-icon {
   flex-grow: 0;
-  margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
   grid-column: 1/2;
+  margin-right: var(--pf-c-data-list__cell--m-icon--MarginRight);
 }
 .pf-c-data-list__cell.pf-m-icon + .pf-c-data-list__cell {
   grid-column: 2/3;

package/css/components/DatePicker/date-picker.css

@@ -2,9 +2,6 @@
   --pf-c-date-picker--m-top__calendar--Top: 0;
   --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
   --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
-  --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
-  --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
   --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
   --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
   --pf-c-date-picker__input--c-form-control--width-chars: 10;
@@ -22,11 +19,6 @@
 
 .pf-c-date-picker__helper-text {
   margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
-  font-size: var(--pf-c-date-picker__helper-text--FontSize);
-  color: var(--pf-c-date-picker__helper-text--Color);
-}
-.pf-c-date-picker__helper-text.pf-m-error {
-  --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
 }
 
 .pf-c-date-picker__input .pf-c-form-control {

package/css/components/DatePicker/date-picker.d.ts

@@ -6,7 +6,6 @@ declare const _default: {
   "datePickerInput": "pf-c-date-picker__input",
   "formControl": "pf-c-form-control",
   "modifiers": {
-    "error": "pf-m-error",
     "alignRight": "pf-m-align-right",
     "top": "pf-m-top",
     "static": "pf-m-static"

package/css/components/DatePicker/date-picker.js

@@ -8,7 +8,6 @@ exports.default = {
   "datePickerInput": "pf-c-date-picker__input",
   "formControl": "pf-c-form-control",
   "modifiers": {
-    "error": "pf-m-error",
     "alignRight": "pf-m-align-right",
     "top": "pf-m-top",
     "static": "pf-m-static"

package/css/components/DatePicker/date-picker.mjs

@@ -6,7 +6,6 @@ export default {
   "datePickerInput": "pf-c-date-picker__input",
   "formControl": "pf-c-form-control",
   "modifiers": {
-    "error": "pf-m-error",
     "alignRight": "pf-m-align-right",
     "top": "pf-m-top",
     "static": "pf-m-static"