Terra-core: Uplift Form Input Styles

Created on 3 Jan 2018  路  7Comments  路  Source: cerner/terra-core

Issue Description

Uplift styles for the Form Input component.

Issue Type

  • [ ] New Feature
  • [X] Enhancement
  • [ ] Bug
  • [ ] Other
terra-form-input

Most helpful comment

If terra-form-select and terra-form-textarea both use disabled, and checkbox uses isDisabled, we should go with disabled for this component, and get checkbox updated to use disabled before we cut the release for it.

Edit: Logged issue to get this resolved before we cut the release.

All 7 comments

Tech Design

Summary:

Create a new package called terra-form-input to replace the Input component currently in terra-form.

React Props:

New

  • disabled Whether the input is disabled.
  • isInvalid Whether the input is invalid.
  • onBlur Function to trigger when this input loses focus.
  • onFocus Function to trigger when this input gains focus.

Themeable Styles:

  • Background color
  • Border color
  • Border radius
  • Border style
  • Border width
  • Box shadow
  • Focus animation
  • Font color
  • Font size
  • Font weight
  • Opacity when disabled, invalid, in focus
  • Padding

If adding onFocus as a first class prop we should probably add onBlur as well.

Will font-size be inherited from base?

terra-form-checkbox used isDisabled for it's prop instead of disabled. https://github.com/cerner/terra-core/blob/master/packages/terra-form-checkbox/src/Checkbox.jsx#L30. We should try to be consistent with all of our form packages

  • Included the onBlur prop.
  • font-size, font-weight and color would be themeable. font-family would be inherited.
  • We are already somewhat inconsistent. Checkbox and other non form components use isDisabled. However, terra-form-select and terra-form-textarea both use disabled. If we choose isDisabled, it would be less passive since consumers would need to change to isDisabled from disabled that they are currently using. This may not be a good enough reason to choose disabled over isDisabled. The other form components currently use the required prop (instead of isRequired). It seems natural to just keep the same prop name for these native attributes. Thoughts or preferences anyone?

If terra-form-select and terra-form-textarea both use disabled, and checkbox uses isDisabled, we should go with disabled for this component, and get checkbox updated to use disabled before we cut the release for it.

Edit: Logged issue to get this resolved before we cut the release.

Closing in favor of tracking this on #1207

Was this page helpful?
0 / 5 - 0 ratings