@patternfly/react-core 6.0.0-alpha.41 → 6.0.0-alpha.43

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

@@ -502,37 +502,6 @@ exports[`Nav Horizontal Nav List 1`] = `
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <div
-      class="pf-v6-c-nav__scroll-button"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="Scroll back"
-        class="pf-v6-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"
-      >
-        <span
-          class="pf-v6-c-button__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-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-v6-c-nav__list"
       role="list"
@@ -590,37 +559,6 @@ exports[`Nav Horizontal Nav List 1`] = `
         </a>
       </li>
     </ul>
-    <div
-      class="pf-v6-c-nav__scroll-button"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="Scroll foward"
-        class="pf-v6-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"
-      >
-        <span
-          class="pf-v6-c-button__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-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>
 </DocumentFragment>
 `;
@@ -634,37 +572,6 @@ exports[`Nav Horizontal SubNav List 1`] = `
     data-ouia-component-type="PF5/Nav"
     data-ouia-safe="true"
   >
-    <div
-      class="pf-v6-c-nav__scroll-button"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="Scroll back"
-        class="pf-v6-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-v6-c-button__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-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-v6-c-nav__list"
       role="list"
@@ -722,37 +629,6 @@ exports[`Nav Horizontal SubNav List 1`] = `
         </a>
       </li>
     </ul>
-    <div
-      class="pf-v6-c-nav__scroll-button"
-    >
-      <button
-        aria-disabled="false"
-        aria-label="Scroll foward"
-        class="pf-v6-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-v6-c-button__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-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>
 </DocumentFragment>
 `;

package/src/components/Nav/examples/Nav.md

@@ -44,6 +44,12 @@ The following example shows two navigation groups, each with a `title` prop pass
 
 ```
 
+### Horizontal navigation
+
+```ts file="./NavHorizontalNav.tsx"
+
+```
+
 ### Horizontal subnav
 
 ```ts file="./NavHorizontalSubNav.tsx"

package/src/components/Nav/examples/NavHorizontalNav.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Nav, NavItem, NavList } from '@patternfly/react-core';
+
+export const NavHorizontalNav: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  return (
+    <Nav onSelect={onSelect} variant="horizontal" aria-label="Horizontal nav local">
+      <NavList>
+        {Array.from({ length: 10 }).map((_value, index) => {
+          const num = index + 1;
+          return (
+            <NavItem
+              preventDefault
+              key={num}
+              itemId={num}
+              isActive={activeItem === num}
+              id={`horizontal-nav-${num}`}
+              to={`#horizontal-nav-${num}`}
+            >
+              Horizontal navigation item {num}
+            </NavItem>
+          );
+        })}
+      </NavList>
+    </Nav>
+  );
+};

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

@@ -541,37 +541,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <div
-              class="pf-v6-c-nav__scroll-button"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="Scroll back"
-                class="pf-v6-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-v6-c-button__icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-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-v6-c-nav__list"
               role="list"
@@ -638,37 +607,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                 </a>
               </li>
             </ul>
-            <div
-              class="pf-v6-c-nav__scroll-button"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="Scroll foward"
-                class="pf-v6-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-v6-c-button__icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-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>
@@ -733,37 +671,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
             data-ouia-component-type="PF5/Nav"
             data-ouia-safe="true"
           >
-            <div
-              class="pf-v6-c-nav__scroll-button"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="Scroll back"
-                class="pf-v6-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-v6-c-button__icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-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-v6-c-nav__list"
               role="list"
@@ -830,37 +737,6 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                 </a>
               </li>
             </ul>
-            <div
-              class="pf-v6-c-nav__scroll-button"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="Scroll foward"
-                class="pf-v6-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-v6-c-button__icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-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
@@ -1027,37 +903,6 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
           data-ouia-component-type="PF5/Nav"
           data-ouia-safe="true"
         >
-          <div
-            class="pf-v6-c-nav__scroll-button"
-          >
-            <button
-              aria-disabled="false"
-              aria-label="Scroll back"
-              class="pf-v6-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"
-            >
-              <span
-                class="pf-v6-c-button__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-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-v6-c-nav__list"
             role="list"
@@ -1124,37 +969,6 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
               </a>
             </li>
           </ul>
-          <div
-            class="pf-v6-c-nav__scroll-button"
-          >
-            <button
-              aria-disabled="false"
-              aria-label="Scroll foward"
-              class="pf-v6-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"
-            >
-              <span
-                class="pf-v6-c-button__icon"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-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