diff --git a/core/src/components/buttons/buttons.ionic.scss b/core/src/components/buttons/buttons.ionic.scss index 03fba85832..b0bf9bc3de 100644 --- a/core/src/components/buttons/buttons.ionic.scss +++ b/core/src/components/buttons/buttons.ionic.scss @@ -13,7 +13,7 @@ // -------------------------------------------------- ::slotted(*) .button-clear { - --color: globals.$ion-primitives-neutral-1200; + --color: #{globals.$ion-primitives-neutral-1200}; --background: transparent; --background-activated: transparent; --background-focused: transparent; diff --git a/core/src/components/datetime/datetime.common.scss b/core/src/components/datetime/datetime.common.scss index a1c0b6a17e..a7532c4142 100644 --- a/core/src/components/datetime/datetime.common.scss +++ b/core/src/components/datetime/datetime.common.scss @@ -153,19 +153,14 @@ overflow: hidden; } -// Calendar / Header / Action Buttons +// Calendar / Footer / Action Buttons // ----------------------------------- :host .datetime-action-buttons.has-clear-button { width: 100%; } -:host .datetime-action-buttons ion-buttons { - display: flex; - - justify-content: space-between; -} - +:host .datetime-action-buttons ion-buttons, /** * The confirm and clear buttons are grouped in a * container so that they appear on the end opposite @@ -178,6 +173,9 @@ display: flex; } +// Calendar / Header / Action Buttons +// ----------------------------------- + /** * Date/Year button should be on * the opposite side of the component diff --git a/core/src/components/datetime/datetime.ionic.scss b/core/src/components/datetime/datetime.ionic.scss index 57b4f19c4f..245d65f434 100644 --- a/core/src/components/datetime/datetime.ionic.scss +++ b/core/src/components/datetime/datetime.ionic.scss @@ -200,3 +200,19 @@ background-color: globals.$ion-primitives-neutral-100; color: globals.$ion-primitives-neutral-1200; } + +// Calendar / Footer / Action Buttons +// ----------------------------------- + +:host .datetime-buttons ion-buttons, +.datetime-action-buttons .datetime-action-buttons-container { + flex-flow: column; + align-items: stretch; + gap: globals.$ion-space-200; +} + +:host .datetime-buttons ion-buttons ion-button { + @include globals.typography(globals.$ion-body-action-lg); + + min-height: globals.$ion-space-1200; +} diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss index a431feec1a..118c32077f 100644 --- a/core/src/components/datetime/datetime.native.scss +++ b/core/src/components/datetime/datetime.native.scss @@ -118,3 +118,10 @@ ion-picker { --highlight-border-radius: var(--wheel-highlight-border-radius); --fade-background-rgb: var(--wheel-fade-background-rgb); } + +// Calendar / Footer / Action Buttons +// ----------------------------------- + +:host .datetime-action-buttons ion-buttons { + justify-content: space-between; +} diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index b68cd73a47..1e379736cd 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1516,6 +1516,7 @@ export class Datetime implements ComponentInterface { */ private renderFooter() { + const theme = getIonTheme(this); const { disabled, readonly, showDefaultButtons, showClearButton } = this; /** * The cancel, clear, and confirm buttons @@ -1523,6 +1524,7 @@ export class Datetime implements ComponentInterface { * is disabled or readonly. */ const isButtonDisabled = disabled || readonly; + const confirmFill = theme === 'ionic' ? 'solid' : undefined; const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null; if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) { return; @@ -1578,6 +1580,7 @@ export class Datetime implements ComponentInterface { color={this.color} onClick={() => this.confirm(true)} disabled={isButtonDisabled} + fill={confirmFill} > {this.doneText} diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts index 1a6db5489e..3a033ac02e 100644 --- a/core/src/components/datetime/test/basic/datetime.e2e.ts +++ b/core/src/components/datetime/test/basic/datetime.e2e.ts @@ -251,7 +251,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => }); }); -configs().forEach(({ title, screenshot, config }) => { +configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => { test.describe(title('datetime: footer'), () => { test('should render default buttons', async ({ page }) => { await page.setContent('', config); diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ed2c210cab Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5a1832015f Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ca0dec112b Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8cd4c9bfbb Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..7149526af6 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..70ae7af120 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9df341bae0 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5e16f515af Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..65a651f421 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d4e515983d Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..23e56f9d9e Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d6105b2f7d Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a3050688cf Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..1ee503bd49 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..eb1857761d Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..dffeec6d42 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..23b812edb9 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9e7ac51b12 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..02f908ad07 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..a04a6f81f6 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9e9b054409 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..86ebdb3ae2 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..65a2e31dd9 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..42b9175751 Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ