Add disabled TextField to storybook. Fix style for error state.

packages/components/src/components/TextField/TextField.style.ts

@@ -5,14 +5,14 @@ export type TextFieldStyleProps = {
   disabled?: boolean
   focus?: boolean
   error?: boolean
-  isActive: boolean
+  isActive?: boolean
 }
 
 export let makeStyles = ({
   disabled = false,
   focus = false,
   error = false,
-  isActive
+  isActive = false
 }: TextFieldStyleProps) => {
 
   const borderColor = disabled ? colors.gray[200] :
@@ -27,6 +27,7 @@ export let makeStyles = ({
       height: 50px;
       font-family: ${typography.fonts.base};
       display: inline-flex;
+      cursor: ${disabled ? "not-allowed" : "default"};
     `,
     border: css`
       position: absolute;
@@ -40,7 +41,7 @@ export let makeStyles = ({
       justify-content: left;
     `,
     label: css`
-      color: ${colors.gray[400]};
+      color: ${error ? colors.error : colors.gray[400]};
       padding: 0 10px;
       background-color: ${colors.black};
       transition: all 0.1s linear;

packages/components/src/components/TextField/TextField.tsx

@@ -9,7 +9,6 @@ type TextFieldProps = {
   value?: string,
   icon?: IconProp
   iconPosition?: "right" | "left"
-  disabled?: boolean
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
   onChange?: (e: React.ChangeEvent) => void
 } & TextFieldStyleProps
@@ -28,7 +27,7 @@ export default function TextField({
   const inputRef = useRef(null)
   const [isActive, setIsActive] = useState(!!value)
   const [inputTextValue, setInputTextValue] = useState(value)
-  const styles = makeStyles({ isActive, ...styleProps })
+  const styles = makeStyles({ isActive, disabled, ...styleProps })
 
   useEffect(() => {
     if (isActive) {
@@ -40,7 +39,7 @@ export default function TextField({
   }, [isActive, inputRef]);
 
   function onTextFieldClick() {
-    setIsActive(true)
+    if (!disabled) setIsActive(true)
   }
 
   function onInputTextBlur() {
@@ -48,8 +47,7 @@ export default function TextField({
   }
 
   function onInputTextChange(event: React.FormEvent<HTMLInputElement>): React.ChangeEventHandler {
-    if (disabled) return
-    setInputTextValue(event.currentTarget.value)
+    if (!disabled) setInputTextValue(event.currentTarget.value)
   }
   
   return (

packages/components/stories/06-TextField.stories.tsx

@@ -22,4 +22,16 @@ export const Error = () => (
   <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
     <TextField label="Label" error={true} />
   </div>
-)
+)
+
+export const Disabled = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <TextField label="Label" disabled={true} />
+  </div>
+)
+
+export const DisabledWithValue = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <TextField label="Label" value="Disabled" disabled={true} />
+  </div>
+)