feat: TextArea autoexpand

gnapse commented 1 year ago

Short description

Adds support for the TextArea to auto-expand its height to fit the content as you type. Based on this approach, without requiring any external library or complex JS. It seems to work pretty well.

References

Test plan

Open the TextArea stories
- [x] check that in the first 3 stories, the text area behaves and looks as before (compare with https://doist.github.io/reactist/ if needed)
- [x] Try changing some props such as the variant, tone, etc. The text area still reacts to the prop changes as expected.
Open the new "Auto Grow" story, and check that the two text areas there behave each as expected.
- [x] The top one auto-expands as you type or paste text. On the other hand, it does not allow you to resize it manually.
- [x] The one at the bottom does not auto-expand. However, it allows you to resize it vertically as you see fit.

PR Checklist

[x] Added tests for bugs / new features
[x] Updated docs (storybooks, readme)
[x] Executed npm run validate and made sure no errors / warnings were shown
[x] Described changes in CHANGELOG.md
[x] Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
[x] Updated all static build artifacts (npm run build-all)

Versioning

New minor release.

doistephen commented 1 year ago

Saw your comment in Twist about it not being able to be 1 line to start. This is a technique I've used before that accomplished it; not sure if you've tried this or if it would work but thought I'd share!

gnapse commented 1 year ago

Saw your comment in Twist about it not being able to be 1 line to start. This is a technique I've used before that accomplished it; not sure if you've tried this or if it would work but thought I'd share!

@doistephen thanks for the tip. Actually, that's the same technique I'm using, but for some reason when I tried rows="1" it did not grow. However, when I tried it now it worked. It seems I tried this when the rest of the solution was not entirely ready, within the back and forth while I was working on this. Anyway, it works now, so I'm pushing an updated version soon. Thanks!

Bloomca commented 1 year ago

@gnapse one thing I found from testing (unrelated to your changes) is that if I use tone="loading", it shows the spinner only if add a "message" property. Not sure if it is intended, but wanted to leave a note anyway.

gnapse commented 1 year ago

p.s. I checked on Windows in all browsers, but didn't test Safari on Mac.

Good idea to check in multiple browsers. I will check on Safari before merging.

Update: tested it and it works as expected.

gnapse commented 1 year ago

if I use tone="loading", it shows the spinner only if add a "message" property. Not sure if it is intended, but wanted to leave a note anyway.

That is expected. In the end, the tone only matters when you add a message. Except for the error tone, which also sets the border as red, even if there's no message.

Doist / reactist