Add feedback prop to input to support dynamic styling

[acelaya]

This PR adds a new feedback prop to Input, that can have values error or warning, and is used to dynamically style the input to provide extra feedback.

Note
I named it feedback, after checking how other UI libs treat this. Feedback is how it's named in bootstrap, and it sounds intuitive enough, and allows for more values to be eventually added (success, info, etc)

It also deprecates and replaces hasError, recommending feedback"error" as a direct replacement.

Note
The Select was left out of this PR and will be added afterwards, once we have discussed and agreed on the right contract.

[codecov]

Codecov Report

Merging #1196 (399e79f) into main (a4d6143) will not change coverage.
The diff coverage is 100.00%.

❗ Current head 399e79f differs from pull request most recent head 011e61a. Consider uploading reports for the commit 011e61a to get more accurate results

@@            Coverage Diff            @@
##              main     #1196   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           57        57           
  Lines          806       807    +1     
  Branches       312       313    +1     
=========================================
+ Hits           806       807    +1     

Files Changed	Coverage Δ
src/components/input/Input.tsx	100.00% <ø> (ø)
src/components/input/InputRoot.tsx	100.00% <100.00%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[acelaya]

yellow-notice is the same color we use for notice toast messages.

[robertknight]

Since hasError is deprecated and maps directly to a value of feedback, I would suggest that you do the mapping at the top of the component and avoid referencing hasError later. This will make the mapping more obvious and simplify removing hasError later on.

[robertknight]

I named it feedback, after checking how other UI libs treat this.

The name sounds reasonable. Is Bootstrap the only library you looked at or were there others?

[acelaya]

The name sounds reasonable. Is Bootstrap the only library you looked at or were there others?

I also checked Material UI, where they call it just color, accepting values warning, success, etc. Although, they combine it with a boolean error prop which turns the input "red".

I thought feedback was more concise than color, and also prefer to have just one way to do something.

[robertknight]

I thought feedback was more concise than color, and also prefer to have just one way to do something.

If we only support displaying one feedback state at a time, then indeed a single prop seems a better way to model this.