adobe / adobe/spectrum-web-components

[Bug]: action button --mod-actionbutton-border-radius not getting picked up

Open
#5,267 3 comments 0 reactions 0 assignees View on GitHub
bug needs-jira-ticket triage
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

![Image](https://github.com/user-attachments/assets/806d7713-7d9c-4df5-ab4a-e6629a99ef21)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.