Skip to content

refactor(toast): remove showCloseButton and closeButtonText #18957

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

Merged
merged 5 commits into from
Aug 20, 2019
Merged

refactor(toast): remove showCloseButton and closeButtonText #18957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b85b884
Remove close button
liamdebeasi Jul 30, 2019
67cb757
update tests
liamdebeasi Jul 30, 2019
aea6f98
update tests
liamdebeasi Jul 30, 2019
5302b7e
sync
liamdebeasi Aug 19, 2019
30e48df
add build
liamdebeasi Aug 19, 2019
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
2 changes: 0 additions & 2 deletions core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1203,7 +1203,6 @@ ion-title,css-prop,--color
ion-toast,shadow
ion-toast,prop,animated,boolean,true,false,false
ion-toast,prop,buttons,(string | ToastButton)[] | undefined,undefined,false,false
ion-toast,prop,closeButtonText,string | undefined,undefined,false,false
ion-toast,prop,color,string | undefined,undefined,false,false
ion-toast,prop,cssClass,string | string[] | undefined,undefined,false,false
ion-toast,prop,duration,number,0,false,false
Expand All @@ -1214,7 +1213,6 @@ ion-toast,prop,leaveAnimation,((Animation: Animation, baseEl: any, opts?: any) =
ion-toast,prop,message,string | undefined,undefined,false,false
ion-toast,prop,mode,"ios" | "md",undefined,false,false
ion-toast,prop,position,"bottom" | "middle" | "top",'bottom',false,false
ion-toast,prop,showCloseButton,boolean,false,false,false
ion-toast,prop,translucent,boolean,false,false,false
ion-toast,method,dismiss,dismiss(data?: any, role?: string | undefined) => Promise<boolean>
ion-toast,method,onDidDismiss,onDidDismiss() => Promise<OverlayEventDetail<any>>
Expand Down
16 changes: 0 additions & 16 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2691,10 +2691,6 @@ export namespace Components {
*/
'buttons'?: (ToastButton | string)[];
/**
* @deprecated Use `buttons` instead. Text to display in the close button.
*/
'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;
Expand Down Expand Up @@ -2754,10 +2750,6 @@ export namespace Components {
*/
'present': () => Promise<void>;
/**
* @deprecated Use `buttons` instead. If `true`, the close button will be displayed.
*/
'showCloseButton': boolean;
/**
* If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
'translucent': boolean;
Expand Down Expand Up @@ -5986,10 +5978,6 @@ declare namespace LocalJSX {
*/
'buttons'?: (ToastButton | string)[];
/**
* @deprecated Use `buttons` instead. Text to display in the close button.
*/
'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;
Expand Down Expand Up @@ -6046,10 +6034,6 @@ declare namespace LocalJSX {
*/
'position'?: 'top' | 'bottom' | 'middle';
/**
* @deprecated Use `buttons` instead. If `true`, the close button will be displayed.
*/
'showCloseButton'?: boolean;
/**
* If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
'translucent'?: boolean;
Expand Down
4 changes: 3 additions & 1 deletion core/src/components/app/test/safe-area/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@
const toast = await document.querySelector('ion-toast-controller')
.create({
message: 'Hello world!',
showCloseButton: true
buttons: [
{ text: 'Close', role: 'close' }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this be role: 'cancel'?

]
});
await toast.present();
}
Expand Down
32 changes: 15 additions & 17 deletions core/src/components/toast/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,23 +168,21 @@ export const ToastExample: React.FunctionComponent = () => {

## Properties

| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` |
| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| undefined` | `undefined` |
| `closeButtonText` | `close-button-text` | <span style="color:red">**[DEPRECATED]**</span> Use `buttons` instead. Text to display in the close button.<br/><br/> | `string \| undefined` | `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` | `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` | `undefined` |
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the toast is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` |
| `showCloseButton` | `show-close-button` | <span style="color:red">**[DEPRECATED]**</span> Use `buttons` instead. If `true`, the close button will be displayed.<br/><br/> | `boolean` | `false` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ----------- |
| `animated` | `animated` | If `true`, the toast will animate. | `boolean` | `true` |
| `buttons` | -- | An array of buttons for the toast. | `(string \| ToastButton)[] \| undefined` | `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` | `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` | `undefined` |
| `duration` | `duration` | How many milliseconds to wait before hiding the toast. By default, it will show until `dismiss()` is called. | `number` | `0` |
| `enterAnimation` | -- | Animation to use when the toast is presented. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `header` | `header` | Header to be shown in the toast. | `string \| undefined` | `undefined` |
| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `false` |
| `leaveAnimation` | -- | Animation to use when the toast is dismissed. | `((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) \| undefined` | `undefined` |
| `message` | `message` | Message to be shown in the toast. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `position` | `position` | The position of the toast on the screen. | `"bottom" \| "middle" \| "top"` | `'bottom'` |
| `translucent` | `translucent` | If `true`, the toast will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |


## Events
Expand Down
18 changes: 9 additions & 9 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 @@ -36,43 +36,43 @@
Header Toast
</ion-button>

<ion-button expand="block" onclick="presentToastWithOptions({header: 'Toast header', message: 'Really long message that should go all of the way to the button', showCloseButton: true, closeButtonText: 'Action'})">
<ion-button expand="block" onclick="presentToastWithOptions({header: 'Toast header', message: 'Really long message that should go all of the way to the button', buttons: ['Action'] })">
Header + Action Toast
</ion-button>

<ion-button expand="block" id="two-line-toast" onclick="presentToastWithOptions({message: 'Two-line message\nwith action.', showCloseButton: true, closeButtonText: 'Action'})">
<ion-button expand="block" id="two-line-toast" onclick="presentToastWithOptions({message: 'Two-line message\nwith action.', buttons: ['Action'] })">
Long Message
</ion-button>

<ion-button expand="block" id="close-button-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">
<ion-button expand="block" id="close-button-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'] })">
Close Button
</ion-button>

<ion-button expand="block" id="custom-close-text-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">
<ion-button expand="block" id="custom-close-text-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['closing time'] })">
Custom Close Button
</ion-button>

<ion-button expand="block" id="custom-action-buttons-toast" onclick="presentToastWithButtonOptions()">
Custom Buttons
</ion-button>

<ion-button expand="block" id="translucent-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">
<ion-button expand="block" id="translucent-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], translucent: true})">
Translucent Toast
</ion-button>

<ion-button expand="block" id="color-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">
<ion-button expand="block" id="color-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], color: 'danger'})">
Color Toast
</ion-button>

<ion-button expand="block" id="custom-class-toast" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'my-custom-class'})">
<ion-button expand="block" id="custom-class-toast" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], cssClass: 'my-custom-class'})">
Custom Class
</ion-button>

<ion-button expand="block" id="toast-start-and-end" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'toast-start-and-end'})">
<ion-button expand="block" id="toast-start-and-end" onclick="presentToastWithOptions({message: 'click to close', buttons: ['Close'], cssClass: 'toast-start-and-end'})">
Show Toast with start-end position
</ion-button>

<ion-button expand="block" id="toast-html" onclick="presentToastWithOptions({message: '<ion-button>Button in a Toast!</ion-button>', showCloseButton: true})">
<ion-button expand="block" id="toast-html" onclick="presentToastWithOptions({message: '<ion-button>Button in a Toast!</ion-button>', buttons: ['Close'] })">
Show HTML Toast
</ion-button>

Expand Down
Loading