search

adobe / spectrum-css

The standard CSS implementation of the Spectrum design language.
http://opensource.adobe.com/spectrum-css/
Apache License 2.0
1.2k stars 195 forks source link

Button label not vertically aligned correctly #2714

Open cheema-corellian opened 6 months ago

cheema-corellian commented 6 months ago

Description

The text label for the button component does not vertically align correctly. Whenever I apply Spectrum CSS, either to a plane div or an Aria button, the text is always a little lower than it ought to be. Surprisingly, the React Spectrum button renders the text at the correct alignment. See screenshot below.

Steps to reproduce

  1. I have created a stackblitz for it that will show the problem on any computer. Feel free fork it and make changes as desired.

https://stackblitz.com/edit/stackblitz-starters-3grm8x?file=app%2Fpage.tsx

  1. Be sure to zoom in. The discrepancy may not be clearly visible on all screen sizes.

Expected behavior

The button, created by following directions on Spectrum-CSS website, should have its text be vertically aligned. Similar to the way React Spectrum button appears.

Screenshots

image

Button to the left was generated using spectrum-css, the middle one was generated using Adobe React Aria with spectrum-css style applied. The one to the right was generated using Adobe React Spectrum. The linked stackblitz code above demos all 3 of them.

Fonts are the same in all cases. The difference is ever so small. But it it clearly visible.

Environment

Tested on the latest Firefox, Edge and Chrome on Windows. And also using Chrome on Mac. The difference on Mac is less pronounced, but is there when measured with a tool.

pfulton commented 6 months ago

@cheema-corellian Thanks for looking into this and taking the time to put together the Stackblitz example.

It looks like your example might be loading different fonts for the examples—can you make sure that all three are using Adobe Clean?

cheema-corellian commented 6 months ago

Thanks for getting back to me. This issue does not appear to be font related. All 3 buttons in the Stackblitz were using the exact same default font. I have updated the example, so now all 3 buttons now explicitly use the same Adobe Clean font.

There appears to be uneven padding for button labels in spectrum-css that impacts html buttons and React Aria buttons, if they use spectrum-css. React Spectrum doesn't appear to use the same button label class and therefore doesn't suffer from this problem. See screenshot below.

image