adobe / adobe/spectrum-web-components

[Bug]: ActionButton: --mod-* vars not working anymore if combined

Open
#5,500 4 comments 0 reactions 0 assignees View on GitHub
bug Component:Action button SEV 4 Spectrum CSS
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)

ActionButton

### Expected behavior

users have the possibility to use custom `--mod-*` vars to style ActionButtons, this should work for all provided states, such as `hover`, `down` (active) and `disabled, so I would expect to have this working when providing combination of (for example):
```
--mod-actionbutton-border-color-default: var(--spectrum-global-color-static-gray-400);
--mod-actionbutton-border-color-hover: var(--spectrum-global-color-static-gray-500);
--mod-actionbutton-border-color-down: var(--spectrum-global-color-static-gray-700);
--mod-actionbutton-background-color-default: var(--spectrum-global-color-static-gray-75);
--mod-actionbutton-background-color-hover: var(--spectrum-global-color-static-gray-200);
--mod-actionbutton-background-color-down: var(--spectrum-global-color-static-gray-300);
--mod-actionbutton-background-color-disabled: var(--spectrum-global-color-static-gray-300);

```

### Actual behavior

Providing those --mod-* vars together overrides the different state vars, such as *-hover, *-down or *-disabled on the current actionbutton.css and no change of colors is rendered.

### Screenshots

_No response_

### What browsers are you seeing the problem in?

Chrome

### How can we reproduce this issue?

1. Go to https://stackblitz.com/edit/vitejs-vite-dqvm9txc?file=src%2Fmy-element.js
2. Compare different styles of customized actionbutton
3. Try hovering or clicking on the buttons - no visible change
4. Also see disabled button that doesn't change when combination of css custom mods are provided

### Sample code or abstract reproduction which illustrates the problem

_No response_

### Severity

SEV 4

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [ ] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start with the reproduction at StackBlitz and inspect the current actionbutton.css for how combined --mod-* variables are applied to default, hover, down, and disabled states. Confirm the behavior in Chrome and verify that each supplied state-specific variable produces its corresponding visible ActionButton styling.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.