fix(): only cascade mode from parent Ionic components (#20828)

fixes #20055

core/src/global/ionic-global.ts

@@ -49,14 +49,22 @@ export default () => {
     config.set('animated', false);
   }
 
+  const isIonicElement = (elm: any) =>
+        elm.tagName && elm.tagName.startsWith('ION-');
+
+  const isAllowedIonicModeValue = (elmMode: string) =>
+      ['ios', 'md'].includes(elmMode);
+
   setMode((elm: any) => {
     while (elm) {
       const elmMode = (elm as any).mode || elm.getAttribute('mode');
-
       if (elmMode) {
-        return elmMode;
+        if (isAllowedIonicModeValue(elmMode)) {
+          return elmMode;
+        } else if (isIonicElement(elm)) {
+          console.warn('Invalid ionic mode: "' + elmMode + '", expected: "ios" or "md"');
+        }
       }
-
       elm = elm.parentElement;
     }
     return defaultMode;

core/src/utils/test/modes/e2e.ts

@@ -58,4 +58,21 @@ test('component: modes', async () => {
     const el = await page.find(tag);
     await checkModeClasses(el, globalMode!);
   }
+
+  // Fifth test: {mode} attribute on non-ionic ancestor element
+  // ----------------------------------------------------------------
+  // non-ionic ancestor components with a mode attribute
+  // e.g. <p mode="foo">
+  const ancestorTags = ['p[mode]'];
+  const childTag = 'ion-label';
+
+  for (const tag of ancestorTags) {
+    await page.waitForSelector(tag);
+    const ancestor = await page.find(tag);
+    const mode = ancestor.getAttribute('mode');
+    const expectedMode = ['ios', 'md'].includes(mode) ? mode : globalMode!;
+    const el = await ancestor.find(childTag);
+    await checkModeClasses(el, expectedMode);
+  }
+
 });

core/src/utils/test/modes/index.html

@@ -105,6 +105,15 @@
           <ion-toast></ion-toast>
           <ion-toggle></ion-toggle>
           <ion-toolbar></ion-toolbar>
+          <p mode="ios">
+            <ion-label></ion-label>
+          </p>
+          <p mode="md">
+            <ion-label></ion-label>
+          </p>
+          <p mode="foo">
+            <ion-label></ion-label>
+          </p>
         </ion-content>
       </div>
     </ion-split-pane>