feat(datetime): add shadow parts and CSS variables for styling wheel pickers#27529
feat(datetime): add shadow parts and CSS variables for styling wheel pickers#27529averyjohnston merged 28 commits intofeature-7.1from
Conversation
|
|
| * | ||
| * @part picker-item - The individual items when using a wheel style layout, or in the | ||
| * month/year picker when using a grid style layout. | ||
| * @part picker-item active - The currently selected picker-item. |
There was a problem hiding this comment.
I couldn't just do @part active here since that part also applies to the time button and may include others down the road, so I went with this since it's how the usage code will look (e.g. ::part(picker-item active)).
I'm open to changing the active part name to picker-item-active instead. The W3C guidelines imply that state-based shadow parts should be non-specific (i.e. it should be part="picker-item active" and not part="picker-item picker-item-active") but doing it that way does lead to somewhat awkward documentation.
Same general idea goes for changing the time button part to time-button-active.
| /* | ||
| The second selectors that target ion-picker(-column)-internal | ||
| directly are for styling the time picker. This is currently | ||
| undocumented usage. | ||
| */ |
There was a problem hiding this comment.
I added a note to update this in the design doc for making the internal picker public: https://ionic-cloud.atlassian.net/browse/FW-4401
averyjohnston
requested review from
a team,
liamdebeasi and
sean-perkins
as code owners
...datetime.e2e.ts-snapshots/datetime-custom-time-button-active-md-ltr-Mobile-Firefox-linux.png
Show resolved
Hide resolved
|
|
||
| :host .picker-highlight { | ||
| background: var(--ion-color-step-150, #eeeeef); | ||
| background: var(--picker-highlight-background, var(--ion-color-step-150, #eeeeef)); |
There was a problem hiding this comment.
This could probably be set on the :host:
:host {
--picker-highlight-background: var(--ion-color-step-150, #eeeeef);
}That way you don't need to re-set the background property.
There was a problem hiding this comment.
Doing it that way causes the default iOS color to overwrite a custom color applied through ion-datetime. You can only apply it directly to ion-picker-internal when styling the time picker due to shadow nesting, so other things (wheel style datetimes and the month/year picker) don't get styled.
Or in other words, this no longer works:
ion-datetime {
--picker-highlight-background: pink;
}
core/src/components/picker-column-internal/picker-column-internal.tsx
Outdated
Show resolved
Hide resolved
core/src/components/picker-column-internal/picker-column-internal.tsx
Outdated
Show resolved
Hide resolved
...datetime.e2e.ts-snapshots/datetime-custom-time-button-active-ios-ltr-Mobile-Chrome-linux.png
Show resolved
Hide resolved
liamdebeasi
left a comment
liamdebeasi
left a comment
There was a problem hiding this comment.
Functionality works great!
core/api.txt
Outdated
| ion-datetime,css-prop,--picker-fade-background-rgb | ||
| ion-datetime,css-prop,--picker-highlight-background | ||
| ion-datetime,css-prop,--title-color | ||
| ion-datetime,part,picker-item | ||
| ion-datetime,part,picker-item active |
There was a problem hiding this comment.
Bikeshed: Can we use wheel terminology instead of picker to be consistent with the preferWheel property?
There was a problem hiding this comment.
Works for me 👍
4 participants
Issue number: resolves #25945
What is the current behavior?
Datetime wheel pickers cannot be styled.
What is the new behavior?
Adds styling APIs in accordance with the Wheel Pickers and Time Picker sections of this design doc.
Shadow parts added:
wheel-itemwheel-item activetime-buttontime-button activeCSS properties added:
--wheel-highlight-background--wheel-fade-background-rgbDoes this introduce a breaking change?
Other information
Dev build:
7.0.7-dev.11685554390.10c2ca9bDocs PR: ionic-team/ionic-docs#2982