fix(title): mode is inherited

fixes #15187

core/src/components.d.ts

@@ -1872,7 +1872,7 @@ declare global {
 
     interface IonRippleEffect {
       /**
-       * Adds the ripple effect to the parent elment
+       * Adds the ripple effect to the parent element
        */
       'addRipple': (pageX: number, pageY: number) => void;
       'parent': HTMLElement | string;
@@ -2107,7 +2107,7 @@ declare global {
        * The text to display on the ok button. Default: `OK`.
        */
       'okText': string;
-      'open': (ev?: UIEvent | undefined) => Promise<HTMLIonPopoverElement> | Promise<HTMLIonActionSheetElement> | Promise<HTMLIonAlertElement>;
+      'open': (ev?: UIEvent | undefined) => Promise<HTMLIonActionSheetElement> | Promise<HTMLIonAlertElement> | Promise<HTMLIonPopoverElement>;
       /**
        * The text to display when the select is empty.
        */
@@ -2510,10 +2510,6 @@ declare global {
        * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
        */
       'color': Color;
-      /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
-       */
-      'mode': Mode;
     }
 
     interface IonToastController {
@@ -6072,10 +6068,6 @@ declare global {
        * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
        */
       'color'?: Color;
-      /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
-       */
-      'mode'?: Mode;
     }
 
     export interface IonToastControllerAttributes extends HTMLAttributes {

core/src/components/ripple-effect/ripple-effect.tsx

@@ -52,7 +52,7 @@ export class RippleEffect {
   }
 
   /**
-   * Adds the ripple effect to the parent elment
+   * Adds the ripple effect to the parent element
    */
   @Method()
   addRipple(pageX: number, pageY: number) {

core/src/components/title/title.ios.scss

@@ -1,22 +0,0 @@
-@import "./title";
-
-:host {
-  @include position(0, null, null, 0);
-  @include padding(0, 90px, 0);
-
-  position: absolute;
-
-  width: 100%;
-  height: 100%;
-
-  transform: translateZ(0);
-
-  font-size: 17px;
-  font-weight: 600;
-
-  letter-spacing: -.03em;
-
-  text-align: center;
-  box-sizing: border-box;
-  pointer-events: none;
-}

core/src/components/title/title.md.scss

@@ -1,8 +0,0 @@
-@import "./title";
-
-:host {
-  @include padding(0, 12px);
-
-  font-size: 20px;
-  font-weight: 500;
-}

core/src/components/title/title.scss

@@ -12,6 +12,34 @@
   transform: translateZ(0);
 }
 
+:host(.title-ios) {
+  @include position(0, null, null, 0);
+  @include padding(0, 90px, 0);
+
+  position: absolute;
+
+  width: 100%;
+  height: 100%;
+
+  transform: translateZ(0);
+
+  font-size: 17px;
+  font-weight: 600;
+
+  letter-spacing: -.03em;
+
+  text-align: center;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+:host(.title-md) {
+  @include padding(0, 12px);
+
+  font-size: 20px;
+  font-weight: 500;
+}
+
 :host(.ion-color) {
   color: #{current-color(base)};
 }

core/src/components/title/title.tsx

@@ -1,23 +1,18 @@
-import { Component, Prop } from '@stencil/core';
+import { Component, Element, Prop } from '@stencil/core';
 
 import { Color, Mode } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-title',
-  styleUrls: {
-    ios: 'title.ios.scss',
-    md: 'title.md.scss'
-  },
+  styleUrl: 'title.scss',
   shadow: true
 })
 export class ToolbarTitle {
 
-  /**
-   * The mode determines which platform styles to use.
-   * Possible values are: `"ios"` or `"md"`.
-   */
-  @Prop() mode!: Mode;
+  mode!: Mode;
+
+  @Element() el!: HTMLElement;
 
   /**
    * The color to use from your application's color palette.
@@ -26,9 +21,18 @@ export class ToolbarTitle {
    */
   @Prop() color?: Color;
 
+  private getMode() {
+    const toolbar = this.el.closest('ion-toolbar');
+    return (toolbar && toolbar.mode) || this.mode;
+  }
+
   hostData() {
+    const mode = this.getMode();
     return {
-      class: createColorClasses(this.color)
+      class: {
+        ...createColorClasses(this.color),
+        [`title-${mode}`]: true
+      }
     };
   }
 

core/src/components/toolbar/test/scenarios/index.html

@@ -228,6 +228,12 @@
           </ion-segment-button>
         </ion-segment>
       </ion-toolbar>
+      <ion-toolbar mode="ios">
+        <ion-title>This is an iOS toolbar</ion-title>
+      </ion-toolbar>
+      <ion-toolbar mode="md">
+        <ion-title>This is an MD toolbar</ion-title>
+      </ion-toolbar>
     </ion-content>
   </ion-app>