feat: add today, toyear parts, and exportparts for calendar and yearGrid

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>

src/__demo__/demo-app.ts

@@ -39,6 +39,11 @@ export class DemoApp extends RootElement {
     app-date-picker {
       border: 1px solid #000;
     }
+    /* app-date-picker::part(today),
+    app-date-picker::part(today)::before,
+    app-date-picker::part(toyear)::before {
+      color: red;
+    } */
 
     @media (prefers-color-scheme: dark) {
       app-date-picker {

src/__tests__/date-picker/app-date-picker.test.ts

@@ -90,11 +90,25 @@ describe(appDatePickerName, () => {
             expect(element).have.class(`start-view--${testCalendarView || 'calendar'}`);
           }
         });
+
         expectedHiddenElements.forEach((n) => {
           const element = el.query(elementSelectors[n]);
 
           expect(element).not.exist;
         });
+
+        if (testCalendarView === 'yearGrid') {
+          const yearGrid = el.query<AppYearGrid>(elementSelectors.yearGrid);
+
+          expect(yearGrid).exist.attr('exportparts', 'year-grid,year,toyear');
+        } else {
+          const calendar = el.query<AppMonthCalendar>(elementSelectors.calendar);
+
+          expect(calendar).exist.attr(
+            'exportparts',
+            'table,caption,weekdays,weekday,weekday-value,week-number,calendar-day,today,calendar'
+          );
+        }
       }
     );
   });

src/__tests__/month-calendar/app-month-calendar.test.ts

@@ -383,7 +383,7 @@ describe(appMonthCalendarName, () => {
     );
   });
 
-  it('renders correct title for selected today', async () => {
+  it('renders correct attributes for selected today', async () => {
     const el = await fixture<AppMonthCalendar>(
       html`<app-month-calendar .data=${data}></app-month-calendar>`
     );
@@ -397,6 +397,8 @@ describe(appMonthCalendarName, () => {
 
     expect(selectedDate).attr('title', labelSelectedDate);
     expect(todayDate).attr('title', labelSelectedDate);
+
+    expect(todayDate?.part.contains('today')).true;
   });
 
   type CaseWeekdayTitles = [

src/__tests__/year-grid/app-year-grid.test.ts

@@ -187,7 +187,7 @@ describe(appYearGridName, () => {
     ]);
   });
 
-  it('renders correct title for selected today year', async () => {
+  it('renders correct attributes for selected today year', async () => {
     const todayDate = toResolvedDate();
     const max = new Date(new Date(todayDate).setUTCFullYear(todayDate.getUTCFullYear() + 2));
     const min = new Date(new Date(todayDate).setUTCFullYear(todayDate.getUTCFullYear() - 2));
@@ -209,6 +209,8 @@ describe(appYearGridName, () => {
 
     expect(selectedYear).attr('title', labelSelectedYear);
     expect(todayYear).attr('title', labelSelectedYear);
+
+    expect(todayYear?.part.contains('toyear')).true;
   });
 
   type CaseSelectedYearLabelAndTodayYearLabel = [

src/date-picker/date-picker.ts

@@ -419,6 +419,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
       }}
       @date-updated=${this.#updateSelectedDate}
       class=calendar
+      exportparts=table,caption,weekdays,weekday,weekday-value,week-number,calendar-day,today,calendar
     ></app-month-calendar>
     `;
   };
@@ -463,6 +464,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
         todayYearLabel,
       }}
       @year-updated=${this.#updateYear}
+      exportparts=year-grid,year,toyear
     ></app-year-grid>
     `;
   };

src/month-calendar/month-calendar.ts

@@ -201,6 +201,7 @@ export class MonthCalendar extends RootElement implements MonthCalendarPropertie
                   fullDate,
                   tabIndex: shouldTab ? 0 : -1,
                   title,
+                  part: `calendar-day${isToday ? ' today' : ''}`,
                 } as MonthCalendarRenderCalendarDayInit);
               })
             }</tr>`;
@@ -220,6 +221,7 @@ export class MonthCalendar extends RootElement implements MonthCalendarPropertie
     className,
     day,
     fullDate,
+    part,
     tabIndex,
     title,
   }: MonthCalendarRenderCalendarDayInit): TemplateResult {
@@ -231,7 +233,7 @@ export class MonthCalendar extends RootElement implements MonthCalendarPropertie
       aria-selected=${ariaSelected as 'true' | 'false'}
       class="calendar-day ${className}"
       data-day=${day}
-      part=calendar-day
+      part=${part}
       role=gridcell
       tabindex=${tabIndex}
       title=${ifDefined(title)}

src/month-calendar/typings.ts

@@ -22,9 +22,10 @@ export interface MonthCalendarProperties {
   data?: MonthCalendarData;
 }
 
-export interface MonthCalendarRenderCalendarDayInit extends HTMLElement {
+export interface MonthCalendarRenderCalendarDayInit extends Omit<HTMLElement, 'part'> {
   day: string;
   fullDate: Date;
+  part: string;
 }
 
 type PickDatePickerProperties = Pick<

src/year-grid/typings.ts

@@ -23,8 +23,9 @@ export interface YearGridProperties {
   data?: YearGridData;
 }
 
-export interface YearGridRenderButtonInit extends PickYearGridData {
+export interface YearGridRenderButtonInit extends Omit<HTMLElement, 'part'>, PickYearGridData {
   focusingYear: number;
   label: string;
+  part: string;
   year: number;
 }

src/year-grid/year-grid.ts

@@ -1,7 +1,6 @@
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { property, queryAsync, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { labelSelectedYear, labelTodayYear, MAX_DATE, navigationKeySetGrid } from '../constants.js';
@@ -94,44 +93,50 @@ export class YearGrid extends RootElement implements YearGridProperties {
       class="year-grid"
       part=year-grid
     >${
-      yearList.map((year) => this.$renderButton({
-        date,
-        focusingYear,
-        label: yearFormat(new Date(`${year}-01-01`)),
-        selectedYearLabel,
-        todayYearLabel,
-        year,
-      }))
+      yearList.map((year) => {
+        const isSelected = year === date.getUTCFullYear();
+        const isToday = this.#todayYear === year;
+
+        const title = isSelected ?
+          selectedYearLabel :
+          isToday
+            ? todayYearLabel
+            : undefined;
+
+        return this.$renderButton({
+          ariaLabel: yearFormat(new Date(`${year}-01-01`)),
+          ariaSelected: isSelected ? 'true' : 'false',
+          className: isToday ? ' year--today' : '',
+          date,
+          part: `year${isToday ? ' toyear' : ''}`,
+          tabIndex: year === focusingYear ? 0 : -1,
+          title,
+          todayYearLabel,
+          year,
+        } as YearGridRenderButtonInit);
+      })
     }</div>
     `;
   }
 
   protected $renderButton({
-    date,
-    focusingYear,
-    label,
-    selectedYearLabel,
-    todayYearLabel,
+    ariaLabel,
+    ariaSelected,
+    className,
+    part,
+    tabIndex,
+    title,
     year,
   }: YearGridRenderButtonInit): TemplateResult {
-    const isSelected = year === date.getUTCFullYear();
-    const isToday = this.#todayYear === year;
-
-    const title = isSelected ?
-      selectedYearLabel :
-      isToday
-        ? todayYearLabel
-        : undefined;
-
     return html`
     <button
       .year=${year}
-      aria-label=${label}
-      aria-selected=${isSelected ? 'true' : 'false'}
-      class="year-grid-button ${classMap({ 'year--today': isToday })}"
+      aria-label=${ariaLabel as string}
+      aria-selected=${ariaSelected as 'true' | 'false'}
+      class="year-grid-button${className}"
       data-year=${year}
-      part=year
-      tabindex=${year === focusingYear ? '0' : '-1'}
+      part=${part}
+      tabindex=${tabIndex}
       title=${ifDefined(title)}
     ></button>
     `;