feat add input

[Sebastien-Ahkrin]

Parts of: #346

• Controlled component
• Forwards the native input props
• Placeholder
• 2 sizes
• With / without labels
• Size on Field too
• trailing / leading component (inline or not)
• validation feedback
• handle required props

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	7cebece
Status:	✅  Deploy successful!
Preview URL:	https://a1db742e.react-science.pages.dev
Branch Preview URL:	https://feat-input.react-science.pages.dev

View logs

[codecov-commenter]

Codecov Report

Base: 51.93% // Head: 51.93% // Decreases project coverage by -0.00% ⚠️

Coverage data is based on head (ec4e2c3) compared to base (0005105).
Patch coverage: 45.90% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #429      +/-   ##
==========================================
- Coverage   51.93%   51.93%   -0.01%     
==========================================
  Files         127      130       +3     
  Lines        6737     6945     +208     
  Branches      161      170       +9     
==========================================
+ Hits         3499     3607     +108     
- Misses       3238     3338     +100     

Impacted Files	Coverage Δ
src/app-data/state/view/getEmptyAppView.ts	33.33% <0.00%> (-4.17%)	⬇️
...app-data/state/producers/plot-view/helpers/zoom.ts	18.51% <18.51%> (ø)
src/app-data/state/producers/measurements.ts	30.10% <33.33%> (-1.45%)	⬇️
...rc/app-data/state/producers/plot-view/plot-view.ts	48.00% <48.00%> (ø)
src/app-data/state/producers/appStateProducer.ts	70.00% <66.66%> (+2.72%)	⬆️
src/app-data/loaders/loadMeasurements.ts	90.90% <81.48%> (-9.10%)	⬇️
src/app-data/state/view/AppView.ts	100.00% <100.00%> (ø)
src/app-data/loaders/biologicLoader.ts	65.83% <0.00%> (-0.22%)	⬇️
src/components/button/index.ts	100.00% <0.00%> (ø)
... and 2 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[stropitek]

You can add the required prop to the Field component? There is an example in the issue of how a required field can look like.

[stropitek]

• Add a nicer outline to the input (see ant)
• Story with small and regular sizes next to each other
• Story with small and regular sizes next to each other but with label (should work by setting a size prop to Field not Input

[Sebastien-Ahkrin]

Do i have to add a "size" props on the FieldContext for Input @stropitek ?

[stropitek]

Do i have to add a "size" props on the FieldContext for Input

yep. If size set directly on input it takes precedence

[stropitek]

@Sebastien-Ahkrin what is the state of this PR?

[Sebastien-Ahkrin]

@Sebastien-Ahkrin what is the state of this PR?

@stropitek i'm working on Leading & Trailing addon actually, but actually i can make the pull request ready to review & merge. And i finalize my work on Trailing on a new pull request

[stropitek]

Can you push a dummy commit so that the preview rebuilds? It doesn't work since we changed the name of the repo

[stropitek]

Did you already work on the latest feedback that was given (there are no commits after them)?

i'm working on Leading & Trailing addon actually

Yes please don't include that in this PR

[stropitek]

On Edge (the browser) there is the default black outline. It should be removed.

[stropitek]

If the size prop is not used to change the appearance of the label, then there is no need to have it on Field

[stropitek]

The outline on the input should stay when the input is focused

[stropitek]

The label should have the same font size as the input.

Therefore I think it makes sense to add the variant prop to the Field component. It can be inherited by the input via the context.

[stropitek]

Can you remove the Fields component? It does nothing.

[stropitek]

[Sebastien-Ahkrin]

@stropitek what navigator are you using and what's the name of the stories for this screen ?