fix(datetime): remove ion-buttons to fix CSP violations

BREAKING.md

@@ -18,6 +18,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Button](#version-9x-button)
   - [Card](#version-9x-card)
   - [Chip](#version-9x-chip)
+  - [Datetime](#version-9x-datetime)
   - [Grid](#version-9x-grid)
 
 <h2 id="version-9x-components">Components</h2>
@@ -34,6 +35,10 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 
 - The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
 
+<h4 id="version-9x-datetime">Datetime</h4>
+
+- The `ion-buttons` component has been removed from the internal implementation of `ion-datetime` and is no longer required when passing custom buttons to the `slot="buttons"`. When providing custom buttons, use a `div` element instead of `ion-buttons`. While existing code using `ion-buttons` may continue to work visually, future updates to the `ion-buttons` component may cause any styles you rely on to break.
+
 <h4 id="version-9x-grid">Grid</h4>
 
 - The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
@@ -140,4 +145,4 @@ To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `
     </ion-col>
   </ion-row>
 </ion-grid>
-```
+```

core/src/components.d.ts

@@ -600,7 +600,7 @@ export namespace Components {
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except when inside of a buttons or datetime component, where the default fill is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**
@@ -6555,7 +6555,7 @@ declare namespace LocalJSX {
          */
         "expand"?: 'full' | 'block';
         /**
-          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+          * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"` for a transparent button with a border, or to `"solid"` for a button with a filled background. The default fill is `"solid"` except when inside of a buttons or datetime component, where the default fill is `"clear"`.
          */
         "fill"?: 'clear' | 'outline' | 'solid' | 'default';
         /**

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,24 @@
   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;
+}
+
+:host(.in-datetime.button-clear) {
+  --background-activated: transparent;
+  --background-focused: currentColor;
+  --background-hover: currentColor;
+}

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 = {};
@@ -78,7 +79,8 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   /**
    * Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
    * for a transparent button with a border, or to `"solid"` for a button with a filled background.
-   * The default fill is `"solid"` except inside of a toolbar, where the default is `"clear"`.
+   * The default fill is `"solid"` except when inside of a buttons or datetime component, where
+   * the default fill is `"clear"`.
    */
   @Prop({ reflect: true, mutable: true }) fill?: 'clear' | 'outline' | 'solid' | 'default';
 
@@ -216,7 +218,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 +240,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 +409,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 +435,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

@@ -149,7 +149,8 @@
   width: 100%;
 }
 
-:host .datetime-action-buttons ion-buttons,
+: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

@@ -251,15 +251,10 @@
   );
 }
 
-:host .datetime-buttons ion-buttons,
-.datetime-action-buttons .datetime-action-buttons-container {
+:host .datetime-buttons .datetime-action-buttons,
+.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-buttons ion-button {
-  @include globals.typography(globals.$ion-body-action-md);
-
-  min-height: globals.$ion-space-1200;
-}

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,14 +334,15 @@
   border-top: $datetime-ios-border-color;
 }
 
-:host .datetime-buttons ::slotted(ion-buttons),
-:host .datetime-buttons ion-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%;
 }

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

core/src/components/datetime/datetime.native.scss

@@ -81,6 +81,12 @@
 // Time / Header
 // -----------------------------------
 
+:host .calendar-next-prev {
+  display: flex;
+
+  align-items: start;
+}
+
 :host(.datetime-presentation-time) .datetime-time {
   @include globals.padding(0);
 }
@@ -144,6 +150,6 @@ ion-picker {
 // Calendar / Footer / Action Buttons
 // -----------------------------------
 
-:host .datetime-action-buttons ion-buttons {
+:host .datetime-action-buttons {
   justify-content: space-between;
 }