fix(NavItem): Maintain className passed to custom NavItems (#2134)

patternfly · Jun 5, 2019 · 8f38b97 · 8f38b97
1 parent 3bbd035
commit 8f38b97
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Nav/Nav.test.tsx b/packages/patternfly-4/react-core/src/components/Nav/Nav.test.tsx
@@ -26,10 +26,10 @@ const context = {
 
 test('Default Nav List', () => {
   const view = mount(
-    <Nav>
-      <NavList>
+    <Nav className="test=nav-class">
+      <NavList className="test-nav-list-class">
         {props.items.map(item => (
-          <NavItem to={item.to} key={item.to}>
+          <NavItem to={item.to} key={item.to} className="test-nav-item-class">
             {item.label}
           </NavItem>
         ))}
@@ -196,12 +196,11 @@ test('Tertiary Nav List', () => {
 });
 
 test('Nav List with custom item nodes', () => {
-  const CustomNode = () => <div>My custom node</div>;
   const view = mount(
     <Nav>
       <NavList variant="tertiary">
-        <NavItem to="/components/nav#link1">
-          <CustomNode />
+        <NavItem to="/components/nav#link1" className="test-nav-item-class">
+          <div className="my-custom-node">My custom node</div>
         </NavItem>
       </NavList>
     </Nav>,

diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavItem.tsx b/packages/patternfly-4/react-core/src/components/Nav/NavItem.tsx
@@ -59,7 +59,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       {(context: any) =>
         React.cloneElement(child, {
           onClick: (e: MouseEvent) => context.onSelect(e, groupId, itemId, to, preventDefault, onClick),
-          className: css(styles.navLink, isActive && styles.modifiers.current, className),
+          className: css(styles.navLink, isActive && styles.modifiers.current, child.props && child.props.className),
           'aria-current': isActive ? 'page' : null
         })
       }

diff --git a/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.tsx.snap
@@ -97,33 +97,34 @@ exports[`Default Nav List - Trigger item active update 1`] = `
 exports[`Default Nav List 1`] = `
 <Nav
   aria-label=""
-  className=""
+  className="test=nav-class"
   onSelect={[Function]}
   onToggle={[Function]}
 >
   <nav
     aria-label="Global"
-    className="pf-c-nav"
+    className="pf-c-nav test=nav-class"
   >
     <NavList
       ariaLeftScroll="Scroll left"
       ariaRightScroll="Scroll right"
-      className=""
+      className="test-nav-list-class"
       variant="default"
     >
       <ul
-        className="pf-c-nav__list"
+        className="pf-c-nav__list test-nav-list-class"
       >
         <Component
+          className="test-nav-item-class"
           key="#link1"
           to="#link1"
         >
           <li
-            className="pf-c-nav__item"
+            className="pf-c-nav__item test-nav-item-class"
           >
             <a
               aria-current={null}
-              className="pf-c-nav__link"
+              className="pf-c-nav__link test-nav-item-class"
               href="#link1"
               onClick={[Function]}
             >
@@ -132,15 +133,16 @@ exports[`Default Nav List 1`] = `
           </li>
         </Component>
         <Component
+          className="test-nav-item-class"
           key="#link2"
           to="#link2"
         >
           <li
-            className="pf-c-nav__item"
+            className="pf-c-nav__item test-nav-item-class"
           >
             <a
               aria-current={null}
-              className="pf-c-nav__link"
+              className="pf-c-nav__link test-nav-item-class"
               href="#link2"
               onClick={[Function]}
             >
@@ -149,15 +151,16 @@ exports[`Default Nav List 1`] = `
           </li>
         </Component>
         <Component
+          className="test-nav-item-class"
           key="#link3"
           to="#link3"
         >
           <li
-            className="pf-c-nav__item"
+            className="pf-c-nav__item test-nav-item-class"
           >
             <a
               aria-current={null}
-              className="pf-c-nav__link"
+              className="pf-c-nav__link test-nav-item-class"
               href="#link3"
               onClick={[Function]}
             >
@@ -166,15 +169,16 @@ exports[`Default Nav List 1`] = `
           </li>
         </Component>
         <Component
+          className="test-nav-item-class"
           key="#link4"
           to="#link4"
         >
           <li
-            className="pf-c-nav__item"
+            className="pf-c-nav__item test-nav-item-class"
           >
             <a
               aria-current={null}
-              className="pf-c-nav__link"
+              className="pf-c-nav__link test-nav-item-class"
               href="#link4"
               onClick={[Function]}
             >
@@ -1095,20 +1099,19 @@ exports[`Nav List with custom item nodes 1`] = `
         className="pf-c-nav__tertiary-list"
       >
         <Component
+          className="test-nav-item-class"
           to="/components/nav#link1"
         >
           <li
-            className="pf-c-nav__item"
+            className="pf-c-nav__item test-nav-item-class"
           >
-            <CustomNode
+            <div
               aria-current={null}
-              className="pf-c-nav__link"
+              className="pf-c-nav__link my-custom-node"
               onClick={[Function]}
             >
-              <div>
-                My custom node
-              </div>
-            </CustomNode>
+              My custom node
+            </div>
           </li>
         </Component>
       </ul>