refactor(datetime): update ionic styles for footer buttons

Author: thetaPC

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,30 +153,15 @@
   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;
-}
-
-/**
- * The confirm and clear buttons are grouped in a
- * container so that they appear on the end opposite
- * of the cancel button.
- * We use display: flex so that the
- * wrapper only takes up as much
- * height as it needs.
- */
-.datetime-action-buttons .datetime-action-buttons-container {
-  display: flex;
-}
+// Calendar / Header / Action Buttons
+// -----------------------------------
 
 /**
  * Date/Year button should be on

core/src/components/datetime/datetime.ionic.scss

@@ -200,3 +200,16 @@
   background-color: globals.$ion-primitives-neutral-100;
   color: globals.$ion-primitives-neutral-1200;
 }
+
+// Calendar / Footer / Action Buttons
+// -----------------------------------
+
+:host .datetime-buttons ion-buttons {
+  display: block;
+}
+
+: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,24 @@ 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 {
+  display: flex;
+
+  justify-content: space-between;
+}
+
+/**
+ * The confirm and clear buttons are grouped in a
+ * container so that they appear on the end opposite
+ * of the cancel button.
+ * We use display: flex so that the
+ * wrapper only takes up as much
+ * height as it needs.
+ */
+.datetime-action-buttons .datetime-action-buttons-container {
+  display: flex;
+}

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
@@ -1557,6 +1558,7 @@ export class Datetime implements ComponentInterface {
                     color={this.color}
                     onClick={() => this.cancel(true)}
                     disabled={isButtonDisabled}
+                    expand={theme === 'ionic' ? 'full' : undefined}
                   >
                     {this.cancelText}
                   </ion-button>
@@ -1568,6 +1570,7 @@ export class Datetime implements ComponentInterface {
                       color={this.color}
                       onClick={() => clearButtonClick()}
                       disabled={isButtonDisabled}
+                      expand={theme === 'ionic' ? 'full' : undefined}
                     >
                       {this.clearText}
                     </ion-button>
@@ -1578,6 +1581,8 @@ export class Datetime implements ComponentInterface {
                       color={this.color}
                       onClick={() => this.confirm(true)}
                       disabled={isButtonDisabled}
+                      expand={theme === 'ionic' ? 'full' : undefined}
+                      fill={theme === 'ionic' ? 'solid' : undefined}
                     >
                       {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);