javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(toast): add stacked buttons functionality (#26790)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-02-15 09:56:02 -05:00
committed by GitHub
parent daa89a26ac
commit fc5fcc064d
24 changed files with 134 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
core/src/components/toast/toast.tsx
View File

@ -11,6 +11,7 @@ import type {
OverlayInterface,
ToastButton,
} from '../../interface';
import { printIonWarning } from '../../utils/logging';
import { dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
import type { IonicSafeString } from '../../utils/sanitization';
import { sanitizeDOMString } from '../../utils/sanitization';
@ -20,7 +21,7 @@ import { iosEnterAnimation } from './animations/ios.enter';
import { iosLeaveAnimation } from './animations/ios.leave';
import { mdEnterAnimation } from './animations/md.enter';
import { mdLeaveAnimation } from './animations/md.leave';
import type { ToastAttributes, ToastPosition } from './toast-interface';
import type { ToastAttributes, ToastPosition, ToastLayout } from './toast-interface';
// TODO(FW-2832): types
@ -87,6 +88,15 @@ export class Toast implements ComponentInterface, OverlayInterface {
*/
@Prop() header?: string;
/**
* Defines how the message and buttons are laid out in the toast.
* 'baseline': The message and the buttons will appear on the same line.
* Message text may wrap within the message container.
* 'stacked': The buttons containers and message will stack on top
* of each other. Use this if you have long text in your buttons.
*/
@Prop() layout: ToastLayout = 'baseline';
/**
* Message to be shown in the toast.
*/
@ -290,6 +300,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
}
render() {
const { layout, el } = this;
const allButtons = this.getButtons();
const startButtons = allButtons.filter((b) => b.side === 'start');
const endButtons = allButtons.filter((b) => b.side !== 'start');
@ -297,9 +308,21 @@ export class Toast implements ComponentInterface, OverlayInterface {
const wrapperClass = {
'toast-wrapper': true,
[`toast-${this.position}`]: true,
[`toast-layout-${layout}`]: true,
};
const role = allButtons.length > 0 ? 'dialog' : 'status';
/**
* Stacked buttons are only meant to be
* used with one type of button.
*/
if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
printIonWarning(
'This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.',
el
);
}
return (
<Host
aria-live="polite"