Ionic-framework: cssClass in AlertButton disappeared

[daniele-sartiano]

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I can't use cssClass in AlertButton as described in my alert-options.d.ts:

export` interface AlertButton { text?: string; role?: string; handler?: Function; }

Expected behavior:
Use a cssClass for style the button as described in your online docs:

Button options

Property    Type    Description
text    string  The buttons displayed text.
handler any Emitted when the button is pressed.
cssClass    string  An additional CSS class for the button.
role    string  The buttons role, null or cancel.

Related code:

insert any relevant code here

Other information:
The error is:

[11:07:02]  typescript: src/components/consumption-card/consumption-card.ts, line: 65 
            Argument of type '{ text: string; cssClass: string; handler: (data: any) => void; }' is not assignable to 
            parameter of type 'string | AlertButton'. Object literal may only specify known properties, and 'cssClass' 
            does not exist in type 'string | AlertButton'. 

      L64:  text: 'Ok',
      L65:  cssClass: 'primary',
      L66:  handler: data => {

The code is:

let rejectModal = this.alertController.create();
rejectModal.setTitle('test');
rejectModal.addButton({
            text: 'Ok',
            cssClass: 'primary',
            handler: data => {
                let value = parseInt(data);
                this.outcomeModel = this.buildOutcomeModel(value);

                this.outcomeDescription = this.outcomeModel.getDescription();
                this.buttonClass = OUTCOME_STATES.OWN_CHOICE;
                this.iconColor = 'red';
                this.onOutcome.emit({consumption: this.consumption, outcomeModel: this.outcomeModel});
            }
        });

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

$ ionic info

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.4
Node Version: v6.9.1
Xcode version: Not installed

[jsayol]

Facing the same issue. The AlertButton interface introduced with 2.3.0 is missing the cssClass property.

Edit: ah, nevermind, I see this has already been fixed with #10887 (4fbcda7).

[manucorporat]

yeah, it is already fixed. in the meantime, you can just force a cast in typescript, remember TS is just for linting, the types are not real.

[shanehughes3]

@manucorporat Could you give an example of forcing a cast in typescript, as you recommend? If I try:

const alert = this.alertCtrl.create(<AlertOptions>{
      title: "Error",
      message: "Something's wrong",
      buttons: [{
          text: "OK",
          role: "cancel",
          cssClass: "alert-button"
      }]
});
alert.present();

the transpiler still complains:

Type '{ title: string; message: string; buttons: { text: string; cssClass: string; role: string; }[]; }'
cannot be converted to type 'AlertOptions'. Types of property 'buttons' are incompatible. Type '{ text:
string; cssClass: string; role: string; }[]' is not comparable to type '(string | AlertButton)[]'. Type '{
text: string; cssClass: string; role: string; }' is not comparable to type 'string | AlertButton'. Object
literal may only specify known properties, and 'cssClass' does not exist in type 'string | AlertButton'.

Do I need to create a new interface or... something?

[jsayol]

@shanehughes3:

const alert = this.alertCtrl.create(<any>{
      title: "Error",
      message: "Something's wrong",
      buttons: [{
          text: "OK",
          role: "cancel",
          cssClass: "alert-button"
      }]
});
alert.present();

Remember to remove the <any> cast when you update to the next version with the fix.

[shanehughes3]

@jsayol Aha - thank you! Looks like I need to hit the books on typescript some more...

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.