Add TextField

[nfiniteset]

As a developer
I want to add text fields to my application
So that my users can submit information to the application

Typical usage

setUserName(event) {
  this.setState({
    name: event.target.value,
  })
}

<TextField
  label="First and last name"
  disabled={false}
  onChange={this.setUserName}
  value={this.state.user.name}
  placeholder="John Doe"
/>

Complete props

Input.propTypes = {
  disabled: PropTypes.bool, // => disable() or enable()
  icon: PropTypes.string, // => setIcon(icon)
  initialValue: PropTypes.string, // => setValue(initialValue)
  instructions: PropTypes.string, // => setInstructions(instructions)
  label: PropTypes.string, // => setLabel(label)
  name: PropTypes.string, // => setName(name)
  onBlur: PropTypes.func, // => onBlur(callback)
  onChange: PropTypes.func, // => onChange(callback)
  onFocus: PropTypes.func, // => onFocus(callback)
  placeholder: PropTypes.string, // => setPlaceholder(placeholder)
  required: PropTypes.string // => required(requiredText) or noLongerRequired()
  value: PropTypes.bool, // => setValue(value)
}

---

TODO

• [x] Add PropTypes
• [x] Add docgenInfo
• [x] Add unit test coverage
• [x] Add to playground
• [x] Add to storybook
  • [x] With code sample
  • [x] With props table
• [ ] Canary build on NPM

[camwest]

I see initialValue in the typical usage but not in the complete props. Is this correct?

What props are being mapped directly from hig.web versus new props?

[nfiniteset]

I overlooked that and placeholder. Added initialValue and placeholder to props. Also added comments noting which hig function each prop maps to.

[camwest]

Nice. Those comments are fantastic. I think this is a good format.