feat(NavDropdown): Support 'as' prop (#5576)

urielgarciarivas · web-flow · commit 93abf90bac3e · 2021-01-11T10:42:30.000-08:00
* Added 'as' as prop

* Added tests to 'as' as prop

* Added back NavItem

* Added .nav-item class to NavDropdown

* Added assert nav-item class to test

* Created var for bsPrefix and removed 'as'

* Updated variable name

* Added comment addressing NavItem
diff --git a/src/NavDropdown.tsx b/src/NavDropdown.tsx
@@ -1,8 +1,9 @@
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { useBootstrapPrefix } from './ThemeProvider';
 import Dropdown, { DropdownProps } from './Dropdown';
-import NavItem from './NavItem';
 import NavLink from './NavLink';
 import { BsPrefixRefForwardingComponent } from './helpers';
 
@@ -69,6 +70,7 @@ const NavDropdown: NavDropdown = (React.forwardRef(
       title,
       children,
       bsPrefix,
+      className,
       rootCloseEvent,
       menuRole,
       disabled,
@@ -77,28 +79,37 @@ const NavDropdown: NavDropdown = (React.forwardRef(
       ...props
     }: NavDropdownProps,
     ref,
-  ) => (
-    <Dropdown ref={ref} {...props} as={NavItem}>
-      <Dropdown.Toggle
-        id={id}
-        eventKey={null}
-        active={active}
-        disabled={disabled}
-        childBsPrefix={bsPrefix}
-        as={NavLink}
+  ) => {
+    /* NavItem has no additional logic, it's purely presentational. Can set nav item class here to support "as" */
+    const navItemPrefix = useBootstrapPrefix(undefined, 'nav-item');
+
+    return (
+      <Dropdown
+        ref={ref}
+        {...props}
+        className={classNames(className, navItemPrefix)}
       >
-        {title}
-      </Dropdown.Toggle>
-
-      <Dropdown.Menu
-        role={menuRole}
-        renderOnMount={renderMenuOnMount}
-        rootCloseEvent={rootCloseEvent}
-      >
-        {children}
-      </Dropdown.Menu>
-    </Dropdown>
-  ),
+        <Dropdown.Toggle
+          id={id}
+          eventKey={null}
+          active={active}
+          disabled={disabled}
+          childBsPrefix={bsPrefix}
+          as={NavLink}
+        >
+          {title}
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu
+          role={menuRole}
+          renderOnMount={renderMenuOnMount}
+          rootCloseEvent={rootCloseEvent}
+        >
+          {children}
+        </Dropdown.Menu>
+      </Dropdown>
+    );
+  },
 ) as unknown) as NavDropdown;
 
 NavDropdown.displayName = 'NavDropdown';
diff --git a/test/NavDropdownSpec.js b/test/NavDropdownSpec.js
@@ -59,4 +59,14 @@ describe('<NavDropdown>', () => {
 
     wrapper.assertSingle('a#test-id');
   });
+
+  it('should support as as prop', () => {
+    const wrapper = mount(
+      <NavDropdown as="li" id="test-id" title="title">
+        <DropdownItem eventKey="1">Item 1</DropdownItem>
+      </NavDropdown>,
+    );
+
+    wrapper.assertSingle('li.nav-item');
+  });
 });
