From b8711a031097a824d4df8aec1d2de2625c2603e0 Mon Sep 17 00:00:00 2001
From: Andrew Brough <andrew@kahi.io>
Date: Tue, 29 Jul 2025 20:24:19 -0400
Subject: [PATCH 1/4] Dropdown.Toggle accepts all ButtonProps for styling and
 renders as a Button if button=true, or all LabelProps and a Label if
 button=false

---
 src/Dropdown/DropdownToggle.tsx | 70 +++++++++++++++------------------
 1 file changed, 31 insertions(+), 39 deletions(-)

diff --git a/src/Dropdown/DropdownToggle.tsx b/src/Dropdown/DropdownToggle.tsx
index abbef514..b8b1193b 100644
--- a/src/Dropdown/DropdownToggle.tsx
+++ b/src/Dropdown/DropdownToggle.tsx
@@ -1,48 +1,40 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, LabelHTMLAttributes } from 'react'
+import Button, { ButtonProps } from '../Button'
+import Label, { LabelProps } from '../Form/Label'
 
-import { ComponentColor, ComponentSize, IComponentBaseProps } from '../types'
+export type ButtonDropdownToggleProps = ButtonProps & {
+  button?: true
+}
 
-import Button, { ButtonProps } from '../Button'
+export type LabelDropdownToggleProps = LabelProps & {
+  button?: false
+}
 
-export type DropdownToggleProps = Omit<
-  React.LabelHTMLAttributes<HTMLLabelElement>,
-  'color'
-> &
-  IComponentBaseProps & {
-    color?: ComponentColor
-    size?: ComponentSize
-    button?: boolean
-    disabled?: boolean
-  }
+export type DropdownToggleProps = React.HTMLAttributes<HTMLElement> &
+  (ButtonDropdownToggleProps | LabelDropdownToggleProps)
 
-const DropdownToggle = ({
-  children,
-  color,
-  size,
-  button = true,
-  dataTheme,
-  className,
-  disabled,
-  ...props
-}: DropdownToggleProps) => {
-  return (
-    <label tabIndex={0} className={className} {...props}>
-      {button ? (
-        <Button
-          type="button"
-          dataTheme={dataTheme}
-          color={color}
-          size={size}
-          disabled={disabled}
-        >
+const DropdownToggle = forwardRef<HTMLElement, DropdownToggleProps>(
+  (props, ref) => {
+    const { button = true, children, ...rest } = props
+
+    if (button) {
+      return (
+        <Button ref={ref} type="button" {...(rest as ButtonProps)}>
           {children}
         </Button>
-      ) : (
-        children
-      )}
-    </label>
-  )
-}
+      )
+    } else {
+      return (
+        <Label
+          ref={ref as React.Ref<HTMLLabelElement>}
+          {...(rest as LabelProps)}
+        >
+          {children}
+        </Label>
+      )
+    }
+  }
+)
 
 export type SummaryProps = Omit<ButtonProps, 'tag'>
 export const Summary = forwardRef<HTMLElement, SummaryProps>(

From 9da8e4f6f5cf1ecf5a11ab78b25688fcb3302b84 Mon Sep 17 00:00:00 2001
From: Andrew Brough <andrew@kahi.io>
Date: Tue, 29 Jul 2025 20:29:04 -0400
Subject: [PATCH 2/4] add unstyled prop for Dropdown.Toggle which renders as a
 div if unstyled=true

---
 src/Dropdown/DropdownToggle.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/Dropdown/DropdownToggle.tsx b/src/Dropdown/DropdownToggle.tsx
index b8b1193b..d7a93809 100644
--- a/src/Dropdown/DropdownToggle.tsx
+++ b/src/Dropdown/DropdownToggle.tsx
@@ -1,21 +1,34 @@
-import React, { forwardRef, LabelHTMLAttributes } from 'react'
+import React, { forwardRef, HTMLAttributes } from 'react'
 import Button, { ButtonProps } from '../Button'
 import Label, { LabelProps } from '../Form/Label'
 
 export type ButtonDropdownToggleProps = ButtonProps & {
   button?: true
+  unstyled?: false
 }
 
 export type LabelDropdownToggleProps = LabelProps & {
   button?: false
+  unstyled?: false
 }
 
-export type DropdownToggleProps = React.HTMLAttributes<HTMLElement> &
+export type DropdownToggleProps = HTMLAttributes<HTMLElement> &
   (ButtonDropdownToggleProps | LabelDropdownToggleProps)
 
 const DropdownToggle = forwardRef<HTMLElement, DropdownToggleProps>(
   (props, ref) => {
-    const { button = true, children, ...rest } = props
+    const { button = true, unstyled = false, children, ...rest } = props
+
+    if (unstyled) {
+      return (
+        <div
+          ref={ref as React.Ref<HTMLDivElement>}
+          {...(rest as React.HTMLAttributes<HTMLElement>)}
+        >
+          {children}
+        </div>
+      )
+    }
 
     if (button) {
       return (

From 921a2ecb93b632ba302ff0fcfad23c01e65ca85d Mon Sep 17 00:00:00 2001
From: Andrew Brough <andrew@kahi.io>
Date: Tue, 29 Jul 2025 23:59:15 -0400
Subject: [PATCH 3/4] Fix type autocomplete issues due to conflicting types,
 add role="button" to each tag for accessibility and testing, update existing
 and add tests for tag rendering (button, label, div)

---
 src/Dropdown/Dropdown.stories.tsx | 49 +++++++++++++++++++++++++++
 src/Dropdown/Dropdown.test.tsx    | 56 ++++++++++++++++++++++++++++++-
 src/Dropdown/DropdownToggle.tsx   | 41 +++++++++++-----------
 3 files changed, 125 insertions(+), 21 deletions(-)

diff --git a/src/Dropdown/Dropdown.stories.tsx b/src/Dropdown/Dropdown.stories.tsx
index f226064e..9b833e9e 100644
--- a/src/Dropdown/Dropdown.stories.tsx
+++ b/src/Dropdown/Dropdown.stories.tsx
@@ -5,6 +5,7 @@ import Dropdown, { DropdownProps } from '.'
 import Card from '../Card/'
 import Navbar from '../Navbar'
 import Button from '../Button'
+import Badge from '../Badge'
 
 export default {
   title: 'Actions/Dropdown',
@@ -76,6 +77,54 @@ InNavbar.args = {
   end: true,
 }
 
+export const ButtonToggle: Story<DropdownProps> = (args) => {
+  return (
+    <div className="my-32">
+      <Dropdown {...args}>
+        <Dropdown.Toggle size="sm" variant="outline" color="secondary">
+          Click
+        </Dropdown.Toggle>
+        <Dropdown.Menu className="w-52">
+          <Dropdown.Item>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  )
+}
+
+export const LabelToggle: Story<DropdownProps> = (args) => {
+  return (
+    <div className="my-32">
+      <Dropdown {...args}>
+        <Dropdown.Toggle button={false}>Click</Dropdown.Toggle>
+        <Dropdown.Menu className="w-52">
+          <Dropdown.Item>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  )
+}
+
+export const UnstyledCustomToggle: Story<DropdownProps> = (args) => {
+  return (
+    <div className="my-32">
+      <Dropdown {...args}>
+        <Dropdown.Toggle unstyled>
+          <Badge color="primary" variant="outline" className="cursor-pointer">
+            Any component can be a toggle, even a {`<Badge>`}!
+          </Badge>
+        </Dropdown.Toggle>
+        <Dropdown.Menu className="w-52">
+          <Dropdown.Item>Item 1</Dropdown.Item>
+          <Dropdown.Item>Item 2</Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  )
+}
+
 export const Helper: Story<DropdownProps> = (args) => {
   return (
     <div className="my-32 font-sans">
diff --git a/src/Dropdown/Dropdown.test.tsx b/src/Dropdown/Dropdown.test.tsx
index bce2631b..e8c71a7d 100644
--- a/src/Dropdown/Dropdown.test.tsx
+++ b/src/Dropdown/Dropdown.test.tsx
@@ -34,7 +34,7 @@ describe('Dropdown', () => {
     )
 
     expect(screen.getByRole('listbox')).toHaveClass('custom-dropdown')
-    expect(screen.getByText('Toggle').parentElement).toHaveClass(
+    expect(screen.getByText('Toggle').closest('button')).toHaveClass(
       'custom-toggle'
     )
     expect(screen.getByRole('menu')).toHaveClass('custom-menu')
@@ -75,4 +75,58 @@ describe('Dropdown', () => {
     expect(screen.getByRole('listbox')).toHaveClass('dropdown-hover')
     expect(screen.getByRole('listbox')).toHaveClass('dropdown-open')
   })
+
+  test('Should render a Button when button=true (default)', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Toggle>Toggle</Dropdown.Toggle>
+        <Dropdown.Menu>{DropdownItems}</Dropdown.Menu>
+      </Dropdown>
+    )
+
+    const toggle = screen.getByRole('button', { name: 'Toggle' })
+    expect(toggle).toBeInTheDocument()
+    expect(toggle.tagName).toBe('BUTTON')
+  })
+
+  test('Should render a Button when button=true (explicit)', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Toggle button={true}>Toggle</Dropdown.Toggle>
+        <Dropdown.Menu>{DropdownItems}</Dropdown.Menu>
+      </Dropdown>
+    )
+
+    const toggle = screen.getByRole('button', { name: 'Toggle' })
+    expect(toggle).toBeInTheDocument()
+    expect(toggle.tagName).toBe('BUTTON')
+  })
+
+  test('Should render a Label when button=false', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Toggle button={false}>Toggle</Dropdown.Toggle>
+        <Dropdown.Menu>{DropdownItems}</Dropdown.Menu>
+      </Dropdown>
+    )
+
+    const toggle = screen.getByRole('button', { name: 'Toggle' })
+    expect(toggle).toBeInTheDocument()
+    expect(toggle.tagName).toBe('LABEL')
+  })
+
+  test('Should render a div when unstyled=true', () => {
+    render(
+      <Dropdown>
+        <Dropdown.Toggle unstyled aria-label="Dropdown toggle">
+          Toggle
+        </Dropdown.Toggle>
+        <Dropdown.Menu>{DropdownItems}</Dropdown.Menu>
+      </Dropdown>
+    )
+
+    const toggle = screen.getByRole('button', { name: 'Dropdown toggle' })
+    expect(toggle).toBeInTheDocument()
+    expect(toggle.tagName).toBe('DIV')
+  })
 })
diff --git a/src/Dropdown/DropdownToggle.tsx b/src/Dropdown/DropdownToggle.tsx
index d7a93809..5ed17f36 100644
--- a/src/Dropdown/DropdownToggle.tsx
+++ b/src/Dropdown/DropdownToggle.tsx
@@ -7,43 +7,44 @@ export type ButtonDropdownToggleProps = ButtonProps & {
   unstyled?: false
 }
 
-export type LabelDropdownToggleProps = LabelProps & {
-  button?: false
+export type LabelDropdownToggleProps = Omit<LabelProps, 'color'> & {
+  button: false
   unstyled?: false
 }
 
-export type DropdownToggleProps = HTMLAttributes<HTMLElement> &
-  (ButtonDropdownToggleProps | LabelDropdownToggleProps)
+export type UnstyledDropdownToggleProps = HTMLAttributes<HTMLElement> & {
+  button?: false
+  unstyled: true
+}
+
+export type DropdownToggleProps =
+  | ButtonDropdownToggleProps
+  | LabelDropdownToggleProps
+  | UnstyledDropdownToggleProps
 
 const DropdownToggle = forwardRef<HTMLElement, DropdownToggleProps>(
   (props, ref) => {
-    const { button = true, unstyled = false, children, ...rest } = props
+    const { button = true, unstyled = false, ...rest } = props
 
     if (unstyled) {
       return (
         <div
           ref={ref as React.Ref<HTMLDivElement>}
+          role="button"
+          tabIndex={0}
           {...(rest as React.HTMLAttributes<HTMLElement>)}
-        >
-          {children}
-        </div>
-      )
-    }
-
-    if (button) {
-      return (
-        <Button ref={ref} type="button" {...(rest as ButtonProps)}>
-          {children}
-        </Button>
+        />
       )
+    } else if (button) {
+      return <Button ref={ref} {...(rest as ButtonDropdownToggleProps)} />
     } else {
       return (
         <Label
           ref={ref as React.Ref<HTMLLabelElement>}
-          {...(rest as LabelProps)}
-        >
-          {children}
-        </Label>
+          role="button"
+          tabIndex={0}
+          {...(rest as LabelDropdownToggleProps)}
+        />
       )
     }
   }

From fe2947d6f43ca6eebaca4a21ce9656a8cb031827 Mon Sep 17 00:00:00 2001
From: Andrew Brough <andrew@kahi.io>
Date: Wed, 30 Jul 2025 00:05:37 -0400
Subject: [PATCH 4/4] missed one omit base html color prop on unstyled type
 causing intellisense issues

---
 src/Dropdown/Dropdown.stories.tsx | 9 ++++-----
 src/Dropdown/DropdownToggle.tsx   | 5 ++++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/Dropdown/Dropdown.stories.tsx b/src/Dropdown/Dropdown.stories.tsx
index 9b833e9e..1519d043 100644
--- a/src/Dropdown/Dropdown.stories.tsx
+++ b/src/Dropdown/Dropdown.stories.tsx
@@ -1,11 +1,10 @@
+import { Meta, StoryFn as Story } from '@storybook/react'
 import React from 'react'
-import { StoryFn as Story, Meta } from '@storybook/react'
-
 import Dropdown, { DropdownProps } from '.'
+import Badge from '../Badge'
+import Button from '../Button'
 import Card from '../Card/'
 import Navbar from '../Navbar'
-import Button from '../Button'
-import Badge from '../Badge'
 
 export default {
   title: 'Actions/Dropdown',
@@ -81,7 +80,7 @@ export const ButtonToggle: Story<DropdownProps> = (args) => {
   return (
     <div className="my-32">
       <Dropdown {...args}>
-        <Dropdown.Toggle size="sm" variant="outline" color="secondary">
+        <Dropdown.Toggle size="xl" color="success" variant="dash">
           Click
         </Dropdown.Toggle>
         <Dropdown.Menu className="w-52">
diff --git a/src/Dropdown/DropdownToggle.tsx b/src/Dropdown/DropdownToggle.tsx
index 5ed17f36..98981d44 100644
--- a/src/Dropdown/DropdownToggle.tsx
+++ b/src/Dropdown/DropdownToggle.tsx
@@ -12,7 +12,10 @@ export type LabelDropdownToggleProps = Omit<LabelProps, 'color'> & {
   unstyled?: false
 }
 
-export type UnstyledDropdownToggleProps = HTMLAttributes<HTMLElement> & {
+export type UnstyledDropdownToggleProps = Omit<
+  HTMLAttributes<HTMLElement>,
+  'color'
+> & {
   button?: false
   unstyled: true
 }