refactor(CDropdown): dropdown toggle should be always rendered as <button>

Author: mrholek

packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx

@@ -39,7 +39,7 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   trigger = 'click',
   ...rest
 }) => {
-  const { dropdownToggleRef, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, visible, setVisible } = useContext(CDropdownContext)
 
   const triggers = {
     ...((trigger === 'click' || trigger.includes('click')) && {
@@ -58,16 +58,14 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
     className: classNames(
       {
         'dropdown-toggle': caret,
-        'dropdown-toggle-split': split,
-        'nav-link': variant === 'nav-item',
+        'dropdown-toggle-split': split
       },
       className,
     ),
     'aria-expanded': visible,
     ...(!rest.disabled && { ...triggers }),
   }
 
-  // We use any because Toggler can be `a` as well as `button`.
   const Toggler = () => {
     if (custom && React.isValidElement(children)) {
       return (
@@ -81,14 +79,6 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
       )
     }
 
-    if (variant === 'nav-item') {
-      return (
-        <a href="#" {...togglerProps} ref={dropdownToggleRef}>
-          {children}
-        </a>
-      )
-    }
-
     return (
       <CButton type="button" {...togglerProps} tabIndex={0} {...rest} ref={dropdownToggleRef}>
         {children}

packages/docs/content/components/dropdown.mdx

@@ -226,7 +226,7 @@ And putting it to use in a navbar:
     <CCollapse className="navbar-collapse" visible={true}>
       <CNavbarNav>
         <CDropdown dark component="li" variant="nav-item">
-          <CDropdownToggle>Dropdown</CDropdownToggle>
+          <CDropdownToggle color="dark">Dropdown</CDropdownToggle>
           <CDropdownMenu>
             <CDropdownItem href="#">Action</CDropdownItem>
             <CDropdownItem href="#">Another action</CDropdownItem>