diff --git a/core/api.txt b/core/api.txt index 745d82786af..995c372cdfd 100644 --- a/core/api.txt +++ b/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 diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 3411f28eb57..95f97d37cf0 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/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 ( { await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`)); }); }); + + test.describe(title('CSS shadow parts'), () => { + test('should be able to customize wheel part', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/30420', + }); + + await page.setContent( + ` + + + `, + 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 when focused', async ({ page }, testInfo) => { + testInfo.annotations.push({ + type: 'issue', + description: 'https://github.com/ionic-team/ionic-framework/issues/30420', + }); + + await page.setContent( + ` + + + `, + 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)'); + }); + }); }); /** diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html index 09895d9c591..c52d059f8ed 100644 --- a/core/src/components/datetime/test/custom/index.html +++ b/core/src/components/datetime/test/custom/index.html @@ -74,6 +74,11 @@ color: rgb(128, 30, 171); } + .custom-grid-wheel::part(wheel):focus, + ion-picker-column:focus { + background-color: rgba(138, 238, 69, 0.37); + } + /* * Custom Datetime Day Parts * -------------------------------------------