Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

fix(select): in popup, hover and focus background colors are the same #12015

Merged
merged 1 commit into from
Sep 21, 2020

Conversation

Splaktar
Copy link
Contributor

PR Checklist

Please check that your PR fulfills the following requirements:

  • The commit message follows our guidelines
  • Tests for the changes have been added or this is not a bug fix / enhancement
  • Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

  • In the md-select popup, hover and focus background colors are the same. This can cause confusion when navigating with both keyboard and mouse on desktop.

Issue Number:
Fixes #9851

What is the new behavior?

  • use a similar approach to the one used by MDC. I.e. hover is 8% less opaque than focus.
    • the opacity values are slightly different because
      they use #000 and we use rgba(0, 0, 0, 0.87)

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

No tests as this is a CSS-only change.

- use a similar approach to the one used by MDC
  - the opacity values are slightly different because
    they use `#000` and we use `rgba(0, 0, 0, 0.87)`

Fixes #9851
@googlebot googlebot added the cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ label Sep 21, 2020
@Splaktar Splaktar self-assigned this Sep 21, 2020
@Splaktar Splaktar added this to the 1.2.1 milestone Sep 21, 2020
@Splaktar Splaktar added P3: important Important issues that really should be fixed when possible. ui: CSS ui: focus ux: polish pr: merge ready This PR is ready for a caretaker to review labels Sep 21, 2020
Copy link
Contributor

@wagnermaciel wagnermaciel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@Splaktar Splaktar added the pr: lgtm This PR has been approved by the reviewer label Sep 21, 2020
@Splaktar Splaktar merged commit d5863b8 into master Sep 21, 2020
@Splaktar Splaktar deleted the select-hover-focus-background branch September 21, 2020 01:11
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes PR author has signed Google's CLA: https://opensource.google.com/docs/cla/ P3: important Important issues that really should be fixed when possible. pr: lgtm This PR has been approved by the reviewer pr: merge ready This PR is ready for a caretaker to review ui: CSS ui: focus ux: polish
Projects
None yet
Development

Successfully merging this pull request may close these issues.

select: can have 2 options with a selected (grey) background
3 participants