From 97d6fac1a3322e6c978392572e29766376cbbe44 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 5 Nov 2025 13:15:23 -0500 Subject: [PATCH 1/8] refactor(datetime): remove usage of ion-buttons and phosphor icons --- .../components/datetime/datetime.common.scss | 2 +- .../components/datetime/datetime.ionic.scss | 4 +- .../src/components/datetime/datetime.ios.scss | 49 ++++++- core/src/components/datetime/datetime.md.scss | 36 +++++ .../components/datetime/datetime.native.scss | 2 +- core/src/components/datetime/datetime.tsx | 136 +++++++----------- .../datetime/test/basic/datetime.e2e.ts | 4 +- 7 files changed, 138 insertions(+), 95 deletions(-) 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..9309d5bd51e 100644 --- a/core/src/components/datetime/datetime.ios.scss +++ b/core/src/components/datetime/datetime.ios.scss @@ -55,16 +55,41 @@ } :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 +322,7 @@ // Footer // ----------------------------------- + :host .datetime-buttons { @include padding( $datetime-ios-padding * 0.5, @@ -308,8 +334,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 +344,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..2990068cc3b 100644 --- a/core/src/components/datetime/datetime.native.scss +++ b/core/src/components/datetime/datetime.native.scss @@ -128,6 +128,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..68d736ad2d8 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,26 @@ export class Datetime implements ComponentInterface {
- - this.prevMonth()}> - - - this.nextMonth()}> - - - + this.prevMonth()}> + + + this.nextMonth()}> + +
- this.prevMonth()}> + this.prevMonth()} + > - this.nextMonth()}> + this.nextMonth()} + >