@patternfly/react-core 6.0.0-alpha.1 → 6.0.0-alpha.11

package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -41,21 +41,6 @@ exports[`Page Check dark page against snapshot 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -101,21 +86,6 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -265,21 +235,6 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -429,21 +384,6 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -596,30 +536,42 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-2"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-2"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-3"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
             <ul
               class="pf-v5-c-nav__list"
               role="list"
@@ -686,25 +638,37 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-4"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
       </div>
@@ -713,21 +677,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -779,30 +728,42 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
         >
           <nav
             aria-label="Nav"
-            class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-            data-ouia-component-id="OUIA-Generated-Nav-tertiary-3"
+            class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+            data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-3"
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <button
-              aria-label="Scroll back"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll back"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-5"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
             <ul
               class="pf-v5-c-nav__list"
               role="list"
@@ -869,25 +830,37 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                 </a>
               </li>
             </ul>
-            <button
-              aria-label="Scroll foward"
+            <div
               class="pf-v5-c-nav__scroll-button"
-              disabled=""
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 256 512"
-                width="1em"
-              >
-                <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                />
-              </svg>
-            </button>
+              <button
+                aria-disabled="false"
+                aria-label="Scroll foward"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Button-plain-6"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <span
+                  class="pf-v5-c-button__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 256 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
           </nav>
         </div>
         <section
@@ -1004,21 +977,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1064,30 +1022,42 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       >
         <nav
           aria-label="Nav"
-          class="pf-v5-c-nav pf-m-horizontal pf-m-tertiary"
-          data-ouia-component-id="OUIA-Generated-Nav-tertiary-1"
+          class="pf-v5-c-nav pf-m-horizontal pf-m-subnav"
+          data-ouia-component-id="OUIA-Generated-Nav-horizontal-subnav-1"
           data-ouia-component-type="PF5/Nav"
           data-ouia-safe="true"
         >
-          <button
-            aria-label="Scroll back"
+          <div
             class="pf-v5-c-nav__scroll-button"
-            disabled=""
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll back"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-1"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-              />
-            </svg>
-          </button>
+              <span
+                class="pf-v5-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
           <ul
             class="pf-v5-c-nav__list"
             role="list"
@@ -1154,25 +1124,37 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
               </a>
             </li>
           </ul>
-          <button
-            aria-label="Scroll foward"
+          <div
             class="pf-v5-c-nav__scroll-button"
-            disabled=""
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <button
+              aria-disabled="false"
+              aria-label="Scroll foward"
+              class="pf-v5-c-button pf-m-plain"
+              data-ouia-component-id="OUIA-Generated-Button-plain-2"
+              data-ouia-component-type="PF5/Button"
+              data-ouia-safe="true"
+              type="button"
             >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-          </button>
+              <span
+                class="pf-v5-c-button__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 256 512"
+                  width="1em"
+                >
+                  <path
+                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
         </nav>
       </div>
       <section
@@ -1180,21 +1162,6 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1360,21 +1327,6 @@ exports[`Page Check page to verify skip to content points to main content region
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1421,21 +1373,6 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1585,21 +1522,6 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1749,21 +1671,6 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -1913,21 +1820,6 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>
@@ -2077,21 +1969,6 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
       >
         Section with default background
       </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-light"
-      >
-        Section with light background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-200"
-      >
-        Section with dark background
-      </section>
-      <section
-        class="pf-v5-c-page__main-section pf-m-dark-100"
-      >
-        Section with darker background
-      </section>
     </main>
   </div>
 </DocumentFragment>

package/src/components/Page/examples/Page.md

@@ -16,7 +16,7 @@ propComponents:
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import './page.css';
+import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples
 
@@ -61,16 +61,6 @@ To add horizontal navigation to the top of a `<Page>`, add the navigation inside
 
 ```
 
-### Tertiary navigation (deprecated)
-
-[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation.
-
-Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
-
-```ts file="./PageTertiaryNav.tsx" isDeprecated
-
-```
-
 ### Uncontrolled navigation
 
 When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isSidebarOpen` into the `<PageSidebar>` and `onSidebarToggle` into the `<PageToggleButton>`.
@@ -114,7 +104,7 @@ The following example adds a group containing `<PageNavigation>`, `<PageBreadcru
 To add additional components and information to a group, you may use the following properties:
 
 - To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`.
-- To indicate that tertiary navigation should be in a group, use `isTertiaryNavGrouped`.
+- To indicate that horizontal sub navigation should be in a group, use `isHorizontalSubnavGrouped`.
 - To specify additional group content, use `additionalGroupedContent`.
 
 ```ts file="./PageGroupSection.tsx"