@ionic/core 9.0.11-dev.11793890855.1bf6a6e5 → 9.0.11-dev.11793906456.1ea7a0a7

package/dist/collection/utils/test/playwright/drag-element.js

@@ -8,19 +8,7 @@
  *
  * See https://playwright.dev/docs/api/class-mouse#mouse-move for more information.
  */
-/**
- * Drags an element by the given number of pixels on the X and Y axes.
- *
- * @param el The element to drag.
- * @param page The E2E Page object.
- * @param dragByX The number of pixels to drag on the X axis. Negative values drag left, positive values drag right.
- * @param dragByY The number of pixels to drag on the Y axis. Negative values drag up, positive values drag down.
- * @param startXCoord The X coordinate to start the drag from. Defaults to the center of the element.
- * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
- * @param releaseDrag Whether to release the drag at the end of the gesture. Defaults to `true`.
- * @param steps The number of steps to divide the drag into. More steps reduce velocity; fewer steps increase it. Use this to control whether velocity-based thresholds (e.g. full-swipe) are triggered, particularly in Safari where gesture velocity is calculated relative to animation frames. Defaults to `10`.
- */
-export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCoord, startYCoord, releaseDrag = true, steps) => {
+export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCoord, startYCoord, releaseDrag = true) => {
     const boundingBox = await el.boundingBox();
     if (!boundingBox) {
         throw new Error('Cannot get a bounding box for an element that is not visible. See https://playwright.dev/docs/api/class-locator#locator-bounding-box for more information');
@@ -45,18 +33,17 @@ export const dragElementBy = async (el, page, dragByX = 0, dragByY = 0, startXCo
         await page.evaluate(() => window.getSelection()?.removeAllRanges());
     }
     // Drag the element.
-    await moveElement(page, startX, startY, dragByX, dragByY, steps);
+    await moveElement(page, startX, startY, dragByX, dragByY);
     if (releaseDrag) {
         await page.mouse.up();
     }
 };
 /**
  * Drags an element by the given amount of pixels on the Y axis.
- *
  * @param el The element to drag.
  * @param page The E2E Page object.
- * @param dragByY The number of pixels to drag on the Y axis.
- * @param startYCoord The Y coordinate to start the drag from. Defaults to the center of the element.
+ * @param dragByY The amount of pixels to drag the element by.
+ * @param startYCoord The Y coordinate to start the drag gesture at. Defaults to the center of the element.
  */
 export const dragElementByYAxis = async (el, page, dragByY, startYCoord) => {
     const boundingBox = await el.boundingBox();
@@ -98,7 +85,8 @@ const validateDragByY = (startY, dragByY, viewportHeight) => {
         throw new Error(`The element is being dragged past the top of the viewport. Update the dragByY value to prevent going out of bounds. A recommended value is ${recommendedDragByY}.`);
     }
 };
-const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0, steps = 10) => {
+const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0) => {
+    const steps = 10;
     const browser = page.context().browser().browserType().name();
     const viewport = page.viewportSize();
     if (viewport === null) {
@@ -113,21 +101,10 @@ const moveElement = async (page, startX, startY, dragByX = 0, dragByY = 0, steps
         const middleX = startX + (endX - startX) * (i / steps);
         const middleY = startY + (endY - startY) * (i / steps);
         await page.mouse.move(middleX, middleY);
-        /**
-         * In Safari, gesture velocity is calculated relative to animation
-         * frames, causing velocity to accumulate faster than in other
-         * browsers. Without waiting for a repaint, consecutive `mouse.move`
-         * events arrive with ~0ms time delta and velocity never accumulates,
-         * causing gesture
-         * detection to fail.
-         */
+        // Safari needs to wait for a repaint to occur before moving the mouse again.
         if (browser === 'webkit' && i % 2 === 0) {
-            /**
-             * Repainting every 2 steps is enough to keep the drag gesture
-             * smooth. Repainting on every step makes the test slow, and
-             * repainting every 4+ steps means Safari does not see enough
-             * frames to track the gesture reliably.
-             */
+            // Repainting every 2 steps is enough to keep the drag gesture smooth.
+            // Anything past 4 steps will cause the drag gesture to be flaky.
             await page.evaluate(() => new Promise(requestAnimationFrame));
         }
     }

package/dist/collection/utils/test/playwright/generator.js

@@ -8,56 +8,34 @@
  * each test title is unique.
  */
 const generateTitle = (title, config) => {
-    const { direction, palette, mode, theme } = config;
-    /**
-     * The iOS theme can only be used with the iOS mode,
-     * and the MD theme can only be used with the MD mode.
-     *
-     * This logic enables the fallback behavior for existing tests,
-     * where we only tested against a mode, which accounted for both
-     * the theme and mode.
-     */
-    if (theme === 'ios' || theme === 'md') {
-        if (palette === 'light') {
-            /**
-             * Ionic has many existing tests that existed prior to
-             * the introduction of theme testing. To maintain backwards
-             * compatibility, we will not include the theme in the test
-             * title if the theme is set to light.
-             */
-            return `${title} - ${mode}/${direction}`;
-        }
-        return `${title} - ${mode}/${direction}/${palette}`;
+    const { mode, direction, palette } = config;
+    if (palette === 'light') {
+        /**
+         * Ionic has many existing tests that existed prior to
+         * the introduction of palette testing. To maintain backwards
+         * compatibility, we will not include the palette in the test
+         * title if the palette is set to light.
+         */
+        return `${title} - ${mode}/${direction}`;
     }
-    return `${title} - ${theme}/${mode}/${direction}/${palette}`;
+    return `${title} - ${mode}/${direction}/${palette}`;
 };
 /**
  * Generates a unique filename based on a base filename
  * and a test config.
  */
 const generateScreenshotName = (fileName, config) => {
-    const { direction, palette, mode, theme } = config;
-    /**
-     * The iOS theme can only be used with the iOS mode,
-     * and the MD theme can only be used with the MD mode.
-     *
-     * This logic enables the fallback behavior for existing tests,
-     * where we only tested against a mode, which accounted for both
-     * the theme and mode.
-     */
-    if (theme === 'ios' || theme === 'md') {
-        if (palette === 'light') {
-            /**
-             * Ionic has many existing tests that existed prior to
-             * the introduction of theme testing. To maintain backwards
-             * compatibility, we will not include the theme in the screenshot
-             * name if the theme is set to light.
-             */
-            return `${fileName}-${mode}-${direction}.png`;
-        }
-        return `${fileName}-${mode}-${direction}-${palette}.png`;
+    const { mode, direction, palette } = config;
+    if (palette === 'light') {
+        /**
+         * Ionic has many existing tests that existed prior to
+         * the introduction of palette testing. To maintain backwards
+         * compatibility, we will not include the palette in the screenshot
+         * name if the palette is set to light.
+         */
+        return `${fileName}-${mode}-${direction}.png`;
     }
-    return `${fileName}-${theme}-${mode}-${direction}-${palette}.png`;
+    return `${fileName}-${mode}-${direction}-${palette}.png`;
 };
 /**
  * Given a config generate an array of test variants.
@@ -69,16 +47,13 @@ export const configs = (testConfig = DEFAULT_TEST_CONFIG_OPTION) => {
      * If certain options are not provided,
      * fall back to the defaults.
      */
-    const processedModes = modes ?? DEFAULT_MODES;
+    const processedMode = modes ?? DEFAULT_MODES;
     const processedDirection = directions ?? DEFAULT_DIRECTIONS;
     const processedPalette = testConfig.palettes ?? DEFAULT_PALETTES;
-    processedModes.forEach((mode) => {
-        const [themeOrCombinedMode, modeName] = mode.split('-');
-        const parsedTheme = themeOrCombinedMode;
-        const parsedMode = modeName ?? themeOrCombinedMode;
+    processedMode.forEach((mode) => {
         processedDirection.forEach((direction) => {
             processedPalette.forEach((palette) => {
-                configs.push({ direction, palette, mode: parsedMode, theme: parsedTheme });
+                configs.push({ mode, direction, palette });
             });
         });
     });

package/dist/collection/utils/test/playwright/index.js

@@ -11,4 +11,3 @@ export * from './matchers';
 export * from './viewports';
 export * from './generator';
 export * from './detach-reattach';
-export * from './field-geometry';

package/dist/collection/utils/test/playwright/page/utils/goto.js

@@ -20,18 +20,15 @@ configs().forEach(({ config, title }) => {
 });`);
     }
     let mode;
-    let theme;
     let direction;
     let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
-        theme = testInfo.project.metadata.theme;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
         palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
-        theme = options.theme;
         direction = options.direction;
         palette = options.palette;
     }
@@ -44,7 +41,6 @@ configs().forEach(({ config, title }) => {
      */
     const urlToParams = new URLSearchParams(paramsString);
     const formattedMode = urlToParams.get('ionic:mode') ?? mode;
-    const formattedTheme = urlToParams.get('ionic:theme') ?? theme;
     const formattedRtl = urlToParams.get('rtl') ?? rtlString;
     const formattedPalette = urlToParams.get('palette') ?? palette;
     const ionicTesting = urlToParams.get('ionic:_testing') ?? true;
@@ -52,7 +48,6 @@ configs().forEach(({ config, title }) => {
      * Pass through other custom query params
      */
     urlToParams.delete('ionic:mode');
-    urlToParams.delete('ionic:theme');
     urlToParams.delete('rtl');
     urlToParams.delete('palette');
     urlToParams.delete('ionic:_testing');
@@ -63,15 +58,11 @@ configs().forEach(({ config, title }) => {
      */
     const remainingQueryParams = decodeURIComponent(urlToParams.toString());
     const remainingQueryParamsString = remainingQueryParams == '' ? '' : `&${remainingQueryParams}`;
-    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&ionic:theme=${formattedTheme}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
+    const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
     testInfo.annotations.push({
         type: 'mode',
         description: formattedMode,
     });
-    testInfo.annotations.push({
-        type: 'theme',
-        description: formattedTheme,
-    });
     testInfo.annotations.push({
         type: 'direction',
         description: formattedRtl === 'true' ? 'rtl' : 'ltr',

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -18,43 +18,29 @@ export const setContent = async (page, html, testInfo, options) => {
     }
     let mode;
     let direction;
-    let theme;
     let palette;
     if (options == undefined) {
         mode = testInfo.project.metadata.mode;
         direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
-        theme = testInfo.project.metadata.theme;
         palette = testInfo.project.metadata.palette;
     }
     else {
         mode = options.mode;
         direction = options.direction;
-        theme = options.theme;
         palette = options.palette;
     }
     const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
     // The Ionic bundle is included locally by default unless the test
     // config passes in the importIonicFromCDN option. This is useful
     // when testing with the CDN version of Ionic.
-    let ionicCSSImports = theme === 'ionic'
-        ? `
-    <link href="${baseUrl}/css/ionic/bundle.ionic.css" rel="stylesheet" />
-    <link href="${baseUrl}/css/utils.bundle.css" rel="stylesheet" />
-  `
-        : `
+    let ionicCSSImports = `
     <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
   `;
     let ionicJSImports = `
     <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
   `;
     if (options?.importIonicFromCDN) {
-        ionicCSSImports =
-            theme === 'ionic'
-                ? `
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic/bundle.ionic.css" />
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/utils.bundle.css" />
-    `
-                : `
+        ionicCSSImports = `
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
     `;
         ionicJSImports = `
@@ -77,8 +63,7 @@ export const setContent = async (page, html, testInfo, options) => {
         <script>
           window.Ionic = {
             config: {
-              mode: '${mode}',
-              theme: '${theme}'
+              mode: '${mode}'
             }
           }
         </script>
@@ -88,18 +73,10 @@ export const setContent = async (page, html, testInfo, options) => {
       </body>
     </html>
   `;
-    testInfo.annotations.push({
-        type: 'mode',
-        description: mode,
-    });
     testInfo.annotations.push({
         type: 'palette',
         description: palette,
     });
-    testInfo.annotations.push({
-        type: 'theme',
-        description: theme,
-    });
     if (baseUrl) {
         await page.route(baseUrl, (route) => {
             if (route.request().url() === `${baseUrl}/`) {

package/dist/collection/utils/theme.js

@@ -1,32 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-/**
- * Checks if an element has a parent matching the specified selector.
- * This handles an element in both light DOM and shadow DOM contexts.
- * @param selector The parent selector to check for (e.g., 'ion-datetime'
- * or 'ion-toolbar[color]').
- * @param el The element to check.
- * @returns `true` if the element has a parent matching the specified selector,
- * `false` otherwise.
- */
 export const hostContext = (selector, el) => {
-    // Check the light DOM first
-    if (el.closest(selector) !== null) {
-        return true;
-    }
-    // For attribute or class selectors (e.g., 'ion-toolbar[color]' or
-    // 'ion-toolbar.ion-color') we can only check light DOM since tagName
-    // doesn't include attributes or classes.
-    if (selector.includes('[') || selector.includes('.')) {
-        return false;
-    }
-    // Check the shadow DOM by looking at the shadow root host and
-    // converting the selector to uppercase to compare with tagName
-    const upperCaseTagName = selector.toUpperCase();
-    const rootNode = el.getRootNode();
-    const shadowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
-    return shadowHost?.tagName === upperCaseTagName;
+    return el.closest(selector) !== null;
 };
 /**
  * Create the mode and color classes for the component based on the classes passed in

package/dist/collection/utils/transition/ios.transition.js

@@ -191,7 +191,6 @@ const animateBackButton = (rootAnimation, rtl, backDirection, backButtonEl, back
     const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
     clonedBackButtonEl.text = backButtonEl.text;
     clonedBackButtonEl.mode = backButtonEl.mode;
-    clonedBackButtonEl.theme = backButtonEl.theme;
     clonedBackButtonEl.icon = backButtonEl.icon;
     clonedBackButtonEl.color = backButtonEl.color;
     clonedBackButtonEl.disabled = backButtonEl.disabled;