Skip to content

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

@pjaecks-carecompass

Description

@pjaecks-carecompass

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

  1. go to https://github.com/pjaecks-carecompass/ionic-action-sheet-bug
  2. clone repository
  3. npm ci - this will install @ionic/[email protected]
  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/[email protected]
  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 #30769 to introduce this.

This change (bug?) was introduced in 8.7.12.

With 8.7.11 it is still working fine.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions