imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement new toast UI (#10467)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

3
src/components/views/toasts/GenericToast.tsx
View file

@ -18,6 +18,7 @@ import React, { ReactNode } from "react";
import AccessibleButton from "../elements/AccessibleButton";
import { XOR } from "../../../@types/common";
import { Caption } from "../typography/Caption";
export interface IProps {
description: ReactNode;
@ -40,7 +41,7 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
onAccept,
onReject,
}) => {
const detailContent = detail ? <div className="mx_Toast_detail">{detail}</div> : null;
const detailContent = detail ? <Caption className="mx_Toast_detail">{detail}</Caption> : null;
return (
<div>

5
src/components/views/typography/Caption.tsx
View file

@ -19,13 +19,14 @@ import React, { HTMLAttributes } from "react";
interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
children: React.ReactNode;
className?: string;
isError?: boolean;
}
export const Caption: React.FC<Props> = ({ children, isError, ...rest }) => {
export const Caption: React.FC<Props> = ({ children, className, isError, ...rest }) => {
return (
<span
className={classNames("mx_Caption", {
className={classNames("mx_Caption", className, {
mx_Caption_error: isError,
})}
{...rest}