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:
Michael Weimann 2023-04-18 13:38:41 +02:00 committed by GitHub
parent e350b4c2c2
commit 7632f36624
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 206 additions and 66 deletions

View file

@ -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>