From c982856dba869dc83f4d648284c8c5e955aeb2b6 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Fri, 26 Oct 2018 18:53:02 +0200 Subject: [PATCH] feat(toast): add "color" prop (#16100) This commit also refactors ion-toast, so it uses shadow-dom, this is required since CSS variables does not work well in non-shadow-dom components. fixes #16099 --- core/src/components.d.ts | 8 +++++ .../action-sheet/action-sheet-interface.ts | 4 +-- core/src/components/alert/alert-interface.ts | 4 +-- .../components/loading/loading-interface.ts | 4 +-- core/src/components/modal/modal-interface.ts | 4 +-- .../src/components/picker/picker-interface.ts | 4 +-- .../components/popover/popover-interface.ts | 4 +-- core/src/components/toast/readme.md | 31 ++++++++++--------- .../components/toast/test/basic/index.html | 1 + core/src/components/toast/toast-interface.ts | 5 +-- core/src/components/toast/toast.ios.scss | 14 +++------ core/src/components/toast/toast.md.scss | 12 +++---- core/src/components/toast/toast.scss | 13 ++++++-- core/src/components/toast/toast.tsx | 22 ++++++++----- 14 files changed, 75 insertions(+), 55 deletions(-) diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 1fb79252d38..7c916df39c7 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -4846,6 +4846,10 @@ export namespace Components { */ 'closeButtonText'?: string; /** + * 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; + /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ 'cssClass'?: string | string[]; @@ -4913,6 +4917,10 @@ export namespace Components { */ 'closeButtonText'?: string; /** + * 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; + /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ 'cssClass'?: string | string[]; diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts index 1af727d5039..aa02db7ff41 100644 --- a/core/src/components/action-sheet/action-sheet-interface.ts +++ b/core/src/components/action-sheet/action-sheet-interface.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder } from '../../interface'; +import { AnimationBuilder, Mode } from '../../interface'; export interface ActionSheetOptions { header?: string; @@ -8,7 +8,7 @@ export interface ActionSheetOptions { backdropDismiss?: boolean; translucent?: boolean; animated?: boolean; - mode?: string; + mode?: Mode; keyboardClose?: boolean; id?: string; diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts index f1995602e35..a295b336312 100644 --- a/core/src/components/alert/alert-interface.ts +++ b/core/src/components/alert/alert-interface.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder, TextFieldTypes } from '../../interface'; +import { AnimationBuilder, Mode, TextFieldTypes } from '../../interface'; export interface AlertOptions { header?: string; @@ -11,7 +11,7 @@ export interface AlertOptions { translucent?: boolean; animated?: boolean; - mode?: string; + mode?: Mode; keyboardClose?: boolean; id?: string; diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts index e4f235faab4..90496df8258 100644 --- a/core/src/components/loading/loading-interface.ts +++ b/core/src/components/loading/loading-interface.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder, SpinnerTypes } from '../../interface'; +import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface'; export interface LoadingOptions { spinner?: SpinnerTypes; @@ -9,7 +9,7 @@ export interface LoadingOptions { translucent?: boolean; animated?: boolean; - mode?: string; + mode?: Mode; keyboardClose?: boolean; id?: string; diff --git a/core/src/components/modal/modal-interface.ts b/core/src/components/modal/modal-interface.ts index d4d0dfe3083..a7b1e0ed8e8 100644 --- a/core/src/components/modal/modal-interface.ts +++ b/core/src/components/modal/modal-interface.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface'; +import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface'; export interface ModalOptions { component: T; @@ -9,7 +9,7 @@ export interface ModalOptions { delegate?: FrameworkDelegate; animated?: boolean; - mode?: string; + mode?: Mode; keyboardClose?: boolean; id?: string; diff --git a/core/src/components/picker/picker-interface.ts b/core/src/components/picker/picker-interface.ts index 28022eb1d8e..c950764baf1 100644 --- a/core/src/components/picker/picker-interface.ts +++ b/core/src/components/picker/picker-interface.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder } from '../../interface'; +import { AnimationBuilder, Mode } from '../../interface'; export interface PickerOptions { columns: PickerColumn[]; @@ -7,7 +7,7 @@ export interface PickerOptions { backdropDismiss?: boolean; animated?: boolean; - mode?: string; + mode?: Mode; keyboardClose?: boolean; id?: string; diff --git a/core/src/components/popover/popover-interface.ts b/core/src/components/popover/popover-interface.ts index 81400302f1c..9ded4006dd6 100644 --- a/core/src/components/popover/popover-interface.ts +++ b/core/src/components/popover/popover-interface.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface'; +import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface'; export interface PopoverOptions { component: T; @@ -11,7 +11,7 @@ export interface PopoverOptions { delegate?: FrameworkDelegate; animated?: boolean; - mode?: string; + mode?: Mode; keyboardClose?: boolean; id?: string; diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 67290fcd515..e6df304ba4a 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -20,21 +20,22 @@ The toast can be dismissed automatically after a specific amount of time by pass ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- | -| `animated` | `animated` | If `true`, the toast will animate. Defaults to `true`. | `boolean` | -| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string \| undefined` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | -| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | -| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder \| undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | -| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder \| undefined` | -| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | -| `overlayIndex` | `overlay-index` | | `number` | -| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"bottom" \| "middle" \| "top"` | -| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. Defaults to `false`. | `boolean` | -| `translucent` | `translucent` | If `true`, the toast will be translucent. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | +| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | +| `animated` | `animated` | If `true`, the toast will animate. Defaults to `true`. | `boolean` | +| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string \| undefined` | +| `color` | `color` | 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). | `string \| undefined` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | +| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | +| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder \| undefined` | +| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | +| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder \| undefined` | +| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` | +| `overlayIndex` | `overlay-index` | | `number` | +| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"bottom" \| "middle" \| "top"` | +| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. Defaults to `false`. | `boolean` | +| `translucent` | `translucent` | If `true`, the toast will be translucent. Defaults to `false`. | `boolean` | ## Events diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html index cb1d8faa5b6..71f11271b33 100644 --- a/core/src/components/toast/test/basic/index.html +++ b/core/src/components/toast/test/basic/index.html @@ -27,6 +27,7 @@ Show Toast with Close Button Show Toast with Custom Close Button Text Show Translucent Toast + Show Color Toast diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts index 4bb7a9d5c34..2de3540f7fe 100644 --- a/core/src/components/toast/toast-interface.ts +++ b/core/src/components/toast/toast-interface.ts @@ -1,4 +1,4 @@ -import { AnimationBuilder } from '../../interface'; +import { AnimationBuilder, Color, Mode } from '../../interface'; export interface ToastOptions { message?: string; @@ -10,7 +10,8 @@ export interface ToastOptions { translucent?: boolean; animated?: boolean; - mode?: string; + color?: Color; + mode?: Mode; keyboardClose?: boolean; id?: string; diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss index f1f791b5d69..596b87f1c41 100644 --- a/core/src/components/toast/toast.ios.scss +++ b/core/src/components/toast/toast.ios.scss @@ -4,7 +4,7 @@ // iOS Toast // -------------------------------------------------- -.toast-ios { +:host { --background: #{$toast-ios-background-color}; --button-color: #{$toast-ios-button-color}; --color: #{$toast-ios-title-color}; @@ -12,7 +12,7 @@ font-size: $toast-ios-title-font-size; } -.toast-ios .toast-wrapper { +.toast-wrapper { @include position-horizontal(10px, 10px); @include margin(auto); @include border-radius($toast-ios-border-radius); @@ -25,19 +25,15 @@ z-index: $z-index-overlay-wrapper; } -.toast-translucent-ios .toast-wrapper { +:host(.toast-translucent) .toast-wrapper { background: $toast-ios-translucent-background-color; backdrop-filter: $toast-ios-translucent-filter; } -.toast-ios .toast-wrapper.toast-middle { +.toast-wrapper.toast-middle { opacity: .01; } -.toast-ios .toast-message { +.toast-message { @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start); } - -.toast-ios .toast-button { - color: var(--button-color); -} diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss index 03a29607148..afbfa1f3ef7 100644 --- a/core/src/components/toast/toast.md.scss +++ b/core/src/components/toast/toast.md.scss @@ -4,14 +4,14 @@ // Material Design Toast // -------------------------------------------------- -.toast-md { +:host { --background: #{$toast-md-background}; --color: #{$toast-md-title-color}; font-size: $toast-md-title-font-size; } -.toast-md .toast-wrapper { +.toast-wrapper { @include position-horizontal(0, 0); @include margin(auto); @@ -24,18 +24,18 @@ z-index: $z-index-overlay-wrapper; } -.toast-md .toast-wrapper.toast-top { +.toast-wrapper.toast-top { padding-top: var(--ion-safe-area-top, 0); } -.toast-md .toast-wrapper.toast-bottom { +.toast-wrapper.toast-bottom { padding-bottom: var(--ion-safe-area-bottom, 0); } -.toast-md .toast-wrapper.toast-middle { +.toast-wrapper.toast-middle { opacity: .01; } -.toast-md .toast-message { +.toast-message { @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start); } diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss index fdb00aad119..76032e2f6f5 100644 --- a/core/src/components/toast/toast.scss +++ b/core/src/components/toast/toast.scss @@ -3,7 +3,9 @@ // Toast // -------------------------------------------------- -ion-toast { +:host { + --button-color: inherit; + /** * @prop --background: Background of the toast * @prop --button-color: Color of the button text @@ -26,6 +28,12 @@ ion-toast { pointer-events: none; } +:host(.ion-color) { + --color: #{current-color(contrast)}; + --background: #{current-color(base)}; + --button-color: inherit; +} + .toast-wrapper { background: var(--background); } @@ -42,7 +50,6 @@ ion-toast { bottom: 0; } - .toast-container { display: flex; @@ -53,7 +60,7 @@ ion-toast { } .toast-button { - --color: inherit; + color: var(--button-color); font-size: $toast-button-font-size; } diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx index d1a45d8735a..3fee9a16e86 100644 --- a/core/src/components/toast/toast.tsx +++ b/core/src/components/toast/toast.tsx @@ -1,8 +1,8 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Method, Prop } from '@stencil/core'; -import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; +import { Animation, AnimationBuilder, Color, Config, Mode, OverlayEventDetail, OverlayInterface } from '../../interface'; import { dismiss, eventMethod, present } from '../../utils/overlays'; -import { createThemedClasses, getClassMap } from '../../utils/theme'; +import { createColorClasses, getClassMap } from '../../utils/theme'; import { iosEnterAnimation } from './animations/ios.enter'; import { iosLeaveAnimation } from './animations/ios.leave'; @@ -14,7 +14,8 @@ import { mdLeaveAnimation } from './animations/md.leave'; styleUrls: { ios: 'toast.ios.scss', md: 'toast.md.scss' - } + }, + shadow: true }) export class Toast implements ComponentInterface, OverlayInterface { @@ -38,6 +39,13 @@ export class Toast implements ComponentInterface, OverlayInterface { */ @Prop() mode!: Mode; + /** + * 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). + */ + @Prop() color?: Color; + /** * Animation to use when the toast is presented. */ @@ -173,16 +181,14 @@ export class Toast implements ComponentInterface, OverlayInterface { } hostData() { - const themedClasses = this.translucent ? createThemedClasses(this.mode, 'toast-translucent') : {}; - return { style: { zIndex: 60000 + this.overlayIndex, }, class: { - ...themedClasses, - ...createThemedClasses(this.mode, 'toast'), - ...getClassMap(this.cssClass) + ...createColorClasses(this.color), + ...getClassMap(this.cssClass), + 'toast-translucent': this.translucent } }; }