search

adobe / spectrum-css

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

Large (quiet?) dropdowns do not look good #477

Closed Harbs closed 4 years ago

Harbs commented 4 years ago

Description

Dropdowns don't behave very well at large sizes.

Steps to reproduce

  1. Go to https://unhurdle.github.io/spectrum-royale/
  2. Click on the "Medium" button
  3. Observe the button gets very wide

Expected behavior

  1. Go to http://opensource.adobe.com/spectrum-css/
  2. Click on the "Medium" button
  3. Observe the button is a normal size

Additional context

There is a class called "react-spectrum-Dropdown-flexible" which fixes the default spectrum behavior. While that's nice and all, it seems to me the fix should be in the core Spectrum CSS. 😉

adobe-bot commented 4 years ago

JIRA issue created: https://jira.corp.adobe.com/browse/SDS-4901

lazd commented 4 years ago

Yeah, React Spectrum specifically overrides that particular default behavior because it was considered backwards-incompatible to have a shifty quiet Dropdown, adding the flexible property to enable it. It's already implemented correctly in Spectrum CSS proper, so we can close this, but you're definitely right that it's looking wrong in the link!

lazd commented 4 years ago

Wait, I see what you mean -- there is an override happening when using the multi-stop strategy that causes that dropdown to get way too wide. That's an easy fix, thanks for the report!