fix(textarea): drag and grow behaviors

[jenndiaz]

Description

Updates text area to display grow and drag behaviors.

Design Guidance:

• TextArea should display drag by default
• When grow is enabled this drag behavior and icon should go away

Changes:

• Update CSS for all text areas to be draggable by default
• update docs site to include grow description

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

On the docs page for TextArea

• [x] All variants, expect for grows, should be draggable
• [ ] Validation icons stay aligned on top of the textarea after resize.

In storybook:

• [x] TextArea is draggable by default
• [x] drag behavior goes away with Grows control toggled to true
• [ ] Validation icons stay aligned on top of the textarea after resize. Include testing in Chromatic-only view of Storybook.

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• [x] The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• [ ] VRTs have been run and looked at.
• [ ] Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

Before

After

To-do list

• [x] I have read the contribution guidelines.
• [x] I have updated relevant storybook stories and templates.
• [x] I have tested these changes in Windows High Contrast mode.
• [x] If my change impacts other components, I have tested to make sure they don't break.
• [x] If my change impacts documentation, I have updated the documentation accordingly.
• [ ] ✨ This pull request is ready to merge. ✨

[github-actions[bot]]

🚀 Deployed on https://pr-2506--spectrum-css.netlify.app

[github-actions[bot]]

File metrics

Summary

Total size: 3.97 MB^* Total change (Δ): ⬆ 1.88 KB (0.05%) Table reports on changes to a package's main file. Other changes can be found in the collapsed "Details" below.

Package	Size	Δ
textfield	38.96 KB	⬆ 0.62 KB

Details

textfield

File	Head	Base	Δ
index-base.css	38.02 KB	37.42 KB	⬆ 0.62 KB (1.62%)
index-theme.css	1.52 KB	1.52 KB	-
index-vars.css	38.96 KB	38.35 KB	⬆ 0.62 KB (1.58%)
index.css	38.96 KB	38.35 KB	⬆ 0.62 KB (1.58%)
mods.json	3.03 KB	2.96 KB	⬆ 0.07 KB (2.27%)
themes/express.css	1.05 KB	1.05 KB	-
themes/spectrum.css	1.05 KB	1.05 KB	-

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[jawinn]

I got really close with addressing some of the alignment issues and improving the resize/drag behavior. There are still some issues with it that I'll explain. I also discovered some areas that need more Storybook coverage.

Improvements and changes

• Improved alignment of validation icon in the majority of cases after resize and drag.
• The Text area parent and input + validation icon no longer get out of alignment and keep the same width when you horizontally resize the field down really small
• When you horizontally resize larger, this no longer can grow too big and escape the container
• I decided to remove the block-size: unset declaration on the input, possibly to be revisited later, per the notes in the discussion

https://github.com/adobe/spectrum-css/assets/965114/6737247e-b633-4d95-806c-fc5f18f5ab6a

Remaining issues

In the Storybook Chromatic testing view of Text area, I noticed that the wrapping example was no longer wrapping. This surfaced an alignment issue as well. On the parent, inline-size: unset; is used so that it is no longer a fixed width, and the width of the resizable input also affects the width of the parent. The problem with this is that the input will no longer start with the fixed width defined in the design spec (or a user defined --mod-textfield-width value), when the text of the field label is too long. And that means it would not wrap as it did previously. The grid layout will stretch out, and leave the input behind. In the following screenshot, "grid" highlighting is turned on in the Chrome inspector:

https://github.com/adobe/spectrum-css/assets/965114/04310182-383d-43c1-bc76-99175a5f050e

I'm not sure if there is a way around this---I'm open to ideas! This makes me wonder if we should instead of using inline-size: unset;, rely on the implementation to use JS to update the parent width when the resize is used. Note that when the native resize functionality is used in the browser, the browser sets fixed width and height values on the element being resized.

Increased Storybook coverage needed

I will do this as a separate PR, but in testing this I discovered a few areas that could use increased Storybook coverage and controls, that would be useful to fully test this. The character counter and help text are demoed in the docs but not represented in Storybook. The character counter especially is important to test as it is displayed within the second column of the grid layout being used for alignment.