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

core/api.txt

@@ -427,6 +427,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,33 @@
    */
   @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: 40px;
+  min-width: 40px;
+
+  height: 40px;
+
+  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:focus,
+.calendar-day.calendar-day-active {
+  background: current-color(base, 0.2);
 }
 
 /**
@@ -135,12 +141,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.md.scss

@@ -69,12 +69,15 @@
 
 // Individual day button in month
 :host .calendar-day {
-  @include padding(13px, 0, 13px, 0px);
+  width: 42px;
+  min-width: 42px;
+
+  height: 42px;
 
   font-size: $datetime-md-calendar-item-font-size;
 }
 
-.calendar-day:focus .calendar-day-highlight {
+.calendar-day:focus {
   background: current-color(base, 0.2);
 
   box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
@@ -85,11 +88,9 @@
  * 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 +102,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.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,27 @@ ion-picker-column-internal {
   grid-template-columns: repeat(7, 1fr);
 }
 
+:host .calendar-day-wrapper {
+  display: flex;
+
+  align-items: center;
+  justify-content: center;
+
+  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,17 +380,6 @@ 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;
-
-  z-index: -1;
-}
 
 // 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',
@@ -800,7 +805,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;
@@ -814,7 +819,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();
@@ -2080,68 +2085,66 @@ export class Datetime implements ComponentInterface {
             }
 
             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;
+              <div class="calendar-day-wrapper">
+                <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,
+                  }}
+                  part={`calendar-day${isActive ? ' active' : ''}${isToday ? ' today' : ''}`}
+                  style={
+                    dateStyle && {
+                      color: dateStyle.textColor,
+                      backgroundColor: dateStyle.backgroundColor,
+                    }
                   }
-
-                  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,
+                  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>

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

@@ -9,7 +9,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/datetime/test/color', config);
 
-      const datetime = page.locator('ion-datetime');
+      const datetime = page.locator('#colorDatetime');
 
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
 
@@ -18,5 +18,12 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-color-dark`));
     });
+    test('should be able to customize datetime using css parts', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/color', config);
+
+      const datetime = page.locator('#customDatetime');
+
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-css-parts`));
+    });
   });
 });