@patternfly/patternfly 6.0.0-alpha.189 → 6.0.0-alpha.190

package/components/Page/page.css

@@ -415,6 +415,7 @@
 .pf-v6-c-page__main-container {
   display: flex;
   flex-direction: column;
+  align-self: start;
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-block-start: 0;
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
@@ -424,6 +425,9 @@
   border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
+.pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
+  align-self: stretch;
+}
 
 .pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {
@@ -543,12 +547,8 @@
   --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart);
 }
 
-.pf-v6-c-page__main-section:last-child, .pf-v6-c-page__main-section:only-child, .pf-v6-c-page__main-section.pf-m-fill,
-.pf-v6-c-page__main-group:last-child,
-.pf-v6-c-page__main-group:only-child,
+.pf-v6-c-page__main-section.pf-m-fill,
 .pf-v6-c-page__main-group.pf-m-fill,
-.pf-v6-c-page__main-wizard:last-child,
-.pf-v6-c-page__main-wizard:only-child,
 .pf-v6-c-page__main-wizard.pf-m-fill {
   flex-grow: 1;
 }

package/components/Page/page.scss

@@ -320,6 +320,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-container {
   display: flex;
   flex-direction: column;
+  align-self: start;
   max-height: var(--#{$page}__main-container--MaxHeight);
   margin-block-start: 0;
   margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
@@ -328,6 +329,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   background: var(--#{$page}__main-container--BackgroundColor);
   border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
   border-radius: var(--#{$page}__main-container--BorderRadius);
+
+  &.pf-m-fill,
+  &:has(.#{$page}__main-wizard) {
+    align-self: stretch;
+  }
 }
 
 .#{$page}__main-container,
@@ -422,8 +428,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-section,
 .#{$page}__main-group,
 .#{$page}__main-wizard {
-  &:last-child,
-  &:only-child,
   &.pf-m-fill {
     flex-grow: 1;
   }

package/components/_index.css

@@ -11759,6 +11759,7 @@ ul.pf-v6-c-list {
 .pf-v6-c-page__main-container {
   display: flex;
   flex-direction: column;
+  align-self: start;
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-block-start: 0;
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
@@ -11768,6 +11769,9 @@ ul.pf-v6-c-list {
   border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
+.pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
+  align-self: stretch;
+}
 
 .pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {
@@ -11887,12 +11891,8 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart);
 }
 
-.pf-v6-c-page__main-section:last-child, .pf-v6-c-page__main-section:only-child, .pf-v6-c-page__main-section.pf-m-fill,
-.pf-v6-c-page__main-group:last-child,
-.pf-v6-c-page__main-group:only-child,
+.pf-v6-c-page__main-section.pf-m-fill,
 .pf-v6-c-page__main-group.pf-m-fill,
-.pf-v6-c-page__main-wizard:last-child,
-.pf-v6-c-page__main-wizard:only-child,
 .pf-v6-c-page__main-wizard.pf-m-fill {
   flex-grow: 1;
 }

package/docs/components/Page/examples/Page.css

@@ -1,5 +1,5 @@
 /* Because the page component has height:100dvh, override it just for the embedded examples */
-.ws-mdx-content-content [id^=ws-core-c-page-] .ws-preview-html .pf-v6-c-page {
+.ws-mdx-content-content [id^=ws-core-c-page-] .pf-v6-c-page {
   height: min-content;
   min-height: 30em;
 }

package/docs/components/Page/examples/Page.md

@@ -199,7 +199,7 @@ wrapperTag: div
       <section class="pf-v6-c-page__main-section pf-m-no-fill">
         <div class="pf-v6-c-page__main-body">
           This section uses
-          <code>.pf-m-no-fill</code> to not fill the available space.
+          <code>.pf-m-no-fill</code> not to fill the available space.
         </div>
       </section>
     </main>
@@ -388,12 +388,12 @@ This component provides the basic chrome for a page, including sidebar and main
 | -- | -- | -- |
 | `.pf-v6-c-page` | `<div>` | Declares the page component. |
 | `.pf-v6-c-page__sidebar` | `<aside>` | Declares the page sidebar. |
-| `.pf-v6-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-v6-c-page__sidebar-body` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
+| `.pf-v6-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-v6-c-page__sidebar-body` element will grow to fill the available vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
 | `.pf-v6-c-page__main` | `<main>` | Declares the main page area. |
 | `.pf-v6-c-page__main-nav` | `<section>` | Creates a container to nest the (deprecated) tertiary navigation component in the main page area. |
 | `.pf-v6-c-page__main-subnav` | `<section>` | Creates a container to nest the horizontal subnav navigation component in the main page area. |
 | `.pf-v6-c-page__main-breadcrumb` | `<section>` | Creates a container to nest the breadcrumb component in the main page area. |
-| `.pf-v6-c-page__main-section` | `<section>` | Creates a section container in the main page area. **Note: The last/only `.pf-v6-c-page__main-section` element will grow to fill the available vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.**  |
+| `.pf-v6-c-page__main-section` | `<section>` | Creates a section container in the main page area. **Note: This section will not fill the vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.**  |
 | `.pf-v6-c-page__main-tabs` | `<section>` | Creates a container to nest the tabs component in the main page area. |
 | `.pf-v6-c-page__main-wizard` | `<section>` | Creates a container to nest the wizard component in the main page area. |
 | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
@@ -411,8 +411,8 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.pf-m-light-200` | `.pf-v6-c-page__main-wizard` | Modifies a wizard page section to have a light 200 theme. |
 | `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
 | `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
-| `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__sidebar-body` | Modifies the element to not grow to fill the available vertical space. |
+| `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
+| `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element not to grow to fill the available vertical space. |
 | `.pf-m-limit-width` | `.pf-v6-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
 | `.pf-m-align-center` | `.pf-v6-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
 | `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-v6-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.189",
+  "version": "6.0.0-alpha.190",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -17826,6 +17826,7 @@ ul.pf-v6-c-list {
 .pf-v6-c-page__main-container {
   display: flex;
   flex-direction: column;
+  align-self: start;
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-block-start: 0;
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
@@ -17835,6 +17836,9 @@ ul.pf-v6-c-list {
   border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
+.pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
+  align-self: stretch;
+}
 
 .pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {
@@ -17954,12 +17958,8 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart);
 }
 
-.pf-v6-c-page__main-section:last-child, .pf-v6-c-page__main-section:only-child, .pf-v6-c-page__main-section.pf-m-fill,
-.pf-v6-c-page__main-group:last-child,
-.pf-v6-c-page__main-group:only-child,
+.pf-v6-c-page__main-section.pf-m-fill,
 .pf-v6-c-page__main-group.pf-m-fill,
-.pf-v6-c-page__main-wizard:last-child,
-.pf-v6-c-page__main-wizard:only-child,
 .pf-v6-c-page__main-wizard.pf-m-fill {
   flex-grow: 1;
 }

package/patternfly.css

@@ -17947,6 +17947,7 @@ ul.pf-v6-c-list {
 .pf-v6-c-page__main-container {
   display: flex;
   flex-direction: column;
+  align-self: start;
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-block-start: 0;
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
@@ -17956,6 +17957,9 @@ ul.pf-v6-c-list {
   border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
+.pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
+  align-self: stretch;
+}
 
 .pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {
@@ -18075,12 +18079,8 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart);
 }
 
-.pf-v6-c-page__main-section:last-child, .pf-v6-c-page__main-section:only-child, .pf-v6-c-page__main-section.pf-m-fill,
-.pf-v6-c-page__main-group:last-child,
-.pf-v6-c-page__main-group:only-child,
+.pf-v6-c-page__main-section.pf-m-fill,
 .pf-v6-c-page__main-group.pf-m-fill,
-.pf-v6-c-page__main-wizard:last-child,
-.pf-v6-c-page__main-wizard:only-child,
 .pf-v6-c-page__main-wizard.pf-m-fill {
   flex-grow: 1;
 }