Compose the SearchField, DatePicker, TimeInput components with the Field component

[benbcai]

Issue Description

The SearchField component should be wrapped by the Field component just like the other Form components so that a label, error message, help text, etc, can be rendered. The DatePicker and TimeInput should also be wrapped by the Field component or perhaps a new DateField and TimeField components should be created similar to how there is a TextField component for the Input component.

Issue Type

• [ ] New Feature
• [X] Enhancement
• [ ] Bug
• [ ] Other

[samvaity]

Issue Description

The SearchField, DatePicker and TimeInput components should be wrapped by the Field component just like the other Form components so that a label, error message, help text, etc, can be rendered.

Questions

• DatePicker - For this component, should we be refactoring the existing code to have it wrapped in the Field component or have it as a new component called “DateField”?
• TimeInput - For this component, should we be refactoring the existing code to have it wrapped in the Field component or have it as a new component called “TimeField ”?
• Do we have to render all the props( error, help, htmlFor etc) of “Field” component for all the above mentioned elements or should they be aligned to match the children elements?

Issue Type

• [ ] New Feature
• [X] Enhancement
• [ ] Bug
• [ ] Other

Expected Behavior

This should work similar to the TextField component for the Input component.

Tech Design:

Approach :

• Import Field component in SearchField, DatePicker and TimeInput components.
• Wrap the existing components inside the <Field> </Field> tags (Add any props needed for Field component).

Example:

import Field from 'terra-form/lib/Field';

return (
      <div {...customProps} className={searchFieldClassNames}>
        <Field>
          <Input
            className={cx('input')}
            type="search"
            placeholder={placeholder}
            value={this.state.searchText}
            onChange={this.handleTextChange}
          />
          <Button
            className={cx('button')}
            onClick={this.handleSearch}
            isCompact
          >
            <IconSearch />
          </Button>
        </Field>
      </div>
    );

[emilyrohrbough]

For this enhancement, I think updating the current component implementation to wrap the inputs in the field component would be appropriate. Datepicker and TimeInput both contain a prop called inputAttributes that are spread on the input. I think we should follow this approach and add a prop called fieldAttributes which would be spread on the field component.

Do we have to render all the props( error, help, htmlFor etc) of “Field” component for all the above mentioned elements or should they be aligned to match the children elements?

I'm not sure what you mean by aligned to match the children elements, could you explain?

[samvaity]

By align I meant to ask that if the should only contain the props that match to its children elements.

[benbcai]

Closing this issue since it was decided that wrapping these form fields with the Field component does not provide much value. Consumers can easily just compose the Field component as needed.