X Tutup
The Wayback Machine - https://web.archive.org/web/20220509033056/https://github.com/angular/components/pull/21176
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

fix(material/datepicker): adjust focused date background for better visibility #21176

Merged
merged 1 commit into from Dec 17, 2020

Conversation

Copy link
Contributor

@annieyw annieyw commented Nov 30, 2020

Fixes: #18845

Before:
A6ZjRCNQQNuinkY

After:
8Pobz56tMEDUwft
8xAbQdUmWJyCZFv

@annieyw annieyw requested a review from jelbourn Nov 30, 2020
@annieyw annieyw requested a review from mmalerba as a code owner Nov 30, 2020
@google-cla google-cla bot added the cla: yes label Nov 30, 2020
@annieyw annieyw added a11y P3 target: patch labels Nov 30, 2020
@jelbourn
Copy link

@jelbourn jelbourn commented Dec 1, 2020

What are the contrast ratios on the text with the new treatment?

@annieyw
Copy link
Author

@annieyw annieyw commented Dec 1, 2020

5 for dark mode and 11.73 for light mode

@mmalerba
Copy link

@mmalerba mmalerba commented Dec 1, 2020

What about just using a darker gray? In my mind the color is kind of associated with being selected. I'm also curious what this would look like on a date-range picker, where I think dates in between the 2 selected end points are a similar color to what you used here

@annieyw
Copy link
Author

@annieyw annieyw commented Dec 1, 2020

This is what it looks like with the range, I think it still looks fine, what do you think?
6mZ7NzpcseP46vT
I chose to use a color background because https://material.io/components/date-pickers#anatomy (Desktop date picker
section)

@mmalerba
Copy link

@mmalerba mmalerba commented Dec 1, 2020

Ah I scanned the spec but didn't notice that. In that case yeah, lets go with the color

@mmalerba
Copy link

@mmalerba mmalerba commented Dec 1, 2020

For reference, here's what it looks like when overlapping the green and yellow:
image

It's not my favorite, but good enough

Copy link
Contributor

@mmalerba mmalerba left a comment

LGTM

@crisbeto
Copy link

@crisbeto crisbeto commented Dec 1, 2020

Looking through the designs in the spec (https://material.io/components/date-pickers#desktop-pickers), it seems like the circle is supposed to be transparent with an outline when selecting a range. It may end up complicating the selectors though.

4MQlRn9

A bit further down there's a graphic that says not to use the same colors for selected and hover.

Date_pickers_-Material_Design-_Google_Chrome_2020-12-01_21-11-58

@annieyw
Copy link
Author

@annieyw annieyw commented Dec 1, 2020

For the part where it says not to use the same style for hover and selected states I think it refers to selected range vs to be selected range. However it does seem like the datepicker and date range picker have slightly different hover state treatments.

@annieyw
Copy link
Author

@annieyw annieyw commented Dec 2, 2020

Confirmed with MDC designer that hover over selected range should be same as normal datepicker
unnamed

@annieyw annieyw added the merge ready label Dec 2, 2020
Copy link
Member

@jelbourn jelbourn left a comment

LGTM

@mmalerba mmalerba merged commit dfe3236 into angular:master Dec 17, 2020
16 checks passed
mmalerba pushed a commit that referenced this issue Dec 17, 2020
@annieyw annieyw deleted the datepicker-contrast branch Jan 6, 2021
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Jan 14, 2021
@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Feb 6, 2021

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 6, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
a11y cla: yes merge ready P3 target: patch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants
X Tutup