@patternfly/patternfly 5.0.0-alpha.24 → 5.0.0-alpha.26

package/components/Menu/menu.css

@@ -182,12 +182,6 @@
   --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
   --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
   --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  top: var(--pf-c-menu--Top);
-  z-index: var(--pf-c-menu--ZIndex);
-  width: var(--pf-c-menu--Width);
-  min-width: var(--pf-c-menu--MinWidth);
-  background-color: var(--pf-c-menu--BackgroundColor);
-  box-shadow: var(--pf-c-menu--BoxShadow);
   --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
   --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
   --pf-c-menu--m-nav__list--PaddingTop: 0;
@@ -215,6 +209,12 @@
   --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
   --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
   --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
+  top: var(--pf-c-menu--Top);
+  z-index: var(--pf-c-menu--ZIndex);
+  width: var(--pf-c-menu--Width);
+  min-width: var(--pf-c-menu--MinWidth);
+  background-color: var(--pf-c-menu--BackgroundColor);
+  box-shadow: var(--pf-c-menu--BoxShadow);
 }
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;

package/components/Menu/menu.scss

@@ -188,6 +188,37 @@
   --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
   --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
 
+  // Nav variant
+  --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
+  --pf-c-menu--m-nav__list--PaddingTop: 0;
+  --pf-c-menu--m-nav__list--PaddingBottom: 0;
+  --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
+  --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
+  --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
+  --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
+
+  // Nav nested menus
+  --pf-c-menu--m-nav--c-menu--left-offset: #{pf-size-prem(4px)};
+  --pf-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
+  --pf-c-menu--m-nav--c-menu--m-left--right-offset: #{pf-size-prem(4px)};
+  --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
+  --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
+  --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
+  --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
+  --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
+  
   top: var(--pf-c-menu--Top);
   z-index: var(--pf-c-menu--ZIndex);
   width: var(--pf-c-menu--Width);
@@ -345,37 +376,6 @@
     }
   }
 
-  // Nav variant
-  --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
-  --pf-c-menu--m-nav__list--PaddingTop: 0;
-  --pf-c-menu--m-nav__list--PaddingBottom: 0;
-  --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
-  --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
-  --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
-  --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
-  --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
-  --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
-  --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
-  --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
-  --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
-  --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
-  --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
-
-  // Nested menus
-  --pf-c-menu--m-nav--c-menu--left-offset: #{pf-size-prem(4px)};
-  --pf-c-menu--m-nav--c-menu--m-top--bottom-offset: 0;
-  --pf-c-menu--m-nav--c-menu--m-left--right-offset: #{pf-size-prem(4px)};
-  --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
-  --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
-  --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
-  --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
-  --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
-
   &.pf-m-nav,
   &.pf-m-nav & {
     --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);

package/components/MenuToggle/menu-toggle.css

@@ -368,8 +368,8 @@
 
 .pf-c-menu-toggle__icon {
   display: inline-flex;
-  align-self: center;
   flex-shrink: 0;
+  align-self: center;
   margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
   line-height: 1;
 }

package/components/MenuToggle/menu-toggle.scss

@@ -509,8 +509,8 @@
 
 .pf-c-menu-toggle__icon {
   display: inline-flex;
-  align-self: center;
   flex-shrink: 0;
+  align-self: center;
   margin-right: var(--pf-c-menu-toggle__icon--MarginRight);
   line-height: 1;
 }

package/components/MultipleFileUpload/multiple-file-upload.css

@@ -62,8 +62,8 @@
   --pf-c-multiple-file-upload__status-item-progress-text--Color: var(--pf-global--primary-color--100);
   --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
   display: grid;
-  gap: var(--pf-c-multiple-file-upload--Gap);
   grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload--Gap);
 }
 .pf-c-multiple-file-upload.pf-m-horizontal {
   --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
@@ -89,21 +89,21 @@
 
 .pf-c-multiple-file-upload__main {
   display: grid;
+  grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
+  grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
+  grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__main--Gap);
   padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
   text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
   background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
   border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
-  grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
-  grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
-  grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
-  gap: var(--pf-c-multiple-file-upload__main--Gap);
 }
 
 .pf-c-multiple-file-upload__title {
   display: var(--pf-c-multiple-file-upload__title--Display);
+  grid-area: title;
   grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
   gap: var(--pf-c-multiple-file-upload__title--Gap);
-  grid-area: title;
 }
 
 .pf-c-multiple-file-upload__title-icon {

package/components/MultipleFileUpload/multiple-file-upload.scss

@@ -93,8 +93,8 @@
   --pf-c-multiple-file-upload__status-item-progress-size--Color: var(--pf-global--Color--200);
 
   display: grid;
-  gap: var(--pf-c-multiple-file-upload--Gap);
   grid-template-columns: var(--pf-c-multiple-file-upload--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload--Gap);
 
   &.pf-m-horizontal {
     --pf-c-multiple-file-upload--GridTemplateColumns: var(--pf-c-multiple-file-upload--m-horizontal--GridTemplateColumns);
@@ -122,21 +122,21 @@
 
 .pf-c-multiple-file-upload__main {
   display: grid;
+  grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
+  grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
+  grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
+  gap: var(--pf-c-multiple-file-upload__main--Gap);
   padding: var(--pf-c-multiple-file-upload__main--PaddingTop) var(--pf-c-multiple-file-upload__main--PaddingRight) var(--pf-c-multiple-file-upload__main--PaddingBottom) var(--pf-c-multiple-file-upload__main--PaddingLeft);
   text-align: var(--pf-c-multiple-file-upload__main--TextAlign);
   background-color: var(--pf-c-multiple-file-upload__main--BackgroundColor);
   border: var(--pf-c-multiple-file-upload__main--BorderWidth) var(--pf-c-multiple-file-upload__main--BorderStyle) var(--pf-c-multiple-file-upload__main--BorderColor);
-  grid-template-columns: var(--pf-c-multiple-file-upload__main--GridTemplateColumns);
-  grid-template-rows: var(--pf-c-multiple-file-upload__main--GridTemplateRows);
-  grid-template-areas: var(--pf-c-multiple-file-upload__main--GridTemplateAreas);
-  gap: var(--pf-c-multiple-file-upload__main--Gap);
 }
 
 .pf-c-multiple-file-upload__title {
   display: var(--pf-c-multiple-file-upload__title--Display);
+  grid-area: title;
   grid-template-columns: var(--pf-c-multiple-file-upload__title--GridTemplateColumns);
   gap: var(--pf-c-multiple-file-upload__title--Gap);
-  grid-area: title;
 }
 
 .pf-c-multiple-file-upload__title-icon {

package/components/Nav/nav.css

@@ -862,8 +862,8 @@
   --pf-c-nav__link--focus--after--BorderLeftWidth: var(--pf-c-nav__section__link--focus--after--BorderWidth);
   --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__section__link--active--after--BorderWidth);
   --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__section__link--m-current--after--BorderWidth);
-  margin-top: var(--pf-c-nav__section--MarginTop);
   --pf-c-nav--c-divider--MarginBottom: 0;
+  margin-top: var(--pf-c-nav__section--MarginTop);
 }
 .pf-c-nav__section + .pf-c-nav__section {
   --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);

package/components/Nav/nav.scss

@@ -1069,11 +1069,11 @@
   --pf-c-nav__link--active--after--BorderLeftWidth: var(--pf-c-nav__section__link--active--after--BorderWidth);
   --pf-c-nav__link--m-current--after--BorderLeftWidth: var(--pf-c-nav__section__link--m-current--after--BorderWidth);
 
-  margin-top: var(--pf-c-nav__section--MarginTop);
-
   // Divider
   --pf-c-nav--c-divider--MarginBottom: 0;
 
+  margin-top: var(--pf-c-nav__section--MarginTop);
+
   & + & {
     --pf-c-nav__section--MarginTop: var(--pf-c-nav__section--section--MarginTop);
   }

package/components/NotificationDrawer/notification-drawer.css

@@ -169,9 +169,9 @@
 
 .pf-c-notification-drawer__list-item-header {
   display: flex;
-  align-items: baseline;
-  grid-column: 1/2;
   grid-row: 1/2;
+  grid-column: 1/2;
+  align-items: baseline;
   margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
 }
 
@@ -192,8 +192,8 @@
 }
 
 .pf-c-notification-drawer__list-item-action {
-  grid-column: 2/3;
   grid-row: 1/3;
+  grid-column: 2/3;
 }
 
 .pf-c-notification-drawer__list-item-description {

package/components/NotificationDrawer/notification-drawer.scss

@@ -211,9 +211,9 @@
 
 .pf-c-notification-drawer__list-item-header {
   display: flex;
-  align-items: baseline;
-  grid-column: 1 / 2;
   grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-items: baseline;
   margin-bottom: var(--pf-c-notification-drawer__list-item-header--MarginBottom);
 }
 
@@ -232,8 +232,8 @@
 }
 
 .pf-c-notification-drawer__list-item-action {
-  grid-column: 2 / 3;
   grid-row: 1 / 3;
+  grid-column: 2 / 3;
 }
 
 .pf-c-notification-drawer__list-item-description {

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;
@@ -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/Progress/progress.css

@@ -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;
@@ -119,13 +119,13 @@
 
 .pf-c-progress__status {
   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;
-  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 {
@@ -134,8 +134,8 @@
 
 .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);
@@ -160,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);
 }
 

package/components/Progress/progress.scss

@@ -34,10 +34,10 @@
 
   // Component styles
   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;
 
   // Modifiers
   // size modifiers
@@ -80,8 +80,8 @@
     }
 
     .pf-c-progress__status {
-      grid-column: 2 / 3;
       grid-row: 2 / 3;
+      grid-column: 2 / 3;
       align-self: center;
     }
 
@@ -148,8 +148,8 @@
 
 // the progress__description is displayed above the progress bar on the left
 .pf-c-progress__description {
-  word-break: break-word;
   grid-column: 1 / 2;
+  word-break: break-word;
 
   &.pf-m-truncate {
     @include pf-text-overflow;
@@ -159,13 +159,13 @@
 // the progress__status is displayed in the upper right
 .pf-c-progress__status {
   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;
-  grid-column: 2 / 3;
-  grid-row: 1 / 2;
   text-align: right;
   word-break: break-word;
-  gap: var(--pf-c-progress__status--Gap);
 }
 
 // the progress__status-icon is an icon displayed always in the upper right
@@ -176,8 +176,8 @@
 // The progress__bar is a white underlay with a semi-transparent color on top, which matches the progress__indicator 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);
@@ -205,8 +205,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);
 }
 

package/components/ProgressStepper/progress-stepper.css

@@ -114,10 +114,10 @@
   --pf-c-progress-stepper--m-center__step-main--before--Content: "";
   position: relative;
   display: grid;
-  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
-  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);
+  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-auto-columns: 1fr;
+  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
 }
 @media screen and (min-width: 768px) {
   .pf-c-progress-stepper {
@@ -184,8 +184,8 @@
   grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
 }
 .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-connector {
-  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
   grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
+  min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
   padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
 }
 .pf-c-progress-stepper.pf-m-compact .pf-c-progress-stepper__step-main {
@@ -302,11 +302,11 @@
 }
 .pf-c-progress-stepper__step-title.pf-m-help-text {
   text-decoration: underline;
-  cursor: pointer;
+  text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
   text-decoration-style: dashed;
   text-decoration-color: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor);
-  text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
   text-underline-offset: var(--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
+  cursor: pointer;
 }
 .pf-c-progress-stepper__step-title.pf-m-help-text:hover {
   --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step-title--m-help-text--hover--Color);

package/components/ProgressStepper/progress-stepper.scss

@@ -190,10 +190,10 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
   position: relative;
   display: grid;
-  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
-  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-template-rows: var(--pf-c-progress-stepper--GridTemplateRows);
+  grid-template-columns: var(--pf-c-progress-stepper--GridTemplateColumns);
   grid-auto-columns: 1fr; // gives even spacing between steps
+  grid-auto-flow: var(--pf-c-progress-stepper--GridAutoFlow);
 
   // Progress stepper Modifiers
   &.pf-m-center {
@@ -247,8 +247,8 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
     grid-auto-flow: var(--pf-c-progress-stepper--m-compact--GridAutoFlow);
 
     .pf-c-progress-stepper__step-connector {
-      min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
       grid-row: var(--pf-c-progress-stepper--m-compact__step-connector--GridRow);
+      min-width: var(--pf-c-progress-stepper--m-compact__step-connector--MinWidth);
       padding-bottom: var(--pf-c-progress-stepper--m-compact__step-connector--PaddingBottom);
     }
 
@@ -392,11 +392,11 @@ $pf-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 
   &.pf-m-help-text {
     text-decoration: underline;
-    cursor: pointer;
+    text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
     text-decoration-style: dashed;
     text-decoration-color: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor);
-    text-decoration-thickness: var(--pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness);
     text-underline-offset: var(--pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
+    cursor: pointer;
 
     &:hover {
       --pf-c-progress-stepper__step-title--Color: var(--pf-c-progress-stepper__step-title--m-help-text--hover--Color);

package/components/SearchInput/search-input.css

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

package/components/SearchInput/search-input.scss

@@ -72,9 +72,9 @@
 
 .pf-c-search-input__text {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas: "text-input";
   flex: 1;
+  grid-template-areas: "text-input";
+  grid-template-columns: 1fr;
 
   &::before,
   &::after {