refactor(button,datetime): check if a button is inside of a datetime to apply styles

Author: brandyscarney

core/src/components/button/button.ionic.scss

@@ -334,3 +334,12 @@
     @include globals.position(null, globals.$ion-space-200, globals.$ion-space-200, null);
   }
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  @include globals.typography(globals.$ion-body-action-md);
+
+  min-height: globals.$ion-space-1200;
+}

core/src/components/button/button.ios.scss

@@ -293,3 +293,20 @@
   background: var(--ion-toolbar-color, var(--color));
   color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  --padding-top: 3px;
+  --padding-bottom: 3px;
+  --padding-start: 5px;
+  --padding-end: 5px;
+
+  @include margin(0px, 2px, 0px, 2px);
+
+  min-height: 32px;
+
+  font-size: dynamic-font-clamp(1, 17px, 1.24);
+  font-weight: 400;
+}

core/src/components/button/button.md.scss

@@ -243,3 +243,18 @@
   background: var(--ion-toolbar-background, var(--color));
   color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
 }
+
+// Button in Datetime
+// --------------------------------------------------
+
+:host(.in-datetime) {
+  --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/button/button.tsx

@@ -31,9 +31,10 @@ import type { RouterDirection } from '../router/utils/interface';
   shadow: true,
 })
 export class Button implements ComponentInterface, AnchorInterface, ButtonInterface {
+  private inDatetime = false;
   private inItem = false;
   private inListHeader = false;
-  private inToolbar = false;
+  private inButtons = false;
   private formButtonEl: HTMLButtonElement | null = null;
   private formEl: HTMLFormElement | null = null;
   private inheritedAttributes: Attributes = {};
@@ -216,7 +217,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   }
 
   componentWillLoad() {
-    this.inToolbar = !!this.el.closest('ion-buttons');
+    // Check if element is inside a shadow root and get the host if so
+    const rootNode = this.el.getRootNode();
+    const shadowHost = rootNode instanceof ShadowRoot ? (rootNode as ShadowRoot).host : null;
+
+    this.inDatetime = !!this.el.closest('ion-datetime') || (shadowHost?.tagName === 'ION-DATETIME');
+    this.inButtons = !!this.el.closest('ion-buttons');
     this.inListHeader = !!this.el.closest('ion-list-header');
     this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
     this.inheritedAttributes = inheritAriaAttributes(this.el);
@@ -233,9 +239,11 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   private get rippleType() {
     const hasClearFill = this.fill === undefined || this.fill === 'clear';
 
-    // If the button is in a toolbar, has a clear fill (which is the default)
-    // and only has an icon we use the unbounded "circular" ripple effect
-    if (hasClearFill && this.hasIconOnly && this.inToolbar) {
+    // Use the unbounded "circular" ripple effect if it:
+    // - Has a clear fill (the default)
+    // - Only has an icon and
+    // - Is inside of buttons (used in a toolbar) or a datetime
+    if (hasClearFill && this.hasIconOnly && (this.inButtons || this.inDatetime)) {
       return 'unbounded';
     }
 
@@ -400,7 +408,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           };
     let fill = this.fill;
     if (fill === undefined) {
-      fill = this.inToolbar || this.inListHeader ? 'clear' : 'solid';
+      fill = this.inDatetime || this.inButtons || this.inListHeader ? 'clear' : 'solid';
     }
 
     /**
@@ -426,9 +434,10 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
           [`${buttonType}-${shape}`]: true,
           [`${buttonType}-${fill}`]: true,
           [`${buttonType}-strong`]: strong,
+          'in-datetime': this.inDatetime,
           'in-toolbar': hostContext('ion-toolbar', this.el),
           'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
-          'in-buttons': hostContext('ion-buttons', this.el),
+          'in-buttons': this.inButtons,
           'button-has-icon-only': hasIconOnly,
           'button-has-badge': hasBadge,
           'button-disabled': disabled,

core/src/components/datetime/datetime.common.scss

@@ -150,6 +150,7 @@
 }
 
 :host .datetime-action-buttons,
+::slotted([slot="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

@@ -252,14 +252,9 @@
 }
 
 :host .datetime-buttons .datetime-action-buttons,
-.datetime-action-buttons .datetime-action-buttons-container {
+.datetime-action-buttons .datetime-action-buttons-container,
+::slotted([slot="buttons"]), {
   flex-flow: column;
   align-items: stretch;
   gap: globals.$ion-space-200;
 }
-
-: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,12 +54,6 @@
   @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-button {
   color: current-color(base);
@@ -340,25 +334,15 @@
   border-top: $datetime-ios-border-color;
 }
 
-:host .datetime-buttons {
+:host .datetime-buttons,
+::slotted([slot="buttons"]) {
   display: flex;
 
   align-items: center;
   justify-content: space-between;
 }
 
-:host .datetime-action-buttons {
+:host .datetime-action-buttons,
+::slotted([slot="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

@@ -198,16 +198,3 @@
 
   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.tsx

@@ -1557,7 +1557,7 @@ export class Datetime implements ComponentInterface {
      * is disabled or readonly.
      */
     const isButtonDisabled = disabled || readonly;
-    const confirmFill = theme === 'ionic' ? 'solid' : 'clear';
+    const confirmFill = theme === 'ionic' ? 'solid' : undefined;
     const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
     if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
       return;
@@ -1588,7 +1588,6 @@ export class Datetime implements ComponentInterface {
               {showDefaultButtons && (
                 <ion-button
                   id="cancel-button"
-                  fill="clear"
                   color={this.color}
                   onClick={() => this.cancel(true)}
                   disabled={isButtonDisabled}
@@ -1600,7 +1599,6 @@ export class Datetime implements ComponentInterface {
                 {showClearButton && (
                   <ion-button
                     id="clear-button"
-                    fill="clear"
                     color={this.color}
                     onClick={() => clearButtonClick()}
                     disabled={isButtonDisabled}
@@ -2196,7 +2194,6 @@ export class Datetime implements ComponentInterface {
           <div class="calendar-next-prev">
             <ion-button
               aria-label="Previous month"
-              fill="clear"
               disabled={prevMonthDisabled}
               onClick={() => this.prevMonth()}
             >
@@ -2211,7 +2208,6 @@ export class Datetime implements ComponentInterface {
             </ion-button>
             <ion-button
               aria-label="Next month"
-              fill="clear"
               disabled={nextMonthDisabled}
               onClick={() => this.nextMonth()}
             >