fix(date-picker): end-range is now rounded and has the correct box-shadow #6216

Elijbet · 2023-01-03T00:58:14Z

Related Issue: #5544

Summary

Improvements to date-picker-day styling include:

end-range is now rounded
has the correct box-shadow
styling is consistent for both dir="ltr" and dir="rtl"

…x-shadow.

anveshmekala

LGTM!

eriklharper · 2023-01-03T17:45:22Z

End selected highlight circle looks good! One thing I'm noticing that we should also do is make sure the selected end date's hover styles match that of the start date. On your branch looks like there is still a visible gray square that appears behind the blue circle on just the end date of the range. We should match that to look just like the start date, where there is no gray square behind it:

anveshmekala · 2023-01-03T17:51:58Z

src/components/date-picker-day/date-picker-day.scss

@@ -221,7 +221,7 @@
 }

 :host([highlighted]:not([active]:focus)) .day {
-  @apply text-color-1 rounded-none;
+  @apply text-color-1 rounded-full;


we don't need to add rounded-full here as it is the default style applied on .day

Elijbet · 2023-01-08T04:09:44Z

I have a couple of design questions on date-picker (mostly hover behavior). @SkyeSeitz @ashetland @macandcheese

Should there be a hover style for unselected dates outside of the range, such as an empty bordered circle?
Should this also match the hover style of unselected dates inside the range, aside from the blue-to-white linear transition?
What should it do when selected range ends are hovered on?

Any of this could be a separate issue for after 1.0, it just seems that the date-picker design is a bit incomplete.

alisonailea · 2023-01-08T04:14:09Z

I would defer to the designers here but there are use cases where a user would want to know what date they're hovering over after they have selected a date range. This goes double for someone interacting with the date picker via keyboard.

Same for highlighting a date within a selected range.

Elijbet · 2023-01-08T05:04:44Z

I would defer to the designers here but there are use cases where a user would want to know what date they're hovering over after they have selected a date range. This goes double for someone interacting with the date picker via keyboard.

Same for highlighting a date within a selected range.

Yeah, right now the only highlighting I see is a slightly darker text color, which I only noticed after I specifically looked for a distinction.

ashetland · 2023-01-09T16:23:11Z

Hey folks, as of beta.97 it looks like all the hover states had been sorted out. Am I missing / misundestanding something?

CleanShot.2023-01-09.at.08.20.03.mp4

SkyeSeitz · 2023-01-09T19:17:11Z

Hey folks, as of beta.97 it looks like all the hover states had been sorted out. Am I missing / misundestanding something?

Tis upon clicking outside the date-picker

Screen.Recording.2023-01-09.at.11.13.57.AM.mov

ashetland · 2023-01-09T19:37:23Z

Hey folks, as of beta.97 it looks like all the hover states had been sorted out. Am I missing / misundestanding something?

Tis upon clicking outside the date-picker

Screen.Recording.2023-01-09.at.11.13.57.AM.mov

I thought @Elijbet was asking about hover states not the square end-date.

SkyeSeitz · 2023-01-09T19:42:08Z

Hey folks, as of beta.97 it looks like all the hover states had been sorted out. Am I missing / misundestanding something?

Tis upon clicking outside the date-picker
Screen.Recording.2023-01-09.at.11.13.57.AM.mov

I thought @Elijbet was asking about hover states not the square end-date.

You are correct- sorry! It would help if I read the latest comment, not just the issue title 😅

Elijbet · 2023-01-09T20:30:00Z

Hey folks, as of beta.97 it looks like all the hover states had been sorted out. Am I missing / misundestanding something?
CleanShot.2023-01-09.at.08.20.03.mp4

Wow, ok. So turns out that because I had my contrast just one notch up, the grey highlighting completely faded out. I wasn't even aware it was there.

github-actions · 2023-01-17T01:57:47Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

jcfranco · 2023-01-19T00:49:41Z

@Elijbet Was there anything pending for this? It looks like it's good to go. Let me know if I missed something.

Also, can you mark this as ready for review? I think we can skip draft reviews by default unless there's an explicit need for early feedback.

jcfranco · 2023-01-19T00:50:27Z

One more thing, since date-picker-day is internal, can you use the public component in the PR title's scope:

fix(date-picker): end-range ...

?

Elijbet · 2023-01-19T17:52:08Z

@Elijbet Was there anything pending for this? It looks like it's good to go. Let me know if I missed something.

Also, can you mark this as ready for review? I think we can skip draft reviews by default unless there's an explicit need for early feedback.

There is more working code on this branch that isn't pushed up. Let me finalize it now and open if for review.

… and LTR

src/components/date-picker/date-picker.stories.ts

jcfranco · 2023-01-20T02:02:30Z

src/components/date-picker-day/date-picker-day.scss

@@ -221,7 +221,7 @@
 }

 :host([highlighted]:not([active]:focus)) .day {
-  @apply text-color-1 rounded-none;
+  @apply text-color-1 rounded-full;


@Elijbet Based on ☝️, is the util class still needed?

…negative-after-clear * origin/master: build(deps): Bump gh-release from 6.0.4 to 7.0.1 (#6293) test(date): add test for dateToISO utility function (#6308) build: bump calcite-colors to latest (#6318) 1.0.0-next.729 fix(date-picker): end-range is now rounded and has the correct box-shadow (#6216)

fix(date-picker-day): end-range is now rounded and has the correct bo…

74bd05b

…x-shadow.

github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jan 3, 2023

github-actions bot assigned Elijbet Jan 3, 2023

Elijbet marked this pull request as ready for review January 3, 2023 01:22

Elijbet requested a review from a team as a code owner January 3, 2023 01:22

Elijbet added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jan 3, 2023

Range screenshots

aa7cbed

Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 3, 2023

Elijbet marked this pull request as draft January 3, 2023 02:32

Elijbet added 2 commits January 2, 2023 19:07

range test selection

7314cc4

cleanup

16b8d4c

anveshmekala approved these changes Jan 3, 2023

View reviewed changes

anveshmekala reviewed Jan 3, 2023

View reviewed changes

Esri deleted a comment from anveshmekala Jan 3, 2023

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jan 17, 2023

Elijbet removed the Stale Issues or pull requests that have not had recent activity. label Jan 17, 2023

Merge branch 'master' into elijbet/5544-make-picker-end-date-a-circle

3fd58a8

Elijbet changed the title ~~fix(date-picker-day): end-range is now rounded and has the correct box-shadow~~ fix(date-picker): end-range is now rounded and has the correct box-shadow Jan 19, 2023

WIP: fix white box shadow to work for start & end ranges for both RTL…

5f9f8a7

… and LTR

Elijbet marked this pull request as ready for review January 20, 2023 00:25

Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 20, 2023

benelan reviewed Jan 20, 2023

View reviewed changes

src/components/date-picker/date-picker.stories.ts Outdated Show resolved Hide resolved

jcfranco approved these changes Jan 20, 2023

View reviewed changes

WIP: cleanup

8ae5c0c

Elijbet mentioned this pull request Jan 20, 2023

Add snapshot coverage for date-picker styles for when there is an active range selection. #6314

Closed

Elijbet added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jan 20, 2023

Elijbet merged commit ed30588 into master Jan 20, 2023

Elijbet deleted the elijbet/5544-make-picker-end-date-a-circle branch January 20, 2023 03:16

github-actions bot added this to the 2023 February Priorities - No breaking changes milestone Jan 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(date-picker): end-range is now rounded and has the correct box-shadow #6216

fix(date-picker): end-range is now rounded and has the correct box-shadow #6216

Elijbet commented Jan 3, 2023 •

edited

Loading

anveshmekala left a comment

eriklharper commented Jan 3, 2023

anveshmekala Jan 3, 2023

Elijbet commented Jan 8, 2023 •

edited

Loading

alisonailea commented Jan 8, 2023

Elijbet commented Jan 8, 2023

ashetland commented Jan 9, 2023

SkyeSeitz commented Jan 9, 2023

ashetland commented Jan 9, 2023

SkyeSeitz commented Jan 9, 2023

Elijbet commented Jan 9, 2023 •

edited

Loading

github-actions bot commented Jan 17, 2023

jcfranco commented Jan 19, 2023

jcfranco commented Jan 19, 2023

Elijbet commented Jan 19, 2023

jcfranco Jan 20, 2023

fix(date-picker): end-range is now rounded and has the correct box-shadow #6216

fix(date-picker): end-range is now rounded and has the correct box-shadow #6216

Conversation

Elijbet commented Jan 3, 2023 • edited Loading

Summary

anveshmekala left a comment

Choose a reason for hiding this comment

eriklharper commented Jan 3, 2023

anveshmekala Jan 3, 2023

Choose a reason for hiding this comment

Elijbet commented Jan 8, 2023 • edited Loading

alisonailea commented Jan 8, 2023

Elijbet commented Jan 8, 2023

ashetland commented Jan 9, 2023

SkyeSeitz commented Jan 9, 2023

ashetland commented Jan 9, 2023

SkyeSeitz commented Jan 9, 2023

Elijbet commented Jan 9, 2023 • edited Loading

github-actions bot commented Jan 17, 2023

jcfranco commented Jan 19, 2023

jcfranco commented Jan 19, 2023

Elijbet commented Jan 19, 2023

jcfranco Jan 20, 2023

Choose a reason for hiding this comment

Elijbet commented Jan 3, 2023 •

edited

Loading

Elijbet commented Jan 8, 2023 •

edited

Loading

Elijbet commented Jan 9, 2023 •

edited

Loading