Add form field primitives: Input, Label, Textarea

[jbouder]

Reference Issues or PRs

Fixes #28

What does this implement/fix?

Put a x in the boxes that apply

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds a feature)
• Breaking change (fix or feature that would cause existing features not to work as expected)
• Documentation Update
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no API changes)
• Build related changes
• Other (please describe):

Testing

• Did you test the pull request locally?
• Did you add new tests?

Documentation

Access-centered content checklist

Text styling

• The content is written with plain language (where relevant).
• If there are headers, they use the proper header tags (with only one level-one header: H1 or # in markdown).
• All links describe where they link to (for example, check the Nebari website).
• This content adheres to the Nebari style guides.

Non-text content

• All content is represented as text (for example, images need alt text, and videos need captions or descriptive transcripts).
• If there are emojis, there are not more than three in a row.
• Don't use flashing GIFs or videos.
• If the content were to be read as plain text, it still makes sense, and no information is missing.

Any other comments?

[smeragoel]

Thanks for your work on this @jbouder, everything looks great!

A couple of things I noticed:

• Artifacts on UIs with borders: I noticed these artifacts on UI components that use a border interaction (focus, error). They disappear on zoom and scroll, and onloy seem to exist on a particular zoom level. Not sure if this is a reproducible bug or has something to do with my display settings.

• Error states

  • The designs use a 1px stroke for error outlines, but seeing it in the storybook, I like the 2px focus border better. How do you feel about changing the error stroke weight to 2px?

  • Currently, the storybook only uses the red-border to signal an invalid / error state, however, that on its own is an a11y violation (WCAG 1.4.1: Use of Color says color can't be the only visual means of conveying information). That is why I added the error icon to the designs, to show a non-color cue for error. I know that there is a With Error variant, but if we are showing a separate Invalid variant in the storybook, it should be compliant on its own as well. We should either ship the Invalid state with the icon or with the error helper text.

  

• Text area disabled state is currently resizeable: The disabled variant should not be resizeable at all. We can add a read-only variant if we want a no-input, resizeable text area component.

[jbouder]

@smeragoel , updates as below:

• Used 2px error border
• Added the invalid Icon to the components when error
• Removed the confusing Invalid story, and focused on With Error story
• Updated textarea to not allow resize when disabled

I was not able to reproduce the zoom issue.