refactor(datetime): remove usage of ion-buttons and Phosphor icons

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

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;

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;
+}

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;
+}

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;
 }

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 {
             }}
           >
             <slot name="buttons">
-              <ion-buttons>
+              {showDefaultButtons && (
+                <ion-button
+                  id="cancel-button"
+                  fill="clear"
+                  color={this.color}
+                  onClick={() => this.cancel(true)}
+                  disabled={isButtonDisabled}
+                >
+                  {this.cancelText}
+                </ion-button>
+              )}
+              <div class="datetime-action-buttons-container">
+                {showClearButton && (
+                  <ion-button
+                    id="clear-button"
+                    fill="clear"
+                    color={this.color}
+                    onClick={() => clearButtonClick()}
+                    disabled={isButtonDisabled}
+                  >
+                    {this.clearText}
+                  </ion-button>
+                )}
                 {showDefaultButtons && (
                   <ion-button
-                    id="cancel-button"
+                    id="confirm-button"
+                    fill={confirmFill}
                     color={this.color}
-                    onClick={() => this.cancel(true)}
+                    onClick={() => this.confirm(true)}
                     disabled={isButtonDisabled}
                   >
-                    {this.cancelText}
+                    {this.doneText}
                   </ion-button>
                 )}
-                <div class="datetime-action-buttons-container">
-                  {showClearButton && (
-                    <ion-button
-                      id="clear-button"
-                      color={this.color}
-                      onClick={() => clearButtonClick()}
-                      disabled={isButtonDisabled}
-                    >
-                      {this.clearText}
-                    </ion-button>
-                  )}
-                  {showDefaultButtons && (
-                    <ion-button
-                      id="confirm-button"
-                      color={this.color}
-                      onClick={() => this.confirm(true)}
-                      disabled={isButtonDisabled}
-                      fill={confirmFill}
-                    >
-                      {this.doneText}
-                    </ion-button>
-                  )}
-                </div>
-              </ion-buttons>
+              </div>
             </slot>
           </div>
         </div>
@@ -2156,28 +2154,36 @@ export class Datetime implements ComponentInterface {
           </div>
 
           <div class="calendar-next-prev">
-            <ion-buttons>
-              <ion-button aria-label="Previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
-                <ion-icon
-                  dir={hostDir}
-                  aria-hidden="true"
-                  slot="icon-only"
-                  icon={datetimePreviousIcon}
-                  lazy={false}
-                  flipRtl
-                ></ion-icon>
-              </ion-button>
-              <ion-button aria-label="Next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
-                <ion-icon
-                  dir={hostDir}
-                  aria-hidden="true"
-                  slot="icon-only"
-                  icon={datetimeNextIcon}
-                  lazy={false}
-                  flipRtl
-                ></ion-icon>
-              </ion-button>
-            </ion-buttons>
+            <ion-button
+              aria-label="Previous month"
+              fill="clear"
+              disabled={prevMonthDisabled}
+              onClick={() => this.prevMonth()}
+            >
+              <ion-icon
+                dir={hostDir}
+                aria-hidden="true"
+                slot="icon-only"
+                icon={datetimePreviousIcon}
+                lazy={false}
+                flipRtl
+              ></ion-icon>
+            </ion-button>
+            <ion-button
+              aria-label="Next month"
+              fill="clear"
+              disabled={nextMonthDisabled}
+              onClick={() => this.nextMonth()}
+            >
+              <ion-icon
+                dir={hostDir}
+                aria-hidden="true"
+                slot="icon-only"
+                icon={datetimeNextIcon}
+                lazy={false}
+                flipRtl
+              ></ion-icon>
+            </ion-button>
           </div>
         </div>
         <div class="calendar-days-of-week" aria-hidden="true">
@@ -2621,45 +2627,19 @@ export class Datetime implements ComponentInterface {
   }
 
   /**
-   * Get the icon to use for the next icon.
-   * Otherwise, use the icon set in the config.
+   * Get the next month icon from the config.
    * If no icon is set in the config, use the default icon.
    */
   get datetimeNextIcon(): string {
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronForward,
-      ionic: caretRightRegular,
-      md: chevronForward,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
-    // Return the configured datetime next icon or the default icon
-    return config.get('datetimeNextIcon', defaultIcon);
+    return config.get('datetimeNextIcon', chevronForward);
   }
 
   /**
-   * Get the icon to use for the previous icon.
-   * Otherwise, use the icon set in the config.
+   * Get the previous month icon from the config.
    * If no icon is set in the config, use the default icon.
    */
   get datetimePreviousIcon(): string {
-    // Determine the theme and map to default icons
-    const theme = getIonTheme(this);
-    const defaultIcons = {
-      ios: chevronBack,
-      ionic: caretLeftRegular,
-      md: chevronBack,
-    };
-
-    // Get the default icon based on the theme, falling back to 'md' icon if necessary
-    const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-
-    // Return the configured datetime previous icon or the default icon
-    return config.get('datetimePreviousIcon', defaultIcon);
+    return config.get('datetimePreviousIcon', chevronBack);
   }
 
   /**

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -296,9 +296,9 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
       await page.setContent(
         `
         <ion-datetime value="2022-05-03">
-          <ion-buttons slot="buttons">
-            <ion-button id="custom-button" color="primary">Hello!</ion-button>
-          </ion-buttons>
+          <div slot="buttons">
+            <ion-button id="custom-button" fill="clear" color="primary">Hello!</ion-button>
+          </div>
         </ion-datetime>
       `,
         config