Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(button): implement opacity for disabled button #18509

Merged
merged 5 commits into from Jun 11, 2019

Conversation

Projects
None yet
3 participants
@Ivnosing
Copy link
Contributor

commented Jun 11, 2019

Pull request checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been reviewed and added / updated if needed (for bug fixes / features)
  • Build (npm run build) was run locally and any changes were pushed
  • Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

  • Bugfix
  • Feature
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • Documentation content changes
  • Other (please describe):

What is the current behavior?

Opacity could not be set for disabled buttons.

Issue Number: fixes #16965

What is the new behavior?

Opacity of both default and disabled buttons can be overwritten in the host component with the CSS variable --opacity.

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

Does this introduce a breaking change?

  • Yes
  • No

Other information

<ion-button style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>

Iván Navarro and others added some commits Jun 11, 2019

Iván Navarro
@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jun 11, 2019

Thanks for doing this so quickly! I made a small change to the test because we rely on the normal buttons in that test to not be customized, but the ones with opacity look good! I will merge this when the build is done. 🎉

@brandyscarney brandyscarney merged commit 320719b into ionic-team:master Jun 11, 2019

1 check passed

build Workflow: build
Details

@Ivnosing Ivnosing deleted the Ivnosing:feature/buttons-opacity branch Jun 12, 2019

@KillerCodeMonkey

This comment has been minimized.

Copy link
Contributor

commented Jun 16, 2019

short question:

After upgrading to 4.5.0 the --opacity: .5 is set but does not change the opacity of the disable button at all

Could somebody check that?

The button is placed in ion-buttons as a clear button. Tested in firefox and chrome - so the md mode is activated.

@Ivnosing

This comment has been minimized.

Copy link
Contributor Author

commented Jun 17, 2019

@KillerCodeMonkey I am being able to change the opacity of a disabled button in a fresh ionic project with the latest version:
image

The last two buttons are placed in ion-buttons with fill="clear".

@KillerCodeMonkey

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2019

okay, but all your buttons look like solid buttons with different opacity 😉.

clear should be with a transparent background and reversed text color.

@Ivnosing

This comment has been minimized.

Copy link
Contributor Author

commented Jun 17, 2019

@KillerCodeMonkey the last two are with fill="clear" (pay attention, where it says "DISABLED, OPACITY: DEFAULT" and "DISABLED, OPACITY: 0.65", below the third blue one).

Let me know if I'm not understanding well.

@KillerCodeMonkey

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2019

check this out:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-buttons>
      <ion-button fill="clear" color="primary" disabled>clear disabled</ion-button>
      <ion-button fill="clear" color="primary">clear enabled</ion-button>
      <ion-button fill="solid" color="primary" disabled>solid disabled</ion-button>
      <ion-button fill="solid" color="primary">solid enabled</ion-button>
      <ion-button fill="outline" color="primary" disabled>outline disabled</ion-button>
      <ion-button fill="outline" color="primary">outline enabled</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Bildschirmfoto 2019-06-17 um 13 36 50

as you can see the clear buttons do not have the default disabled opacity set ;).

@KillerCodeMonkey

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2019

but maybe this is another bug. 🤔

@KillerCodeMonkey

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2019

Nope working in 4.4.0

Bildschirmfoto 2019-06-17 um 13 46 04

@KillerCodeMonkey

This comment has been minimized.

Copy link
Contributor

commented Jun 17, 2019

i will create a pr

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.