Add Textarea component

[acelaya]

This PR depends on #1196

Add a new Textarea component that renders consistently with Input and Select.

You can see how it looks by checking out this branch, running make dev and going to http://localhost:4001/input-textarea

[codecov]

Codecov Report

Merging #1204 (7732f62) into main (e6a1ee8) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##             main    #1204   +/-   ##
=======================================
  Coverage   99.87%   99.87%           
=======================================
  Files          57       58    +1     
  Lines         808      812    +4     
  Branches      313      314    +1     
=======================================
+ Hits          807      811    +4     
  Misses          1        1           

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

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

[acelaya]

I just noticed, in TypeScript, the type for textarea elements is HTMLTextAreaElement, so I'm thinking this component should be called TextArea, not Textarea 🤔

[robertknight]

I just noticed, in TypeScript, the type for textarea elements is HTMLTextAreaElement, so I'm thinking this component should be called TextArea, not Textarea

It depends whether you count "textarea" as one word or two. From a quick Google search, Textarea seems to be more common in other web UI libraries than TextArea. See also "Checkbox" and "Snackbar".

[acelaya]

It depends whether you count "textarea" as one word or two. From a quick Google search, Textarea seems to be more common in other web UI libraries than TextArea. See also "Checkbox" and "Snackbar".

Good point. Textarea it is then.

[robertknight]

LGTM, but I suggest we remove the InputGroup example, since that component was designed for single-line inputs and looks weird if you combine it with a Textarea.

[robertknight]

Can you remember the reason for the whole const Widget = function Widget(...) { ... }; export default Widget pattern? I think it had something to do with a migration at one point.

I'd like to simplify this code back to export default function Widget(...) { ... } when we can.

[acelaya]

Yeah, that was the reason. We had at one point some cases of const WidgetNext = function Widget() {...} (or the other way around).

We agreed to simplify it after the old components were removed, so nothing should stop us now.

[robertknight]

OK, I filed #1215 as a reminder.

[robertknight]

The "Textarea in an InputGroup" example looks weird:

Since we don't have an immediate use case for this, I would just remove this example. If we do want this in future, we'll need to come up with a different design that doesn't look silly. For example we could add the copy button in a footer for the control or as a standalone button in the lower-right corner.

[acelaya]

Fair enough.