Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(toast): add "color" prop #16100

Merged
merged 3 commits into from
Oct 26, 2018
Merged

feat(toast): add "color" prop #16100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f94f890
feat(toast): add "color" prop
manucorporat Oct 26, 2018
6b07300
fix lint issue
manucorporat Oct 26, 2018
5ef2202
Merge branch 'master' into color-toast
manucorporat Oct 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -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[];
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/action-sheet/action-sheet-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AnimationBuilder } from '../../interface';
import { AnimationBuilder, Mode } from '../../interface';

export interface ActionSheetOptions {
header?: string;
Expand All @@ -8,7 +8,7 @@ export interface ActionSheetOptions {
backdropDismiss?: boolean;
translucent?: boolean;
animated?: boolean;
mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

Expand Down
4 changes: 2 additions & 2 deletions core/src/components/alert/alert-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AnimationBuilder, TextFieldTypes } from '../../interface';
import { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';

export interface AlertOptions {
header?: string;
Expand All @@ -11,7 +11,7 @@ export interface AlertOptions {
translucent?: boolean;
animated?: boolean;

mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

Expand Down
4 changes: 2 additions & 2 deletions core/src/components/loading/loading-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AnimationBuilder, SpinnerTypes } from '../../interface';
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';

export interface LoadingOptions {
spinner?: SpinnerTypes;
Expand All @@ -9,7 +9,7 @@ export interface LoadingOptions {
translucent?: boolean;
animated?: boolean;

mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

Expand Down
4 changes: 2 additions & 2 deletions core/src/components/modal/modal-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';

export interface ModalOptions<T extends ComponentRef = ComponentRef> {
component: T;
Expand All @@ -9,7 +9,7 @@ export interface ModalOptions<T extends ComponentRef = ComponentRef> {
delegate?: FrameworkDelegate;
animated?: boolean;

mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

Expand Down
4 changes: 2 additions & 2 deletions core/src/components/picker/picker-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AnimationBuilder } from '../../interface';
import { AnimationBuilder, Mode } from '../../interface';

export interface PickerOptions {
columns: PickerColumn[];
Expand All @@ -7,7 +7,7 @@ export interface PickerOptions {
backdropDismiss?: boolean;
animated?: boolean;

mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

Expand Down
4 changes: 2 additions & 2 deletions core/src/components/popover/popover-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';

export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
component: T;
Expand All @@ -11,7 +11,7 @@ export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
delegate?: FrameworkDelegate;
animated?: boolean;

mode?: string;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

Expand Down
31 changes: 16 additions & 15 deletions core/src/components/toast/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions core/src/components/toast/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">Show Color Toast</ion-button>

<ion-toast-controller></ion-toast-controller>

Expand Down
5 changes: 3 additions & 2 deletions core/src/components/toast/toast-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { AnimationBuilder } from '../../interface';
import { AnimationBuilder, Color, Mode } from '../../interface';

export interface ToastOptions {
message?: string;
Expand All @@ -10,7 +10,8 @@ export interface ToastOptions {
translucent?: boolean;
animated?: boolean;

mode?: string;
color?: Color;
mode?: Mode;
keyboardClose?: boolean;
id?: string;

Expand Down
14 changes: 5 additions & 9 deletions core/src/components/toast/toast.ios.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
// iOS Toast
// --------------------------------------------------

.toast-ios {
:host {
--background: #{$toast-ios-background-color};
--button-color: #{$toast-ios-button-color};
--color: #{$toast-ios-title-color};

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);
Expand All @@ -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);
}
12 changes: 6 additions & 6 deletions core/src/components/toast/toast.md.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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);
}
13 changes: 10 additions & 3 deletions core/src/components/toast/toast.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
}
Expand All @@ -42,7 +50,6 @@ ion-toast {
bottom: 0;
}


.toast-container {
display: flex;

Expand All @@ -53,7 +60,7 @@ ion-toast {
}

.toast-button {
--color: inherit;
color: var(--button-color);

font-size: $toast-button-font-size;
}
Expand Down
22 changes: 14 additions & 8 deletions core/src/components/toast/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 {

Expand All @@ -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.
*/
Expand Down Expand Up @@ -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
}
};
}
Expand Down