diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src')
5 files changed, 41 insertions, 42 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx index 25cde0e9a..fb044acbc 100644 --- a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx @@ -37,7 +37,7 @@ const Container = styled.div` } `; -const BasicExample = (variant: Props["variant"]): VNode => { +const Input = (variant: Props["variant"]): VNode => { const [value, onChange] = useState(""); return ( <Container> @@ -80,9 +80,8 @@ const BasicExample = (variant: Props["variant"]): VNode => { ); }; -export const Standard = (): VNode => BasicExample("standard"); -export const Filled = (): VNode => BasicExample("filled"); -export const Outlined = (): VNode => BasicExample("outlined"); +export const InputStandard = (): VNode => Input("standard"); +export const InputFilled = (): VNode => Input("filled"); export const Color = (): VNode => { const [value, onChange] = useState(""); @@ -92,40 +91,53 @@ export const Color = (): VNode => { variant="standard" label="Outlined secondary" color="secondary" + {...{ value, onChange }} + /> + <TextField + label="Filled success" + variant="standard" + color="success" + {...{ value, onChange }} + /> + <TextField + label="Standard warning" + variant="standard" + color="warning" + {...{ value, onChange }} /> - <TextField label="Filled success" variant="standard" color="success" /> - <TextField label="Standard warning" variant="standard" color="warning" /> </Container> ); }; -export const Multiline = (): VNode => { +const Multiline = (variant: Props["variant"]): VNode => { const [value, onChange] = useState(""); return ( <Container> <TextField {...{ value, onChange }} label="Multiline" - variant="standard" + variant={variant} multiline /> <TextField {...{ value, onChange }} label="Max row 4" - variant="standard" + variant={variant} multiline maxRows={4} /> <TextField {...{ value, onChange }} label="Row 10" - variant="standard" + variant={variant} multiline rows={10} /> </Container> ); }; +export const MultilineStandard = (): VNode => Multiline("standard"); +export const MultilineFilled = (): VNode => Multiline("filled"); export const Select = (): VNode => { const [value, onChange] = useState(""); diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx index eccb1eb4e..82fc155ef 100644 --- a/packages/taler-wallet-webextension/src/mui/TextField.tsx +++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx @@ -18,7 +18,6 @@ import { FormControl } from "./input/FormControl.js"; import { FormHelperText } from "./input/FormHelperText.js"; import { InputFilled } from "./input/InputFilled.js"; import { InputLabel } from "./input/InputLabel.js"; -import { InputOutlined } from "./input/InputOutlined.js"; import { InputStandard } from "./input/InputStandard.js"; import { SelectFilled } from "./input/SelectFilled.js"; import { SelectOutlined } from "./input/SelectOutlined.js"; @@ -57,13 +56,13 @@ export interface Props { const inputVariant = { standard: InputStandard, filled: InputFilled, - outlined: InputOutlined, + outlined: InputStandard, }; const selectVariant = { standard: SelectStandard, filled: SelectFilled, - outlined: SelectOutlined, + outlined: SelectStandard, }; export function TextField({ diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx index 09cf46eaa..fc16b7ce4 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx @@ -34,10 +34,6 @@ const rootStyle = css` cursor: text; display: inline-flex; align-items: center; - - [data-multiline] { - padding: 4px 0 5px; - } `; const rootDisabledStyle = css` color: ${theme.palette.text.disabled}; @@ -64,6 +60,7 @@ export function InputBaseRoot({ <div data-disabled={disabled} data-focused={focused} + data-multiline={multiline} data-error={error} class={[ _class, @@ -485,7 +482,7 @@ export function TextareaAutoSize({ class={[ componentStyle, componentMultilineStyle, - // _class, + _class, disabled && componentDisabledStyle, // size === "small" && componentSmallStyle, multiline && componentMultilineStyle, @@ -503,7 +500,7 @@ export function TextareaAutoSize({ overflow: state.overflow ? "hidden" : null, ...style, }} - // {...props} + {...props} /> <textarea diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx index b0ed5ab7c..53c6da295 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx @@ -99,12 +99,15 @@ const filledRootStyle = css` background-color: ${backgroundColor}; } } - [data-focused] { + &[data-focused] { background-color: ${backgroundColor}; } - [data-disabled] { + &[data-disabled] { background-color: ${backgroundColorDisabled}; } + &[data-multiline] { + padding: 25px 12px 8px; + } `; const underlineStyle = css` @@ -159,12 +162,20 @@ const underlineStyle = css` } `; -function Root({ fullWidth, disabled, focused, error, children }: any): VNode { +function Root({ + fullWidth, + disabled, + focused, + error, + children, + multiline, +}: any): VNode { return ( <InputBaseRoot disabled={disabled} focused={focused} fullWidth={fullWidth} + multiline={multiline} error={error} class={[filledRootStyle, underlineStyle].join(" ")} > diff --git a/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx b/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx deleted file mode 100644 index 22dd2990d..000000000 --- a/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx +++ /dev/null @@ -1,20 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ -import { h, VNode } from "preact"; - -export function InputOutlined(): VNode { - return <div />; -} |