search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
13.03k stars 1.13k forks source link

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

Open arturvardanyan opened 1 year ago

arturvardanyan commented 1 year ago

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

🤔 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

image

🖥️ 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 commented 1 year ago

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.

https://github.com/adobe/react-spectrum/blob/be501251a2012b2c1401e79940cbb39151c84d9d/packages/%40adobe/spectrum-css-temp/components/fieldlabel/index.css#L49-L54

reidbarber commented 1 year ago

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