Normalize and consolidate dropdown menus

src/utils/DropdownBtn.scss

@@ -4,6 +4,9 @@
 
 .dropdown-btn__toggle.dropdown-btn__toggle {
   text-align: left;
+}
+
+.dropdown-btn__toggle.dropdown-btn__toggle--with-caret {
   padding-right: 1.75rem;
 }
 

src/utils/DropdownBtn.tsx

@@ -1,30 +1,45 @@
 import classNames from 'classnames';
-import type { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
+import type { DropdownToggleProps } from 'reactstrap/types/lib/DropdownToggle';
 import { useToggle } from './helpers/hooks';
 import './DropdownBtn.scss';
 
-export type DropdownBtnProps = PropsWithChildren<{
-  text: string;
-  disabled?: boolean;
+export type DropdownBtnProps = PropsWithChildren<Omit<DropdownToggleProps, 'caret' | 'size' | 'outline'> & {
+  text: ReactNode;
+  noCaret?: boolean;
   className?: string;
   dropdownClassName?: string;
-  right?: boolean;
   inline?: boolean;
   minWidth?: number;
+  size?: 'sm' | 'md' | 'lg';
 }>;
 
-export const DropdownBtn: FC<DropdownBtnProps> = (
-  { text, disabled = false, className, children, dropdownClassName, right = false, minWidth, inline },
-) => {
+export const DropdownBtn: FC<DropdownBtnProps> = ({
+  text,
+  disabled = false,
+  className,
+  children,
+  dropdownClassName,
+  noCaret,
+  end = false,
+  minWidth,
+  inline,
+  size,
+}) => {
   const [isOpen, toggle] = useToggle();
-  const toggleClasses = classNames('dropdown-btn__toggle', className, { 'btn-block': !inline });
-  const style = { minWidth: minWidth && `${minWidth}px` };
+  const toggleClasses = classNames('dropdown-btn__toggle', className, {
+    'btn-block': !inline,
+    'dropdown-btn__toggle--with-caret': !noCaret,
+  });
+  const menuStyle = { minWidth: minWidth && `${minWidth}px` };
 
   return (
     <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled} className={dropdownClassName}>
-      <DropdownToggle caret className={toggleClasses} color="primary">{text}</DropdownToggle>
-      <DropdownMenu className="w-100" end={right} style={style}>{children}</DropdownMenu>
+      <DropdownToggle size={size} caret={!noCaret} className={toggleClasses} color="primary">
+        {text}
+      </DropdownToggle>
+      <DropdownMenu className="w-100" end={end} style={menuStyle}>{children}</DropdownMenu>
     </Dropdown>
   );
 };

src/utils/DropdownBtnMenu.scss

@@ -1,3 +0,0 @@
-.dropdown-btn-menu__dropdown-toggle:after {
-  display: none !important;
-}

src/utils/DropdownBtnMenu.tsx

@@ -1,20 +0,0 @@
-import { faEllipsisV as menuIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { FC, PropsWithChildren } from 'react';
-import { ButtonDropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
-import './DropdownBtnMenu.scss';
-
-export type DropdownBtnMenuProps = PropsWithChildren<{
-  isOpen: boolean;
-  toggle: () => void;
-  right?: boolean;
-}>;
-
-export const DropdownBtnMenu: FC<DropdownBtnMenuProps> = ({ isOpen, toggle, children, right = true }) => (
-  <ButtonDropdown toggle={toggle} isOpen={isOpen}>
-    <DropdownToggle size="sm" caret outline className="dropdown-btn-menu__dropdown-toggle">
-      &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
-    </DropdownToggle>
-    <DropdownMenu end={right}>{children}</DropdownMenu>
-  </ButtonDropdown>
-);

src/utils/RowDropdownBtn.tsx

@@ -0,0 +1,21 @@
+import { faEllipsisV as menuIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { FC, PropsWithChildren } from 'react';
+import { DropdownBtn } from './DropdownBtn';
+
+export type DropdownBtnMenuProps = PropsWithChildren<{
+  minWidth?: number;
+}>;
+
+export const RowDropdownBtn: FC<DropdownBtnMenuProps> = ({ children, minWidth }) => (
+  <DropdownBtn
+    text={<FontAwesomeIcon className="px-1" icon={menuIcon} />}
+    size="sm"
+    minWidth={minWidth}
+    end
+    noCaret
+    inline
+  >
+    {children}
+  </DropdownBtn>
+);