dequelabs / dequelabs/cauldron
AccordionTrigger: className prop replaces rather than appending
- Dominant language
- TypeScript
- Stars
- 127
- Forks
- 31
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 8
Description
### Steps to reproduce
```tsx
trigger
content
```
### Expected Behavior
Should result in a trigger button with classes like `Accordion__trigger ExpandCollapse__trigger extraTriggerClass`
(it actually results in `extraTriggerClass ExpandCollapse__trigger`)
### Root cause
The bug is a prop-spread ordering issue in `Accordion.tsx:98-107`:
```tsx
```
Tracing the reproduction (``):
1. Line 101 composes the intended value: `"Accordion__trigger extraTriggerClass"`.
2. Line 104 spreads `{...trigger.props}` *after* the explicit `className`. Since `trigger.props` contains `className: "extraTriggerClass"`, the later spread **overwrites** the composed value. `PanelTrigger` receives just `"extraTriggerClass"` — `Accordion__trigger` is silently dropped.
3. `PanelTrigger.tsx:41` then composes its own: `classnames("extraTriggerClass", 'ExpandCollapse__trigger', ...)` → `"extraTriggerClass ExpandCollapse__trigger"`.
### Version
7.2.0
### What browser(s) are you experiencing the problem on?
Chrome
### Relevant log output
```shell
```
Contributor guide
Research direction
Start in Accordion.tsx at lines 98-107 and trace the AccordionTrigger reproduction through PanelTrigger.tsx line 41. Verify the prop ordering and class composition; done when the trigger retains Accordion__trigger, ExpandCollapse__trigger, and extraTriggerClass in the expected result.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 82/100