feat(Input): add disabled option to input

kodiak-packages · Nov 2, 2020 · 980a7fd · 980a7fd
1 parent 8b3a58b
commit 980a7fd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/components/Input/Input.mdx b/src/components/Input/Input.mdx
@@ -24,6 +24,18 @@ A Input can be used to let the user insert text using key strokes. A crucial for
   <Input name="firstname" />
 </Playground>
 
+### Input with error
+
+<Playground>
+  <Input name="username" isInvalid />
+</Playground>
+
+### Disabled input
+
+<Playground>
+  <Input name="username" value="fff" isDisabled />
+</Playground>
+
 ### Listening for changes
 
 <Playground>
@@ -55,12 +67,6 @@ A Input can be used to let the user insert text using key strokes. A crucial for
 }
 ```
 
-### Input with error
-
-<Playground>
-  <Input name="username" isInvalid />
-</Playground>
-
 ### Format a serial code
 
 <Playground>

diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css
@@ -16,6 +16,10 @@
   box-shadow: 0 0 0 3px var(--color-focus);
 }
 
+.input:disabled {
+  color: var(--color-neutral-7);
+}
+
 .containsError {
   border-color: var(--color-error);
 }

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -41,7 +41,7 @@ const Input = React.forwardRef<HTMLInputElement, Props>(
       cssReset.ventura,
       styles.input,
       {
-        [styles.containsError]: Boolean(isInvalid),
+        [styles.containsError]: isInvalid,
       },
       className,
     );