feat(datetime): add parts for calendar day, active, and today #27641

brandyscarney · 2023-06-13T22:52:19Z

Issue number: resolves #25340

What is the current behavior?

It is not possible to style the calendar days in a datetime since it uses shadow DOM and there are not exposed parts or CSS variables for the calendar days.

What is the new behavior?

Exposes the following parts for a calendar day: calendar-day, today, and active
Combines the calendar-day-highlight element with the calendar-day element so developers don't have to know to style two different elements & we don't have to expose them as separate parts
Improves height parity of the calendar day across browsers
Updates the custom e2e test to include an example of styling days using the newly exposed CSS parts
Adds tests for the focus states of the calendar day

Does this introduce a breaking change?

Yes
No

Other information

This PR has a number of screenshot diffs. I have gone through all of them and believe they are either improvements to datetime or inconsequential changes.

Material Design height changes - several screenshots show the height of the datetime for md increasing, this comment explains why this is a good change. (I did not comment on every screenshot with a height increase, but you can see the pixel change at the bottom to verify it was caused by this).
iOS height changes - several screenshots show a shift in the height of the datetime for ios. This is caused by the browsers rendering fractional pixels differently. This comment explains why this is a desired change. (I did not comment on every screenshot with a height increase, but you can see the pixel change at the bottom to verify it was caused by this).
Material Design circle height increase - The calendar day highlight has increased in height for non-active days. I believe this is a good change because I don't see why they would be smaller, but I am open to discussion if there are some guidelines I missed here. This comment shows the difference in height.
Numbers shifting - many, many screenshots show a horizontal shift in 1-3 of the numbers. I added comments to (I believe) all of the screenshots where this is happening because it is quite difficult to see the difference on some. This comment shows a video of the shift.

stackblitz · 2023-06-13T22:52:22Z

Run & review this pull request in StackBlitz Codeflow.

core/src/components/datetime/datetime.ios.scss

liamdebeasi · 2023-08-21T15:02:45Z

Going to remove myself from review while this is in draft. Feel free to re-add once it's ready for review!

brandyscarney · 2023-08-17T20:00:07Z

...lays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png

The difference between these two screenshots is a shift horizontally of the 12 and the 26.

datetime-diff-one.mov

brandyscarney · 2023-08-17T20:02:45Z

...lays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png

The difference between these two screenshots is a shift horizontally of the 12 and the 26.

brandyscarney · 2023-08-17T20:02:56Z

...ys/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Chrome-linux.png

The difference between these two screenshots is a shift horizontally of the 12 and the 26.

brandyscarney · 2023-08-17T20:03:32Z

...ys/datetime-button.e2e.ts-snapshots/datetime-overlay-popover-ios-ltr-Mobile-Safari-linux.png

The difference between these two screenshots is a shift horizontally of the 12 and the 26.

brandyscarney · 2023-08-17T20:04:40Z

...basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png

The difference between these two screenshots is a shift horizontally of the 4.

brandyscarney · 2023-08-22T16:43:04Z

...locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Firefox-linux.png

The difference between these two screenshots is a shift horizontally of the 1 in 14 and 0 in 30.

brandyscarney · 2023-08-22T16:43:41Z

...me.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-ltr-Mobile-Firefox-linux.png

The difference between these two screenshots is a shift horizontally of the 1 and 8.

brandyscarney · 2023-08-22T16:44:19Z

...etime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-ltr-Mobile-Firefox-linux.png

The difference between these two screenshots is a shift horizontally of the 1 and 8.

brandyscarney · 2023-08-22T16:54:54Z

...iple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-ltr-Mobile-Firefox-linux.png

The difference between these two screenshots is a shift horizontally of the 1 and 8.

brandyscarney · 2023-08-22T16:56:13Z

...mponents/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Firefox-linux.png

The difference between these two screenshots is a shift horizontally of the 1 in 14.

core/api.txt

core/src/components/datetime/test/color/datetime.e2e.ts

core/src/components/datetime/datetime.ios.scss

averyjohnston · 2023-08-23T17:24:39Z

...tes/datetime.e2e.ts-snapshots/datetime-highlightedDates-array-md-ltr-Mobile-Chrome-linux.png

I agree with making them all the same size; not sure why that border would have been there in the first place 🤔

…take priority

brandyscarney · 2023-09-01T15:19:21Z

This should be good for review now! All feedback has been addressed & screenshots are up to date.

sean-perkins

My comments are non-blocking. Fantastic work on this ✨

core/src/components/datetime/datetime.ios.scss

core/src/components/datetime/datetime.tsx

liamdebeasi

Good to go once below feedback is addressed. Great work!

core/src/components/datetime/datetime.ios.scss

core/api.txt

core/src/components/datetime/datetime.tsx

averyjohnston

🎉 🎉 🎉

liamdebeasi

Great work!

github-actions bot added the package: core @ionic/core package label Jun 13, 2023

brandyscarney mentioned this pull request Jun 14, 2023

chore(): add updated snapshots #27651

Closed

brandyscarney marked this pull request as ready for review June 14, 2023 20:55

brandyscarney requested review from liamdebeasi, averyjohnston and sean-perkins as code owners June 14, 2023 20:55

sean-perkins reviewed Jun 20, 2023

View reviewed changes

core/src/components/datetime/datetime.ios.scss Outdated Show resolved Hide resolved

brandyscarney marked this pull request as draft June 20, 2023 19:27

Base automatically changed from feature-7.1 to main June 21, 2023 14:03

feat(datetime): add parts for calendar day and button wrapper

0293b9d

brandyscarney force-pushed the FW-1593 branch from 6ab6d12 to 0293b9d Compare August 17, 2023 16:22

brandyscarney mentioned this pull request Aug 17, 2023

investigation(datetime): using a button wrapper with overflowing button to combine day and highlight #27807

Closed

brandyscarney changed the base branch from main to feature-7.4 August 17, 2023 16:30

brandyscarney and others added 4 commits August 17, 2023 14:01

test(datetime): add test for customizing the css parts

6ca4cda

refactor: remove unused css

8c28d11

chore(): add updated snapshots

c697ef9

fix(datetime): focus calendar day element when tabbing

64fa7cb

liamdebeasi removed their request for review August 21, 2023 15:02

brandyscarney commented Aug 22, 2023

View reviewed changes

brandyscarney marked this pull request as ready for review August 22, 2023 17:16

brandyscarney requested review from liamdebeasi and sean-perkins August 22, 2023 17:16

averyjohnston suggested changes Aug 23, 2023

View reviewed changes

brandyscarney added 5 commits August 24, 2023 14:50

test(datetime): remove test from color directory

16fdd91

test(datetime): add test to custom for customizing calendar days

cd6e0a4

test(datetime): target the specific grid datetime for the test

1a588b0

test(datetime): remove unused elements from test

a0f6cd5

test(datetime): fix broken tests

71273b6

brandyscarney and others added 5 commits August 31, 2023 14:51

fix(datetime): add a focus ring around ios and make highlightedDates …

c062227

…take priority

actual property name

e34124a

Merge branch 'feature-7.4' into FW-1593

beec11c

chore(): add updated snapshots

7d91ffa

test(datetime): fix incorrect selector & screenshot images

c2a5c32

brandyscarney requested review from averyjohnston and liamdebeasi August 31, 2023 20:11

liamdebeasi and others added 3 commits September 1, 2023 10:12

Merge branch 'feature-7.4' into FW-1593

8bc0407

test(datetime): oops those ids were used

74547d6

chore(): add updated snapshots

de13e15

sean-perkins approved these changes Sep 1, 2023

View reviewed changes

core/src/components/datetime/datetime.ios.scss Show resolved Hide resolved

core/src/components/datetime/datetime.tsx Outdated Show resolved Hide resolved

fix(datetime): check if the day is not calendar padding to add parts

85e250d

liamdebeasi approved these changes Sep 5, 2023

View reviewed changes

core/src/components/datetime/datetime.ios.scss Outdated Show resolved Hide resolved

core/src/components/datetime/datetime.ios.scss Show resolved Hide resolved

core/api.txt Show resolved Hide resolved

averyjohnston suggested changes Sep 5, 2023

View reviewed changes

core/src/components/datetime/datetime.tsx Outdated Show resolved Hide resolved

brandyscarney added 2 commits September 5, 2023 13:04

fix(datetime): remove highlighted dates from other months

9cfe971

refactor(datetime): combine the shared css

2a63bf5

averyjohnston approved these changes Sep 5, 2023

View reviewed changes

brandyscarney and others added 4 commits September 5, 2023 16:44

test(datetime): add tests for focus states

198bd3d

style: lint

6f4d463

chore(): add updated snapshots

aa3881e

test(datetime): don't screenshot rtl tests for focus

cbba937

brandyscarney requested a review from liamdebeasi September 5, 2023 21:46

liamdebeasi approved these changes Sep 6, 2023

View reviewed changes

mapsandapps removed their request for review September 6, 2023 14:43

Merge branch 'feature-7.4' into FW-1593

80af52c

brandyscarney merged commit 79b005d into feature-7.4 Sep 6, 2023

brandyscarney deleted the FW-1593 branch September 6, 2023 15:58

liamdebeasi mentioned this pull request Sep 6, 2023

feat(datetime): add disabled part #28134

Merged

2 tasks

liamdebeasi mentioned this pull request Sep 26, 2023

chore: sync with main #28238

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(datetime): add parts for calendar day, active, and today #27641

feat(datetime): add parts for calendar day, active, and today #27641

brandyscarney commented Jun 13, 2023 •

edited

Loading

stackblitz bot commented Jun 13, 2023

liamdebeasi commented Aug 21, 2023

brandyscarney Aug 17, 2023

brandyscarney Aug 17, 2023

brandyscarney Aug 17, 2023

brandyscarney Aug 17, 2023

brandyscarney Aug 17, 2023

brandyscarney Aug 22, 2023

brandyscarney Aug 22, 2023

brandyscarney Aug 22, 2023

brandyscarney Aug 22, 2023

brandyscarney Aug 22, 2023

averyjohnston Aug 23, 2023

brandyscarney commented Sep 1, 2023

sean-perkins left a comment

liamdebeasi left a comment

averyjohnston left a comment

liamdebeasi left a comment

feat(datetime): add parts for calendar day, active, and today #27641

feat(datetime): add parts for calendar day, active, and today #27641

Conversation

brandyscarney commented Jun 13, 2023 • edited Loading

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

stackblitz bot commented Jun 13, 2023

liamdebeasi commented Aug 21, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brandyscarney commented Sep 1, 2023

sean-perkins left a comment

Choose a reason for hiding this comment

liamdebeasi left a comment

Choose a reason for hiding this comment

averyjohnston left a comment

Choose a reason for hiding this comment

liamdebeasi left a comment

Choose a reason for hiding this comment

brandyscarney commented Jun 13, 2023 •

edited

Loading