Skip to content
This repository has been archived by the owner on Nov 4, 2019. It is now read-only.

✨ Add input text box component #119

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

✨ Add input text box component #119

wants to merge 1 commit into from

Conversation

XuTheBunny
Copy link
Contributor

@XuTheBunny XuTheBunny commented Apr 18, 2019 •
edited
Loading

Motivation

Create input field - one line input box with different input types.
image

Use Cases

  1. Kids First Data Tracker
    image

  2. Kids First Coordinator
    image
    image

  3. Kids First website
    image

API changes

No API changes are made on this component.

Implementation Notes

The validation for input value would be handled by the app. To show the error message, pass the string to error prop.

Rendering and Storybook location

src/
└── components
    ├── InputText
    │   ├── __tests__/
    │   ├── InputText.jsx
    │   ├── InputText.story.jsx
    │   └── InputText.css
    └── index.js

Functional Tests

Test input text box component with all prop value combinations.

@XuTheBunny XuTheBunny added feature New functionality component Involves a component labels Apr 18, 2019
@XuTheBunny XuTheBunny self-assigned this Apr 18, 2019
@dankolbman
Copy link
Contributor

UIKit Storybook for Review

Built with commit c9c381d

https://deploy-preview-119--kf-uikit.netlify.com

@dankolbman
Copy link
Contributor

dankolbman commented Apr 18, 2019 •
edited
Loading

UIKit Storybook for Review

Built with commit 87257ee

https://deploy-preview-119--kf-uikit.netlify.com

@XuTheBunny XuTheBunny force-pushed the add-inputbox branch 4 times, most recently from 07c4809 to 121be97 Compare April 22, 2019 21:17
@XuTheBunny XuTheBunny added the ready-for-review This PR needs a review label Apr 22, 2019
@XuTheBunny XuTheBunny force-pushed the add-inputbox branch 2 times, most recently from e2b71c6 to 3e60e86 Compare April 24, 2019 20:52
dankolbman
dankolbman reviewed Apr 24, 2019
View reviewed changes
Copy link
Contributor

@dankolbman dankolbman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is pretty cool!
Is it possible to make the prefix/suffix also have a red border for an error state?

Also, it seems like many of the input types aren't the same, can we remove some?

src/components/InputText/InputText.story.jsx Outdated Show resolved Hide resolved
src/components/InputText/InputText.jsx Outdated Show resolved Hide resolved
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@dankolbman dankolbman dankolbman left review comments

@bdolly bdolly Awaiting requested review from bdolly

At least 1 approving review is required to merge this pull request.

Assignees

@XuTheBunny XuTheBunny

Labels
component Involves a component feature New functionality ready-for-review This PR needs a review
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@XuTheBunny @dankolbman