fix: disabled input for flushed variant

chakra-ui · Aug 13, 2022 · 8eb7931 · 8eb7931 · vercel · Aug 13, 2022
1 parent 3dc27e0
commit 8eb7931
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/gentle-keys-care.md b/.changeset/gentle-keys-care.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/theme": patch
+---
+
+Fix issue where disabled input with flushed or unstyled variant isn't
+perceivable.
diff --git a/packages/theme/src/components/input.ts b/packages/theme/src/components/input.ts
@@ -172,6 +172,10 @@ const variantFlushed: PartsStyleFunction<typeof parts> = (props) => {
         borderColor: getColor(theme, fc),
         boxShadow: `0px 1px 0px 0px ${getColor(theme, fc)}`,
       },
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed",
+      },
     },
     addon: {
       borderBottom: "2px solid",
@@ -188,6 +192,10 @@ const variantUnstyled: PartsStyleObject<typeof parts> = {
     bg: "transparent",
     px: 0,
     height: "auto",
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed",
+    },
   },
   addon: {
     bg: "transparent",