fix(fieldlabel): prevent required icon from appearing on its own line when wrapping

[cdransf]

Description

Addresses case where fieldlabel required icon could appear on its own line when wrapping by applying text-wrap: pretty; to the parent label class.

Validation steps

1. Open the storybook link for the PR.
2. Navigate to the fieldlabel component.
3. Enable the Required control.
4. Adjust the contents of the Label control and verify that the Required icon does not render on a line separate from the text when it wraps.

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. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 2c0e7ac

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/fieldlabel	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 1.37 MB^*

Package	Size	Minified	Gzipped
fieldlabel	5.22 KB	4.98 KB	1.14 KB

fieldlabel

Filename	Head	Minified	Gzipped	Compared to base
index.css	5.22 KB	4.98 KB	1.14 KB	🔴 ⬆ 0.02 KB
metadata.json	2.89 KB	-	-	-

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[rise-erpelding]

I was so ready to throw an approval on this, but I opened the textfield testing grid to look at the side label, and I'm still getting an asterisk on a separate line:

Wondering if we need a different approach?

[rise-erpelding]

Looks good! This works in the field label story and also appears to work fine in textfield, slider, progressbar, picker, combobox, fieldgroup, and form as far as I can tell! The only recommendation I have would be to move the text-wrap: pretty so it sits with other similar style declarations instead of with the custom prop declarations.

[jawinn]

There are some issues with changing this to flex as noted here.
Are we sure about that sort of layout change here and preventing wrapping? This could have other negative consequences, with side label fields forced to be wider than before and if there were other elements within the label.

I'm not sure if there is a way to adjust it to fix the alignment issues mentioned and I'm wondering if the non-breaking space should still be recommended for the implementation? Since AFAIK the asterisk still needs to wrap along with the text to be inline at the end of the text.

[rise-erpelding]

I think the   solution with text-wrap: pretty; will work well! I think we just need to do a little cleanup on the code. 🙂

[rise-erpelding]

Do we need to add this here?

[cdransf]

Not necessarily! I was looking to split out custom properties from rules which resulted in three separate blocks. I pulled the styles from line ~88 up into this block. Happy to rearrange as needed.

[jawinn]

It looks like things are currently a little out of order with how I would expect to match up with how it is with the other components. You're right that custom properties should be separate and at the top.

I think Rise was suggesting that previously a single .spectrum-FieldLabel block at the top could have the CJK and disabled lines within it. So there'd be two .spectrum-FieldLabel blocks instead of three. Then all the style declarations would go back where they were in a .spectrum-FieldLabel block, after the size and static color classes. Gosh, trying to explain where to move around code blocks via text is cumbersome 😆

[cdransf]

😅 I think things are in the right order now.

[rise-erpelding]

Sorry, one tiny thing with that display: block removal!