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

core/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.6](https://github.com/ionic-team/ionic/compare/v6.3.5...v6.3.6) (2022-11-10)
+
+
+### Bug Fixes
+
+* **datetime:** flip chevron icons when RTL is set on component directly ([#26195](https://github.com/ionic-team/ionic/issues/26195)) ([dd98677](https://github.com/ionic-team/ionic/commit/dd9867708b66543f5cbe978e0fa6ef34b37f9fc3))
+
+
+
+
+
+## [6.3.5](https://github.com/ionic-team/ionic/compare/v6.3.4...v6.3.5) (2022-11-09)
+
+
+### Bug Fixes
+
+* **android:** account for chrome 108 resize ([#26244](https://github.com/ionic-team/ionic/issues/26244)) ([1a0b9ed](https://github.com/ionic-team/ionic/commit/1a0b9ed3bacffa9f602637c204f52cb3face5a3e))
+* **datetime:** min/max correctly display available day periods ([#26241](https://github.com/ionic-team/ionic/issues/26241)) ([526e411](https://github.com/ionic-team/ionic/commit/526e4113d82d244e2574b24d72fda632bb2aa143)), closes [#26216](https://github.com/ionic-team/ionic/issues/26216)
+* **overlays:** presenting an overlay does not create nested elements ([#26154](https://github.com/ionic-team/ionic/issues/26154)) ([bb00595](https://github.com/ionic-team/ionic/commit/bb005956eaff7401cfe1d6befcbf512424ddd283)), closes [#26117](https://github.com/ionic-team/ionic/issues/26117)
+
+
+
+
+
 ## [6.3.4](https://github.com/ionic-team/ionic/compare/v6.3.3...v6.3.4) (2022-11-02)
 
 

core/package-lock.json

@@ -1,16 +1,16 @@
 {
   "name": "@ionic/core",
-  "version": "6.3.4",
+  "version": "6.3.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.3.4",
+      "version": "6.3.6",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.18.0",
-        "ionicons": "^6.0.3",
+        "ionicons": "^6.0.4",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
@@ -8508,23 +8508,11 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
-      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.4.tgz",
+      "integrity": "sha512-uDNOkBo0OVYV+kIhb51g9mb7r3Z0b+78GPZQBsjXuaetNmrB/mNTqN/uFtO+vxL/rQySKjzk8qeKJI5NWL9Ueg==",
       "dependencies": {
-        "@stencil/core": "~2.16.0"
-      }
-    },
-    "node_modules/ionicons/node_modules/@stencil/core": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
-      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
-      "bin": {
-        "stencil": "bin/stencil"
-      },
-      "engines": {
-        "node": ">=12.10.0",
-        "npm": ">=6.0.0"
+        "@stencil/core": "^2.18.0"
       }
     },
     "node_modules/ip": {
@@ -23748,18 +23736,11 @@
       }
     },
     "ionicons": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.3.tgz",
-      "integrity": "sha512-kVOWER991EMqLiVShrCSWKMHkgHZP7XfVdyN6YPMuoO33W7pc5CPNVNfR8OMe/I8rYEbaunyBs6dXNYpR6gGZw==",
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.4.tgz",
+      "integrity": "sha512-uDNOkBo0OVYV+kIhb51g9mb7r3Z0b+78GPZQBsjXuaetNmrB/mNTqN/uFtO+vxL/rQySKjzk8qeKJI5NWL9Ueg==",
       "requires": {
-        "@stencil/core": "~2.16.0"
-      },
-      "dependencies": {
-        "@stencil/core": {
-          "version": "2.16.1",
-          "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
-          "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
-        }
+        "@stencil/core": "^2.18.0"
       }
     },
     "ip": {

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.3.4",
+  "version": "6.3.6",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@stencil/core": "^2.18.0",
-    "ionicons": "^6.0.3",
+    "ionicons": "^6.0.4",
     "tslib": "^2.1.0"
   },
   "devDependencies": {

core/playwright.config.ts

@@ -87,7 +87,7 @@ const config: PlaywrightTestConfig = {
        * Increases the maximum allowed pixel difference to account
        * for slight browser rendering inconsistencies.
        */
-      maxDiffPixelRatio: 0.02
+      maxDiffPixelRatio: 0.01
     }
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */

core/src/components.d.ts

@@ -5849,6 +5849,10 @@ declare namespace LocalJSX {
           * Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss.
          */
         "onDidPresent"?: (event: IonPopoverCustomEvent<void>) => void;
+        /**
+          * Emitted before the popover has presented, but after the component has been mounted in the DOM. This event exists for ion-popover to resolve an issue with the popover and the lazy build, that the transition is unable to get the correct dimensions of the popover with auto sizing. This is not required for other overlays, since the existing overlay transitions are not effected by auto sizing content.
+         */
+        "onIonMount"?: (event: IonPopoverCustomEvent<void>) => void;
         /**
           * Emitted after the popover has dismissed.
          */

core/src/components/accordion/test/a11y/accordion.e2e.ts

@@ -4,7 +4,7 @@ import { test } from '@utils/test/playwright';
 test.describe('accordion: a11y', () => {
   test('accordions should be keyboard navigable', async ({ page, skip, browserName }) => {
     // TODO(FW-1764): remove skip once issue is resolved
-    skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25529');
+    skip.browser('firefox', 'https://github.com/ionic-team/ionic-framework/issues/25070');
 
     await page.goto(`/src/components/accordion/test/a11y`);
     const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';

core/src/components/action-sheet/action-sheet.md.scss

@@ -78,7 +78,6 @@
 }
 
 .action-sheet-icon {
-  @include padding(null, null, 4px, null);
   @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start);
 
   color: var(--color);

core/src/components/app/app.tsx

@@ -25,7 +25,12 @@ export class App implements ComponentInterface {
           import('../../utils/status-tap').then((module) => module.startStatusTap());
         }
         if (config.getBoolean('inputShims', needInputShims())) {
-          import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config));
+          /**
+           * needInputShims() ensures that only iOS and Android
+           * platforms proceed into this block.
+           */
+          const platform = isPlatform(window, 'ios') ? 'ios' : 'android';
+          import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
         }
         const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
         if (config.getBoolean('hardwareBackButton', isHybrid)) {
@@ -73,7 +78,25 @@ export class App implements ComponentInterface {
 }
 
 const needInputShims = () => {
-  return isPlatform(window, 'ios') && isPlatform(window, 'mobile');
+  /**
+   * iOS always needs input shims
+   */
+  const needsShimsIOS = isPlatform(window, 'ios') && isPlatform(window, 'mobile');
+  if (needsShimsIOS) {
+    return true;
+  }
+
+  /**
+   * Android only needs input shims when running
+   * in the browser and only if the browser is using the
+   * new Chrome 108+ resize behavior: https://developer.chrome.com/blog/viewport-resize-behavior/
+   */
+  const isAndroidMobileWeb = isPlatform(window, 'android') && isPlatform(window, 'mobileweb');
+  if (isAndroidMobileWeb) {
+    return true;
+  }
+
+  return false;
 };
 
 const rIC = (callback: () => void) => {

core/src/components/checkbox/checkbox.ios.scss

@@ -25,7 +25,6 @@
 // iOS Checkbox: Disabled
 // -----------------------------------------
 
-// TODO: .item-ios.item-checkbox-disabled ion-label
 :host(.checkbox-disabled) {
   opacity: $checkbox-ios-disabled-opacity;
 }

core/src/components/checkbox/checkbox.md.scss

@@ -44,7 +44,6 @@
 // Material Design Checkbox: Disabled
 // --------------------------------------------------------
 
-// TODO .item-md.item-checkbox-disabled ion-label
 :host(.checkbox-disabled) {
   opacity: $checkbox-md-disabled-opacity;
 }

core/src/components/content/content.scss

@@ -54,7 +54,6 @@
   color: current-color(contrast);
 }
 
-// TODO we should remove outer-content in favor of a color
 :host(.outer-content) {
   --background: #{$background-color-step-50};
 }

core/src/components/content/content.tsx

@@ -280,7 +280,6 @@ export class Content implements ComponentInterface {
       if (easedT < 1) {
         // do not use DomController here
         // must use nativeRaf in order to fire in the next frame
-        // TODO: remove as any
         requestAnimationFrame(step);
       } else {
         resolve();

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