Skip to content

Commit 0293b9d

Browse files
brandyscarneybrandyscarney
committed
feat(datetime): add parts for calendar day and button wrapper
1 parent 9016798 commit 0293b9d

File tree

5 files changed

+110
-90
lines changed

5 files changed

+110
-90
lines changed

‎core/api.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,9 @@ ion-datetime,css-prop,--background-rgb
427427
ion-datetime,css-prop,--title-color
428428
ion-datetime,css-prop,--wheel-fade-background-rgb
429429
ion-datetime,css-prop,--wheel-highlight-background
430+
ion-datetime,part,calendar-day
431+
ion-datetime,part,calendar-day active
432+
ion-datetime,part,calendar-day today
430433
ion-datetime,part,month-year-button
431434
ion-datetime,part,time-button
432435
ion-datetime,part,time-button active

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

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
@include padding($datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
2121

2222
border-bottom: $datetime-ios-border-color;
23-
23+
2424
font-size: 14px;
2525
}
2626

@@ -85,27 +85,33 @@
8585
*/
8686
@include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
8787

88+
align-items: center;
89+
8890
height: calc(100% - #{$datetime-ios-padding});
8991
}
9092

91-
:host .calendar-day {
92-
font-size: 20px;
93-
}
93+
:host .calendar-day-wrapper {
94+
@include padding(4px);
9495

95-
.calendar-day:focus .calendar-day-highlight,
96-
.calendar-day.calendar-day-active .calendar-day-highlight {
97-
opacity: 0.2;
96+
// This is required so that the calendar day wrapper
97+
// will collapse instead of expanding to fill the button
98+
height: 0;
99+
100+
min-height: 16px;
98101
}
99102

100-
.calendar-day.calendar-day-active .calendar-day-highlight {
101-
background: current-color(base);
103+
:host .calendar-day {
104+
width: 40px;
105+
min-width: 40px;
106+
107+
height: 40px;
108+
109+
font-size: 20px;
102110
}
103111

104-
// !important is needed here to overwrite custom highlight background, which is inline.
105-
// Does not apply to the active state because highlights aren't applied at all there.
106-
.calendar-day:focus .calendar-day-highlight {
107-
/* stylelint-disable-next-line declaration-no-important */
108-
background: current-color(base) !important;
112+
.calendar-day:focus,
113+
.calendar-day.calendar-day-active {
114+
background: current-color(base, 0.2);
109115
}
110116

111117
/**

‎core/src/components/datetime/datetime.md.scss‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,15 @@
6969

7070
// Individual day button in month
7171
:host .calendar-day {
72-
@include padding(13px, 0, 13px, 0px);
72+
width: 42px;
73+
min-width: 42px;
74+
75+
height: 42px;
7376

7477
font-size: $datetime-md-calendar-item-font-size;
7578
}
7679

77-
.calendar-day:focus .calendar-day-highlight {
80+
.calendar-day:focus {
7881
background: current-color(base, 0.2);
7982

8083
box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
@@ -85,11 +88,9 @@
8588
* should have ion-color for text color.
8689
*/
8790
:host .calendar-day.calendar-day-today {
88-
color: current-color(base);
89-
}
90-
91-
.calendar-day.calendar-day-today .calendar-day-highlight {
9291
border: 1px solid current-color(base);
92+
93+
color: current-color(base);
9394
}
9495

9596
/**
@@ -101,7 +102,7 @@
101102
color: current-color(contrast);
102103
}
103104

104-
.calendar-day.calendar-day-active .calendar-day-highlight {
105+
.calendar-day.calendar-day-active {
105106
border: 1px solid current-color(base);
106107

107108
background: current-color(base);

‎core/src/components/datetime/datetime.scss‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -290,6 +290,10 @@ ion-picker-column-internal {
290290
}
291291

292292
:host .calendar-body .calendar-month {
293+
display: flex;
294+
295+
flex-flow: column;
296+
293297
/**
294298
* Swiping should snap to at
295299
* most one month at a time.
@@ -325,13 +329,27 @@ ion-picker-column-internal {
325329
grid-template-columns: repeat(7, 1fr);
326330
}
327331

332+
:host .calendar-day-wrapper {
333+
display: flex;
334+
335+
align-items: center;
336+
justify-content: center;
337+
338+
min-width: 0;
339+
340+
min-height: 0;
341+
342+
overflow: visible;
343+
}
344+
328345
/**
329346
* Center the day text vertically
330347
* and horizontally within its grid cell.
331348
*/
332349
:host .calendar-day {
333-
@include padding(0px, 0px, 0px, 0px);
334-
@include margin(0px, 0px, 0px, 0px);
350+
@include border-radius(50%);
351+
@include padding(0px);
352+
@include margin(0px);
335353

336354
display: flex;
337355

@@ -362,17 +380,6 @@ ion-picker-column-internal {
362380
opacity: 0.4;
363381
}
364382

365-
.calendar-day-highlight {
366-
@include border-radius(32px, 32px, 32px, 32px);
367-
@include padding(4px, 4px, 4px, 4px);
368-
369-
position: absolute;
370-
371-
width: 32px;
372-
height: 32px;
373-
374-
z-index: -1;
375-
}
376383

377384
// Time / Header
378385
// -----------------------------------

‎core/src/components/datetime/datetime.tsx‎

Lines changed: 59 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,11 @@ import {
8585
*
8686
* @part month-year-button - The button that opens the month/year picker when
8787
* using a grid style layout.
88+
*
89+
* @part calendar-day - The individual buttons that display a day inside of the datetime
90+
* calendar.
91+
* @part calendar-day active - The currently selected calendar day.
92+
* @part calendar-day today - The calendar day that contains the current day.
8893
*/
8994
@Component({
9095
tag: 'ion-datetime',
@@ -2080,68 +2085,66 @@ export class Datetime implements ComponentInterface {
20802085
}
20812086

20822087
return (
2083-
<button
2084-
tabindex="-1"
2085-
data-day={day}
2086-
data-month={month}
2087-
data-year={year}
2088-
data-index={index}
2089-
data-day-of-week={dayOfWeek}
2090-
disabled={isCalDayDisabled}
2091-
class={{
2092-
'calendar-day-padding': isCalendarPadding,
2093-
'calendar-day': true,
2094-
'calendar-day-active': isActive,
2095-
'calendar-day-today': isToday,
2096-
}}
2097-
style={
2098-
dateStyle && {
2099-
color: dateStyle.textColor,
2100-
}
2101-
}
2102-
aria-hidden={isCalendarPadding ? 'true' : null}
2103-
aria-selected={ariaSelected}
2104-
aria-label={ariaLabel}
2105-
onClick={() => {
2106-
if (isCalendarPadding) {
2107-
return;
2088+
<div class="calendar-day-wrapper">
2089+
<button
2090+
tabindex="-1"
2091+
data-day={day}
2092+
data-month={month}
2093+
data-year={year}
2094+
data-index={index}
2095+
data-day-of-week={dayOfWeek}
2096+
disabled={isCalDayDisabled}
2097+
class={{
2098+
'calendar-day-padding': isCalendarPadding,
2099+
'calendar-day': true,
2100+
'calendar-day-active': isActive,
2101+
'calendar-day-today': isToday,
2102+
}}
2103+
part={`calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}`}
2104+
style={
2105+
dateStyle && {
2106+
color: dateStyle.textColor,
2107+
backgroundColor: dateStyle.backgroundColor,
2108+
}
21082109
}
2109-
2110-
this.setWorkingParts({
2111-
...this.workingParts,
2112-
month,
2113-
day,
2114-
year,
2115-
});
2116-
2117-
// multiple only needs date info, so we can wipe out other fields like time
2118-
if (multiple) {
2119-
this.setActiveParts(
2120-
{
2121-
month,
2122-
day,
2123-
year,
2124-
},
2125-
isActive
2126-
);
2127-
} else {
2128-
this.setActiveParts({
2129-
...activePart,
2110+
aria-hidden={isCalendarPadding ? 'true' : null}
2111+
aria-selected={ariaSelected}
2112+
aria-label={ariaLabel}
2113+
onClick={() => {
2114+
if (isCalendarPadding) {
2115+
return;
2116+
}
2117+
2118+
this.setWorkingParts({
2119+
...this.workingParts,
21302120
month,
21312121
day,
21322122
year,
21332123
});
2134-
}
2135-
}}
2136-
>
2137-
<div
2138-
class="calendar-day-highlight"
2139-
style={{
2140-
backgroundColor: dateStyle?.backgroundColor,
2124+
2125+
// multiple only needs date info, so we can wipe out other fields like time
2126+
if (multiple) {
2127+
this.setActiveParts(
2128+
{
2129+
month,
2130+
day,
2131+
year,
2132+
},
2133+
isActive
2134+
);
2135+
} else {
2136+
this.setActiveParts({
2137+
...activePart,
2138+
month,
2139+
day,
2140+
year,
2141+
});
2142+
}
21412143
}}
2142-
></div>
2143-
{text}
2144-
</button>
2144+
>
2145+
{text}
2146+
</button>
2147+
</div>
21452148
);
21462149
})}
21472150
</div>

0 commit comments

Comments
 (0)