fix(textarea): drag and grow behaviors #2506

jenndiaz · 2024-02-09T16:36:15Z

Description

Updates text area to display grow and drag behaviors.

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

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

In storybook:

TextArea is draggable by default
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:

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

The pages render correctly, are accessible, and are responsive.

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

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

github-actions · 2024-02-09T17:22:46Z

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

github-actions · 2024-02-09T17:23:03Z

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.

mdt2

Thanks for working on this! It's looking good. One thing I'm seeing in Storybook with Grows turned on, if I turn Invalid on, then the icon gets misaligned. Is this expected to be fixed in #2380 and therefore not a concern for this PR?

components/textfield/metadata/textarea.yml

jawinn · 2024-02-20T19:37:11Z

components/textfield/index.css

-  .spectrum-Textfield-input {
+	.spectrum-Textfield-input {
+		resize: both;
+		block-size: unset;


👍 I'm glad you got this block-size update in there. In addition to the XL height bug fix you mentioned in the PR description, it also lets the textarea height size appropriately if the rows attribute it used, e.g. rows="5".

While I still think that using block-size: unset; is a good idea, I've removed it from this PR as it causes a few issues downstream with SWC and with the quiet variants.

Text areas default to two rows in most browsers, resulting in fields like quiet that previously displayed as one line, displaying as two by default. It also would change the heights on some fields. This is significant enough of a change to be its own PR and can be revisited later, likely as part of the Spectrum 2 migration. It would likely require work on the SWC end.

The benefits of keeping the change would be the ability to use the rows attribute on the textarea. SWC lists rows in their API for Text area but it does not seem to work currently. The design specs do not specify a fixed height, only a minimum height.

components/textfield/metadata/textarea.yml

pfulton

In Chrome in Storybook, if I set invalid to true, and then drag the textarea to make it larger, the invalid icon's position stays in its initial spot

jenndiaz · 2024-02-27T19:08:01Z

components/textfield/index.css

@@ -553,26 +553,15 @@ governing permissions and limitations under the License.

 	/****** Validation Icon - Invalid ⚠️ ******/
 	.spectrum-Textfield.is-invalid & {
+		justify-self: end;


This is attempt to address the invalid and valid icon position when drag behavior is enabled.
justify-self: end; positioning the icon at the end of the grid and using padding instead of inset address the spacing around the icon.

However there is still an issue with the min-size for the text-area, where you can drag the text area to be smaller than the original text area and the icon appears outside of the text area. I think there may be some browser differences that would need looking into here as well.

Leaving off this change from this PR, as it will have quite a few effects downstream with SWC. Especially with textareas defaulting to a rows value of 2 in most browsers, the height would look much different by default without rows being defined. This was noticeable in the quiet variations. This still seems like a good change to make in the future, especially if web components wants to allow the rows attribute to be used. This will be discussed further and has been noted to reevaluate during the imminent S2 migration of text area.

Restore some CSS related to textarea invalid icon alignment. The behavior was different between the docs and Storybook. The issue was due to using flex-direction column, which stretches the text area to 100% width without changing its width. And the browser drag behavior sets an inline fixed width on the textarea, resulting in the misalignment.

Fixes issues where when using the drag to resize, the width could become smaller than the minimum width, resulting in misalignment of the invalid icon. Also adds mod custom property for resize.

Improved resize behavior on text area, and alignment of the validation icon in various scenarios. Adds to the stories for Text area to try and account for more combinations of the options available. An issue still exists with long text within the field label no longer wrapping and preventing the default defined width from being used.

jawinn · 2024-03-15T18:24:45Z

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

Screen.Recording.2024-03-15.at.2.05.49.PM.mov

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:

Screen.Recording.2024-03-15.at.2.22.45.PM.mov

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.

jenndiaz force-pushed the jenndiaz/css-670-text-area-grow-drag branch from 8afeb69 to 743bfd7 Compare February 9, 2024 17:14

jenndiaz changed the title ~~docs(textarea): update documentation for drag and grow behaviors~~ fix(textarea): drag and grow behaviors Feb 15, 2024

jenndiaz marked this pull request as ready for review February 15, 2024 16:04

jenndiaz requested review from jawinn, pfulton and mdt2 February 15, 2024 17:43

jenndiaz added the ready-for-review label Feb 15, 2024

mdt2 reviewed Feb 15, 2024

View reviewed changes

components/textfield/metadata/textarea.yml Outdated Show resolved Hide resolved

jenndiaz force-pushed the jenndiaz/css-670-text-area-grow-drag branch 2 times, most recently from 93ed9f6 to 1705e06 Compare February 19, 2024 19:55

jawinn reviewed Feb 20, 2024

View reviewed changes

jawinn suggested changes Feb 20, 2024

View reviewed changes

components/textfield/metadata/textarea.yml Outdated Show resolved Hide resolved

jenndiaz force-pushed the jenndiaz/css-670-text-area-grow-drag branch from 1705e06 to cd5cb9e Compare February 23, 2024 17:34

pfulton requested changes Feb 23, 2024

View reviewed changes

pfulton force-pushed the main branch from 65088ba to 5e34345 Compare February 26, 2024 18:26

jenndiaz added the do not merge A flag for a branch indicating it should not be merged. label Feb 27, 2024

jenndiaz commented Feb 27, 2024

View reviewed changes

jenndiaz and others added 11 commits March 15, 2024 13:15

docs(textarea): add grow and drag examples

2574c0f

feat(textarea): enabled text area resize by default

c1d9137

docs(textarea): update desc for grow

048257a

fix(textarea): remove block size from text areas

b55af8c

docs(textarea): default styling for text area in sb

0c9e6c1

docs(textfield): improve comment

128e8ea

fix(textarea): invalid icon position

b90780e

docs(textarea): quiet variant description

a5df7fd

docs(textarea): improve grows descriptions

1ce49d3

feat(textarea): wip address icon on drag

c445f82

jawinn added 3 commits March 15, 2024 13:15

fix(textfield): textarea resize should not shrink past minimum width

8978528

Fixes issues where when using the drag to resize, the width could become smaller than the minimum width, resulting in misalignment of the invalid icon. Also adds mod custom property for resize.

jawinn force-pushed the jenndiaz/css-670-text-area-grow-drag branch from 9b95ebd to 23a0f11 Compare March 15, 2024 17:15

jawinn marked this pull request as draft March 15, 2024 18:45

jawinn removed the ready-for-review label Mar 20, 2024

jawinn closed this Sep 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(textarea): drag and grow behaviors #2506

fix(textarea): drag and grow behaviors #2506

Uh oh!

jenndiaz commented Feb 9, 2024 •

edited by jawinn

Loading

Uh oh!

github-actions bot commented Feb 9, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Feb 9, 2024 •

edited

Loading

textfield

Uh oh!

mdt2 left a comment

Uh oh!

Uh oh!

jawinn Feb 20, 2024 •

edited

Loading

Uh oh!

jawinn Mar 15, 2024

Uh oh!

Uh oh!

pfulton left a comment

Uh oh!

jenndiaz Feb 27, 2024

Uh oh!

jawinn commented Mar 15, 2024 •

edited

Loading

Uh oh!

Uh oh!

fix(textarea): drag and grow behaviors #2506

fix(textarea): drag and grow behaviors #2506

Uh oh!

Conversation

jenndiaz commented Feb 9, 2024 • edited by jawinn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Validation steps

Regression testing

Screenshots

Before

After

To-do list

Uh oh!

github-actions bot commented Feb 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Feb 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

textfield

Uh oh!

mdt2 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jawinn Feb 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jawinn Mar 15, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pfulton left a comment

Choose a reason for hiding this comment

Uh oh!

jenndiaz Feb 27, 2024

Choose a reason for hiding this comment

Uh oh!

jawinn commented Mar 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Improvements and changes

Remaining issues

Increased Storybook coverage needed

Uh oh!

Uh oh!

jenndiaz commented Feb 9, 2024 •

edited by jawinn

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

github-actions bot commented Feb 9, 2024 •

edited

Loading

jawinn Feb 20, 2024 •

edited

Loading

jawinn commented Mar 15, 2024 •

edited

Loading