ionic-team / ionic-team/ionic-framework

bug: ActionSheet CSS custom properties are applied to 'selected' role button since 8.7.12

Abierto
#30,921 0 comentarios 0 reacciones 0 asignados Ver en GitHub
package: core type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

When we set the `role: 'selected'` property on an ActionSheetButton the rendered html button is missing class `action-sheet-selected`. This results in missing applied css styles applied, e.g. if we set `--button-color-selected` on for the action sheet's custom css class, that style is not shown.

Example ActionSheetButton

```
{
text: 'Share',
role: 'selected',
data: {
action: 'share',
},
},
```

Other `action-sheet-ROLE` classes (e.g. `destructive` are still applied to the button.

### Expected Behavior

The css class `action-sheet-selected` is applied if a button's role is set to `selected` and therefore the custom css properties are taking action.

For instance if I set ` --button-color-selected: purple;` (with a proper css class attached to my action sheet) I expect that the button with role `selected` is showing a purple text color.

### Steps to Reproduce

1. go to https://github.com/pjaecks-carecompass/ionic-action-sheet-bug
2. clone repository
3. `npm ci` - this will install `@ionic/angular@8.7.12`
4. `npm start`, open `http://localhost:4200`
5. tap the "Open" button to show the `ActionSheet`
6. check for the text color of the "Share" button - it is the default text color
7. now install previous ionic angular version with `npm install --save --save-exact @ionic/angular@8.7.11`
8. repeat step 4 and 5
9. check the text color of the "Share" button - this is now purple because the styling defined in `app.component.scss` is applied

### Code Reproduction URL

https://github.com/pjaecks-carecompass/ionic-action-sheet-bug

### Ionic Info

```
Ionic:

Ionic CLI : 5.4.16 (/home/USER/.npm/_npx/864a9e3c2cd0cf50/node_modules/ionic)
Ionic Framework : not installed
@angular-devkit/build-angular : 20.3.14
@angular-devkit/schematics : 20.3.14
@angular/cli : 20.3.14
@ionic/angular-toolkit : 12.3.0

Utility:

cordova-res : not installed
native-run (update available: 2.0.3) : 2.0.1

System:

NodeJS : v22.21.0 (/home/USER/.nvm/versions/node/v22.21.0/bin/node)
npm : 10.9.4
OS : Linux 6.6
```

### Additional Information

I suspect https://github.com/ionic-team/ionic-framework/pull/30769 to introduce this.

This change (bug?) was introduced in `8.7.12`.

With `8.7.11` it is still working fine.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.