icons and disabled state and more descriptive text

apollographql · Aug 3, 2019 · 0f74a3e · 0f74a3e
1 parent 187e00d
commit 0f74a3e
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Fix broken storybook (#39)
 - Remove top level Space Kit namespace in Storybook (#38)
 - Make Icon weight configurable (#33)
+- Text Inputs and Steppers [(#45)](https://github.com/apollographql/space-kit/pull/45)
 
 ## [`v0.6.2`](https://github.com/apollographql/space-kit/releases/tag/v0.6.2)
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,9 +49,7 @@
   },
   "dependencies": {
     "@emotion/core": "^10.0.14",
-    "@storybook/addon-actions": "^5.1.10",
-    "@types/react-input-autosize": "^2.0.1",
-    "react-input-autosize": "^2.2.1"
+    "@storybook/addon-actions": "^5.1.10"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",

diff --git a/src/Input/Input.story.tsx b/src/Input/Input.story.tsx
@@ -8,6 +8,7 @@ import React, { ComponentProps, cloneElement } from "react";
 import * as typography from "../typography";
 import * as colors from "../colors";
 import { Stepper } from "./Stepper";
+const IconSearch = require(`../../icons/IconSearch.tsx`).IconSearch;
 
 const VerticalInputGroup: React.FC<{
   inputProps?: Partial<Omit<ComponentProps<typeof Input>, "children">>;
@@ -122,23 +123,23 @@ storiesOf("Input", module).add("Catalog", () => (
           }
           label="Standard input"
           size="standard"
-          placeholder="Placeholder Text"
+          placeholder="Resting"
         />
         <Input
           data-force-hover-state={true}
           onChange={e =>
             action(`the text in this input is now ${e.target.value}`)
           }
           size="standard"
-          placeholder="Placeholder Text"
+          placeholder="Hover"
         />
         <Input
           data-force-focus-state={true}
           onChange={e =>
             action(`the text in this input is now ${e.target.value}`)
           }
           size="standard"
-          placeholder="Placeholder Text"
+          placeholder="Focused"
         />
         <Input
           data-force-focus-state={true}
@@ -147,15 +148,15 @@ storiesOf("Input", module).add("Catalog", () => (
           }
           size="standard"
           placeholder="Placeholder Text"
-          initialValue="Apollo"
+          initialValue="Focused and typing"
         />
         <Input
           disabled={true}
           onChange={e =>
             action(`the text in this input is now ${e.target.value}`)
           }
           size="standard"
-          placeholder="Placeholder Text"
+          placeholder="Disabled"
         />
       </VerticalInputGroup>
       <VerticalInputGroup
@@ -278,15 +279,88 @@ storiesOf("Input", module).add("Catalog", () => (
       >
         <Input
           icon={
-            <img
-              css={{ width: 20, height: 20, zIndex: 100 }}
-              src="http://estcon.utp.edu.my/icg/wp-content/uploads/2017/11/search-icon.png"
+            <IconSearch
+              css={{
+                color: colors.silver.darker,
+                zIndex: 10,
+                width: 14,
+                height: 14,
+              }}
+            />
+          }
+          onChange={e =>
+            action(`the text in this input is now ${e.target.value}`)
+          }
+          placeholder="Resting"
+        />
+        <Input
+          data-force-hover-state={true}
+          icon={
+            <IconSearch
+              css={{
+                color: colors.silver.darker,
+                zIndex: 10,
+                width: 14,
+                height: 14,
+              }}
+            />
+          }
+          onChange={e =>
+            action(`the text in this input is now ${e.target.value}`)
+          }
+          placeholder="Hover"
+        />
+        <Input
+          data-force-focus-state={true}
+          icon={
+            <IconSearch
+              css={{
+                color: colors.silver.darker,
+                zIndex: 10,
+                width: 14,
+                height: 14,
+              }}
+            />
+          }
+          onChange={e =>
+            action(`the text in this input is now ${e.target.value}`)
+          }
+          placeholder="Focused"
+        />
+        <Input
+          data-force-focus-state={true}
+          initialValue="Focused and typing"
+          icon={
+            <IconSearch
+              css={{
+                color: colors.silver.darker,
+                zIndex: 10,
+                width: 14,
+                height: 14,
+              }}
+            />
+          }
+          onChange={e =>
+            action(`the text in this input is now ${e.target.value}`)
+          }
+          placeholder="Focused and typing"
+        />
+        <Input
+          disabled={true}
+          icon={
+            <IconSearch
+              css={{
+                color: colors.silver.darker,
+                zIndex: 10,
+                width: 14,
+                height: 14,
+              }}
             />
           }
           onChange={e =>
             action(`the text in this input is now ${e.target.value}`)
           }
-          placeholder="Search..."
+          placeholder="Disabled"
         />
       </VerticalInputGroup>
     </DemoSection>

diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
@@ -112,15 +112,26 @@ export function Input({
           margin: 0,
           height: size === "standard" ? 36 : size === "small" ? 28 : 42,
           ...typography.base.base,
+          backgroundColor: disabled ? colors.silver.light : colors.white,
           border: "solid 1px",
           borderRadius: 4,
           borderColor: error ? colors.red.base : colors.silver.darker,
           ":focus, &[data-force-focus-state]": {
-            borderColor: colors.blue.light,
+            borderColor:
+              !disabled && !error
+                ? colors.blue.light
+                : error
+                ? colors.red.base
+                : colors.silver.darker,
             outline: "none",
           },
           ":hover,  &[data-force-hover-state]": {
-            borderColor: colors.grey.light,
+            borderColor:
+              !disabled && !error
+                ? colors.grey.light
+                : error
+                ? colors.red.base
+                : colors.silver.darker,
           },
         }}
         type="text"
@@ -130,6 +141,7 @@ export function Input({
           onChange(e);
           setInputtedText(e.target.value);
         }}
+        disabled={disabled}
       />
     </InputWrapper>
   );

diff --git a/src/Input/InputWrapper.tsx b/src/Input/InputWrapper.tsx
@@ -3,6 +3,8 @@ import { jsx } from "@emotion/core";
 import React from "react";
 import * as typography from "../typography";
 import * as colors from "../colors";
+const IconError = require(`../../icons/IconError.tsx`).IconError;
+const IconInfo = require(`../../icons/IconInfo.tsx`).IconInfo;
 
 interface Props {
   /**
@@ -81,8 +83,8 @@ export function InputWrapper({
             css={{
               position: "absolute",
               display: "inline-flex",
-              marginLeft: 7,
-              marginTop: 7,
+              marginLeft: 10,
+              marginTop: 10,
             }}
           >
             {icon}
@@ -92,6 +94,7 @@ export function InputWrapper({
         {(error || info) && (
           <div
             css={{
+              alignItems: "center",
               pointerEvents: "none",
               marginTop: 8,
               marginRight: 8,
@@ -100,6 +103,15 @@ export function InputWrapper({
               ...typography.base.small,
             }}
           >
+            {error ? (
+              <span>
+                <IconError css={{ marginRight: 8, width: 14, height: 14 }} />
+              </span>
+            ) : (
+              <span>
+                <IconInfo css={{ marginRight: 8, width: 14, height: 14 }} />
+              </span>
+            )}
             {error || info}
           </div>
         )}