fix(components): include mode classes on components for use in shadow (…

…#17838) - removes mode-less component classes from the internal CSS, use element instead - adds mode specific classes `md` or `ios` for styling inside of shadow components - adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling fixes #17608
ionic-team · Apr 16, 2019 · e5c8c10 · e5c8c10
1 parent 38ae362
commit e5c8c10
Show file tree

Hide file tree

Showing 93 changed files with 685 additions and 119 deletions.
diff --git a/core/package.json b/core/package.json
@@ -30,7 +30,7 @@
     "loader/"
   ],
   "dependencies": {
-    "ionicons": "4.5.5"
+    "ionicons": "4.5.6"
   },
   "devDependencies": {
     "@stencil/core": "0.17.3-0",

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
@@ -196,6 +196,8 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
         zIndex: 20000 + this.overlayIndex,
       },
       class: {
+        [`${this.mode}`]: true,
+
         ...getClassMap(this.cssClass),
         'action-sheet-translucent': this.translucent
       }

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
@@ -392,6 +392,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
       },
       class: {
         ...getClassMap(this.cssClass),
+        [`${this.mode}`]: true,
         'alert-translucent': this.translucent
       }
     };

diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Listen, Prop } from '@stencil/core';
 
-import { Color, RouterDirection } from '../../interface';
+import { Color, Mode, RouterDirection } from '../../interface';
 import { createColorClasses, openURL } from '../../utils/theme';
 
 @Component({
@@ -9,6 +9,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
   shadow: true
 })
 export class Anchor implements ComponentInterface {
+  mode!: Mode;
 
   @Prop({ context: 'window' }) win!: Window;
 
@@ -40,6 +41,7 @@ export class Anchor implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
+        [`${this.mode}`]: true,
         'ion-activatable': true
       }
     };

diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Prop, QueueApi } from '@stencil/core';
 
-import { Config } from '../../interface';
+import { Config, Mode } from '../../interface';
 import { rIC } from '../../utils/helpers';
 import { isPlatform } from '../../utils/platform';
 
@@ -9,6 +9,7 @@ import { isPlatform } from '../../utils/platform';
   styleUrl: 'app.scss'
 })
 export class App implements ComponentInterface {
+  mode!: Mode;
 
   @Element() el!: HTMLElement;
 
@@ -34,6 +35,7 @@ export class App implements ComponentInterface {
   hostData() {
     return {
       class: {
+        [`${this.mode}`]: true,
         'ion-page': true,
         'force-statusbar-padding': this.config.getBoolean('_forceStatusbarPadding')
       }

diff --git a/core/src/components/avatar/avatar.tsx b/core/src/components/avatar/avatar.tsx
@@ -1,5 +1,7 @@
 import { Component, ComponentInterface } from '@stencil/core';
 
+import { Mode } from '../../interface';
+
 @Component({
   tag: 'ion-avatar',
   styleUrls: {
@@ -9,6 +11,15 @@ import { Component, ComponentInterface } from '@stencil/core';
   shadow: true
 })
 export class Avatar implements ComponentInterface {
+  mode!: Mode;
+
+  hostData() {
+    return {
+      class: {
+        [`${this.mode}`]: true,
+      }
+    };
+  }
 
   render() {
     return <slot></slot>;

diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
@@ -62,6 +62,7 @@ export class BackButton implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
+        [`${this.mode}`]: true,
 
         'button': true, // ion-buttons target .button
         'ion-activatable': true,

diff --git a/core/src/components/backdrop/backdrop.tsx b/core/src/components/backdrop/backdrop.tsx
@@ -1,5 +1,6 @@
 import { Component, ComponentInterface, Event, EventEmitter, Listen, Prop } from '@stencil/core';
 
+import { Mode } from '../../interface';
 import { GESTURE_CONTROLLER } from '../../utils/gesture';
 import { now } from '../../utils/helpers';
 
@@ -12,6 +13,7 @@ import { now } from '../../utils/helpers';
   shadow: true
 })
 export class Backdrop implements ComponentInterface {
+  mode!: Mode;
 
   private lastClick = -10000;
   private blocker = GESTURE_CONTROLLER.createBlocker({
@@ -78,6 +80,7 @@ export class Backdrop implements ComponentInterface {
     return {
       tabindex: '-1',
       class: {
+        [`${this.mode}`]: true,
         'backdrop-hide': !this.visible,
         'backdrop-no-tappable': !this.tappable,
       }

diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
@@ -26,7 +26,10 @@ export class Badge implements ComponentInterface {
 
   hostData() {
     return {
-      class: createColorClasses(this.color)
+      class: {
+        ...createColorClasses(this.color),
+        [`${this.mode}`]: true
+      }
     };
   }
 

diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
@@ -148,6 +148,7 @@ export class Button implements ComponentInterface {
       'aria-disabled': disabled ? 'true' : null,
       class: {
         ...createColorClasses(color),
+        [`${this.mode}`]: true,
         [buttonType]: true,
         [`${buttonType}-${expand}`]: expand !== undefined,
         [`${buttonType}-${size}`]: size !== undefined,

diff --git a/core/src/components/buttons/buttons.tsx b/core/src/components/buttons/buttons.tsx
@@ -1,5 +1,7 @@
 import { Component, ComponentInterface } from '@stencil/core';
 
+import { Mode } from '../../interface';
+
 @Component({
   tag: 'ion-buttons',
   styleUrls: {
@@ -8,4 +10,14 @@ import { Component, ComponentInterface } from '@stencil/core';
   },
   scoped: true,
 })
-export class Buttons implements ComponentInterface {}
+export class Buttons implements ComponentInterface {
+  mode!: Mode;
+
+  hostData() {
+    return {
+      class: {
+        [`${this.mode}`]: true
+      }
+    };
+  }
+}
diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx
@@ -1,7 +1,6 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Mode } from '../../interface';
-import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-card-content',
@@ -19,7 +18,12 @@ export class CardContent implements ComponentInterface {
 
   hostData() {
     return {
-      class: createThemedClasses(this.mode, 'card-content')
+      class: {
+        [`${this.mode}`]: true,
+
+        // Used internally for styling
+        [`card-content-${this.mode}`]: true
+      }
     };
   }
 }
diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx
@@ -34,6 +34,7 @@ export class CardHeader implements ComponentInterface {
       class: {
         ...createColorClasses(this.color),
         'card-header-translucent': this.translucent,
+        [`${this.mode}`]: true
       }
     };
   }

diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -26,7 +26,10 @@ export class CardSubtitle implements ComponentInterface {
 
   hostData() {
     return {
-      class: createColorClasses(this.color),
+      class: {
+        ...createColorClasses(this.color),
+        [`${this.mode}`]: true
+      },
       'role': 'heading',
       'aria-level': '3'
     };

diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx
@@ -26,7 +26,10 @@ export class CardTitle implements ComponentInterface {
 
   hostData() {
     return {
-      class: createColorClasses(this.color),
+      class: {
+        ...createColorClasses(this.color),
+        [`${this.mode}`]: true
+      },
       'role': 'heading',
       'aria-level': '2'
     };

diff --git a/core/src/components/card/card.tsx b/core/src/components/card/card.tsx
@@ -27,7 +27,10 @@ export class Card implements ComponentInterface {
 
   hostData() {
     return {
-      class: createColorClasses(this.color)
+      class: {
+        ...createColorClasses(this.color),
+        [`${this.mode}`]: true
+      }
     };
   }
 }
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
@@ -137,6 +137,7 @@ export class Checkbox implements ComponentInterface {
       'aria-labelledby': labelId,
       class: {
         ...createColorClasses(color),
+        [`${this.mode}`]: true,
         'in-item': hostContext('ion-item', el),
         'checkbox-checked': checked,
         'checkbox-disabled': disabled,

diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
@@ -33,6 +33,7 @@ export class Chip implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
+        [`${this.mode}`]: true,
         'chip-outline': this.outline,
         'ion-activatable': true,
       }

diff --git a/core/src/components/col/col.tsx b/core/src/components/col/col.tsx
@@ -1,5 +1,6 @@
 import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
 
+import { Mode } from '../../interface';
 import { matchBreakpoint } from '../../utils/media';
 
 const win = window as any;
@@ -12,6 +13,8 @@ const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
   shadow: true
 })
 export class Col implements ComponentInterface {
+  mode!: Mode;
+
   @Prop({ context: 'window' }) win!: Window;
 
   @Element() el!: HTMLStencilElement;
@@ -247,6 +250,9 @@ export class Col implements ComponentInterface {
   hostData() {
     const isRTL = this.win.document.dir === 'rtl';
     return {
+      class: {
+        [`${this.mode}`]: true
+      },
       style: {
         ...this.calculateOffset(isRTL),
         ...this.calculatePull(isRTL),

diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
@@ -293,6 +293,7 @@ export class Content implements ComponentInterface {
     return {
       class: {
         ...createColorClasses(this.color),
+        [`${this.mode}`]: true,
         'content-sizing': hostContext('ion-popover', this.el),
         'overscroll': !!this.forceOverscroll,
       },

diff --git a/core/src/components/datetime/datetime-util.spec.ts b/core/src/components/datetime/datetime-util.spec.ts
@@ -2,7 +2,7 @@ import { convertDataToISO, parseDate } from './datetime-util';
 
 describe('datetime-util', () => {
   describe('convertDataToISO', () => {
-    it('prints an emptry string for an empty datetime', () => {
+    it('prints an empty string for an empty datetime', () => {
       expect(convertDataToISO({})).toEqual('');
     });
 

diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -615,6 +615,7 @@ export class Datetime implements ComponentInterface {
       'aria-haspopup': 'true',
       'aria-labelledby': labelId,
       class: {
+        [`${this.mode}`]: true,
         'datetime-disabled': disabled,
         'datetime-readonly': readonly,
         'datetime-placeholder': addPlaceholderClass,

diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
@@ -95,6 +95,7 @@ export class FabButton implements ComponentInterface {
       'aria-disabled': disabled ? 'true' : null,
       class: {
         ...createColorClasses(color),
+        [`${this.mode}`]: true,
         'fab-button-in-list': inList,
         'fab-button-translucent-in-list': inList && translucent,
         'fab-button-close-active': activated,

diff --git a/core/src/components/fab-list/fab-list.tsx b/core/src/components/fab-list/fab-list.tsx
@@ -1,11 +1,15 @@
 import { Component, ComponentInterface, Element, Prop, Watch } from '@stencil/core';
 
+import { Mode } from '../../interface';
+
 @Component({
   tag: 'ion-fab-list',
   styleUrl: 'fab-list.scss',
   shadow: true
 })
 export class FabList implements ComponentInterface {
+  mode!: Mode;
+
   @Element() el!: HTMLIonFabElement;
 
   /**
@@ -32,6 +36,7 @@ export class FabList implements ComponentInterface {
   hostData() {
     return {
       class: {
+        [`${this.mode}`]: true,
         'fab-list-active': this.activated,
         [`fab-list-side-${this.side}`]: true
       }

diff --git a/core/src/components/fab/fab.tsx b/core/src/components/fab/fab.tsx
@@ -1,11 +1,14 @@
 import { Component, ComponentInterface, Element, Listen, Method, Prop, Watch } from '@stencil/core';
 
+import { Mode } from '../../interface';
+
 @Component({
   tag: 'ion-fab',
   styleUrl: 'fab.scss',
   shadow: true
 })
 export class Fab implements ComponentInterface {
+  mode!: Mode;
 
   @Element() el!: HTMLElement;
 
@@ -75,6 +78,7 @@ export class Fab implements ComponentInterface {
   hostData() {
     return {
       class: {
+        [`${this.mode}`]: true,
         [`fab-horizontal-${this.horizontal}`]: this.horizontal !== undefined,
         [`fab-vertical-${this.vertical}`]: this.vertical !== undefined,
         'fab-edge': this.edge

diff --git a/core/src/components/footer/footer.tsx b/core/src/components/footer/footer.tsx
@@ -1,7 +1,6 @@
 import { Component, ComponentInterface, Prop } from '@stencil/core';
 
 import { Mode } from '../../interface';
-import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-footer',
@@ -25,13 +24,15 @@ export class Footer implements ComponentInterface {
   @Prop() translucent = false;
 
   hostData() {
-    const themedClasses = createThemedClasses(this.mode, 'footer');
-    const translucentClasses = this.translucent ? createThemedClasses(this.mode, 'footer-translucent') : null;
-
     return {
       class: {
-        ...themedClasses,
-        ...translucentClasses
+        [`${this.mode}`]: true,
+
+        // Used internally for styling
+        [`footer-${this.mode}`]: true,
+
+        [`footer-translucent`]: this.translucent,
+        [`footer-translucent-${this.mode}`]: this.translucent,
       }
     };
   }