Prerequisites
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
- go to https://github.com/pjaecks-carecompass/ionic-action-sheet-bug
- clone repository
npm ci - this will install @ionic/angular@8.7.12
npm start, open http://localhost:4200
- tap the "Open" button to show the
ActionSheet
- check for the text color of the "Share" button - it is the default text color
- now install previous ionic angular version with
npm install --save --save-exact @ionic/angular@8.7.11
- repeat step 4 and 5
- 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 #30769 to introduce this.
This change (bug?) was introduced in 8.7.12.
With 8.7.11 it is still working fine.
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
When we set the
role: 'selected'property on an ActionSheetButton the rendered html button is missing classaction-sheet-selected. This results in missing applied css styles applied, e.g. if we set--button-color-selectedon for the action sheet's custom css class, that style is not shown.Example ActionSheetButton
Other
action-sheet-ROLEclasses (e.g.destructiveare still applied to the button.Expected Behavior
The css class
action-sheet-selectedis applied if a button's role is set toselectedand 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 roleselectedis showing a purple text color.Steps to Reproduce
npm ci- this will install@ionic/angular@8.7.12npm start, openhttp://localhost:4200ActionSheetnpm install --save --save-exact @ionic/angular@8.7.11app.component.scssis appliedCode Reproduction URL
https://github.com/pjaecks-carecompass/ionic-action-sheet-bug
Ionic Info
Additional Information
I suspect #30769 to introduce this.
This change (bug?) was introduced in
8.7.12.With
8.7.11it is still working fine.