@patternfly/patternfly 6.1.0-prerelease.5 → 6.1.0-prerelease.7

package/components/Page/page.css

@@ -4,7 +4,7 @@
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width: 18.125rem;
-  --pf-v6-c-page__sidebar--xl--Width: auto;
+  --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
   --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__sidebar--BoxShadow: none;
   --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -193,18 +193,21 @@
   flex-grow: 0;
 }
 
+.pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
   max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
 }
+.pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
   align-items: center;
 }
+.pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,

package/components/Page/page.scss

@@ -15,7 +15,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
-  --#{$page}__sidebar--xl--Width: auto;
+  --#{$page}__sidebar--xl--Width: #{pf-size-prem(290px)}; // TODO Can remove at breaking change
   --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__sidebar--BoxShadow: none;
 
@@ -136,7 +136,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   background-color: var(--#{$page}--BackgroundColor);
 
   @media (min-width: $pf-v6-global--breakpoint--xl) {
-    --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width);
+    --#{$page}__sidebar--Width: var(--#{$page}__sidebar--xl--Width); // TODO can remove at breaking change
 
     grid-template-areas:
       "header header"
@@ -247,6 +247,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 }
 
+.#{$page}__main-subnav,
 .#{$page}__main-breadcrumb,
 .#{$page}__main-tabs,
 .#{$page}__main-section,

package/components/Table/table.css

@@ -27,7 +27,7 @@
   --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base);
-  --pf-v6-c-table--cell--MinWidth: 0;
+  --pf-v6-c-table--cell--MinWidth: calc(var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineEnd));
   --pf-v6-c-table--cell--MaxWidth: none;
   --pf-v6-c-table--cell--Width: auto;
   --pf-v6-c-table--cell--Overflow: visible;
@@ -41,6 +41,8 @@
   --pf-v6-c-table--cell--m-help--MinWidth: 11ch;
   --pf-v6-c-table--m-truncate--cell--MaxWidth: 1px;
   --pf-v6-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineStart));
+  --pf-v6-c-table__text--MinWidth: 100%;
+  --pf-v6-c-table__text--m-truncate--MinWidth: 5ch;
   --pf-v6-c-table--m-truncate__text--MinWidth: 5ch;
   --pf-v6-c-table--cell--hidden-visible--Display: table-cell;
   --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -429,11 +431,10 @@
 }
 
 .pf-v6-c-table__text {
-  --pf-v6-c-table--cell--MaxWidth: 100%;
   position: relative;
   display: block;
   width: var(--pf-v6-c-table--cell--Width);
-  min-width: var(--pf-v6-c-table--text--MinWidth);
+  min-width: var(--pf-v6-c-table__text--MinWidth);
   max-width: var(--pf-v6-c-table--cell--MaxWidth);
   overflow: var(--pf-v6-c-table--cell--Overflow);
   line-height: var(--pf-v6-c-table--cell--LineHeight);
@@ -443,7 +444,7 @@
 }
 .pf-v6-c-table__text.pf-m-truncate {
   --pf-v6-c-table--cell--MinWidth: 100%;
-  --pf-v6-c-table--text--MinWidth: var(--pf-v6-c-table--m-truncate__text--MinWidth);
+  min-width: max(var(--pf-v6-c-table__text--m-truncate--MinWidth), var(--pf-v6-c-table__text--MinWidth));
 }
 .pf-v6-c-table__text.pf-m-truncate > :where(th, td) {
   overflow: var(--pf-v6-c-table--cell--Overflow);
@@ -496,6 +497,7 @@
 .pf-v6-c-table__button-content .pf-v6-c-table__text,
 .pf-v6-c-table__column-help .pf-v6-c-table__text {
   min-width: auto;
+  max-width: 100%;
 }
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-nowrap .pf-v6-c-table__button-content,
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__column-help,

package/components/Table/table.scss

@@ -48,7 +48,7 @@
   --#{$table}__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--#{$table}--cell--Padding--base);
 
   // * Table cell - default variables
-  --#{$table}--cell--MinWidth: 0;
+  --#{$table}--cell--MinWidth: calc(var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineEnd));
   --#{$table}--cell--MaxWidth: none;
   --#{$table}--cell--Width: auto;
   --#{$table}--cell--Overflow: visible;
@@ -70,6 +70,8 @@
   --#{$table}--m-truncate--cell--MinWidth: calc(5ch + var(--#{$table}--cell--PaddingInlineEnd) + var(--#{$table}--cell--PaddingInlineStart));
 
   // * Table truncate
+  --#{$table}__text--MinWidth: 100%;
+  --#{$table}__text--m-truncate--MinWidth: 5ch;
   --#{$table}--m-truncate__text--MinWidth: 5ch;
 
   // * Table cell hidden visible
@@ -602,12 +604,10 @@
 
 // - Table text
 .#{$table}__text {
-  --#{$table}--cell--MaxWidth: 100%;
-
   position: relative;
   display: block;
   width: var(--#{$table}--cell--Width);
-  min-width: var(--#{$table}--text--MinWidth);
+  min-width: var(--#{$table}__text--MinWidth);
   max-width: var(--#{$table}--cell--MaxWidth);
   overflow: var(--#{$table}--cell--Overflow);
   line-height: var(--#{$table}--cell--LineHeight);
@@ -618,7 +618,8 @@
   // Only apply these settings if specifically modified
   &.pf-m-truncate {
     --#{$table}--cell--MinWidth: 100%;
-    --#{$table}--text--MinWidth: var(--#{$table}--m-truncate__text--MinWidth);
+
+    min-width: max(var(--#{$table}__text--m-truncate--MinWidth), var(--#{$table}__text--MinWidth));
 
     > :where(th, td) {
       overflow: var(--#{$table}--cell--Overflow);
@@ -682,6 +683,7 @@
 
   .#{$table}__text {
     min-width: auto;
+    max-width: 100%;
   }
 
   .#{$table} thead:where(.#{$table}__thead).pf-m-nowrap &,

package/components/_index.css

@@ -11395,7 +11395,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width: 18.125rem;
-  --pf-v6-c-page__sidebar--xl--Width: auto;
+  --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
   --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__sidebar--BoxShadow: none;
   --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -11584,18 +11584,21 @@ ul.pf-v6-c-list {
   flex-grow: 0;
 }
 
+.pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
   max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
 }
+.pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
 .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
   align-items: center;
 }
+.pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
 .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
@@ -16208,7 +16211,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base);
-  --pf-v6-c-table--cell--MinWidth: 0;
+  --pf-v6-c-table--cell--MinWidth: calc(var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineEnd));
   --pf-v6-c-table--cell--MaxWidth: none;
   --pf-v6-c-table--cell--Width: auto;
   --pf-v6-c-table--cell--Overflow: visible;
@@ -16222,6 +16225,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-table--cell--m-help--MinWidth: 11ch;
   --pf-v6-c-table--m-truncate--cell--MaxWidth: 1px;
   --pf-v6-c-table--m-truncate--cell--MinWidth: calc(5ch + var(--pf-v6-c-table--cell--PaddingInlineEnd) + var(--pf-v6-c-table--cell--PaddingInlineStart));
+  --pf-v6-c-table__text--MinWidth: 100%;
+  --pf-v6-c-table__text--m-truncate--MinWidth: 5ch;
   --pf-v6-c-table--m-truncate__text--MinWidth: 5ch;
   --pf-v6-c-table--cell--hidden-visible--Display: table-cell;
   --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -16610,11 +16615,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 }
 
 .pf-v6-c-table__text {
-  --pf-v6-c-table--cell--MaxWidth: 100%;
   position: relative;
   display: block;
   width: var(--pf-v6-c-table--cell--Width);
-  min-width: var(--pf-v6-c-table--text--MinWidth);
+  min-width: var(--pf-v6-c-table__text--MinWidth);
   max-width: var(--pf-v6-c-table--cell--MaxWidth);
   overflow: var(--pf-v6-c-table--cell--Overflow);
   line-height: var(--pf-v6-c-table--cell--LineHeight);
@@ -16624,7 +16628,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 }
 .pf-v6-c-table__text.pf-m-truncate {
   --pf-v6-c-table--cell--MinWidth: 100%;
-  --pf-v6-c-table--text--MinWidth: var(--pf-v6-c-table--m-truncate__text--MinWidth);
+  min-width: max(var(--pf-v6-c-table__text--m-truncate--MinWidth), var(--pf-v6-c-table__text--MinWidth));
 }
 .pf-v6-c-table__text.pf-m-truncate > :where(th, td) {
   overflow: var(--pf-v6-c-table--cell--Overflow);
@@ -16677,6 +16681,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-table__button-content .pf-v6-c-table__text,
 .pf-v6-c-table__column-help .pf-v6-c-table__text {
   min-width: auto;
+  max-width: 100%;
 }
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-nowrap .pf-v6-c-table__button-content, .pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-nowrap .pf-v6-c-table__button-content,
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nowrap .pf-v6-c-table__column-help,

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-] .pf-v6-c-page {
+#ws-page-main [id^=ws-core-c-page-] .pf-v6-c-page {
   height: min-content;
   min-height: 30em;
 }

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

@@ -152,10 +152,11 @@ wrapperTag: div
   </header>
   <div class="pf-v6-c-page__sidebar">
     <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    <div class="pf-v6-c-page__sidebar-body pf-m-fill">inset content</div>
     <div
-      class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets"
-    >inset content</div>
-    <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
+      class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-inset-none"
+    >content that is not inset</div>
+    <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -193,7 +194,7 @@ wrapperTag: div
       <span>Content</span>
     </div>
   </header>
-  <div class="pf-v6-c-page__main-container" tabindex="-1">
+  <div class="pf-v6-c-page__main-container pf-m-fill" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
       <section class="pf-v6-c-page__main-section">
         <div class="pf-v6-c-page__main-body">A regular page section.</div>
@@ -201,13 +202,15 @@ wrapperTag: div
       <section class="pf-v6-c-page__main-section pf-m-fill">
         <div class="pf-v6-c-page__main-body">
           This section uses
-          <code>.pf-m-fill</code> to fill the available space.
+          <code>.pf-m-fill</code> to fill the available space. The
+          <code>.pf-v6-c-page__main-container</code> must also have
+          <code>.pf-m-fill</code> in order for the section to have space to stretch to full height.
         </div>
       </section>
       <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> not to fill the available space.
+          <code>.pf-m-no-fill</code> and will not fill the available space.
         </div>
       </section>
     </main>
@@ -416,7 +419,7 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.pf-m-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
 | `.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-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-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. Note that `.pf-v6-c-page__main-container` must also have `.pf-m-fill` applied in order for the section to have space to stretch to full height.|
 | `.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. |