refactor(datetime): update ionic styles for footer buttons (#30014)

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;

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 {
+:host .datetime-action-buttons ion-buttons,
-  display: flex;
-
-  justify-content: space-between;
-}
-
 /**
  * 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

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

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

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}
                     </ion-button>

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('<ion-datetime value="2022-05-03" show-default-buttons="true"></ion-datetime>', config);