Rendering issue with * symbol when isRequired prop is true with long label

[arturvardanyan]

Provide a general summary of the issue here

I am facing a rendering problem when I set the isRequired prop to true and write a long label. The * symbol starts to render partially.

🤔 Expected Behavior?

When the isRequired prop is set to true and a long label is provided, the * symbol should be fully rendered without any partial truncation. The entire * symbol should be visible.

😯 Current Behavior

Currently, when the isRequired prop is set to true and a long label is provided, the * symbol starts to render partial

💁 Possible Solution

flex-shrink: 0 svg

🔦 Context

🖥️ Steps to Reproduce

https://codesandbox.io/s/spectrum-picker-required-zd3v6p?file=/src/App.js

Version

3.25.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[yihuiliao]

Seems to occur in the latest version too and in other components like TextField/TextArea. We may need to add flex-shrink: 0 to the .spectrum-FieldLabel-requiredIcon class.

react-spectrum/packages/@adobe/spectrum-css-temp/components/fieldlabel/index.css

Lines 49 to 54 in be50125

	.spectrum-FieldLabel-requiredIcon {
	margin-top: var(--spectrum-fieldlabel-asterisk-margin-y);
	margin-inline-end: 0;
	margin-bottom: 0;
	margin-inline-start: var(--spectrum-fieldlabel-asterisk-gap);
	}

[reidbarber]

We should also make sure we have chromatic stories covering this.