Fix input styles

buildo · Oct 21, 2024 · 166dcc9 · 166dcc9
1 parent 52991a8
commit 166dcc9
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 54 deletions.
diff --git a/packages/bento-design-system/src/Field/Field.css.ts b/packages/bento-design-system/src/Field/Field.css.ts
@@ -1,4 +1,4 @@
-import { createVar } from "@vanilla-extract/css";
+import { createVar, style } from "@vanilla-extract/css";
 import { bentoSprinkles } from "../internal/sprinkles.css";
 import { strictRecipe } from "../util/strictRecipe";
 import { vars } from "../vars.css";
@@ -7,66 +7,79 @@ export const readOnlyBackground = createVar();
 
 const notDisabled = ":not(:disabled):not([disabled])";
 
-export const inputRecipe = strictRecipe({
-  base: [
-    {
-      "::placeholder": {
-        color: vars.textColor.textSecondary,
-      },
-      selectors: {
-        "&:disabled, &[disabled]": {
-          background: vars.backgroundColor.backgroundPrimary,
+export const input = style({
+  background: "transparent",
+  "::placeholder": {
+    color: vars.textColor.textSecondary,
+  },
+  selectors: {
+    [`&:disabled::placeholder`]: {
+      color: vars.textColor.textDisabled,
+    },
+  },
+});
+
+const inputContainerRecipeVariants = {
+  validation: {
+    valid: [
+      bentoSprinkles({
+        boxShadow: {
+          default: "outlineInputEnabled",
+          hover: "outlineInputHover",
+          focus: "outlineInputFocus",
         },
-        "&:disabled::placeholder": {
-          color: vars.textColor.textDisabled,
+      }),
+      {
+        selectors: {
+          [`&:focus-within${notDisabled}`]: {
+            boxShadow: vars.boxShadow.outlineInputFocus,
+          },
         },
-        [`input&:read-only${notDisabled}, textarea&:read-only${notDisabled}, &.readOnly${notDisabled}, &[readonly]${notDisabled}`]:
-          {
-            background: readOnlyBackground,
+      },
+    ],
+    invalid: [
+      bentoSprinkles({
+        boxShadow: {
+          default: "outlineNegative",
+          focus: "outlineNegativeStrong",
+        },
+      }),
+      {
+        selectors: {
+          [`&:focus-within${notDisabled}`]: {
+            boxShadow: vars.boxShadow.outlineNegativeStrong,
           },
+        },
       },
-    },
+    ],
+    notSet: {},
+  },
+} as const;
+
+export const inputContainerRecipe = strictRecipe({
+  base: [
     bentoSprinkles({
       boxShadow: {
         disabled: "outlineInputDisabled",
       },
       outline: "none",
     }),
-  ],
-  variants: {
-    validation: {
-      valid: [
-        bentoSprinkles({
-          boxShadow: {
-            default: "outlineInputEnabled",
-            hover: "outlineInputHover",
-            focus: "outlineInputFocus",
-          },
-        }),
-        {
-          selectors: {
-            [`&:focus-within${notDisabled}`]: {
-              boxShadow: vars.boxShadow.outlineInputFocus,
-            },
-          },
+    {
+      selectors: {
+        [`&:disabled${notDisabled}, &[disabled]${notDisabled}`]: {
+          background: vars.backgroundColor.backgroundPrimary,
         },
-      ],
-      invalid: [
-        bentoSprinkles({
-          boxShadow: {
-            default: "outlineNegative",
-            focus: "outlineNegativeStrong",
-          },
-        }),
-        {
-          selectors: {
-            [`&:focus-within${notDisabled}`]: {
-              boxShadow: vars.boxShadow.outlineNegativeStrong,
-            },
+        [`input&:read-only${notDisabled}, textarea&:read-only${notDisabled}, &.readOnly${notDisabled}, &[readonly]${notDisabled}`]:
+          {
+            background: readOnlyBackground,
           },
-        },
-      ],
-      notSet: {},
+      },
     },
-  },
+  ],
+  variants: inputContainerRecipeVariants,
+});
+
+export const inputRecipe = strictRecipe({
+  base: input,
+  variants: inputContainerRecipeVariants,
 });
diff --git a/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx b/packages/bento-design-system/src/NumberField/BaseNumberInput.tsx
@@ -1,7 +1,7 @@
 import { useLocale } from "@react-aria/i18n";
 import { useMemo } from "react";
 import { Label, LocalizedString, Box, Children, Columns } from "..";
-import { inputRecipe } from "../Field/Field.css";
+import { inputContainerRecipe, input } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
 import { BaseNumberProps, FormatProps } from "./types";
 import { useBentoConfig } from "../BentoConfigContext";
@@ -76,7 +76,9 @@ export function BaseNumberInput(props: Props) {
 
   return (
     <Box
-      className={inputRecipe({ validation: props.isReadOnly ? "notSet" : props.validationState })}
+      className={inputContainerRecipe({
+        validation: props.isReadOnly ? "notSet" : props.validationState,
+      })}
       display="flex"
       paddingX={config.paddingX}
       paddingY={config.paddingY}
@@ -93,6 +95,7 @@ export function BaseNumberInput(props: Props) {
         width="full"
         height={undefined}
         className={[
+          input,
           bodyRecipe({
             color: props.disabled ? "disabled" : "primary",
             weight: "default",

diff --git a/packages/bento-design-system/src/TextField/BaseTextInput.tsx b/packages/bento-design-system/src/TextField/BaseTextInput.tsx
@@ -3,7 +3,7 @@ import { Box } from "../Box/Box";
 import { Children } from "../util/Children";
 import { LocalizedString } from "../util/LocalizedString";
 import { getRadiusPropsFromConfig } from "../util/BorderRadiusConfig";
-import { inputRecipe } from "../Field/Field.css";
+import { inputContainerRecipe, input } from "../Field/Field.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
 import { getReadOnlyBackgroundStyle } from "../Field/utils";
 import { match } from "ts-pattern";
@@ -62,13 +62,17 @@ export function BaseTextInput(props: Props) {
   return (
     <Box
       display="flex"
-      className={inputRecipe({ validation: "valid" })}
+      className={inputContainerRecipe({
+        validation: props.isReadOnly ? "notSet" : props.validationState ?? "notSet",
+      })}
       gap={config.internalSpacing}
       paddingX={config.paddingX}
       paddingY={config.paddingY}
       background={config.background.default}
       {...getRadiusPropsFromConfig(config.radius)}
       style={getReadOnlyBackgroundStyle(config)}
+      disabled={props.disabled}
+      readOnly={props.isReadOnly}
     >
       {props.leftAccessory && (
         <Box display="flex" justifyContent="center" alignItems="center">
@@ -86,6 +90,7 @@ export function BaseTextInput(props: Props) {
         width="full"
         height={undefined}
         className={[
+          input,
           bodyRecipe({
             color: props.disabled ? "disabled" : "primary",
             weight: "default",