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

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 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.4 (2023-03-02)
+
+### Bug Fixes
+
+- **core:** update core to alpha.24 ([#8768](https://github.com/patternfly/patternfly-react/issues/8768)) ([6dd5e01](https://github.com/patternfly/patternfly-react/commit/6dd5e01e16bc94fe4b954b79ba67adaaab9c7135))
+
 # 5.0.0-alpha.3 (2023-02-15)
 
 ### Bug Fixes

package/css/components/Chip/chip.css

@@ -22,18 +22,19 @@
   --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
   --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__content--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__content--ColumnGap: var(--pf-global--spacer--xs);
   --pf-c-chip__text--Color: var(--pf-global--Color--100);
   --pf-c-chip__text--MaxWidth: 16ch;
-  --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
-  --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
-  --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
-  --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-chip__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-chip__actions--c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
+  --pf-c-chip__actions--c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
+  --pf-c-chip__actions--c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
+  --pf-c-chip__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
   color: var(--pf-global--Color--100);
   position: relative;
@@ -68,19 +69,6 @@
 .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
   font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
 }
-.pf-c-chip .pf-c-button {
-  --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
-  --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
-  margin-top: var(--pf-c-chip__c-button--MarginTop);
-  margin-right: var(--pf-c-chip__c-button--MarginRight);
-  margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
-}
-.pf-c-chip .pf-c-badge {
-  margin-left: var(--pf-c-chip__c-badge--MarginLeft);
-}
 
 .pf-c-chip__text {
   overflow: hidden;
@@ -88,7 +76,6 @@
   white-space: nowrap;
   position: relative;
   max-width: var(--pf-c-chip__text--MaxWidth);
-  font-size: var(--pf-c-chip__text--FontSize);
   color: var(--pf-c-chip__text--Color);
 }
 
@@ -97,6 +84,28 @@
   margin-left: var(--pf-c-chip__icon--MarginLeft);
 }
 
+.pf-c-chip__content {
+  display: flex;
+  align-items: center;
+  column-gap: var(--pf-c-chip__content--ColumnGap);
+  font-size: var(--pf-c-chip__content--FontSize);
+}
+
+.pf-c-chip__actions {
+  font-size: var(--pf-c-chip__actions--FontSize);
+}
+.pf-c-chip__actions .pf-c-button {
+  --pf-c-button--PaddingTop: var(--pf-c-chip__actions--c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-chip__actions--c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-chip__actions--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-chip__actions--c-button--PaddingLeft);
+  --pf-c-button--FontSize: var(--pf-c-chip__actions--c-button--FontSize);
+  margin-top: var(--pf-c-chip__actions--c-button--MarginTop);
+  margin-right: var(--pf-c-chip__actions--c-button--MarginRight);
+  margin-bottom: var(--pf-c-chip__actions--c-button--MarginBottom);
+  line-height: 1;
+}
+
 :where(.pf-theme-dark) .pf-c-chip {
   --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);

package/css/components/Chip/chip.d.ts

@@ -1,8 +1,9 @@
 import './chip.css';
 declare const _default: {
-  "badge": "pf-c-badge",
   "button": "pf-c-button",
   "chip": "pf-c-chip",
+  "chipActions": "pf-c-chip__actions",
+  "chipContent": "pf-c-chip__content",
   "chipIcon": "pf-c-chip__icon",
   "chipText": "pf-c-chip__text",
   "modifiers": {

package/css/components/Chip/chip.js

@@ -2,9 +2,10 @@
 exports.__esModule = true;
 require('./chip.css');
 exports.default = {
-  "badge": "pf-c-badge",
   "button": "pf-c-button",
   "chip": "pf-c-chip",
+  "chipActions": "pf-c-chip__actions",
+  "chipContent": "pf-c-chip__content",
   "chipIcon": "pf-c-chip__icon",
   "chipText": "pf-c-chip__text",
   "modifiers": {

package/css/components/Chip/chip.mjs

@@ -1,8 +1,9 @@
 import './chip.css';
 export default {
-  "badge": "pf-c-badge",
   "button": "pf-c-button",
   "chip": "pf-c-chip",
+  "chipActions": "pf-c-chip__actions",
+  "chipContent": "pf-c-chip__content",
   "chipIcon": "pf-c-chip__icon",
   "chipText": "pf-c-chip__text",
   "modifiers": {

package/css/components/Label/label.css

@@ -3,6 +3,7 @@
   --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label--MaxWidth: 100%;
   --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-label--Color: var(--pf-global--Color--100);
@@ -109,18 +110,18 @@
   --pf-c-label__content--MaxWidth: 100%;
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-editable__content--MaxWidth: 16ch;
-  --pf-c-label__text--MaxWidth: 16ch;
+  --pf-c-label__text--MaxWidth: 100%;
   --pf-c-label__icon--Color: var(--pf-global--Color--100);
   --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label__actions--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--MarginRight: calc(var(--pf-c-label__actions--c-button--PaddingRight) * -1);
+  --pf-c-label__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--c-button--MarginTop: calc(var(--pf-c-label__actions--c-button--PaddingTop) * -1);
+  --pf-c-label__actions--c-button--MarginBottom: calc(var(--pf-c-label__actions--c-button--PaddingBottom) * -1);
+  --pf-c-label__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-label__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-editable--Cursor: pointer;
   --pf-c-label--m-editable--TextDecoration: underline;
   --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -141,6 +142,7 @@
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
   position: relative;
+  max-width: var(--pf-c-label--MaxWidth);
   padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
   font-size: var(--pf-c-label--FontSize);
   color: var(--pf-c-label--Color);
@@ -312,17 +314,6 @@
   --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
 }
-.pf-c-label .pf-c-button {
-  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
-  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
-  margin-top: var(--pf-c-label__c-button--MarginTop);
-  margin-right: var(--pf-c-label__c-button--MarginRight);
-  margin-bottom: var(--pf-c-label__c-button--MarginBottom);
-  margin-left: var(--pf-c-label__c-button--MarginLeft);
-}
 .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
   --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
@@ -348,10 +339,8 @@
 }
 
 .pf-c-label__content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   max-width: var(--pf-c-label__content--MaxWidth);
+  overflow: hidden;
   color: var(--pf-c-label__content--Color);
   background-color: var(--pf-c-label__content--BackgroundColor);
   border-width: 0;
@@ -367,9 +356,17 @@
   border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
   border-radius: var(--pf-c-label--BorderRadius);
 }
+input.pf-c-label__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 a.pf-c-label__content,
 button.pf-c-label__content {
+  padding: 0;
   cursor: pointer;
+  background-color: transparent;
   border: none;
 }
 a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
@@ -394,6 +391,20 @@ button.pf-c-label__content:focus {
   color: var(--pf-c-label__icon--Color);
 }
 
+.pf-c-label__actions {
+  margin-right: var(--pf-c-label__actions--MarginRight);
+  font-size: var(--pf-c-label__actions--FontSize);
+}
+.pf-c-label__actions .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-label__actions--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-label__actions--c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-label__actions--c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-label__actions--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-label__actions--c-button--PaddingLeft);
+  margin-top: var(--pf-c-label__actions--c-button--MarginTop);
+  margin-bottom: var(--pf-c-label__actions--c-button--MarginBottom);
+}
+
 :where(.pf-theme-dark) .pf-c-label {
   --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);

package/css/components/Label/label.d.ts

@@ -2,6 +2,7 @@ import './label.css';
 declare const _default: {
   "button": "pf-c-button",
   "label": "pf-c-label",
+  "labelActions": "pf-c-label__actions",
   "labelContent": "pf-c-label__content",
   "labelIcon": "pf-c-label__icon",
   "labelText": "pf-c-label__text",

package/css/components/Label/label.js

@@ -4,6 +4,7 @@ require('./label.css');
 exports.default = {
   "button": "pf-c-button",
   "label": "pf-c-label",
+  "labelActions": "pf-c-label__actions",
   "labelContent": "pf-c-label__content",
   "labelIcon": "pf-c-label__icon",
   "labelText": "pf-c-label__text",

package/css/components/Label/label.mjs

@@ -2,6 +2,7 @@ import './label.css';
 export default {
   "button": "pf-c-button",
   "label": "pf-c-label",
+  "labelActions": "pf-c-label__actions",
   "labelContent": "pf-c-label__content",
   "labelIcon": "pf-c-label__icon",
   "labelText": "pf-c-label__text",

package/css/components/ModalBox/modal-box.css

@@ -34,9 +34,9 @@
   --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
   --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
   --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
-  --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
-  --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
+  --pf-c-modal-box__close--Top: calc(var(--pf-global--spacer--lg));
+  --pf-c-modal-box__close--Right: var(--pf-global--spacer--md);
+  --pf-c-modal-box__close--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
   --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
   --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
@@ -88,13 +88,14 @@
 .pf-c-modal-box.pf-m-info {
   --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
 }
-.pf-c-modal-box > .pf-c-button {
+
+.pf-c-modal-box__close {
   position: absolute;
-  top: var(--pf-c-modal-box--c-button--Top);
-  right: var(--pf-c-modal-box--c-button--Right);
+  top: var(--pf-c-modal-box__close--Top);
+  right: var(--pf-c-modal-box__close--Right);
 }
-.pf-c-modal-box > .pf-c-button + * {
-  margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight);
+.pf-c-modal-box__close + * {
+  margin-right: var(--pf-c-modal-box__close--sibling--MarginRight);
 }
 
 .pf-c-modal-box__header {

package/css/components/ModalBox/modal-box.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   "button": "pf-c-button",
   "modalBox": "pf-c-modal-box",
   "modalBoxBody": "pf-c-modal-box__body",
+  "modalBoxClose": "pf-c-modal-box__close",
   "modalBoxDescription": "pf-c-modal-box__description",
   "modalBoxFooter": "pf-c-modal-box__footer",
   "modalBoxHeader": "pf-c-modal-box__header",

package/css/components/ModalBox/modal-box.js

@@ -5,6 +5,7 @@ exports.default = {
   "button": "pf-c-button",
   "modalBox": "pf-c-modal-box",
   "modalBoxBody": "pf-c-modal-box__body",
+  "modalBoxClose": "pf-c-modal-box__close",
   "modalBoxDescription": "pf-c-modal-box__description",
   "modalBoxFooter": "pf-c-modal-box__footer",
   "modalBoxHeader": "pf-c-modal-box__header",

package/css/components/ModalBox/modal-box.mjs

@@ -3,6 +3,7 @@ export default {
   "button": "pf-c-button",
   "modalBox": "pf-c-modal-box",
   "modalBoxBody": "pf-c-modal-box__body",
+  "modalBoxClose": "pf-c-modal-box__close",
   "modalBoxDescription": "pf-c-modal-box__description",
   "modalBoxFooter": "pf-c-modal-box__footer",
   "modalBoxHeader": "pf-c-modal-box__header",

package/css/components/Popover/popover.css

@@ -34,15 +34,13 @@
   --pf-c-popover__arrow--m-left--TranslateX: 50%;
   --pf-c-popover__arrow--m-left--TranslateY: -50%;
   --pf-c-popover__arrow--m-left--Rotate: 45deg;
-  --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
-  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
-  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
-  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-popover__close--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
+  --pf-c-popover__close--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
+  --pf-c-popover__close--sibling--PaddingRight: var(--pf-global--spacer--2xl);
+  --pf-c-popover__header--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__title-text--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-popover__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
   --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
@@ -122,16 +120,14 @@
   padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
   background-color: var(--pf-c-popover__content--BackgroundColor);
 }
-.pf-c-popover__content > .pf-c-title {
-  margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
-}
-.pf-c-popover__content > .pf-c-button {
+
+.pf-c-popover__close {
   position: absolute;
-  top: var(--pf-c-popover--c-button--Top);
-  right: var(--pf-c-popover--c-button--Right);
+  top: var(--pf-c-popover__close--Top);
+  right: var(--pf-c-popover__close--Right);
 }
-.pf-c-popover__content > .pf-c-button + * {
-  padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
+.pf-c-popover__close + * {
+  padding-right: var(--pf-c-popover__close--sibling--PaddingRight);
 }
 
 .pf-c-popover__arrow {
@@ -143,15 +139,13 @@
   box-shadow: var(--pf-c-popover__arrow--BoxShadow);
 }
 
-.pf-c-popover__title {
-  flex: 0 0 auto;
-  margin-bottom: var(--pf-c-popover__title--MarginBottom);
-  font-family: var(--pf-c-popover__title--FontFamily);
-  font-size: var(--pf-c-popover__title--FontSize);
-  line-height: var(--pf-c-popover__title--LineHeight);
+.pf-c-popover__header {
+  margin-bottom: var(--pf-c-popover__header--MarginBottom);
 }
-.pf-c-popover__title.pf-m-icon {
+
+.pf-c-popover__title {
   display: flex;
+  flex: 0 0 auto;
 }
 
 .pf-c-popover__title-icon {
@@ -160,6 +154,9 @@
 }
 
 .pf-c-popover__title-text {
+  font-family: var(--pf-c-popover__title-text--FontFamily);
+  font-size: var(--pf-c-popover__title-text--FontSize);
+  line-height: var(--pf-c-popover__title-text--LineHeight);
   color: var(--pf-c-popover__title-text--Color, inherit);
 }
 

package/css/components/Popover/popover.d.ts

@@ -1,6 +1,5 @@
 import './popover.css';
 declare const _default: {
-  "button": "pf-c-button",
   "modifiers": {
     "noPadding": "pf-m-no-padding",
     "widthAuto": "pf-m-width-auto",
@@ -20,18 +19,18 @@ declare const _default: {
     "warning": "pf-m-warning",
     "success": "pf-m-success",
     "default": "pf-m-default",
-    "info": "pf-m-info",
-    "icon": "pf-m-icon"
+    "info": "pf-m-info"
   },
   "popover": "pf-c-popover",
   "popoverArrow": "pf-c-popover__arrow",
   "popoverBody": "pf-c-popover__body",
+  "popoverClose": "pf-c-popover__close",
   "popoverContent": "pf-c-popover__content",
   "popoverFooter": "pf-c-popover__footer",
+  "popoverHeader": "pf-c-popover__header",
   "popoverTitle": "pf-c-popover__title",
   "popoverTitleIcon": "pf-c-popover__title-icon",
   "popoverTitleText": "pf-c-popover__title-text",
-  "themeDark": "pf-theme-dark",
-  "title": "pf-c-title"
+  "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Popover/popover.js

@@ -2,7 +2,6 @@
 exports.__esModule = true;
 require('./popover.css');
 exports.default = {
-  "button": "pf-c-button",
   "modifiers": {
     "noPadding": "pf-m-no-padding",
     "widthAuto": "pf-m-width-auto",
@@ -22,17 +21,17 @@ exports.default = {
     "warning": "pf-m-warning",
     "success": "pf-m-success",
     "default": "pf-m-default",
-    "info": "pf-m-info",
-    "icon": "pf-m-icon"
+    "info": "pf-m-info"
   },
   "popover": "pf-c-popover",
   "popoverArrow": "pf-c-popover__arrow",
   "popoverBody": "pf-c-popover__body",
+  "popoverClose": "pf-c-popover__close",
   "popoverContent": "pf-c-popover__content",
   "popoverFooter": "pf-c-popover__footer",
+  "popoverHeader": "pf-c-popover__header",
   "popoverTitle": "pf-c-popover__title",
   "popoverTitleIcon": "pf-c-popover__title-icon",
   "popoverTitleText": "pf-c-popover__title-text",
-  "themeDark": "pf-theme-dark",
-  "title": "pf-c-title"
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Popover/popover.mjs

@@ -1,6 +1,5 @@
 import './popover.css';
 export default {
-  "button": "pf-c-button",
   "modifiers": {
     "noPadding": "pf-m-no-padding",
     "widthAuto": "pf-m-width-auto",
@@ -20,17 +19,17 @@ export default {
     "warning": "pf-m-warning",
     "success": "pf-m-success",
     "default": "pf-m-default",
-    "info": "pf-m-info",
-    "icon": "pf-m-icon"
+    "info": "pf-m-info"
   },
   "popover": "pf-c-popover",
   "popoverArrow": "pf-c-popover__arrow",
   "popoverBody": "pf-c-popover__body",
+  "popoverClose": "pf-c-popover__close",
   "popoverContent": "pf-c-popover__content",
   "popoverFooter": "pf-c-popover__footer",
+  "popoverHeader": "pf-c-popover__header",
   "popoverTitle": "pf-c-popover__title",
   "popoverTitleIcon": "pf-c-popover__title-icon",
   "popoverTitleText": "pf-c-popover__title-text",
-  "themeDark": "pf-theme-dark",
-  "title": "pf-c-title"
+  "themeDark": "pf-theme-dark"
 };

package/css/components/Progress/progress.css

@@ -4,8 +4,8 @@
   --pf-c-progress__bar--Height: var(--pf-global--spacer--md);
   --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
   --pf-c-progress__measure--m-static-width--MinWidth: 4.5ch;
+  --pf-c-progress__status--Gap: var(--pf-global--spacer--sm);
   --pf-c-progress__status-icon--Color: var(--pf-global--Color--100);
-  --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-progress__bar--before--Opacity: .2;
   --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
   --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
@@ -118,14 +118,17 @@
 }
 
 .pf-c-progress__status {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
   grid-column: 2/3;
   grid-row: 1/2;
   text-align: right;
   word-break: break-word;
+  gap: var(--pf-c-progress__status--Gap);
 }
 
 .pf-c-progress__status-icon {
-  margin-left: var(--pf-c-progress__status-icon--MarginLeft);
   color: var(--pf-c-progress__status-icon--Color);
 }
 

package/css/components/Table/table-tree-view.css

@@ -12,10 +12,20 @@
   --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
   --pf-c-table--m-tree-view__toggle--TranslateX: -100%;
   --pf-c-table--m-tree-view__toggle__toggle-icon--MinWidth: var(--pf-global--FontSize--md);
+  --pf-c-table--m-no-inset__tree-view-main--PaddingLeft: 0;
+  --pf-c-table--m-no-inset__tree-view-main--MarginLeft: 0;
 }
 .pf-c-table.pf-m-tree-view > tbody > tr {
   --pf-c-table--m-tree-view__toggle--Left: var(--pf-c-table__tree-view-main--PaddingLeft);
 }
+.pf-c-table.pf-m-tree-view > tbody > tr.pf-m-no-inset {
+  --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
+  --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
+}
+.pf-c-table.pf-m-tree-view.pf-m-no-inset {
+  --pf-c-table__tree-view-main--PaddingLeft: var(--pf-c-table--m-no-inset__tree-view-main--PaddingLeft);
+  --pf-c-table__tree-view-main--MarginLeft: var(--pf-c-table--m-no-inset__tree-view-main--MarginLeft);
+}
 .pf-c-table.pf-m-tree-view tr[aria-level="2"] {
   --pf-c-table__tree-view-main--PaddingLeft: calc(var(--pf-c-table__tree-view-main--nested-indent--base) * 1 + var(--pf-c-table__tree-view-main--indent--base));
 }

package/css/components/Table/table-tree-view.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   "dropdown": "pf-c-dropdown",
   "modifiers": {
     "treeView": "pf-m-tree-view",
+    "noInset": "pf-m-no-inset",
     "treeViewGrid": "pf-m-tree-view-grid",
     "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
     "treeViewGridMd": "pf-m-tree-view-grid-md",

package/css/components/Table/table-tree-view.js

@@ -5,6 +5,7 @@ exports.default = {
   "dropdown": "pf-c-dropdown",
   "modifiers": {
     "treeView": "pf-m-tree-view",
+    "noInset": "pf-m-no-inset",
     "treeViewGrid": "pf-m-tree-view-grid",
     "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
     "treeViewGridMd": "pf-m-tree-view-grid-md",

package/css/components/Table/table-tree-view.mjs

@@ -3,6 +3,7 @@ export default {
   "dropdown": "pf-c-dropdown",
   "modifiers": {
     "treeView": "pf-m-tree-view",
+    "noInset": "pf-m-no-inset",
     "treeViewGrid": "pf-m-tree-view-grid",
     "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
     "treeViewGridMd": "pf-m-tree-view-grid-md",

package/css/components/Table/table.css

@@ -768,6 +768,10 @@
   vertical-align: middle;
 }
 
+.pf-c-table__action {
+  text-align: right;
+}
+
 .pf-c-table__inline-edit-action {
   --pf-c-table--cell--PaddingLeft: 0;
   --pf-c-table--cell--PaddingRight: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.0.0-alpha.3",
+  "version": "5.0.0-alpha.4",
   "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.18",
+    "@patternfly/patternfly": "5.0.0-alpha.24",
     "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": "ac3634f9fe9522d2101596a3ff299278194acc15"
+  "gitHead": "1686e14afb758f8ce45881ca0cdab6bc0ea1c403"
 }