feat(datetime): add parts for calendar day, active, and today by brandyscarney · Pull Request #27641 · ionic-team/ionic-framework

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.

bolt-new-by-stackblitz · 2023-06-13T22:52:22Z

Run & review this pull request in StackBlitz Codeflow.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 ✨

liamdebeasi

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

averyrousseau

🎉 🎉 🎉

liamdebeasi

Great work!

github-actionsBot 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 averyrousseau, liamdebeasi and sean-perkins as code owners June 14, 2023 20:55

sean-perkins reviewed Jun 20, 2023
View reviewed changes

Comment threadcore/src/components/datetime/datetime.ios.scss Outdated

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

Base automatically changed from feature-7.1 to mainJune 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 0293b9dCompare 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.4August 17, 2023 16:30

brandyscarneyand 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

averyrousseau 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

brandyscarneyand 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 averyrousseau and liamdebeasi August 31, 2023 20:11

liamdebeasiand 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

Comment threadcore/src/components/datetime/datetime.ios.scss
Comment threadcore/src/components/datetime/datetime.tsx Outdated

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

liamdebeasi approved these changes Sep 5, 2023
View reviewed changes

Comment threadcore/src/components/datetime/datetime.ios.scss Outdated
Comment threadcore/src/components/datetime/datetime.ios.scss
Comment threadcore/api.txt

averyrousseau suggested changes Sep 5, 2023
View reviewed changes

Comment threadcore/src/components/datetime/datetime.tsx

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

averyrousseau approved these changes Sep 5, 2023
View reviewed changes

brandyscarneyand 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.4Sep 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

Uh oh!

Conversation

brandyscarney commented Jun 13, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

bolt-new-by-stackblitzBot commented Jun 13, 2023

Uh oh!

Uh oh!

liamdebeasi commented Aug 21, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney commented Sep 1, 2023

Uh oh!

sean-perkins left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

liamdebeasi left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

averyrousseau left a comment

Choose a reason for hiding this comment

Uh oh!

liamdebeasi left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

brandyscarney commented Jun 13, 2023•
edited
Loading