[Bug]: <sp-picker quiet> doesn't lay out properly

[adixon-adobe]

trafficstars

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

sp-picker

Expected behavior

The test of sp-picker is vertically centered like it was previously.

Actual behavior

It looks like there's a new negative margin on the button that probably isn't intended to be there with the quiet attribute.

The result of this is that the layout of the internal element is expanding beyond the bounds of the picker, and causing the picker text to align with the top. This is noticeably off if you have a horizontal layout, which it looks the docs are lacking for picker.

It looks like we should be able to work around this by adjusting the variable used here.

Screenshots

Here's a quick example of how things can look off:

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

No response

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[adixon-adobe]

I'm guessing this is also a spectrum css bug.

[blunteshwar]

Currently in WIP from css team

[blunteshwar]

PR: https://github.com/adobe/spectrum-css/pull/2169

[jenndiaz]

I do not see this is a bug. The negative margin was included in recent design guidance. We do have an additional class for when the label and picker are side by side, @adixon-adobe do you still see this issue when using this class?

CC: @pfulton @najikahalsema @blunteshwar

[blunteshwar]

@jenndiaz Thanks!, after using this additional class the issue is resolved!

[blunteshwar]

@jenndiaz I believe this additional class should only be applied when the label and picker are side by side but the issue is still present when the label and picker are in a top and bottom arrangement

[blunteshwar]

@pfulton @jenndiaz In accordance with our conversation, I am putting this ticket on hold and waiting for feedback on the class namespectrum-Picker--sideLabel from design team!

[jenndiaz]

@jenndiaz I believe this additional class should only be applied when the label and picker are side by side but the issue is still present when the label and picker are in a top and bottom arrangement

@blunteshwar while I think using this class could still work, I think it was not clear to me when originally looking at it what was going on in the screenshot describing the bug. Chatting in slack about different options.

[jenndiaz]

Fix for this is merged and released!

• @spectrum-css/[email protected]
• @spectrum-css/[email protected]

[Rajdeepc]

Will take this up in SWC. Thanks @jenndiaz