adobe / adobe/spectrum-web-components
[Bug]: action button --mod-actionbutton-border-radius not getting picked up
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [x] I agree to follow this project's code of conduct.
### Impacted component(s)
action-button
### Expected behavior
Whenever setting `--mod-actionbutton-border-radius` css var at the host level it should override border-radius value.
### Actual behavior
`--mod-actionbutton-border-radius` is not getting picked. This could be due to css var override with it's own name as a fallback or that it is missing as a `border-radius` value.
```
:host {
border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius));
}
```
See [link](https://github.com/adobe/spectrum-css/commit/a8bb0b89a5fe1cc9d09edf6a1d2249dde930757a#r154406089).
Thank you
### Screenshots

### What browsers are you seeing the problem in?
Chrome
### How can we reproduce this issue?
1. Go to https://opensource.adobe.com/spectrum-web-components/components/action-button/
2. Set `--mod-actionbutton-border-radius` to 999px and border radius will not be changed.
### Sample code or abstract reproduction which illustrates the problem
_No response_
### Severity
SEV 3
### Logs taken while reproducing problem
_No response_
Contributor guide
Research direction
Start with the action-button component and reproduce the issue from its documentation page by setting --mod-actionbutton-border-radius to 999px. Inspect the host-level border-radius custom-property handling; done means the variable overrides the default and visibly changes the button’s border radius.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 25/100