icons and disabled state and more descriptive text

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)
 

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",

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>

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>
  );

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>
  )}