diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui/Button.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/mui/Button.tsx | 21 |
1 files changed, 16 insertions, 5 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx index 451b1d48d..3f8702f88 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.tsx @@ -1,7 +1,7 @@ import { ComponentChildren, h, VNode, JSX } from "preact"; import { css } from "@linaria/core"; // eslint-disable-next-line import/extensions -import { theme, ripple, Colors } from "./style"; +import { theme, ripple, Colors, rippleOutlined } from "./style"; // eslint-disable-next-line import/extensions import { alpha } from "./colors/manipulation"; @@ -31,12 +31,13 @@ interface Props { disableFocusRipple?: boolean; endIcon?: string | VNode; fullWidth?: boolean; + style?: h.JSX.CSSProperties; href?: string; size?: "small" | "medium" | "large"; startIcon?: VNode | string; variant?: "contained" | "outlined" | "text"; color?: Colors; - onClick?: () => void; + onClick?: () => Promise<void>; } const button = css` @@ -199,6 +200,7 @@ export function Button({ fullWidth, variant = "text", size = "medium", + style: parentStyle, color = "primary", onClick, }: Props): VNode { @@ -267,12 +269,15 @@ export function Button({ colorVariant[variant], sizeVariant[variant][size], ].join(" ")} + containedRipple={variant === "contained"} onClick={onClick} style={{ + ...parentStyle, "--color-main": theme.palette[color].main, "--color-contrastText": theme.palette[color].contrastText, "--color-main-alpha-half": alpha(theme.palette[color].main, 0.5), "--color-dark": theme.palette[color].dark, + "--color-light": theme.palette[color].light, "--color-main-alpha-opacity": alpha( theme.palette[color].main, theme.palette.action.hoverOpacity, @@ -295,13 +300,15 @@ export function Button({ interface BaseProps extends JSX.HTMLAttributes<HTMLButtonElement> { class: string; - onClick?: () => void; + onClick?: () => Promise<void>; + containedRipple?: boolean; children?: ComponentChildren; } function ButtonBase({ class: _class, children, + containedRipple, onClick, dangerouslySetInnerHTML, ...rest @@ -309,7 +316,11 @@ function ButtonBase({ function doClick(): void { if (onClick) onClick(); } - const classNames = [buttonBaseStyle, _class, ripple].join(" "); + const classNames = [ + buttonBaseStyle, + _class, + containedRipple ? ripple : rippleOutlined, + ].join(" "); if (dangerouslySetInnerHTML) { return ( <button @@ -332,7 +343,7 @@ export function IconButton({ onClick, }: { svg: any; - onClick?: () => void; + onClick?: () => Promise<void>; }): VNode { return ( <ButtonBase |