From 94ea0a6d734ddb67da3a426f836aa1c59b10beea Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Mon, 20 Aug 2018 19:01:12 +0200 Subject: [PATCH] fix(title): mode is inherited fixes #15187 --- core/src/components.d.ts | 12 ++------ .../ripple-effect/ripple-effect.tsx | 2 +- core/src/components/title/title.ios.scss | 22 --------------- core/src/components/title/title.md.scss | 8 ------ core/src/components/title/title.scss | 28 +++++++++++++++++++ core/src/components/title/title.tsx | 26 +++++++++-------- .../toolbar/test/scenarios/index.html | 6 ++++ 7 files changed, 52 insertions(+), 52 deletions(-) delete mode 100644 core/src/components/title/title.ios.scss delete mode 100644 core/src/components/title/title.md.scss diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 0b4bfb5a23..520a0b8a90 100644 --- a/core/src/components.d.ts +++ b/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 | Promise | Promise; + 'open': (ev?: UIEvent | undefined) => Promise | Promise | Promise; /** * 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 { diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx index a065eb31f8..c800232007 100644 --- a/core/src/components/ripple-effect/ripple-effect.tsx +++ b/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) { diff --git a/core/src/components/title/title.ios.scss b/core/src/components/title/title.ios.scss deleted file mode 100644 index 89cd077e49..0000000000 --- a/core/src/components/title/title.ios.scss +++ /dev/null @@ -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; -} diff --git a/core/src/components/title/title.md.scss b/core/src/components/title/title.md.scss deleted file mode 100644 index 1f69d7353d..0000000000 --- a/core/src/components/title/title.md.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import "./title"; - -:host { - @include padding(0, 12px); - - font-size: 20px; - font-weight: 500; -} diff --git a/core/src/components/title/title.scss b/core/src/components/title/title.scss index 9e0a32551c..ec49652883 100644 --- a/core/src/components/title/title.scss +++ b/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)}; } diff --git a/core/src/components/title/title.tsx b/core/src/components/title/title.tsx index dec8f792ad..f7be784ccf 100644 --- a/core/src/components/title/title.tsx +++ b/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 + } }; } diff --git a/core/src/components/toolbar/test/scenarios/index.html b/core/src/components/toolbar/test/scenarios/index.html index 184cd20db4..8b2a43421c 100644 --- a/core/src/components/toolbar/test/scenarios/index.html +++ b/core/src/components/toolbar/test/scenarios/index.html @@ -228,6 +228,12 @@ + + This is an iOS toolbar + + + This is an MD toolbar +