fix(page): fix section spacing (#6766)

src/patternfly/components/Page/examples/Page.css

@@ -1,9 +1,5 @@
-#ws-core-c-page-with-or-without-fill .ws-preview-html,
-#ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
-  height: 500px;
-}
-
-#ws-core-c-page-multiple-sidebar-body-elements .ws-preview-html,
-#ws-core-c-page-using-flex-layout .ws-preview-html {
-  height: 100%;
-}
+/* 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 {
+  height: min-content;
+  min-height: 30em;
+}

src/patternfly/components/Page/examples/Page.md

@@ -34,6 +34,17 @@ import './Page.css'
     {{#> page-main-section}}
       This is a default <code>.pf-v6-c-page__main-section</code>.
     {{/page-main-section}}
+    {{#> page-main-section page-main-section--modifier="pf-m-secondary" page-main-section--ExcludeMainBody="true"}}
+      {{#> page-main-body}}
+        This is a page__main-body, one of three within one page__main-section.
+      {{/ page-main-body}}
+      {{#> page-main-body}}
+        This is a page__main-body, one of three within one page__main-section.
+      {{/ page-main-body}}
+      {{#> page-main-body}}
+        This is a page__main-body, one of three within one page__main-section.
+      {{/ page-main-body}}
+    {{/page-main-section}}
   {{/page-main}}
 {{/page}}
 ```
@@ -238,10 +249,10 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.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 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__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-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 when using `.pf-m-limit-width` on `.pf-v6-c-page__main-section`** |
+| `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
 | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
 | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
 | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |

src/patternfly/components/Page/page-main-section.hbs

@@ -2,11 +2,11 @@
   {{#if page-main-section--attribute}}
     {{{page-main-section--attribute}}}
   {{/if}}>
-  {{#if page-main-section--IsLimitWidth}}
+  {{#if page-main-section--ExcludeMainBody}}
+    {{> @partial-block}}
+  {{else}}
     {{#> page-main-body}}
       {{> @partial-block}}
     {{/page-main-body}}
-  {{else}}
-    {{> @partial-block}}
   {{/if}}
 </section>

src/patternfly/components/Page/page.scss

@@ -64,11 +64,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main-container--BorderColor: var(--#{$page}__main-container--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
 
   // Main section
-  --#{$page}__main-section--MarginBlockStart: var(--pf-t--global--spacer--md);
-  --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--lg);
-  --#{$page}__main-section--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section - TODO, see if we can remove the need for this calc(), or possibly move it down to the property definition so a user can theme this without a calc()
-  --#{$page}__main-section--PaddingBlockEnd: 0;
-  --#{$page}__main-section--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$page}__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
+  --#{$page}__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$page}__main-section--PaddingInlineStart: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
+  --#{$page}__main-section--RowGap: var(--pf-t--global--spacer--lg);
   --#{$page}__main-breadcrumb--main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$page}__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$page}__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -77,7 +77,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Limit width
   --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
-
+  
   // Sticky
   --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -117,6 +117,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main-tabs--PaddingBlockStart: 0;
   --#{$page}__main-tabs--PaddingInlineEnd: 0;
   --#{$page}__main-tabs--PaddingBlockEnd: 0;
+  --#{$page}__main-tabs--PaddingInlineStart: 0;
   --#{$page}__main-tabs--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   // Wizard main section
@@ -244,12 +245,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-section,
 .#{$page}__main-wizard {
   &.pf-m-limit-width {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-
     > .#{$page}__main-body {
-      flex: 1;
       max-width: var(--#{$page}--section--m-limit-width--MaxWidth);
     }
 
@@ -270,6 +266,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-wizard,
 .#{$page}__main-group,
 .#{$page}__main-subnav {
+  display: flex;
+  flex-direction: column;
   flex-shrink: 0;
 
   &.pf-m-overflow-scroll {
@@ -344,6 +342,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-list {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
 }
 
 .#{$page}__main-nav {
@@ -428,10 +427,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__main-section {
+  gap: var(--#{$page}__main-section--RowGap);
   padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
   padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
-  padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
-  padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
+  padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
+  padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
   background-color: var(--#{$page}__main-section--BackgroundColor);
 
   &.pf-m-secondary {
@@ -446,17 +446,17 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
       &.pf-m-padding#{$breakpoint-name} {
         padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
         padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
-        padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
-        padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
+        padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
+        padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
 
         &.pf-m-limit-width {
           padding: 0;
 
           .#{$page}__main-body {
             padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
             padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
-            padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
-            padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
+            padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
+            padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
           }
         }
       }
@@ -493,28 +493,16 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
 .#{$page}__main-body {
   .#{$page}__main-nav & {
-    padding-block-start: var(--#{$page}__main-nav--PaddingBlockStart);
     padding-inline-start: var(--#{$page}__main-nav--PaddingInlineStart);
     padding-inline-end: var(--#{$page}__main-nav--PaddingInlineEnd);
   }
 
   .#{$page}__main-breadcrumb & {
-    padding-block-start: var(--#{$page}__main-breadcrumb--PaddingBlockStart);
-    padding-block-end: var(--#{$page}__main-breadcrumb--PaddingBlockEnd);
-    padding-inline-start: var(--#{$page}__main-breadcrumb--PaddingInlineStart);
-    padding-inline-end: var(--#{$page}__main-breadcrumb--PaddingInlineEnd);
-  }
-
-  .#{$page}__main-section & {
-    padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
-    padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
-    padding-inline-start: var(--#{$page}__main-section--PaddingInlineStart);
-    padding-inline-end: var(--#{$page}__main-section--PaddingInlineEnd);
+    padding-inline-start: 0;
+    padding-inline-end: 0;
   }
 
   .#{$page}__main-tabs & {
-    padding-block-start: var(--#{$page}__main-tabs--PaddingBlockStart);
-    padding-block-end: var(--#{$page}__main-tabs--PaddingBlockEnd);
     padding-inline-start: var(--#{$page}__main-tabs--PaddingInlineStart);
     padding-inline-end: var(--#{$page}__main-tabs--PaddingInlineEnd);
   }
@@ -527,4 +515,3 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     flex: 1 0 auto;
   }
 }
-

src/patternfly/components/Toolbar/toolbar.scss

@@ -37,6 +37,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   --#{$toolbar}__content--RowGap: var(--pf-t--global--spacer--sm);
   --#{$toolbar}__content--PaddingBlock: var(--pf-t--global--spacer--md);
   --#{$toolbar}__content--PaddingInline: var(--#{$toolbar}--PaddingInline);
+  --#{$toolbar}__content--PaddingBlockStart: 0;
 
   // * Toolbar expandable content
   --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);