@patternfly/react-core 6.0.0-alpha.80 → 6.0.0-alpha.81

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Nav, NavItem, NavList } from '@patternfly/react-core';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
+
+export const NavIcons: 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} aria-label="Icon global" ouiaId="IconNav">
+      <NavList>
+        <NavItem
+          preventDefault
+          id="nav-icon-link1"
+          to="#nav-icon-link1"
+          itemId={0}
+          isActive={activeItem === 0}
+          icon={<CubeIcon />}
+        >
+          Link 1
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-icon-link2"
+          to="#nav-icon-link2"
+          itemId={1}
+          isActive={activeItem === 1}
+          icon={<FolderIcon />}
+        >
+          Link 2
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-icon-link3"
+          to="#nav-icon-link3"
+          itemId={2}
+          isActive={activeItem === 2}
+          icon={<CloudIcon />}
+        >
+          Link 3
+        </NavItem>
+        <NavItem
+          preventDefault
+          id="nav-icon-link4"
+          to="#nav-icon-link4"
+          itemId={3}
+          isActive={activeItem === 3}
+          icon={<LinkIcon />}
+        >
+          Link 4
+        </NavItem>
+      </NavList>
+    </Nav>
+  );
+};

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

@@ -499,7 +499,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                     aria-current="page"
                     class="pf-v6-c-nav__link pf-m-current"
                   >
-                    System Panel
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      System Panel
+                    </span>
                   </a>
                 </li>
                 <li
@@ -511,7 +515,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Policy
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Policy
+                    </span>
                   </a>
                 </li>
                 <li
@@ -523,7 +531,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Authentication
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Authentication
+                    </span>
                   </a>
                 </li>
                 <li
@@ -535,7 +547,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Network Services
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Network Services
+                    </span>
                   </a>
                 </li>
                 <li
@@ -547,7 +563,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Server
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Server
+                    </span>
                   </a>
                 </li>
               </ul>
@@ -617,7 +637,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                     aria-current="page"
                     class="pf-v6-c-nav__link pf-m-current"
                   >
-                    System Panel
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      System Panel
+                    </span>
                   </a>
                 </li>
                 <li
@@ -629,7 +653,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Policy
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Policy
+                    </span>
                   </a>
                 </li>
                 <li
@@ -641,7 +669,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Authentication
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Authentication
+                    </span>
                   </a>
                 </li>
                 <li
@@ -653,7 +685,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Network Services
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Network Services
+                    </span>
                   </a>
                 </li>
                 <li
@@ -665,7 +701,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
                   <a
                     class="pf-v6-c-nav__link"
                   >
-                    Server
+                    <span
+                      class="pf-v6-c-nav__link-text"
+                    >
+                      Server
+                    </span>
                   </a>
                 </li>
               </ul>
@@ -837,7 +877,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                   aria-current="page"
                   class="pf-v6-c-nav__link pf-m-current"
                 >
-                  System Panel
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    System Panel
+                  </span>
                 </a>
               </li>
               <li
@@ -849,7 +893,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                 <a
                   class="pf-v6-c-nav__link"
                 >
-                  Policy
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    Policy
+                  </span>
                 </a>
               </li>
               <li
@@ -861,7 +909,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                 <a
                   class="pf-v6-c-nav__link"
                 >
-                  Authentication
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    Authentication
+                  </span>
                 </a>
               </li>
               <li
@@ -873,7 +925,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                 <a
                   class="pf-v6-c-nav__link"
                 >
-                  Network Services
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    Network Services
+                  </span>
                 </a>
               </li>
               <li
@@ -885,7 +941,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
                 <a
                   class="pf-v6-c-nav__link"
                 >
-                  Server
+                  <span
+                    class="pf-v6-c-nav__link-text"
+                  >
+                    Server
+                  </span>
                 </a>
               </li>
             </ul>

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

@@ -1,109 +0,0 @@
-import React from 'react';
-import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
-import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon';
-
-export const NavLinkText: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState('nav-expand3rd-group-1');
-  const [activeItem, setActiveItem] = React.useState('nav-expand3rd-group-1_item-1');
-
-  const onSelect = (
-    _event: React.FormEvent<HTMLInputElement>,
-    result: { itemId: number | string; groupId: number | string }
-  ) => {
-    setActiveGroup(result.groupId as string);
-    setActiveItem(result.itemId as string);
-  };
-
-  const onToggle = (
-    _event: React.MouseEvent<HTMLButtonElement>,
-    result: { groupId: number | string; isExpanded: boolean }
-  ) => {
-    // eslint-disable-next-line no-console
-    console.log(`Group ${result.groupId} expanded? ${result.isExpanded}`);
-  };
-
-  return (
-    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Nav link text">
-      <NavList>
-        <NavItem
-          preventDefault
-          id="link-text-link-1"
-          to="#link-text-link-1"
-          itemId="link-text-1-item-1"
-          isActive={activeItem === 'link-text-1-item-1'}
-          hasNavLinkWrapper
-        >
-          Link 1
-          <ArrowRightIcon />
-        </NavItem>
-        <NavExpandable
-          title={
-            <>
-              Link 2 <small>(small text)</small>
-            </>
-          }
-          groupId="link-text-group-1"
-          isActive={activeGroup === 'link-text-group-1'}
-          isExpanded
-        >
-          <NavItem
-            preventDefault
-            id="link-text-link-2"
-            to="#link-text-link-2"
-            groupId="link-text-group-1"
-            itemId="link-text-group-1_item-1"
-            isActive={activeItem === 'link-text-group-1_item-1'}
-            hasNavLinkWrapper
-          >
-            <UserIcon />
-            Subnav link 1
-          </NavItem>
-          <NavItem
-            preventDefault
-            id="link-text-link-3"
-            to="#link-text-link-3"
-            groupId="link-text-group-1"
-            itemId="link-text-group-1_item-2"
-            isActive={activeItem === 'link-text-group-1_item-2'}
-            hasNavLinkWrapper
-          >
-            <UserIcon />
-            Subnav link 2
-          </NavItem>
-        </NavExpandable>
-        <NavExpandable
-          title={
-            <>
-              Link 3 <strong>(strong text)</strong>
-            </>
-          }
-          groupId="link-text-group-2"
-          isActive={activeGroup === 'nav-expand3rd-group-2'}
-          isExpanded
-        >
-          <NavItem
-            preventDefault
-            id="link-text-link-4"
-            to="link-text-link-4"
-            groupId="link-text-group-2"
-            itemId="link-text-group-2_item-1"
-            isActive={activeItem === 'link-text-group-2_item-1'}
-          >
-            Subnav link 1
-          </NavItem>
-          <NavItem
-            preventDefault
-            id="link-text-link-5"
-            to="link-text-link-5"
-            groupId="link-text-group-2"
-            itemId="link-text-group-2_item-2"
-            isActive={activeItem === 'link-text-group-2_item-2'}
-          >
-            Subnav link 2
-          </NavItem>
-        </NavExpandable>
-      </NavList>
-    </Nav>
-  );
-};