Skip to content

Commit 0cf4c03

Browse files
thetaPCthetaPC
authored
feat(datetime): add wheel part to ion-picker-column (#30934)
1 parent d74b11b commit 0cf4c03

File tree

4 files changed

+151
-0
lines changed

4 files changed

+151
-0
lines changed

‎core/api.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,7 @@ ion-datetime,part,calendar-day today
569569
ion-datetime,part,month-year-button
570570
ion-datetime,part,time-button
571571
ion-datetime,part,time-button active
572+
ion-datetime,part,wheel
572573
ion-datetime,part,wheel-item
573574
ion-datetime,part,wheel-item active
574575

‎core/src/components/datetime/datetime.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
7979
* @slot buttons - The buttons in the datetime.
8080
* @slot time-label - The label for the time selector in the datetime.
8181
*
82+
* @part wheel - The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
8283
* @part wheel-item - The individual items when using a wheel style layout, or in the
8384
* month/year picker when using a grid style layout.
8485
* @part wheel-item active - The currently selected wheel-item.
@@ -1724,6 +1725,7 @@ export class Datetime implements ComponentInterface {
17241725

17251726
return (
17261727
<ion-picker-column
1728+
part={WHEEL_PART}
17271729
aria-label="Select a date"
17281730
class="date-column"
17291731
color={this.color}
@@ -1844,6 +1846,7 @@ export class Datetime implements ComponentInterface {
18441846

18451847
return (
18461848
<ion-picker-column
1849+
part={WHEEL_PART}
18471850
aria-label="Select a day"
18481851
class="day-column"
18491852
color={this.color}
@@ -1888,6 +1891,7 @@ export class Datetime implements ComponentInterface {
18881891

18891892
return (
18901893
<ion-picker-column
1894+
part={WHEEL_PART}
18911895
aria-label="Select a month"
18921896
class="month-column"
18931897
color={this.color}
@@ -1931,6 +1935,7 @@ export class Datetime implements ComponentInterface {
19311935

19321936
return (
19331937
<ion-picker-column
1938+
part={WHEEL_PART}
19341939
aria-label="Select a year"
19351940
class="year-column"
19361941
color={this.color}
@@ -2005,6 +2010,7 @@ export class Datetime implements ComponentInterface {
20052010

20062011
return (
20072012
<ion-picker-column
2013+
part={WHEEL_PART}
20082014
aria-label="Select an hour"
20092015
color={this.color}
20102016
disabled={disabled}
@@ -2045,6 +2051,7 @@ export class Datetime implements ComponentInterface {
20452051

20462052
return (
20472053
<ion-picker-column
2054+
part={WHEEL_PART}
20482055
aria-label="Select a minute"
20492056
color={this.color}
20502057
disabled={disabled}
@@ -2088,6 +2095,7 @@ export class Datetime implements ComponentInterface {
20882095

20892096
return (
20902097
<ion-picker-column
2098+
part={WHEEL_PART}
20912099
aria-label="Select a day period"
20922100
style={isDayPeriodRTL ? { order: '-1' } : {}}
20932101
color={this.color}
@@ -2716,5 +2724,6 @@ export class Datetime implements ComponentInterface {
27162724
let datetimeIds = 0;
27172725
const CANCEL_ROLE = 'datetime-cancel';
27182726
const CONFIRM_ROLE = 'datetime-confirm';
2727+
const WHEEL_PART = 'wheel';
27192728
const WHEEL_ITEM_PART = 'wheel-item';
27202729
const WHEEL_ITEM_ACTIVE_PART = `active`;

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,140 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
4242
await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
4343
});
4444
});
45+
46+
test.describe(title('CSS shadow parts'), () => {
47+
test('should be able to customize wheel part within the wheel style', async ({ page }, testInfo) => {
48+
testInfo.annotations.push({
49+
type: 'issue',
50+
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
51+
});
52+
53+
await page.setContent(
54+
`
55+
<style>
56+
ion-datetime::part(wheel) {
57+
background-color: red;
58+
}
59+
</style>
60+
<ion-datetime
61+
prefer-wheel="true"
62+
value="2020-03-14T14:23:00.000Z"
63+
></ion-datetime>
64+
`,
65+
config
66+
);
67+
68+
const datetime = page.locator('ion-datetime');
69+
const pickerColumn = datetime.locator('ion-picker-column').first();
70+
71+
const backgroundColor = await pickerColumn.evaluate((el) => {
72+
return window.getComputedStyle(el).backgroundColor;
73+
});
74+
75+
expect(backgroundColor).toBe('rgb(255, 0, 0)');
76+
});
77+
78+
test('should be able to customize wheel part within the month/year picker', async ({ page }, testInfo) => {
79+
testInfo.annotations.push({
80+
type: 'issue',
81+
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
82+
});
83+
84+
await page.setContent(
85+
`
86+
<style>
87+
ion-datetime::part(wheel) {
88+
background-color: orange;
89+
}
90+
</style>
91+
<ion-datetime
92+
value="2020-03-14T14:23:00.000Z"
93+
></ion-datetime>
94+
`,
95+
config
96+
);
97+
98+
const datetime = page.locator('ion-datetime');
99+
const monthYearButton = datetime.locator('.calendar-month-year-toggle');
100+
101+
await monthYearButton.click();
102+
103+
const pickerColumn = datetime.locator('ion-picker-column').first();
104+
105+
const backgroundColor = await pickerColumn.evaluate((el) => {
106+
return window.getComputedStyle(el).backgroundColor;
107+
});
108+
109+
expect(backgroundColor).toBe('rgb(255, 165, 0)');
110+
});
111+
112+
test('should be able to customize wheel part within the time picker', async ({ page }, testInfo) => {
113+
testInfo.annotations.push({
114+
type: 'issue',
115+
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
116+
});
117+
118+
await page.setContent(
119+
`
120+
<style>
121+
ion-picker-column {
122+
background-color: green;
123+
}
124+
</style>
125+
<ion-datetime
126+
value="2020-03-14T14:23:00.000Z"
127+
></ion-datetime>
128+
`,
129+
config
130+
);
131+
132+
const datetime = page.locator('ion-datetime');
133+
const timeButton = datetime.locator('.time-body');
134+
135+
await timeButton.click();
136+
137+
const pickerColumn = page.locator('ion-picker-column').first();
138+
139+
const backgroundColor = await pickerColumn.evaluate((el) => {
140+
return window.getComputedStyle(el).backgroundColor;
141+
});
142+
143+
expect(backgroundColor).toBe('rgb(0, 128, 0)');
144+
});
145+
146+
test('should be able to customize wheel part when focused', async ({ page }, testInfo) => {
147+
testInfo.annotations.push({
148+
type: 'issue',
149+
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
150+
});
151+
152+
await page.setContent(
153+
`
154+
<style>
155+
ion-datetime::part(wheel):focus {
156+
background-color: blue;
157+
}
158+
</style>
159+
<ion-datetime
160+
prefer-wheel="true"
161+
value="2020-03-14T14:23:00.000Z"
162+
></ion-datetime>
163+
`,
164+
config
165+
);
166+
167+
const datetime = page.locator('ion-datetime');
168+
const pickerColumn = datetime.locator('ion-picker-column').first();
169+
170+
await pickerColumn.click({ position: { x: 10, y: 10 } });
171+
172+
const backgroundColor = await pickerColumn.evaluate((el) => {
173+
return window.getComputedStyle(el).backgroundColor;
174+
});
175+
176+
expect(backgroundColor).toBe('rgb(0, 0, 255)');
177+
});
178+
});
45179
});
46180

47181
/**

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,13 @@
7474
color: rgb(128, 30, 171);
7575
}
7676

77+
/* Targets the month/year picker and the wheel style datetime */
78+
.custom-grid-wheel::part(wheel):focus,
79+
/* Targets the time picker */
80+
ion-picker-column:focus {
81+
background-color: rgba(138, 238, 69, 0.37);
82+
}
83+
7784
/*
7885
* Custom Datetime Day Parts
7986
* -------------------------------------------

0 commit comments

Comments
 (0)