feat(datetime): add wheel part to ion-picker-column (#30934)

core/api.txt

@@ -569,6 +569,7 @@ ion-datetime,part,calendar-day today
 ion-datetime,part,month-year-button
 ion-datetime,part,time-button
 ion-datetime,part,time-button active
+ion-datetime,part,wheel
 ion-datetime,part,wheel-item
 ion-datetime,part,wheel-item active
 

core/src/components/datetime/datetime.tsx

@@ -79,6 +79,7 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
  * @slot buttons - The buttons in the datetime.
  * @slot time-label - The label for the time selector in the datetime.
  *
+ * @part wheel - The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
  * @part wheel-item - The individual items when using a wheel style layout, or in the
  * month/year picker when using a grid style layout.
  * @part wheel-item active - The currently selected wheel-item.
@@ -1724,6 +1725,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a date"
         class="date-column"
         color={this.color}
@@ -1844,6 +1846,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a day"
         class="day-column"
         color={this.color}
@@ -1888,6 +1891,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a month"
         class="month-column"
         color={this.color}
@@ -1931,6 +1935,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a year"
         class="year-column"
         color={this.color}
@@ -2005,6 +2010,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select an hour"
         color={this.color}
         disabled={disabled}
@@ -2045,6 +2051,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a minute"
         color={this.color}
         disabled={disabled}
@@ -2088,6 +2095,7 @@ export class Datetime implements ComponentInterface {
 
     return (
       <ion-picker-column
+        part={WHEEL_PART}
         aria-label="Select a day period"
         style={isDayPeriodRTL ? { order: '-1' } : {}}
         color={this.color}
@@ -2716,5 +2724,6 @@ export class Datetime implements ComponentInterface {
 let datetimeIds = 0;
 const CANCEL_ROLE = 'datetime-cancel';
 const CONFIRM_ROLE = 'datetime-confirm';
+const WHEEL_PART = 'wheel';
 const WHEEL_ITEM_PART = 'wheel-item';
 const WHEEL_ITEM_ACTIVE_PART = `active`;

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

@@ -42,6 +42,140 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
     });
   });
+
+  test.describe(title('CSS shadow parts'), () => {
+    test('should be able to customize wheel part within the wheel style', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(wheel) {
+              background-color: red;
+            }
+          </style>
+          <ion-datetime
+            prefer-wheel="true"
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const pickerColumn = datetime.locator('ion-picker-column').first();
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(255, 0, 0)');
+    });
+
+    test('should be able to customize wheel part within the month/year picker', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(wheel) {
+              background-color: orange;
+            }
+          </style>
+          <ion-datetime
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const monthYearButton = datetime.locator('.calendar-month-year-toggle');
+
+      await monthYearButton.click();
+
+      const pickerColumn = datetime.locator('ion-picker-column').first();
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(255, 165, 0)');
+    });
+
+    test('should be able to customize wheel part within the time picker', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-picker-column {
+              background-color: green;
+            }
+          </style>
+          <ion-datetime
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const timeButton = datetime.locator('.time-body');
+
+      await timeButton.click();
+
+      const pickerColumn = page.locator('ion-picker-column').first();
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(0, 128, 0)');
+    });
+
+    test('should be able to customize wheel part when focused', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
+      });
+
+      await page.setContent(
+        `
+          <style>
+            ion-datetime::part(wheel):focus {
+              background-color: blue;
+            }
+          </style>
+          <ion-datetime
+            prefer-wheel="true"
+            value="2020-03-14T14:23:00.000Z"
+          ></ion-datetime>
+        `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+      const pickerColumn = datetime.locator('ion-picker-column').first();
+
+      await pickerColumn.click({ position: { x: 10, y: 10 } });
+
+      const backgroundColor = await pickerColumn.evaluate((el) => {
+        return window.getComputedStyle(el).backgroundColor;
+      });
+
+      expect(backgroundColor).toBe('rgb(0, 0, 255)');
+    });
+  });
 });
 
 /**

core/src/components/datetime/test/custom/index.html

@@ -74,6 +74,13 @@
         color: rgb(128, 30, 171);
       }
 
+      /* Targets the month/year picker and the wheel style datetime */
+      .custom-grid-wheel::part(wheel):focus,
+      /* Targets the time picker */
+      ion-picker-column:focus {
+        background-color: rgba(138, 238, 69, 0.37);
+      }
+
       /*
       * Custom Datetime Day Parts
       * -------------------------------------------