fix text field multiline

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("");

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({

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

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(" ")}
     >

packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx

@@ -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 />;
-}