@patternfly/patternfly 5.0.0-alpha.3 → 5.0.0-alpha.30

package/components/Page/page.css

@@ -201,10 +201,10 @@
   --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
   display: grid;
-  height: 100%;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content 1fr;
   grid-template-areas: "header" "main";
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: 1fr;
+  height: 100%;
   background-color: var(--pf-c-page--BackgroundColor);
 }
 @media (min-width: 1200px) {
@@ -251,8 +251,8 @@
 }
 @media (min-width: 1200px) {
   .pf-c-page {
-    grid-template-columns: max-content 1fr;
     grid-template-areas: "header header" "nav main";
+    grid-template-columns: max-content 1fr;
   }
 }
 .pf-c-page.pf-m-full-height {
@@ -263,14 +263,14 @@
 
 .pf-c-page__header,
 .pf-c-page > .pf-c-masthead {
-  grid-area: header;
   z-index: var(--pf-c-page__header--ZIndex);
+  grid-area: header;
 }
 
 .pf-c-page__header {
   color: var(--pf-global--Color--100);
-  grid-template-columns: auto auto;
   display: grid;
+  grid-template-columns: auto auto;
   align-items: center;
   min-width: 0;
   min-height: var(--pf-c-page__header--MinHeight);
@@ -318,18 +318,18 @@
 }
 
 .pf-c-page__header-nav {
+  grid-row: 2/3;
+  grid-column: 1/-1;
   align-self: stretch;
   min-width: 0;
   padding-right: var(--pf-c-page__header-nav--PaddingRight);
   padding-left: var(--pf-c-page__header-nav--PaddingLeft);
   background-color: var(--pf-c-page__header-nav--BackgroundColor);
-  grid-column: 1/-1;
-  grid-row: 2/3;
 }
 @media screen and (min-width: 1200px) {
   .pf-c-page__header-nav {
-    grid-column: 2/3;
     grid-row: 1/2;
+    grid-column: 2/3;
   }
 }
 .pf-c-page__header-nav .pf-c-nav {
@@ -395,10 +395,10 @@
 }
 
 .pf-c-page__sidebar {
+  z-index: var(--pf-c-page__sidebar--ZIndex);
   grid-area: nav;
   grid-row-start: 2;
   grid-column-start: 1;
-  z-index: var(--pf-c-page__sidebar--ZIndex);
   width: var(--pf-c-page__sidebar--Width);
   overflow-x: hidden;
   overflow-y: auto;
@@ -547,24 +547,24 @@
 }
 @media (min-height: 0) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-sm-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-sm-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-sm-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-sm-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -573,24 +573,24 @@
 }
 @media (min-height: 40rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-md-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-md-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-md-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-md-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-md-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -599,24 +599,24 @@
 }
 @media (min-height: 48rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-lg-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-lg-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-lg-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-lg-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -625,24 +625,24 @@
 }
 @media (min-height: 60rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -651,24 +651,24 @@
 }
 @media (min-height: 80rem) {
   .pf-c-page__main-nav.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-section.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-group.pf-m-sticky-top-on-2xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
     position: sticky;
     top: 0;
     z-index: var(--pf-c-page--section--m-sticky-top--ZIndex);
     box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow);
   }
   .pf-c-page__main-nav.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
-.pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
+  .pf-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
+  .pf-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
     position: sticky;
     bottom: 0;
     z-index: var(--pf-c-page--section--m-sticky-bottom--ZIndex);
@@ -678,8 +678,8 @@
 
 .pf-c-page__main,
 .pf-c-page__drawer {
-  grid-area: main;
   z-index: var(--pf-c-page__main--ZIndex);
+  grid-area: main;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;

package/components/Page/page.scss

@@ -193,20 +193,20 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
   // Base
   display: grid;
-  height: 100%;
-  grid-template-columns: 1fr;
-  grid-template-rows: max-content 1fr;
   grid-template-areas:
     "header"
     "main";
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: 1fr;
+    height: 100%;
   background-color: var(--pf-c-page--BackgroundColor);
 
   @media (min-width: $pf-global--breakpoint--xl) {
-    grid-template-columns: max-content 1fr;
     grid-template-areas:
       "header header"
       "nav main";
-  }
+    grid-template-columns: max-content 1fr;
+    }
 
   // full height
   &.pf-m-full-height {
@@ -219,15 +219,15 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 // Header
 .pf-c-page__header,
 .pf-c-page > .pf-c-masthead {
-  grid-area: header;
   z-index: var(--pf-c-page__header--ZIndex);
+  grid-area: header;
 }
 
 .pf-c-page__header {
   @include pf-t-dark; // force the container to follow the dark theme
 
-  grid-template-columns: auto auto;
   display: grid;
+  grid-template-columns: auto auto;
   align-items: center;
   min-width: 0;
   min-height: var(--pf-c-page__header--MinHeight);
@@ -282,17 +282,17 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
 // Header navigation
 .pf-c-page__header-nav {
+  grid-row: 2 / 3;
+  grid-column: 1 / -1;
   align-self: stretch;
   min-width: 0;
   padding-right: var(--pf-c-page__header-nav--PaddingRight);
   padding-left: var(--pf-c-page__header-nav--PaddingLeft);
   background-color: var(--pf-c-page__header-nav--BackgroundColor);
-  grid-column: 1 / -1;
-  grid-row: 2 / 3;
 
   @media screen and (min-width: $pf-global--breakpoint--xl) {
-    grid-column: 2 / 3;
     grid-row: 1 / 2;
+    grid-column: 2 / 3;
   }
 
   .pf-c-nav {
@@ -386,10 +386,10 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 
 // Sidebar
 .pf-c-page__sidebar {
+  z-index: var(--pf-c-page__sidebar--ZIndex);
   grid-area: nav;
   grid-row-start: 2;
   grid-column-start: 1;
-  z-index: var(--pf-c-page__sidebar--ZIndex);
   width: var(--pf-c-page__sidebar--Width);
   overflow-x: hidden;
   overflow-y: auto;
@@ -531,8 +531,8 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
 // Main & Drawer
 .pf-c-page__main,
 .pf-c-page__drawer {
-  grid-area: main;
   z-index: var(--pf-c-page__main--ZIndex);
+  grid-area: main;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;

package/components/Pagination/pagination.css

@@ -145,8 +145,8 @@
     padding: var(--pf-c-pagination--m-bottom--md--PaddingTop) var(--pf-c-pagination--m-bottom--md--PaddingRight) var(--pf-c-pagination--m-bottom--md--PaddingBottom) var(--pf-c-pagination--m-bottom--md--PaddingLeft);
   }
   .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-first,
-.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
-.pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
+  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-control.pf-m-last,
+  .pf-c-pagination.pf-m-bottom .pf-c-pagination__nav-page-select {
     display: block;
   }
   .pf-c-pagination.pf-m-bottom .pf-c-options-menu {

package/components/Popover/popover.css

@@ -34,17 +34,16 @@
   --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__title-icon--FontSize: var(--pf-global--FontSize--md);
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
   position: relative;
   min-width: var(--pf-c-popover--MinWidth);
@@ -122,16 +121,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,23 +140,25 @@
   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 {
   margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  font-size: var(--pf-c-popover__title-icon--FontSize);
   color: var(--pf-c-popover__title-icon--Color);
 }
 
 .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);
 }
 
@@ -172,14 +171,9 @@
 }
 
 :where(.pf-theme-dark) .pf-c-popover {
-  --pf-c-popover--BoxShadow: none;
-  --pf-c-popover__arrow--BoxShadow: none;
-  --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
+  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
+  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
-}
-:where(.pf-theme-dark) .pf-c-popover,
-:where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
-  border: 4px solid var(--pf-global--BorderColor--400);
 }

package/components/Popover/popover.scss

@@ -45,23 +45,22 @@
   --pf-c-popover__arrow--m-left--Rotate: 45deg;
 
   // Close
-  --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)); // align top of button with top of text
-  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
-  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
+  --pf-c-popover__close--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element)); // align top of button with top of text
+  --pf-c-popover__close--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md)); // align right of content
+  --pf-c-popover__close--sibling--PaddingRight: var(--pf-global--spacer--2xl);
 
   // Header
-  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__header--MarginBottom: var(--pf-global--spacer--sm);
 
-  // Title
-  --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);
+  // Title text
+  --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);
 
   // Title icon
   --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__title-icon--FontSize: var(--pf-global--FontSize--md);
 
   // Footer
   --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
@@ -187,22 +186,17 @@
   position: relative;
   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);
+}
 
-  // Remove in breaking change
-  > .pf-c-title {
-    margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
-  }
-
-  // Close button
-  > .pf-c-button {
-    position: absolute;
-    top: var(--pf-c-popover--c-button--Top);
-    right: var(--pf-c-popover--c-button--Right);
+// Close button
+.pf-c-popover__close {
+  position: absolute;
+  top: var(--pf-c-popover__close--Top);
+  right: var(--pf-c-popover__close--Right);
 
-    // Create room for the close button
-    + * {
-      padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
-    }
+  // Create room for the close button
+  + * {
+    padding-right: var(--pf-c-popover__close--sibling--PaddingRight);
   }
 }
 
@@ -215,24 +209,25 @@
   box-shadow: var(--pf-c-popover__arrow--BoxShadow);
 }
 
+.pf-c-popover__header {
+  margin-bottom: var(--pf-c-popover__header--MarginBottom);
+}
+
 .pf-c-popover__title {
+  display: flex;
   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-m-icon {
-    display: flex;
-  }
 }
 
 .pf-c-popover__title-icon {
   margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  font-size: var(--pf-c-popover__title-icon--FontSize);
   color: var(--pf-c-popover__title-icon--Color);
 }
 
 .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/components/Popover/themes/dark/popover.scss

@@ -2,16 +2,10 @@
 
 @mixin pf-theme-dark-popover() {
   .pf-c-popover {
-    --pf-c-popover--BoxShadow: none;
-    --pf-c-popover__arrow--BoxShadow: none;
-    --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
+    --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
+    --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
     --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
     --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
-
-    &,
-    .pf-c-popover__arrow {
-      border: 4px solid var(--pf-global--BorderColor--400);
-    }
   }
 }

package/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);
@@ -27,10 +27,10 @@
   --pf-c-progress--m-sm__measure--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg);
   display: grid;
-  align-items: end;
-  grid-gap: var(--pf-c-progress--GridGap);
-  grid-template-columns: auto auto;
   grid-template-rows: 1fr auto;
+  grid-template-columns: auto auto;
+  grid-gap: var(--pf-c-progress--GridGap);
+  align-items: end;
 }
 .pf-c-progress.pf-m-sm {
   --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
@@ -59,8 +59,8 @@
   grid-column: 1/3;
 }
 .pf-c-progress.pf-m-outside .pf-c-progress__status {
-  grid-column: 2/3;
   grid-row: 2/3;
+  grid-column: 2/3;
   align-self: center;
 }
 .pf-c-progress.pf-m-outside .pf-c-progress__measure {
@@ -108,8 +108,8 @@
 }
 
 .pf-c-progress__description {
-  word-break: break-word;
   grid-column: 1/2;
+  word-break: break-word;
 }
 .pf-c-progress__description.pf-m-truncate {
   overflow: hidden;
@@ -118,21 +118,24 @@
 }
 
 .pf-c-progress__status {
-  grid-column: 2/3;
+  display: flex;
   grid-row: 1/2;
+  grid-column: 2/3;
+  gap: var(--pf-c-progress__status--Gap);
+  align-items: flex-start;
+  justify-content: flex-end;
   text-align: right;
   word-break: break-word;
 }
 
 .pf-c-progress__status-icon {
-  margin-left: var(--pf-c-progress__status-icon--MarginLeft);
   color: var(--pf-c-progress__status-icon--Color);
 }
 
 .pf-c-progress__bar {
   position: relative;
-  grid-column: 1/3;
   grid-row: 2/3;
+  grid-column: 1/3;
   align-self: center;
   height: var(--pf-c-progress__bar--Height);
   background-color: var(--pf-c-progress__bar--BackgroundColor);
@@ -157,8 +160,8 @@
 }
 
 .pf-c-progress__helper-text {
-  grid-column: 1/3;
   grid-row: 3/4;
+  grid-column: 1/3;
   margin-top: var(--pf-c-progress__helper-text--MarginTop);
 }