@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.105

package/components/Page/page.scss

@@ -104,22 +104,22 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
   }
 
-  // Main
-  --#{$page}__main--ZIndex: var(--#{$pf-global}--ZIndex--xs);
-  --#{$page}__main--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
-  --#{$page}__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$page}__main--MarginInlineStart: var(--pf-t--global--spacer--lg);
-  --#{$page}__main--MarginInlineEnd: var(--pf-t--global--spacer--lg);
-  --#{$page}__main--BorderRadius: var(--pf-t--global--border--radius--large);
-  --#{$page}__main--BorderWidth: var(--pf-t--global--spacer--sm); // TODO Change to be a page outline token
-  --#{$page}__main--BorderColor: var(--#{$page}__main--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
+  // Container for the main content area (grid area)
+  --#{$page}__main-container--ZIndex: var(--#{$pf-global}--ZIndex--xs);
+  --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$page}__main-container--MarginInlineStart: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-container--MarginInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
+  --#{$page}__main-container--BorderWidth: var(--pf-t--global--spacer--sm); // TODO Change to be a page outline token
+  --#{$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--MarginTop: var(--pf-t--global--spacer--md);
   --#{$page}__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$page}__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--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--PaddingBottom: 0;
-  --#{$page}__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--main-section--PaddingTop: 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);
@@ -159,9 +159,9 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Main section breadcrumb
   --#{$page}__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$page}__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--PaddingBottom: 0;
-  --#{$page}__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-breadcrumb--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   // Main section tabs
@@ -192,7 +192,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   @media (min-width: $pf-v5-global--breakpoint--xl) {
     grid-template-areas:
       "header header"
-      "nav main";
+      "sidebar main";
     grid-template-columns: max-content 1fr;
     }
 }
@@ -316,7 +316,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   z-index: var(--#{$page}__sidebar--ZIndex);
   display: flex;
   flex-direction: column;
-  grid-area: nav;
+  grid-area: sidebar;
   grid-row-start: 2;
   grid-column-start: 1;
   width: var(--#{$page}__sidebar--Width);
@@ -492,20 +492,21 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 // Main & Drawer
-.#{$page}__main {
+.#{$page}__main-container {
   align-self: start;
-  max-height: var(--#{$page}__main--MaxHeight);
+  max-height: var(--#{$page}__main-container--MaxHeight);
   margin-block-start: 0;
-  margin-inline-start: var(--#{$page}__main--MarginInlineStart);
-  margin-inline-end: var(--#{$page}__main--MarginInlineEnd);
-  background: var(--#{$page}__main--BackgroundColor);
-  border: var(--#{$page}__main--BorderWidth) solid var(--#{$page}__main--BorderColor);
-  border-radius: var(--#{$page}__main--BorderRadius);
+  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
+  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
+  overflow: auto;
+  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);
 }
 
-.#{$page}__main,
+.#{$page}__main-container,
 .#{$page}__drawer {
-  z-index: var(--#{$page}__main--ZIndex);
+  z-index: var(--#{$page}__main-container--ZIndex);
   grid-area: main;
   overflow-x: hidden;
   overflow-y: auto;

package/docs/components/Drawer/examples/Drawer.md

@@ -775,7 +775,8 @@ cssPrefix: pf-v6-c-drawer
 | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
 | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
 | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
-| `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
+| `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
+| `.pf-m-primary` | `.pf-v6-c-drawer__content` | Modifies the drawer content to use the primary background color. |
 | `.pf-m-secondary` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
 | `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-resizable` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v6-c-drawer__splitter` element. |

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -1101,6 +1101,67 @@ cssPrefix: pf-v6-c-menu-toggle
 
 ```
 
+### Status
+
+```html isBeta
+<button
+  class="pf-v6-c-menu-toggle pf-m-success"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__text">Success</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__status-icon">
+      <i class="fas fa-check-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+<br />
+<br />
+
+<button
+  class="pf-v6-c-menu-toggle pf-m-warning"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__text">Warning</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__status-icon">
+      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+<br />
+<br />
+
+<button
+  class="pf-v6-c-menu-toggle pf-m-danger"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__text">Danger</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__status-icon">
+      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+```
+
+## Documentation
+
 ### Accessibility
 
 | Class | Applied to | Outcome |
@@ -1131,3 +1192,6 @@ cssPrefix: pf-v6-c-menu-toggle
 | `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
 | `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
 | `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |
+| `.pf-m-success` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the success state. |
+| `.pf-m-warning` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the warning state. |
+| `.pf-m-danger` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the danger state. |

package/docs/components/Page/deprecated/PageHeader.md

@@ -21,27 +21,29 @@ deprecated: true
   <div class="pf-v6-c-page__sidebar">
     <div class="pf-v6-c-page__sidebar-body">Navigation</div>
   </div>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-section pf-m-dark-100">
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-dark-100</code>.
-    </section>
-    <section class="pf-v6-c-page__main-section pf-m-dark-200">
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-dark-200</code>.
-    </section>
-    <section class="pf-v6-c-page__main-section pf-m-light">
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-light</code>.
-    </section>
-    <section class="pf-v6-c-page__main-section">
-      This is a default
-      <code>.pf-v6-c-page__main-section</code>.
-    </section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section pf-m-dark-100">
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-dark-100</code>.
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-dark-200">
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-dark-200</code>.
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-light">
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-light</code>.
+      </section>
+      <section class="pf-v6-c-page__main-section">
+        This is a default
+        <code>.pf-v6-c-page__main-section</code>.
+      </section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -57,12 +59,14 @@ deprecated: true
     <div class="pf-v6-c-page__header-nav">Navigation</div>
     <div class="pf-v6-c-page__header-tools">header-tools</div>
   </header>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-section pf-m-dark-100"></section>
-    <section class="pf-v6-c-page__main-section pf-m-dark-200"></section>
-    <section class="pf-v6-c-page__main-section pf-m-light"></section>
-    <section class="pf-v6-c-page__main-section"></section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section pf-m-dark-100"></section>
+      <section class="pf-v6-c-page__main-section pf-m-dark-200"></section>
+      <section class="pf-v6-c-page__main-section pf-m-light"></section>
+      <section class="pf-v6-c-page__main-section"></section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -85,9 +89,11 @@ deprecated: true
     >inset content</div>
     <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
   </div>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-section pf-m-light"></section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section pf-m-light"></section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -103,19 +109,21 @@ deprecated: true
     <div class="pf-v6-c-page__header-nav">Navigation</div>
     <div class="pf-v6-c-page__header-tools">header-tools</div>
   </header>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section
-      class="pf-v6-c-page__main-section pf-m-light"
-    >A regular page section.</section>
-    <section class="pf-v6-c-page__main-section pf-m-fill">
-      This section uses
-      <code>.pf-m-fill</code> to fill the available space.
-    </section>
-    <section class="pf-v6-c-page__main-section pf-m-light pf-m-no-fill">
-      This section uses
-      <code>.pf-m-no-fill</code> to not fill the available space.
-    </section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section
+        class="pf-v6-c-page__main-section pf-m-light"
+      >A regular page section.</section>
+      <section class="pf-v6-c-page__main-section pf-m-fill">
+        This section uses
+        <code>.pf-m-fill</code> to fill the available space.
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-light pf-m-no-fill">
+        This section uses
+        <code>.pf-m-no-fill</code> to not fill the available space.
+      </section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -134,25 +142,27 @@ deprecated: true
   <div class="pf-v6-c-page__sidebar">
     <div class="pf-v6-c-page__sidebar-body">Navigation</div>
   </div>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-section">
-      This
-      <code>.pf-v6-c-page__main-section</code> has default padding.
-    </section>
-    <section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-no-padding</code> to remove all padding.
-    </section>
-    <section
-      class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
-    >
-      This
-      <code>.pf-v6-c-page__main-section</code> uses
-      <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
-      <code>md</code> breakpoint.
-    </section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section">
+        This
+        <code>.pf-v6-c-page__main-section</code> has default padding.
+      </section>
+      <section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-no-padding</code> to remove all padding.
+      </section>
+      <section
+        class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
+      >
+        This
+        <code>.pf-v6-c-page__main-section</code> uses
+        <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
+        <code>md</code> breakpoint.
+      </section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -171,29 +181,31 @@ deprecated: true
   <div class="pf-v6-c-page__sidebar">
     <div class="pf-v6-c-page__sidebar-body">Navigation</div>
   </div>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section class="pf-v6-c-page__main-subnav">
-      <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
-    </section>
-    <section class="pf-v6-c-page__main-nav">
-      <code>.pf-v6-c-page__main-nav</code> for tertiary navigation
-    </section>
-    <section class="pf-v6-c-page__main-tabs">
-      <code>.pf-v6-c-page__main-tabs</code> for tabs
-    </section>
-    <div class="pf-v6-c-page__main-group">
-      <code>.pf-v6-c-page__main-group</code> for a group of page sections
-    </div>
-    <section class="pf-v6-c-page__main-breadcrumb">
-      <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
-    </section>
-    <section class="pf-v6-c-page__main-section">
-      <code>.pf-v6-c-page__main-section</code> for main sections
-    </section>
-    <section class="pf-v6-c-page__main-wizard">
-      <code>.pf-v6-c-page__main-wizard</code> for wizards
-    </section>
-  </main>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-subnav">
+        <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
+      </section>
+      <section class="pf-v6-c-page__main-nav">
+        <code>.pf-v6-c-page__main-nav</code> for tertiary navigation
+      </section>
+      <section class="pf-v6-c-page__main-tabs">
+        <code>.pf-v6-c-page__main-tabs</code> for tabs
+      </section>
+      <div class="pf-v6-c-page__main-group">
+        <code>.pf-v6-c-page__main-group</code> for a group of page sections
+      </div>
+      <section class="pf-v6-c-page__main-breadcrumb">
+        <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
+      </section>
+      <section class="pf-v6-c-page__main-section">
+        <code>.pf-v6-c-page__main-section</code> for main sections
+      </section>
+      <section class="pf-v6-c-page__main-wizard">
+        <code>.pf-v6-c-page__main-wizard</code> for wizards
+      </section>
+    </main>
+  </div>
 </div>
 
 ```
@@ -209,22 +221,24 @@ deprecated: true
     </div>
     <div class="pf-v6-c-page__header-tools">header-tools</div>
   </header>
-  <main class="pf-v6-c-page__main" tabindex="-1">
-    <section
-      class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
-    >
-      <div class="pf-v6-c-page__main-body">
-        <div class="pf-v6-c-card">
-          <div class="pf-v6-c-card__body">
-            When a width limited page section is wider than the value of
-            <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
-            <br />
-            <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section
+        class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
+      >
+        <div class="pf-v6-c-page__main-body">
+          <div class="pf-v6-c-card">
+            <div class="pf-v6-c-card__body">
+              When a width limited page section is wider than the value of
+              <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
+              <br />
+              <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
+            </div>
           </div>
         </div>
-      </div>
-    </section>
-  </main>
+      </section>
+    </main>
+  </div>
 </div>
 
 ```