Implement new toast UI (#10467)
* Implement new toast UI * Use PCSS vars and Caption component * Add GenericToast-test * Tweak call toast * Fix code style
This commit is contained in:
parent
e350b4c2c2
commit
7632f36624
14 changed files with 206 additions and 66 deletions
|
@ -57,10 +57,10 @@ export default class ToastContainer extends React.Component<{}, IState> {
|
|||
let containerClasses;
|
||||
if (totalCount !== 0) {
|
||||
const topToast = this.state.toasts[0];
|
||||
const { title, icon, key, component, className, bodyClassName, props } = topToast;
|
||||
const { title, icon, iconElement, key, component, className, bodyClassName, props } = topToast;
|
||||
const bodyClasses = classNames("mx_Toast_body", bodyClassName);
|
||||
const toastClasses = classNames("mx_Toast_toast", className, {
|
||||
mx_Toast_hasIcon: icon,
|
||||
mx_Toast_hasIcon: icon || iconElement,
|
||||
[`mx_Toast_icon_${icon}`]: icon,
|
||||
});
|
||||
const toastProps = Object.assign({}, props, {
|
||||
|
@ -86,6 +86,7 @@ export default class ToastContainer extends React.Component<{}, IState> {
|
|||
|
||||
toast = (
|
||||
<div className={toastClasses}>
|
||||
{iconElement}
|
||||
{titleElement}
|
||||
<div className={bodyClasses}>{content}</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue