Skip to content

feat(datetime, datetime-button, picker-column, picker-column-option): improve styling flexibility by removing default color prop #31261

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thetaPC wants to merge 3 commits into
base: major-9.0
Choose a base branch
from
+210 −24
Open

feat(datetime, datetime-button, picker-column, picker-column-option): improve styling flexibility by removing default color prop #31261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0b92301
feat(datetime): improve styling flexibility by removing default color…
thetaPC Jul 10, 2026
69e5875
fix(many): remove unnecessary interpolations
thetaPC Jul 10, 2026
d5a7aae
test(datetime): add color tests
thetaPC Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions core/api.txt
View file
Open in desktop

@brandyscarney brandyscarney Jul 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are there any breaking changes associated with this, like CSS that may start overriding where it previously wasn't?

Original file line number Diff line number Diff line change
Expand Up @@ -513,7 +513,7 @@ ion-content,part,scroll
ion-datetime,shadow
ion-datetime,prop,cancelText,string,'Cancel',false,false
ion-datetime,prop,clearText,string,'Clear',false,false
ion-datetime,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,false
ion-datetime,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,false
ion-datetime,prop,dayValues,number | number[] | string | undefined,undefined,false,false
ion-datetime,prop,disabled,boolean,false,false,false
ion-datetime,prop,doneText,string,'Done',false,false
Expand Down Expand Up @@ -582,7 +582,7 @@ ion-datetime,part,wheel-item
ion-datetime,part,wheel-item active

ion-datetime-button,shadow
ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
ion-datetime-button,prop,datetime,string | undefined,undefined,false,false
ion-datetime-button,prop,disabled,boolean,false,false,true
ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
Expand Down Expand Up @@ -1269,15 +1269,15 @@ ion-picker,css-prop,--highlight-border-radius,ios
ion-picker,css-prop,--highlight-border-radius,md

ion-picker-column,shadow
ion-picker-column,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
ion-picker-column,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
ion-picker-column,prop,disabled,boolean,false,false,false
ion-picker-column,prop,mode,"ios" | "md",undefined,false,false
ion-picker-column,prop,value,number | string | undefined,undefined,false,false
ion-picker-column,method,setFocus,setFocus() => Promise<void>
ion-picker-column,event,ionChange,PickerColumnChangeEventDetail,true

ion-picker-column-option,shadow
ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,'primary',false,true
ion-picker-column-option,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
ion-picker-column-option,prop,disabled,boolean,false,false,false
ion-picker-column-option,prop,value,any,undefined,false,false

Expand Down
8 changes: 0 additions & 8 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -928,7 +928,6 @@ export namespace Components {
"clearText": string;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
* @default 'primary'
*/
"color"?: Color;
/**
Expand Down Expand Up @@ -1080,7 +1079,6 @@ export namespace Components {
interface IonDatetimeButton {
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
* @default 'primary'
*/
"color"?: Color;
/**
Expand Down Expand Up @@ -2244,7 +2242,6 @@ export namespace Components {
interface IonPickerColumn {
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
* @default 'primary'
*/
"color"?: Color;
/**
Expand Down Expand Up @@ -2278,7 +2275,6 @@ export namespace Components {
interface IonPickerColumnOption {
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
* @default 'primary'
*/
"color"?: Color;
/**
Expand Down Expand Up @@ -6061,7 +6057,6 @@ declare namespace LocalJSX {
"clearText"?: string;
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
* @default 'primary'
*/
"color"?: Color;
/**
Expand Down Expand Up @@ -6227,7 +6222,6 @@ declare namespace LocalJSX {
interface IonDatetimeButton {
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
* @default 'primary'
*/
"color"?: Color;
/**
Expand Down Expand Up @@ -7353,7 +7347,6 @@ declare namespace LocalJSX {
interface IonPickerColumn {
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
* @default 'primary'
*/
"color"?: Color;
/**
Expand Down Expand Up @@ -7382,7 +7375,6 @@ declare namespace LocalJSX {
interface IonPickerColumnOption {
/**
* The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
* @default 'primary'
*/
"color"?: Color;
/**
Expand Down
5 changes: 5 additions & 0 deletions core/src/components/datetime-button/datetime-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@

:host(.time-active) #time-button,
:host(.date-active) #date-button {
color: ion-color(primary, base);
}

:host(.ion-color.time-active) #time-button,
:host(.ion-color.date-active) #date-button {
color: current-color(base);
}

Expand Down
2 changes: 1 addition & 1 deletion core/src/components/datetime-button/datetime-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export class DatetimeButton implements ComponentInterface {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information on colors, see [theming](/docs/theming/basics).
*/
@Prop({ reflect: true }) color?: Color = 'primary';
@Prop({ reflect: true }) color?: Color;

/**
* If `true`, the user cannot interact with the button.
Expand Down
27 changes: 25 additions & 2 deletions core/src/components/datetime/datetime.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@

:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
:host .calendar-action-buttons ion-buttons ion-button {
color: ion-color(primary, base);
}

:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,
:host(.ion-color) .calendar-action-buttons ion-buttons ion-button {
color: current-color(base);
}

Expand Down Expand Up @@ -235,16 +240,24 @@
}

.calendar-day.calendar-day-active {
background: current-color(base, 0.2);
background: ion-color(primary, base, 0.2);

font-size: dynamic-font-max(22px, 1.6);
}

:host(.ion-color) .calendar-day.calendar-day-active {
background: current-color(base, 0.2);
}

/**
* Day that today but not selected
* should have ion-color for text color.
*/
:host .calendar-day.calendar-day-today {
color: ion-color(primary, base);
}

:host(.ion-color) .calendar-day.calendar-day-today {
color: current-color(base);
}

Expand All @@ -255,17 +268,27 @@
*/
:host .calendar-day.calendar-day-active,
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
color: current-color(base);
color: ion-color(primary, base);

font-weight: 600;
}

:host(.ion-color) .calendar-day.calendar-day-active,
:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
color: current-color(base);
}

/**
* Day that is selected and is today
* should have base background color
* with contrast text.
*/
:host .calendar-day.calendar-day-today.calendar-day-active {
background: ion-color(primary, base);
color: ion-color(primary, contrast);
}

:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active {
background: current-color(base);
color: current-color(contrast);
}
Expand Down
28 changes: 27 additions & 1 deletion core/src/components/datetime/datetime.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@

:host {
--background: var(--ion-color-step-100, var(--ion-background-color-step-100, #ffffff));
--title-color: #{ion-color(primary, contrast)};
}

:host(.ion-color) {
--title-color: #{current-color(contrast)};
}

Expand All @@ -12,10 +16,14 @@
:host .datetime-header {
@include padding($datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding, $datetime-md-header-padding);

background: current-color(base);
background: ion-color(primary, base);
color: var(--title-color);
}

:host(.ion-color) .datetime-header {
background: current-color(base);
}

:host .datetime-header .datetime-title {
font-size: $datetime-md-title-font-size;

Expand Down Expand Up @@ -107,6 +115,12 @@
* should have ion-color for text color.
*/
:host .calendar-day.calendar-day-today {
border: 1px solid ion-color(primary, base);

color: ion-color(primary, base);
}

:host(.ion-color) .calendar-day.calendar-day-today {
border: 1px solid current-color(base);

color: current-color(base);
Expand All @@ -119,11 +133,23 @@
*/
:host .calendar-day.calendar-day-active,
:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
color: ion-color(primary, contrast);
}

:host(.ion-color) .calendar-day.calendar-day-active,
:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
color: current-color(contrast);
}

.calendar-day.calendar-day-active,
.calendar-day.calendar-day-active:focus {
border: 1px solid ion-color(primary, base);

background: ion-color(primary, base);
}

:host(.ion-color) .calendar-day.calendar-day-active,
:host(.ion-color) .calendar-day.calendar-day-active:focus {
border: 1px solid current-color(base);

background: current-color(base);
Expand Down
27 changes: 24 additions & 3 deletions core/src/components/datetime/datetime.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,13 @@
justify-content: space-between;
}


// Default text color for action buttons (cancel, clear, done).
// When datetime doesn't receive a color prop.
:host .datetime-action-buttons ion-button {
--color: #{ion-color(primary, base)};
}

/**
* The confirm and clear buttons are grouped in a
* container so that they appear on the end opposite
Expand Down Expand Up @@ -366,9 +373,15 @@


.calendar-day:not(.calendar-day-adjacent-day):focus {
background: current-color(base, 0.2);
background: ion-color(primary, base, 0.2);

box-shadow: 0px 0px 0px 4px ion-color(primary, base, 0.2);
}

:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
background: #{current-color(base, 0.2)};

box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
box-shadow: 0px 0px 0px 4px #{current-color(base, 0.2)};
Comment on lines +376 to +384

@brandyscarney brandyscarney Jul 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
background: ion-color(primary, base, 0.2);
box-shadow: 0px 0px 0px 4px ion-color(primary, base, 0.2);
}
:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
background: #{current-color(base, 0.2)};
box-shadow: 0px 0px 0px 4px current-color(base, 0.2);
box-shadow: 0px 0px 0px 4px #{current-color(base, 0.2)};
background: ion-color(primary, base, 0.2);
box-shadow: 0px 0px 0px 4px ion-color(primary, base, 0.2);
}
:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
background: current-color(base, 0.2);
box-shadow: 0px 0px 0px 4px current-color(base, 0.2);

Nit: you don't need to escape unless it's in a CSS variable

}

// Time / Header
Expand Down Expand Up @@ -415,6 +428,10 @@
}

:host .time-body-active {
color: ion-color(primary, base);
}

:host(.ion-color) .time-body-active {
color: current-color(base);
}

Expand All @@ -425,7 +442,11 @@
// Year Picker
// -----------------------------------
:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
color: #{current-color(base)};
color: ion-color(primary, base);
}

:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
color: current-color(base);
}

.calendar-month-year {
Expand Down
9 changes: 8 additions & 1 deletion core/src/components/datetime/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export class Datetime implements ComponentInterface {
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
* For more information on colors, see [theming](/docs/theming/basics).
*/
@Prop() color?: Color = 'primary';
@Prop() color?: Color;

/**
* The name of the control, which is submitted with the form data.
Expand Down Expand Up @@ -1813,6 +1813,7 @@ export class Datetime implements ComponentInterface {
>
{items.map((item) => (
<ion-picker-column-option
color={this.color}

@thetaPC thetaPC Jul 10, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The month/year picker was displaying selected values in the datetime's color (for example, red for color="danger"), but the time picker was ignoring this and showing selected values in primary color instead, creating an inconsistent experience on md. This was wrong because the datetime's color prop should control all picker text colors uniformly.

part={item.value === todayString ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
key={item.value}
disabled={item.disabled}
Expand Down Expand Up @@ -1931,6 +1932,7 @@ export class Datetime implements ComponentInterface {
>
{days.map((day) => (
<ion-picker-column-option
color={this.color}
part={day.value === pickerColumnValue ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
key={day.value}
disabled={day.disabled}
Expand Down Expand Up @@ -1979,6 +1981,7 @@ export class Datetime implements ComponentInterface {
>
{months.map((month) => (
<ion-picker-column-option
color={this.color}
part={month.value === workingParts.month ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
key={month.value}
disabled={month.disabled}
Expand Down Expand Up @@ -2026,6 +2029,7 @@ export class Datetime implements ComponentInterface {
>
{years.map((year) => (
<ion-picker-column-option
color={this.color}
part={year.value === workingParts.year ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
key={year.value}
disabled={year.disabled}
Expand Down Expand Up @@ -2101,6 +2105,7 @@ export class Datetime implements ComponentInterface {
>
{hoursData.map((hour) => (
<ion-picker-column-option
color={this.color}
part={hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
key={hour.value}
disabled={hour.disabled}
Expand Down Expand Up @@ -2142,6 +2147,7 @@ export class Datetime implements ComponentInterface {
>
{minutesData.map((minute) => (
<ion-picker-column-option
color={this.color}
part={minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART}
key={minute.value}
disabled={minute.disabled}
Expand Down Expand Up @@ -2190,6 +2196,7 @@ export class Datetime implements ComponentInterface {
>
{dayPeriodData.map((dayPeriod) => (
<ion-picker-column-option
color={this.color}
part={
dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART
}
Expand Down
Loading
Loading