weaveworks / ui-components

A collection of UI components that are shared across Weaveworks projects
http://weaveworks-ui-components.s3-website-us-west-2.amazonaws.com/
Apache License 2.0
30 stars 26 forks source link

Widen filter dropdown content to fit button with #434

Open bia opened 5 years ago

bia commented 5 years ago

An extension of #432, it looks strange when the width of the dropdown container is not the same as the button which pops it out. ~We might also have to choose a minimum width that's a little bit larger than what we have now.~ (let's address possibly narrowing the content in a later issue) screenshot-2018-12-03-at-17 14 282

screenshot 2018-12-03 at 17 17 54

cc @fbarl

foot commented 5 years ago

It does look a little funny if the drop down is smaller than the button. 👍

The reverse (case 1 above), feels quite natural though I think.

bia commented 5 years ago

I agree that case 1 is not as bad as case 2, but I'd rather everything just behave the same way. Plus there's usually quite a bit of empty space towards the center of the search bar to expand the width of the 'Filter' button into.

foot commented 5 years ago

We could make the default width a bit larger. But too big and it looks a bit funny too?

I'd still avoid clamping the width of the dropdown items, unless you mean expanding the width of the button to be as wide as the largest item in the list?

bia commented 5 years ago

unless you mean expanding the width of the button to be as wide as the largest item in the list?

Hmmm - sounds complicated. Let's limit this issue to widening the content to fit the width of the button for now and address case 1 later.