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

core/api.txt

@@ -428,6 +428,9 @@ ion-datetime,css-prop,--background-rgb
 ion-datetime,css-prop,--title-color
 ion-datetime,css-prop,--wheel-fade-background-rgb
 ion-datetime,css-prop,--wheel-highlight-background
+ion-datetime,part,calendar-day
+ion-datetime,part,calendar-day active
+ion-datetime,part,calendar-day today
 ion-datetime,part,month-year-button
 ion-datetime,part,time-button
 ion-datetime,part,time-button active

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

@@ -20,7 +20,7 @@
  @include padding($datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
 
  border-bottom: $datetime-ios-border-color;
-
+
  font-size: 14px;
 }
 
@@ -85,27 +85,32 @@
  */
  @include padding($datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5, $datetime-ios-padding * 0.5);
 
+ align-items: center;
+
  height: calc(100% - #{$datetime-ios-padding});
 }
 
-:host .calendar-day {
- font-size: 20px;
-}
+:host .calendar-day-wrapper {
+ @include padding(4px);
+
+ // This is required so that the calendar day wrapper
+ // will collapse instead of expanding to fill the button
+ height: 0;
 
-.calendar-day:focus .calendar-day-highlight,
-.calendar-day.calendar-day-active .calendar-day-highlight {
- opacity: 0.2;
+ min-height: 16px;
 }
 
-.calendar-day.calendar-day-active .calendar-day-highlight {
- background: current-color(base);
+:host .calendar-day {
+ width: $datetime-ios-day-width;
+ min-width: $datetime-ios-day-width;
+
+ height: $datetime-ios-day-height;
+
+ font-size: 20px;
 }
 
-// !important is needed here to overwrite custom highlight background, which is inline.
-// Does not apply to the active state because highlights aren't applied at all there.
-.calendar-day:focus .calendar-day-highlight {
- /* stylelint-disable-next-line declaration-no-important */
- background: current-color(base) !important;
+.calendar-day.calendar-day-active {
+ background: current-color(base, 0.2);
 }
 
 /**
@@ -135,12 +140,6 @@
  color: current-color(contrast);
 }
 
-.calendar-day.calendar-day-today.calendar-day-active .calendar-day-highlight {
- background: current-color(base);
-
- opacity: 1;
-}
-
 // Time / Header
 // -----------------------------------
 :host .datetime-time {

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

@@ -15,3 +15,9 @@ $datetime-ios-time-width: 68px !default;
 
 /// @prop - Border radius of the time picker
 $datetime-ios-time-border-radius: 8px !default;
+
+/// @prop - Width of the calendar day
+$datetime-ios-day-width: 40px !default;
+
+/// @prop - Height of the calendar day
+$datetime-ios-day-height: $datetime-ios-day-width !default;

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

@@ -69,27 +69,22 @@
 
 // Individual day button in month
 :host .calendar-day {
- @include padding(13px, 0, 13px, 0px);
+ width: $datetime-md-day-width;
+ min-width: $datetime-md-day-width;
 
- font-size: $datetime-md-calendar-item-font-size;
-}
-
-.calendar-day:focus .calendar-day-highlight {
- background: current-color(base, 0.2);
+ height: $datetime-md-day-height;
 
-box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
+font-size: $datetime-md-calendar-item-font-size;
 }
 
 /**
  * Day that today but not selected
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
- color: current-color(base);
-}
-
-.calendar-day.calendar-day-today .calendar-day-highlight {
  border: 1px solid current-color(base);
+
+ color: current-color(base);
 }
 
 /**
@@ -101,7 +96,7 @@
  color: current-color(contrast);
 }
 
-.calendar-day.calendar-day-active .calendar-day-highlight {
+.calendar-day.calendar-day-active {
  border: 1px solid current-color(base);
 
  background: current-color(base);

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

@@ -15,3 +15,9 @@ $datetime-md-header-padding: 20px !default;
 
 /// @prop - Padding for content
 $datetime-md-padding: 16px !default;
+
+/// @prop - Width of the calendar day
+$datetime-md-day-width: 42px !default;
+
+/// @prop - Height of the calendar day
+$datetime-md-day-height: $datetime-md-day-width !default;

core/src/components/datetime/datetime.scss

@@ -290,6 +290,10 @@ ion-picker-column-internal {
 }
 
 :host .calendar-body .calendar-month {
+ display: flex;
+
+ flex-flow: column;
+
  /**
  * Swiping should snap to at
  * most one month at a time.
@@ -325,13 +329,31 @@ ion-picker-column-internal {
  grid-template-columns: repeat(7, 1fr);
 }
 
+:host .calendar-day-wrapper {
+ display: flex;
+
+ align-items: center;
+ justify-content: center;
+
+ // Adding a min width and min height allows
+ // it to shrink smaller than its content
+ // which keeps the calendar day highlight
+ // larger while letting the grid items shrink
+ min-width: 0;
+
+ min-height: 0;
+
+ overflow: visible;
+}
+
 /**
  * Center the day text vertically
  * and horizontally within its grid cell.
  */
 :host .calendar-day {
- @include padding(0px, 0px, 0px, 0px);
- @include margin(0px, 0px, 0px, 0px);
+ @include border-radius(50%);
+ @include padding(0px);
+ @include margin(0px);
 
  display: flex;
 
@@ -362,16 +384,10 @@ ion-picker-column-internal {
  opacity: 0.4;
 }
 
-.calendar-day-highlight {
- @include border-radius(32px, 32px, 32px, 32px);
- @include padding(4px, 4px, 4px, 4px);
-
- position: absolute;
-
- width: 32px;
- height: 32px;
+.calendar-day:focus {
+ background: current-color(base, 0.2);
 
-z-index: -1;
+box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
 }
 
 // Time / Header

core/src/components/datetime/datetime.tsx

@@ -85,6 +85,11 @@ import {
  *
  * @part month-year-button - The button that opens the month/year picker when
  * using a grid style layout.
+ *
+ * @part calendar-day - The individual buttons that display a day inside of the datetime
+ * calendar.
+ * @part calendar-day active - The currently selected calendar day.
+ * @part calendar-day today - The calendar day that contains the current day.
  */
 @Component({
  tag: 'ion-datetime',
@@ -756,7 +761,7 @@ export class Datetime implements ComponentInterface {
  /**
  * Get the number of padding days so
  * we know how much to offset our next selector by
- * to grab the correct calenday-day element.
+ * to grab the correct calendar-day element.
  */
  const padding = currentMonth.querySelectorAll('.calendar-day-padding');
  const { day } = this.workingParts;
@@ -770,7 +775,7 @@ export class Datetime implements ComponentInterface {
  * and focus it.
  */
  const dayEl = currentMonth.querySelector(
- `.calendar-day:nth-of-type(${padding.length + day})`
+ `.calendar-day-wrapper:nth-of-type(${padding.length + day}) .calendar-day`
  ) as HTMLElement | null;
  if (dayEl) {
  dayEl.focus();
@@ -2116,69 +2121,85 @@ export class Datetime implements ComponentInterface {
  dateStyle = getHighlightStyles(highlightedDates, dateIsoString, el);
  }
 
- return (
- <button
- tabindex="-1"
- data-day={day}
- data-month={month}
- data-year={year}
- data-index={index}
- data-day-of-week={dayOfWeek}
- disabled={isCalDayDisabled}
- class={{
- 'calendar-day-padding': isCalendarPadding,
- 'calendar-day': true,
- 'calendar-day-active': isActive,
- 'calendar-day-today': isToday,
- }}
- style={
- dateStyle && {
- color: dateStyle.textColor,
- }
- }
- aria-hidden={isCalendarPadding ? 'true' : null}
- aria-selected={ariaSelected}
- aria-label={ariaLabel}
- onClick={() => {
- if (isCalendarPadding) {
- return;
- }
+ let dateParts = undefined;
 
- this.setWorkingParts({
- ...this.workingParts,
- month,
- day,
- year,
- });
-
- // multiple only needs date info, so we can wipe out other fields like time
- if (multiple) {
- this.setActiveParts(
- {
- month,
- day,
- year,
- },
- isActive
- );
- } else {
- this.setActiveParts({
- ...activePart,
+ // "Filler days" at the beginning of the grid should not get the calendar day
+ // CSS parts added to them
+ if (!isCalendarPadding) {
+ dateParts = `calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}`;
+ }
+
+ return (
+ <div class="calendar-day-wrapper">
+ <button
+ // We need to use !important for the inline styles here because
+ // otherwise the CSS shadow parts will override these styles.
+ // See https://github.com/WICG/webcomponents/issues/847
+ // Both the CSS shadow parts and highlightedDates styles are
+ // provided by the developer, but highlightedDates styles should
+ // always take priority.
+ ref={(el) => {
+ if (el) {
+ el.style.setProperty('color', `${dateStyle ? dateStyle.textColor : ''}`, 'important');
+ el.style.setProperty(
+ 'background-color',
+ `${dateStyle ? dateStyle.backgroundColor : ''}`,
+ 'important'
+ );
+ }
+ }}
+ tabindex="-1"
+ data-day={day}
+ data-month={month}
+ data-year={year}
+ data-index={index}
+ data-day-of-week={dayOfWeek}
+ disabled={isCalDayDisabled}
+ class={{
+ 'calendar-day-padding': isCalendarPadding,
+ 'calendar-day': true,
+ 'calendar-day-active': isActive,
+ 'calendar-day-today': isToday,
+ }}
+ part={dateParts}
+ aria-hidden={isCalendarPadding ? 'true' : null}
+ aria-selected={ariaSelected}
+ aria-label={ariaLabel}
+ onClick={() => {
+ if (isCalendarPadding) {
+ return;
+ }
+
+ this.setWorkingParts({
+ ...this.workingParts,
  month,
  day,
  year,
  });
- }
- }}
- >
- <div
- class="calendar-day-highlight"
- style={{
- backgroundColor: dateStyle?.backgroundColor,
+
+ // multiple only needs date info, so we can wipe out other fields like time
+ if (multiple) {
+ this.setActiveParts(
+ {
+ month,
+ day,
+ year,
+ },
+ isActive
+ );
+ } else {
+ this.setActiveParts({
+ ...activePart,
+ month,
+ day,
+ year,
+ });
+ }
  }}
- ></div>
- {text}
- </button>
+ >
+ {text}
+ </button>
+ </div>
  );
  })}
  </div>