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

chore(): sync with main

Browse Source
This commit is contained in:
Liam DeBeasi
2023-03-01 11:22:56 -05:00
parent 67578f6246 085a0c776b
commit 708ccbf808
74 changed files with 845 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,15 @@ import { Watch, Component, Element, Event, h, Host, Method, Prop } from '@stenci
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import type { AnimationBuilder, Color, CssClassMap, OverlayInterface, FrameworkDelegate } from '../../interface';
import type {
AnimationBuilder,
Color,
CssClassMap,
OverlayEventDetail,
OverlayInterface,
ToastButton,
} from '../../interface';
import { printIonWarning } from '../../utils/logging';
import {
createDelegateController,
createTriggerController,
@ -23,7 +31,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 { ToastButton, ToastPosition } from './toast-interface';
import type { ToastButton, ToastPosition, ToastLayout } from './toast-interface';
// TODO(FW-2832): types
@ -99,6 +107,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.
*/
@ -391,6 +408,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');
@ -398,9 +416,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"