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.11k stars 1.14k forks source link

Component Side Label Misaligned on Vertical Axis #7437

Closed ccr112393 closed 5 days ago

ccr112393 commented 5 days ago

Provide a general summary of the issue here

When component label position is set to "side", and the text falls onto more than one line, the label's Y axis is off center.

image

🤔 Expected Behavior?

Multi-line side labels would automatically be centered on the y-axis with its corresponding component, or offer customizable alignment options in relation to the component (i.e.: top, middle, bottom)

😯 Current Behavior

Currently, multi-line side labels retain their initial position resulting in text that falls below the component

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Create a Form component with labelPosition="side" and reduce the form width so the labels fall to multiple lines.

Version

3.38.0

What browsers are you seeing the problem on?

Chrome, Other

If other, please specify.

Adobe CEP Chromium Embedded

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 5 days ago

Thanks for the issue. Are you able to reproduce outside of CEP? ie in a codesandbox or stackblitz?

snowystinger commented 5 days ago

Took a further look at this. This is the expected behavior. It will do this in all browsers. If the label was very long, then we don't want it pushing the field down to center align. It should be first baseline aligned so the text in the field is aligned with the first text line of the label.

However, something is still going on here because those stepper buttons don't look right.

I'm going to close this as working as intended.