Skip to content

Commit c982856

Browse files
manucorporatmanucorporat
authored
feat(toast): add "color" prop (ionic-team#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 ionic-team#16099
1 parent f014181 commit c982856

File tree

14 files changed

+75
-55
lines changed

14 files changed

+75
-55
lines changed

‎core/src/components.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4846,6 +4846,10 @@ export namespace Components {
48464846
*/
48474847
'closeButtonText'?: string;
48484848
/**
4849+
* 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).
4850+
*/
4851+
'color'?: Color;
4852+
/**
48494853
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
48504854
*/
48514855
'cssClass'?: string | string[];
@@ -4913,6 +4917,10 @@ export namespace Components {
49134917
*/
49144918
'closeButtonText'?: string;
49154919
/**
4920+
* 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).
4921+
*/
4922+
'color'?: Color;
4923+
/**
49164924
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
49174925
*/
49184926
'cssClass'?: string | string[];

‎core/src/components/action-sheet/action-sheet-interface.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AnimationBuilder } from '../../interface';
1+
import { AnimationBuilder, Mode } from '../../interface';
22

33
export interface ActionSheetOptions {
44
header?: string;
@@ -8,7 +8,7 @@ export interface ActionSheetOptions {
88
backdropDismiss?: boolean;
99
translucent?: boolean;
1010
animated?: boolean;
11-
mode?: string;
11+
mode?: Mode;
1212
keyboardClose?: boolean;
1313
id?: string;
1414

‎core/src/components/alert/alert-interface.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AnimationBuilder, TextFieldTypes } from '../../interface';
1+
import { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
22

33
export interface AlertOptions {
44
header?: string;
@@ -11,7 +11,7 @@ export interface AlertOptions {
1111
translucent?: boolean;
1212
animated?: boolean;
1313

14-
mode?: string;
14+
mode?: Mode;
1515
keyboardClose?: boolean;
1616
id?: string;
1717

‎core/src/components/loading/loading-interface.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AnimationBuilder, SpinnerTypes } from '../../interface';
1+
import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
22

33
export interface LoadingOptions {
44
spinner?: SpinnerTypes;
@@ -9,7 +9,7 @@ export interface LoadingOptions {
99
translucent?: boolean;
1010
animated?: boolean;
1111

12-
mode?: string;
12+
mode?: Mode;
1313
keyboardClose?: boolean;
1414
id?: string;
1515

‎core/src/components/modal/modal-interface.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
1+
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
22

33
export interface ModalOptions<T extends ComponentRef = ComponentRef> {
44
component: T;
@@ -9,7 +9,7 @@ export interface ModalOptions<T extends ComponentRef = ComponentRef> {
99
delegate?: FrameworkDelegate;
1010
animated?: boolean;
1111

12-
mode?: string;
12+
mode?: Mode;
1313
keyboardClose?: boolean;
1414
id?: string;
1515

‎core/src/components/picker/picker-interface.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AnimationBuilder } from '../../interface';
1+
import { AnimationBuilder, Mode } from '../../interface';
22

33
export interface PickerOptions {
44
columns: PickerColumn[];
@@ -7,7 +7,7 @@ export interface PickerOptions {
77
backdropDismiss?: boolean;
88
animated?: boolean;
99

10-
mode?: string;
10+
mode?: Mode;
1111
keyboardClose?: boolean;
1212
id?: string;
1313

‎core/src/components/popover/popover-interface.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
1+
import { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Mode } from '../../interface';
22

33
export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
44
component: T;
@@ -11,7 +11,7 @@ export interface PopoverOptions<T extends ComponentRef = ComponentRef> {
1111
delegate?: FrameworkDelegate;
1212
animated?: boolean;
1313

14-
mode?: string;
14+
mode?: Mode;
1515
keyboardClose?: boolean;
1616
id?: string;
1717

‎core/src/components/toast/readme.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,21 +20,22 @@ The toast can be dismissed automatically after a specific amount of time by pass
2020

2121
## Properties
2222

23-
| Property | Attribute | Description | Type |
24-
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------- |
25-
| `animated` | `animated` | If `true`, the toast will animate. Defaults to `true`. | `boolean` |
26-
| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string \| undefined` |
27-
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
28-
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` |
29-
| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder \| undefined` |
30-
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
31-
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder \| undefined` |
32-
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` |
33-
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
34-
| `overlayIndex` | `overlay-index` | | `number` |
35-
| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"bottom" \| "middle" \| "top"` |
36-
| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. Defaults to `false`. | `boolean` |
37-
| `translucent` | `translucent` | If `true`, the toast will be translucent. Defaults to `false`. | `boolean` |
23+
| Property | Attribute | Description | Type |
24+
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
25+
| `animated` | `animated` | If `true`, the toast will animate. Defaults to `true`. | `boolean` |
26+
| `closeButtonText` | `close-button-text` | Text to display in the close button. | `string \| undefined` |
27+
| `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` |
28+
| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` |
29+
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` |
30+
| `enterAnimation` | -- | Animation to use when the toast is presented. | `AnimationBuilder \| undefined` |
31+
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` |
32+
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `AnimationBuilder \| undefined` |
33+
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` |
34+
| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md"` |
35+
| `overlayIndex` | `overlay-index` | | `number` |
36+
| `position` | `position` | The position of the toast on the screen. Possible values: "top", "middle", "bottom". | `"bottom" \| "middle" \| "top"` |
37+
| `showCloseButton` | `show-close-button` | If `true`, the close button will be displayed. Defaults to `false`. | `boolean` |
38+
| `translucent` | `translucent` | If `true`, the toast will be translucent. Defaults to `false`. | `boolean` |
3839

3940

4041
## Events

‎core/src/components/toast/test/basic/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
2828
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
2929
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
30+
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">Show Color Toast</ion-button>
3031

3132
<ion-toast-controller></ion-toast-controller>
3233

‎core/src/components/toast/toast-interface.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AnimationBuilder } from '../../interface';
1+
import { AnimationBuilder, Color, Mode } from '../../interface';
22

33
export interface ToastOptions {
44
message?: string;
@@ -10,7 +10,8 @@ export interface ToastOptions {
1010
translucent?: boolean;
1111
animated?: boolean;
1212

13-
mode?: string;
13+
color?: Color;
14+
mode?: Mode;
1415
keyboardClose?: boolean;
1516
id?: string;
1617

0 commit comments

Comments
 (0)