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

bug: ion-button MD hover too transparent #17974

Closed
btsiders opened this issue Apr 5, 2019 · 4 comments

Comments

2 participants
@btsiders
Copy link

commented Apr 5, 2019

Bug Report

Ionic version:

[x] 4.2.1

Current behavior:

When hovering over ion-buttons that are clear or outlined, the button always looks very light and washed out, way more than expected.

Expected behavior:

The color should be easier to see.

Steps to reproduce:

  1. Put a button on a page.
  2. Set its fill to outline or clear.
  3. Hover over it.
  4. The hover color should be about a 40% transparency, but it is a 4% transparency.

Related code:

<ion-button fill="clear">Hover over me</ion-button>
<ion-button fill="outline">Hover over me</ion-button>

Other information:

I will submit a PR to fix this. It just seems to be a typo, really.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\Bryan\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.3.7
   @angular/cli                  : 7.3.7
   @ionic/angular-toolkit        : 1.5.0

System:

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

This comment has been minimized.

Copy link
Member

commented Apr 5, 2019

Thanks for the issue! The opacity of 0.04 follows the Material Design spec and the Material Web Implementation of the button found here: https://material-components.github.io/material-components-web-catalog/#/component/button

Screen Shot 2019-04-05 at 5 18 19 PM

Screen Shot 2019-04-05 at 5 18 22 PM

Screen Shot 2019-04-05 at 5 18 35 PM

Screen Shot 2019-04-05 at 5 18 39 PM

I can't find anywhere in the spec that uses .4 as the opacity, and it looks a bit too dark here:

Screen Shot 2019-04-05 at 5 19 34 PM

Are you seeing this opacity somewhere?

@ionitron-bot ionitron-bot bot removed the triage label Apr 5, 2019

@btsiders

This comment has been minimized.

Copy link
Author

commented Apr 8, 2019

Sorry. I just assumed 4% was a typo since it seems extremely light in the specific case I'm looking at, so then I also assumed it should have been 40% instead. It looks like 4% is more right in most cases, but this number really needs to be variable. 4% is the default starting opacity in their examples, but sometimes the number needs to be different.

From https://material.io/design/interaction/states.html#hover:

The opacity value of the overlay should be adjusted for each different combination of text on surface in order to ensure proper visibility and color contrast accessibility. Hover overlays should be at lower opacities to avoid distracting from content.

overlays-hover

Specifically, I'm looking at buttons with color="medium" set. I use a custom color scheme but haven't changed the medium colors yet.

  /** medium **/
  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;

The hover in this case is very difficult to see.

2019-04-08

I would propose that a new CSS variable be added so that we can override the hover overlay.

In the mean time, for my specific case, I can also discontinue using the medium color for lightened buttons. I can probably work around this by using the "dark" color and setting overall button opacity.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Apr 8, 2019

@ionitron-bot ionitron-bot bot removed the triage label Jun 5, 2019

brandyscarney added a commit that referenced this issue Jun 10, 2019

brandyscarney added a commit that referenced this issue Jun 10, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Jun 10, 2019

I have added the --background-hover and --color-hover variables to button. You will be able to now write the following in the 4.5.0 release:

<ion-button fill="clear" class="medium">custom medium</ion-button>
.medium {
  --color: #989aa2;
  --background-hover: rgba(152, 154, 162, 0.4);
}

Note that this will not override buttons that use the color property. The reason for this is the following could be written to change all of the default buttons:

ion-button {
  --color: #989aa2;
  --background-hover: rgba(152, 154, 162, 0.4);
}

And this would apply to all buttons except those with color.

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Jun 10, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to Done 🎉 in Ionic Core Jun 10, 2019

@btsiders

This comment has been minimized.

Copy link
Author

commented Jun 10, 2019

Looks great! Thanks!

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.