fix: helper text padding & input height

saleor · Apr 12, 2023 · a3a4cd1 · a3a4cd1
1 parent 2647ddb
commit a3a4cd1
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git a/src/components/BaseInput/BaseInput.css.ts b/src/components/BaseInput/BaseInput.css.ts
@@ -12,6 +12,8 @@ export const labelRecipe = recipe({
       borderRadius: 3,
       paddingY: 4,
       cursor: "text",
+      borderWidth: 1,
+      borderStyle: "solid",
     }),
   ],
   variants: {
@@ -49,7 +51,6 @@ export const labelRecipe = recipe({
       },
       style: sprinkles({
         borderStyle: "solid",
-        borderWidth: 1,
         borderColor: "brandSubdued",
         backgroundColor: {
           default: "interactiveNeutralHighlightDefault",
@@ -68,8 +69,6 @@ export const labelRecipe = recipe({
         backgroundColor: {
           default: "interactiveNeutralHighlightDefault",
         },
-        borderStyle: "solid",
-        borderWidth: 1,
         borderColor: {
           default: "transparent",
           hover: "neutralHighlight",
@@ -84,8 +83,6 @@ export const labelRecipe = recipe({
       },
       style: sprinkles({
         backgroundColor: "interactiveNeutralHighlightDefault",
-        borderStyle: "solid",
-        borderWidth: 1,
         borderColor: "transparent",
       }),
     },
@@ -102,8 +99,6 @@ export const labelRecipe = recipe({
           focus: "interactiveNeutralHighlightDefault",
           hover: "interactiveNeutralHighlightHovering",
         },
-        borderStyle: "solid",
-        borderWidth: 1,
         borderColor: "transparent",
       }),
     },
@@ -114,8 +109,6 @@ export const labelRecipe = recipe({
       style: sprinkles({
         color: "textNeutralDisabled",
         backgroundColor: "interactiveNeutralHighlightDefault",
-        borderStyle: "solid",
-        borderWidth: 1,
         borderColor: "neutralHighlight",
       }),
     },
@@ -129,6 +122,16 @@ export const labelRecipe = recipe({
           default: "surfaceCriticalSubdued",
           hover: "surfaceCriticalSubdued",
         },
+        borderColor: "transparent",
+      }),
+    },
+    {
+      variants: {
+        error: true,
+        typed: true,
+      },
+      style: sprinkles({
+        borderColor: "transparent",
       }),
     },
   ],
@@ -236,5 +239,21 @@ export const inputRecipe = recipe({
   },
 });
 
+export const helperTextRecipe = recipe({
+  variants: {
+    size: {
+      small: sprinkles({
+        paddingX: 5,
+      }),
+      medium: sprinkles({
+        paddingX: 5,
+      }),
+      large: sprinkles({
+        paddingX: 6,
+      }),
+    },
+  },
+});
+
 export type LabelVariants = RecipeVariants<typeof labelRecipe>;
 export type InputVariants = RecipeVariants<typeof inputRecipe>;
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
@@ -5,7 +5,7 @@ import { classNames } from "~/utils";
 import { Option, ChangeHandler, useComboboxEvents } from "./useComboboxEvents";
 import { ComboboxWrapper } from "./ComboboxWrapper";
 import { List, Text, Box, PropsWithBox } from "..";
-import { inputRecipe, InputVariants } from "../BaseInput";
+import { helperTextRecipe, inputRecipe, InputVariants } from "../BaseInput";
 import { list, listItem, listWrapperRecipe } from "./Combobox.css";
 
 export type ComboboxProps = PropsWithBox<
@@ -115,7 +115,7 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
         </Box>
 
         {helperText && (
-          <Box paddingLeft={4}>
+          <Box className={helperTextRecipe({ size })}>
             <Text
               variant="caption"
               size={size}

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -5,7 +5,7 @@ import { classNames } from "~/utils";
 import { InputWrapper, useStateEvents } from "./InputWrapper";
 import { Box, PropsWithBox } from "../Box";
 import { Text } from "../Text";
-import { inputRecipe, InputVariants } from "../BaseInput";
+import { helperTextRecipe, inputRecipe, InputVariants } from "../BaseInput";
 
 export type InputProps = PropsWithBox<
   Omit<
@@ -69,7 +69,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           />
         </InputWrapper>
         {helperText && (
-          <Box paddingLeft={4}>
+          <Box className={helperTextRecipe({ size })}>
             <Text
               variant="caption"
               size={size}