diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png index 7f2b1ff5228..2b2c2eb1fd2 100644 Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png index 4635391f97b..5f522a3f84e 100644 Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/datetime/datetime.common.scss b/core/src/components/datetime/datetime.common.scss index a7532c41420..5df3e364172 100644 --- a/core/src/components/datetime/datetime.common.scss +++ b/core/src/components/datetime/datetime.common.scss @@ -160,7 +160,7 @@ width: 100%; } -:host .datetime-action-buttons ion-buttons, +:host .datetime-action-buttons, /** * The confirm and clear buttons are grouped in a * container so that they appear on the end opposite diff --git a/core/src/components/datetime/datetime.ionic.scss b/core/src/components/datetime/datetime.ionic.scss index 82f447f1a54..3691740f2ed 100644 --- a/core/src/components/datetime/datetime.ionic.scss +++ b/core/src/components/datetime/datetime.ionic.scss @@ -227,14 +227,14 @@ ); } -:host .datetime-buttons ion-buttons, +:host .datetime-buttons .datetime-action-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 { +:host .datetime-buttons ion-button { @include globals.typography(globals.$ion-body-action-md); min-height: globals.$ion-space-1200; diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss index e49bdc3241b..165d50e3eaf 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/core/src/components/datetime/datetime.ios.scss @@ -54,17 +54,48 @@ @include margin(10px, 8px, 10px, 0); } +// These styles are copied from buttons.ios.scss +:host ion-button { + font-size: dynamic-font-clamp(1, 17px, 1.24); + font-weight: 400; +} + :host .calendar-action-buttons .calendar-month-year-toggle ion-icon, -:host .calendar-action-buttons ion-buttons ion-button { +:host .calendar-action-buttons ion-button { color: current-color(base); } -:host .calendar-action-buttons ion-buttons { +:host .calendar-action-buttons ion-button { + @include margin(0, 0, 0, 0); +} + +:host .calendar-next-prev { @include padding($datetime-ios-padding * 0.5, 0, 0, 0); } -:host .calendar-action-buttons ion-buttons ion-button { - @include margin(0, 0, 0, 0); +// These styles are copied from buttons.ios.scss +.calendar-next-prev ion-button { + --padding-top: 0; + --padding-bottom: 0; + --padding-start: 5px; + --padding-end: 5px; + + @include margin-horizontal(2px, 2px); + + min-height: 32px; +} + +// These styles are copied from buttons.ios.scss +.calendar-next-prev ion-button ion-icon[slot="icon-only"] { + @include padding(0); + @include margin(0); + + // This value is calculated by dividing the font size the + // icon should be in px (28px) by the font size of its + // parent button (17px). e.g. 28 / 17 = 1.647 + font-size: 1.65em; + + line-height: 0.67; } // Calendar / Header / Days of Week @@ -297,6 +328,7 @@ // Footer // ----------------------------------- + :host .datetime-buttons { @include padding( $datetime-ios-padding * 0.5, @@ -308,8 +340,7 @@ border-top: $datetime-ios-border-color; } -:host .datetime-buttons ::slotted(ion-buttons), -:host .datetime-buttons ion-buttons { +:host .datetime-buttons { display: flex; align-items: center; @@ -319,3 +350,15 @@ :host .datetime-action-buttons { width: 100%; } + +// These styles are copied from buttons.ios.scss +:host .datetime-action-buttons ion-button { + --padding-top: 3px; + --padding-bottom: 3px; + --padding-start: 5px; + --padding-end: 5px; + + @include margin(0px, 2px, 0px, 2px); + + min-height: 32px; +} diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss index 6d00afa3d00..765a1803647 100644 --- a/core/src/components/datetime/datetime.md.scss +++ b/core/src/components/datetime/datetime.md.scss @@ -43,6 +43,28 @@ --color: #{$text-color-step-350}; } +// These styles are copied from buttons.md.scss +.calendar-next-prev ion-button { + --padding-top: 12px; + --padding-end: 12px; + --padding-bottom: 12px; + --padding-start: 12px; + --border-radius: 50%; + + @include margin(0); + + width: 3rem; + height: 3rem; +} + +// These styles are copied from buttons.md.scss +.calendar-next-prev ion-button ion-icon[slot="icon-only"] { + @include padding(0); + @include margin(0); + + font-size: 1.8em; +} + .calendar-month-year-toggle { @include padding(12px, 16px, 12px, #{$datetime-md-header-padding}); @@ -166,6 +188,7 @@ // Footer // ----------------------------------- + :host .datetime-buttons { @include padding(10px, 10px, 10px, 10px); @@ -175,3 +198,16 @@ justify-content: flex-end; } + +// These styles are copied from buttons.md.scss +:host .datetime-action-buttons ion-button { + --padding-top: 3px; + --padding-bottom: 3px; + --padding-start: 8px; + --padding-end: 8px; + --box-shadow: none; + + @include margin(0px, 2px, 0px, 2px); + + min-height: 32px; +} diff --git a/core/src/components/datetime/datetime.native.scss b/core/src/components/datetime/datetime.native.scss index eee452f1076..c4eaca86400 100644 --- a/core/src/components/datetime/datetime.native.scss +++ b/core/src/components/datetime/datetime.native.scss @@ -65,6 +65,12 @@ // Time / Header // ----------------------------------- +:host .calendar-next-prev { + display: flex; + + align-items: start; +} + :host(.datetime-presentation-time) .datetime-time { @include globals.padding(0); } @@ -128,6 +134,6 @@ ion-picker { // Calendar / Footer / Action Buttons // ----------------------------------- -:host .datetime-action-buttons ion-buttons { +:host .datetime-action-buttons { justify-content: space-between; } diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 3ecd2adfbfe..aaa95129ac8 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1,5 +1,3 @@ -import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg'; -import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg'; import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core'; import { startFocusVisible } from '@utils/focus-visible'; @@ -1519,7 +1517,7 @@ export class Datetime implements ComponentInterface { * is disabled or readonly. */ const isButtonDisabled = disabled || readonly; - const confirmFill = theme === 'ionic' ? 'solid' : undefined; + const confirmFill = theme === 'ionic' ? 'solid' : 'clear'; const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null; if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) { return; @@ -1547,41 +1545,41 @@ export class Datetime implements ComponentInterface { }} > - + {showDefaultButtons && ( + this.cancel(true)} + disabled={isButtonDisabled} + > + {this.cancelText} + + )} +
+ {showClearButton && ( + clearButtonClick()} + disabled={isButtonDisabled} + > + {this.clearText} + + )} {showDefaultButtons && ( this.cancel(true)} + onClick={() => this.confirm(true)} disabled={isButtonDisabled} > - {this.cancelText} + {this.doneText} )} -
- {showClearButton && ( - clearButtonClick()} - disabled={isButtonDisabled} - > - {this.clearText} - - )} - {showDefaultButtons && ( - this.confirm(true)} - disabled={isButtonDisabled} - fill={confirmFill} - > - {this.doneText} - - )} -
- +
@@ -2156,28 +2154,36 @@ export class Datetime implements ComponentInterface {
- - this.prevMonth()}> - - - this.nextMonth()}> - - - + this.prevMonth()} + > + + + this.nextMonth()} + > + +