@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.60

package/docs/components/OverflowMenu/examples/overflow-menu.md

@@ -100,7 +100,19 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
           aria-label="Align left"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-left" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -111,7 +123,19 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
           aria-label="Align center"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-center" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM108.1 96h231.81A12.09 12.09 0 0 0 352 83.9V44.09A12.09 12.09 0 0 0 339.91 32H108.1A12.09 12.09 0 0 0 96 44.09V83.9A12.1 12.1 0 0 0 108.1 96zm231.81 256A12.09 12.09 0 0 0 352 339.9v-39.81A12.09 12.09 0 0 0 339.91 288H108.1A12.09 12.09 0 0 0 96 300.09v39.81a12.1 12.1 0 0 0 12.1 12.1z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -122,7 +146,19 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
           aria-label="Align right"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-right" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M16 224h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm416 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-384H172.83A12.82 12.82 0 0 0 160 44.83v38.34A12.82 12.82 0 0 0 172.83 96h262.34A12.82 12.82 0 0 0 448 83.17V44.83A12.82 12.82 0 0 0 435.17 32zm0 256H172.83A12.82 12.82 0 0 0 160 300.83v38.34A12.82 12.82 0 0 0 172.83 352h262.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -199,7 +235,19 @@ The action group consists of a primary and secondary action. Any additional acti
           aria-label="Align left"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-left" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M12.83 352h262.34A12.82 12.82 0 0 0 288 339.17v-38.34A12.82 12.82 0 0 0 275.17 288H12.83A12.82 12.82 0 0 0 0 300.83v38.34A12.82 12.82 0 0 0 12.83 352zm0-256h262.34A12.82 12.82 0 0 0 288 83.17V44.83A12.82 12.82 0 0 0 275.17 32H12.83A12.82 12.82 0 0 0 0 44.83v38.34A12.82 12.82 0 0 0 12.83 96zM432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -210,7 +258,19 @@ The action group consists of a primary and secondary action. Any additional acti
           aria-label="Align center"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-center" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M432 160H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0 256H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM108.1 96h231.81A12.09 12.09 0 0 0 352 83.9V44.09A12.09 12.09 0 0 0 339.91 32H108.1A12.09 12.09 0 0 0 96 44.09V83.9A12.1 12.1 0 0 0 108.1 96zm231.81 256A12.09 12.09 0 0 0 352 339.9v-39.81A12.09 12.09 0 0 0 339.91 288H108.1A12.09 12.09 0 0 0 96 300.09v39.81a12.1 12.1 0 0 0 12.1 12.1z"
+              />
+            </svg>
           </span>
         </button>
       </div>
@@ -221,7 +281,19 @@ The action group consists of a primary and secondary action. Any additional acti
           aria-label="Align right"
         >
           <span class="pf-v6-c-button__icon">
-            <i class="fas fa-align-right" aria-hidden="true"></i>
+            <svg
+              class="pf-v6-svg"
+              viewBox="0 0 448 512"
+              fill="currentColor"
+              aria-hidden="true"
+              role="img"
+              width="1em"
+              height="1em"
+            >
+              <path
+                d="M16 224h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm416 192H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm3.17-384H172.83A12.82 12.82 0 0 0 160 44.83v38.34A12.82 12.82 0 0 0 172.83 96h262.34A12.82 12.82 0 0 0 448 83.17V44.83A12.82 12.82 0 0 0 435.17 32zm0 256H172.83A12.82 12.82 0 0 0 160 300.83v38.34A12.82 12.82 0 0 0 172.83 352h262.34A12.82 12.82 0 0 0 448 339.17v-38.34A12.82 12.82 0 0 0 435.17 288z"
+              />
+            </svg>
           </span>
         </button>
       </div>

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

@@ -52,7 +52,9 @@ wrapperTag: div
     </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-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -208,12 +210,14 @@ wrapperTag: div
     </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-inset-none"
-    >content that is not inset</div>
-    <div class="pf-v6-c-page__sidebar-body pf-m-no-fill">footer content</div>
+    <div class="pf-v6-c-page__sidebar-main">
+      <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-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>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -340,7 +344,9 @@ wrapperTag: div
     </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-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -418,7 +424,9 @@ wrapperTag: div
     </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-main">
+      <div class="pf-v6-c-page__sidebar-body">Navigation</div>
+    </div>
   </div>
   <div class="pf-v6-c-page__main-container" tabindex="-1">
     <main class="pf-v6-c-page__main" tabindex="-1">
@@ -514,6 +522,56 @@ wrapperTag: div
 
 ```
 
+### With dock
+
+```html isBeta
+<div class="pf-v6-c-page pf-m-dock">
+  <div class="pf-v6-c-page__dock">
+    <div class="pf-v6-c-page__dock-main">
+      <header class="pf-v6-c-masthead pf-m-docked">
+        <div class="pf-v6-c-masthead__main">
+          <div class="pf-v6-c-masthead__brand">logo</div>
+        </div>
+        <div class="pf-v6-c-masthead__content">
+          <button
+            class="pf-v6-c-button pf-m-plain"
+            type="button"
+            aria-label="Chat"
+          >
+            <span class="pf-v6-c-button__icon">
+              <svg
+                class="pf-v6-svg"
+                viewBox="0 0 512 512"
+                fill="currentColor"
+                aria-hidden="true"
+                role="img"
+                width="1em"
+                height="1em"
+              >
+                <path
+                  d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+                />
+              </svg>
+            </span>
+          </button>
+        </div>
+      </header>
+    </div>
+  </div>
+  <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">
+        <div class="pf-v6-c-page__main-body">
+          This is a default
+          <code>.pf-v6-c-page__main-section</code>.
+        </div>
+      </section>
+    </main>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -545,16 +603,19 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.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-dock` | `.pf-v6-c-page` | Modifies the page grid to have a dock. |
 | `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
 | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
 | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
 | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
 | `.pf-m-context-selector` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body to contain a context selector. |
 | `.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](/tokens/all-patternfly-tokens). 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](/tokens/all-patternfly-tokens). |
+| `.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](/foundations-and-styles/design-tokens/all-design-tokens). 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](/foundations-and-styles/design-tokens/all-design-tokens). |
 | `.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-plain` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-subnav`, and `.pf-v6-c-page__main-tabs` | Applies plain styling to the section. |
+| `.pf-m-no-plain-on-glass` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__main-breadcrumb`, `.pf-v6-c-page__main-subnav`, and `.pf-v6-c-page__main-tabs` | Prevents the section from automatically applying plain styling when glass theme is enabled. |
 | `.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. |