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.

Sign up for GitHub

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

feat(datetime): add animation to adjacent days selection #30298

Merged
merged 12 commits into from
Mar 28, 2025
+123 −44
Merged

feat(datetime): add animation to adjacent days selection #30298

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
354296e
- add styles for active adjacent day;
JoaoFerreira-FrontEnd Mar 24, 2025
9949105
- don't set workingParts when adjacentDay is select;
JoaoFerreira-FrontEnd Mar 25, 2025
cd071ec
- clean scss suggestions;
JoaoFerreira-FrontEnd Mar 25, 2025
9d51239
- add activeParts time to selected adjacentDay;
JoaoFerreira-FrontEnd Mar 27, 2025
01424c1
- lint.fix;
JoaoFerreira-FrontEnd Mar 27, 2025
4e50848
- clean goTo;
JoaoFerreira-FrontEnd Mar 27, 2025
a21501d
- lint.fix;
JoaoFerreira-FrontEnd Mar 27, 2025
5de7bca
- fix automated test with waitingForChanges;
JoaoFerreira-FrontEnd Mar 27, 2025
f509523
test(datetime): check ionChange values for adjacent days
thetaPC Mar 27, 2025
af27af5
- improve test page;
JoaoFerreira-FrontEnd Mar 28, 2025
044cf5f
Merge branch 'ROU-11744' of https://github.com/ionic-team/ionic-frame…
JoaoFerreira-FrontEnd Mar 28, 2025
cfa25a1
chore(): add updated snapshots
Ionitron Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion core/src/components/datetime/datetime.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,8 @@
* is selected should have ion-color for
* text color and be bolder.
*/
:host .calendar-day.calendar-day-active {
:host .calendar-day.calendar-day-active,
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {

color: current-color(base);

font-weight: 600;
Expand Down
3 changes: 2 additions & 1 deletion core/src/components/datetime/datetime.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,8 @@
* is selected should have ion-color for
* text color and be bolder.
*/
:host .calendar-day.calendar-day-active {
:host .calendar-day.calendar-day-active,
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active{
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {

color: current-color(contrast);
}

Expand Down
11 changes: 6 additions & 5 deletions core/src/components/datetime/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2380,11 +2380,6 @@ export class Datetime implements ComponentInterface {
return;
}

if (isAdjacentDay) {
// The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
this.el.blur();
}

this.setWorkingParts({
...this.workingParts,
month: _month,
Expand All @@ -2393,6 +2388,12 @@ export class Datetime implements ComponentInterface {
isAdjacentDay,
});

if (isAdjacentDay) {
// The user selected a day outside the current month. Ignore this button, as the month will be re-rendered.
this.el.blur();
this.animateToDate(this.workingParts);
}

// multiple only needs date info, so we can wipe out other fields like time
if (multiple) {
this.setActiveParts(
Expand Down
Loading