ionic-team / ionic-team/ionic-framework

feat: expose --button-color variable for ion-alert

Open
#21,500 0 comments 0 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# Feature Request
Since Ionic version 5.2.0 ion-alert buttons accept the property `role: 'destructive'`. I understand that it is possible to set the vanilla `color` css spec on the `button` element in an `ion-alert` because it is not in the shadow-dom.

**But** since Ionic 5.2.0 this solution overwrites the `ion-color-danger` on `destructive` buttons because of the css hierarchy.

It is still possible to solve it with an excluding css rule, but this seems a little bit error prone on future additional roles with different default colors (e.g. `role: 'successful'`, or something similar).

E.g. for current (not that elegant) workaround without overwriting destructive color:
```
ion-alert {
button {
&:not(.alert-button-role-destructive) {
color: var(--mobi-color-dark-blue-1000);
}
}
}
```

**Ionic version:**

[x] **5.2.0**

**Describe Preferred Solution**
Expose `--button-color` variable like in `ion-action-sheet`.

**Additional Context**
There is a closed feature request https://github.com/ionic-team/ionic/issues/21048 with a reason but I feel like the situation changed now with the role destructive on alert button since ionic version 5.2.0

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.