Merge remote-tracking branch 'origin/main' into sync-7-11-15-22

core/src/components/datetime/datetime.scss

@@ -343,6 +343,8 @@ ion-picker-column-internal {
   background: none;
   color: currentColor;
 
+  font-family: $font-family-base;
+
   cursor: pointer;
 
   appearance: none;

core/src/components/datetime/datetime.tsx

@@ -576,10 +576,13 @@ export class Datetime implements ComponentInterface {
    * defaultParts if no active date is selected.
    */
   private getActivePartsWithFallback = () => {
-    const { activePartsClone, defaultParts } = this;
+    const { defaultParts } = this;
+    return this.getActivePart() ?? defaultParts;
+  };
 
-    const firstPart = Array.isArray(activePartsClone) ? activePartsClone[0] : activePartsClone;
-    return firstPart ?? defaultParts;
+  private getActivePart = () => {
+    const { activePartsClone } = this;
+    return Array.isArray(activePartsClone) ? activePartsClone[0] : activePartsClone;
   };
 
   private closeParentOverlay = () => {
@@ -1047,7 +1050,7 @@ export class Datetime implements ComponentInterface {
       this.initializeListeners();
 
       /**
-       * TODO: Datetime needs a frame to ensure that it
+       * TODO FW-2793: Datetime needs a frame to ensure that it
        * can properly scroll contents into view. As a result
        * we hide the scrollable content until after that frame
        * so users do not see the content quickly shifting. The downside
@@ -1225,6 +1228,13 @@ export class Datetime implements ComponentInterface {
           ampm,
         };
       }
+    } else {
+      /**
+       * Reset the active parts if the value is not set.
+       * This will clear the selected calendar day when
+       * performing a clear action or using the reset() method.
+       */
+      this.activeParts = [];
     }
   };
 
@@ -1727,14 +1737,24 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const valueIsDefined = this.value !== null && this.value !== undefined;
+    /**
+     * If a user has not selected a date,
+     * then we should show all times. If the
+     * user has selected a date (even if it has
+     * not been confirmed yet), we should apply
+     * the max and min restrictions so that the
+     * time picker shows values that are
+     * appropriate for the selected date.
+     */
+    const activePart = this.getActivePart();
+    const userHasSelectedDate = activePart !== undefined;
 
     const { hoursData, minutesData, dayPeriodData } = getTimeColumnsData(
       this.locale,
       this.workingParts,
       this.hourCycle,
-      valueIsDefined ? this.minParts : undefined,
-      valueIsDefined ? this.maxParts : undefined,
+      userHasSelectedDate ? this.minParts : undefined,
+      userHasSelectedDate ? this.maxParts : undefined,
       this.parsedHourValues,
       this.parsedMinuteValues
     );
@@ -1864,6 +1884,9 @@ export class Datetime implements ComponentInterface {
     const prevMonthDisabled = isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
     const nextMonthDisabled = isNextMonthDisabled(this.workingParts, this.maxParts);
 
+    // don't use the inheritAttributes util because it removes dir from the host, and we still need that
+    const hostDir = this.el.getAttribute('dir') || undefined;
+
     return (
       <div class="calendar-header">
         <div class="calendar-action-buttons">
@@ -1883,10 +1906,24 @@ export class Datetime implements ComponentInterface {
           <div class="calendar-next-prev">
             <ion-buttons>
               <ion-button aria-label="previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
-                <ion-icon aria-hidden="true" slot="icon-only" icon={chevronBack} lazy={false} flipRtl></ion-icon>
+                <ion-icon
+                  dir={hostDir}
+                  aria-hidden="true"
+                  slot="icon-only"
+                  icon={chevronBack}
+                  lazy={false}
+                  flipRtl
+                ></ion-icon>
               </ion-button>
               <ion-button aria-label="next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
-                <ion-icon aria-hidden="true" slot="icon-only" icon={chevronForward} lazy={false} flipRtl></ion-icon>
+                <ion-icon
+                  dir={hostDir}
+                  aria-hidden="true"
+                  slot="icon-only"
+                  icon={chevronForward}
+                  lazy={false}
+                  flipRtl
+                ></ion-icon>
               </ion-button>
             </ion-buttons>
           </div>

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

@@ -309,6 +309,49 @@ test.describe('datetime: visibility', () => {
   });
 });
 
+test.describe('datetime: RTL set on component', () => {
+  test('should flip icons when RTL is set on component directly', async ({ page, skip }) => {
+    skip.rtl(); // we're setting RTL on the component instead
+    skip.mode('md');
+
+    await page.setContent(`
+      <ion-datetime dir="rtl"></ion-datetime>
+    `);
+
+    const nextPrevIcons = page.locator('ion-datetime .calendar-next-prev ion-icon');
+    await expect(nextPrevIcons.first()).toHaveClass(/flip-rtl/);
+    await expect(nextPrevIcons.last()).toHaveClass(/flip-rtl/);
+  });
+});
+
+test.describe('datetime: clear button', () => {
+  test('should clear the active calendar day', async ({ page, skip }, testInfo) => {
+    skip.rtl();
+    skip.mode('md');
+
+    testInfo.annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/26258',
+    });
+
+    await page.setContent(`
+      <ion-datetime value="2022-11-10" show-clear-button="true"></ion-datetime>
+    `);
+
+    await page.waitForSelector('.datetime-ready');
+
+    const selectedDay = page.locator('ion-datetime .calendar-day-active');
+
+    await expect(selectedDay).toHaveText('10');
+
+    await page.click('ion-datetime #clear-button');
+
+    await page.waitForChanges();
+
+    await expect(selectedDay).toHaveCount(0);
+  });
+});
+
 test.describe('datetime: ionChange', () => {
   test.beforeEach(({ skip }) => {
     skip.rtl();