[Ionic v4] override the opacity of ion-button if disabled

Bug Report

Ionic version:

[x] 4.x

Expected behavior:

The ‘disabled’ rules (opacity: 1) should be applied.

Steps to reproduce:

Steps to reproduce the behavior:

1. Add disabled attribute to ion-button
2. Style it via pseudo or attribute selector of disabled
3. Css rules are not applied

Related code:

 <ion-button color="success" type="submit" [disabled]="true">
        LOG IN
 </ion-button>

When an ion-button is disabled, the following styles is used

.button-native[disabled] {
     cursor: default;
     opacity: .5;
     pointer-events: none;
}

/* Not applied */
ion-button[disabled],
ion-button[disabled="true"],
ion-button:disabled {
   --opacity: 1!important;
   opacity: 1!important;
}

/* Not applied */
.button-native[disabled] {
   --opacity: 1!important;
   opacity: 1!important;
}

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.2
   @angular/cli                  : 7.1.0
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : none
   Cordova Plugins       : not available

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.3.0
   OS     : Windows 10

[brandyscarney]

@darkguy2008 I’d like to kindly remind you that we do have a COC and it should be followed by everyone including those commenting on our GitHub issues: https://github.com/ionic-team/ionic/blob/master/CODE_OF_CONDUCT.md

I’m sorry you think we are being lazy by not adding CSS variables. We’re pretty transparent about what we are working on. We update our project board every other week: https://github.com/ionic-team/ionic/projects/3. We also have been doing releases bi-weekly: https://ionicframework.com/docs/release-notes. If you’d ever like to see what each specific member of the team is working on, we update the following public Google doc with our framework meeting notes every Monday: https://docs.google.com/document/d/1LrPDUkfXpqPIsghaSCxHyN1GIZ0TK2bwFxOZx2GKWtI/edit?usp=sharing.

CSS variables and Shadow DOM solve a lot of problems actually. They greatly reduce the bundle size, improving your app’s startup time. They remove the need to compile all of Ionic’s CSS (thus improving build times) by getting rid of the Sass dependency at build time. They allow you to dynamically change your application’s theme at runtime without having to create double the CSS. Components that use CSS variables are required to be Shadow DOM (or scoped).

The --opacity variable was actually added awhile ago, this issue just occurs because it isn’t used in the case of a disabled button. The fix should be changing the following in button.scss:

:host(.button-disabled) {
  pointer-events: none;
}

:host(.button-disabled) .button-native {
  cursor: default;
  opacity: .5;
  pointer-events: none;
}

to

:host(.button-disabled) {
  --opacity: .5;

  pointer-events: none;
}

:host(.button-disabled) .button-native {
  cursor: default;

  pointer-events: none;
}

If anyone would like to help out with this, PRs force us to take a look at issues and get fixes in faster. Otherwise I will add this to my list to look at in the near future. Thanks!

[Ivnosing]

@brandyscarney thanks for the reference to the issue. If it’s OK, I will submit a PR tomorrow implementing this feature (my first one!).