aboutsummaryrefslogtreecommitdiff
path: root/packages
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2022-06-22 14:44:14 -0300
committerSebastian <sebasjm@gmail.com>2022-06-23 12:01:11 -0300
commitb06ae62de00a536525eac342c3dcb99d45c9eb86 (patch)
tree7cadf727cfc0522aac336a2e935a520eb1f3791e /packages
parentea0baf25084bf549b2355d8f698aecb909a3e9d4 (diff)
fix text field multiline
Diffstat (limited to 'packages')
-rw-r--r--packages/taler-wallet-webextension/src/mui/TextField.stories.tsx32
-rw-r--r--packages/taler-wallet-webextension/src/mui/TextField.tsx5
-rw-r--r--packages/taler-wallet-webextension/src/mui/input/InputBase.tsx9
-rw-r--r--packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx17
-rw-r--r--packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx20
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 />;
-}