diff --git a/core/src/components/buttons/buttons.ionic.scss b/core/src/components/buttons/buttons.ionic.scss index 03fba858326..b0bf9bc3dea 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 a1c0b6a17e4..a7532c41420 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 57b4f19c4fc..245d65f4341 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 a431feec1ad..118c32077f7 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 b68cd73a47d..1e379736cd2 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 1a6db5489ef..3a033ac02e1 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 00000000000..ed2c210cab2 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 00000000000..5a1832015f7 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 00000000000..ca0dec112b6 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 00000000000..8cd4c9bfbbe 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 00000000000..7149526af67 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 00000000000..70ae7af1209 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 00000000000..9df341bae0b 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 00000000000..5e16f515af6 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 00000000000..65a651f4214 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 00000000000..d4e515983dc 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 00000000000..23e56f9d9e7 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 00000000000..d6105b2f7de 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 00000000000..a3050688cf1 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 00000000000..1ee503bd49a 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 00000000000..eb1857761d4 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 00000000000..dffeec6d426 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 00000000000..23b812edb9c 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 00000000000..9e7ac51b12a 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 00000000000..02f908ad07a 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 00000000000..a04a6f81f6a 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 00000000000..9e9b054409e 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 00000000000..86ebdb3ae2f 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 00000000000..65a2e31dd9a 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 00000000000..42b91757516 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