Add textarea styles (#88)

saleor · Nov 25, 2021 · 538a94e · 538a94e
1 parent 9ae0107
commit 538a94e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/theme/createSaleorTheme/overrides/inputs.ts b/src/theme/createSaleorTheme/overrides/inputs.ts
@@ -100,6 +100,11 @@ export const inputOverrides = (colors: SaleorThemeColors): Overrides => ({
       padding: "10px 0",
       position: "relative",
     },
+    multiline: {
+      "&$disabled": {
+        background: colors.background.default,
+      },
+    },
     root: {
       "& fieldset": {
         top: 0,
@@ -111,7 +116,7 @@ export const inputOverrides = (colors: SaleorThemeColors): Overrides => ({
         "& fieldset": {
           borderColor: `${colors.disabled} !important`,
         },
-        "& input": {
+        "& input, & textarea": {
           backgroundColor: colors.background.default,
           color: colors.main[3],
         },

diff --git a/stories/inputs.stories.tsx b/stories/inputs.stories.tsx
@@ -37,9 +37,11 @@ const Default: React.FC = () => {
       <div className={classes.inputs}>
         <TextField {...typographyProps} />
         <TextField {...typographyProps} value="Filled Text" />
+        <TextField {...typographyProps} multiline value="Multiline" />
 
         <TextField {...typographyProps} disabled />
         <TextField {...typographyProps} value="Filled Text" disabled />
+        <TextField {...typographyProps} multiline value="Multiline" disabled />
 
         <TextField
           {...typographyProps}
@@ -52,6 +54,13 @@ const Default: React.FC = () => {
           value="Filled Text"
           helperText="Lorem ipsum dolor site amet consectetur adipiscing elit"
         />
+        <TextField
+          {...typographyProps}
+          error
+          multiline
+          value="Multiline"
+          helperText="Lorem ipsum dolor site amet consectetur adipiscing elit"
+        />
       </div>
     </div>
   );