From b06ae62de00a536525eac342c3dcb99d45c9eb86 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 22 Jun 2022 14:44:14 -0300
Subject: fix text field multiline

---
 .../src/mui/TextField.stories.tsx                  | 32 +++++++++++++++-------
 .../src/mui/TextField.tsx                          |  5 ++--
 .../src/mui/input/InputBase.tsx                    |  9 ++----
 .../src/mui/input/InputFilled.tsx                  | 17 ++++++++++--
 .../src/mui/input/InputOutlined.tsx                | 20 --------------
 5 files changed, 41 insertions(+), 42 deletions(-)
 delete mode 100644 packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx

(limited to 'packages/taler-wallet-webextension/src')

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 />;
-}
-- 
cgit v1.2.3