Clay: Sizes for Dropdowns

[andresfulla]

What is your proposal?

A bigger dropdown. A size prop.

Why would adopting this proposal be beneficial?

I'm using a big dropdown _(although there's some controversy on whether that's a dropdown)_ in the Portal. It will much better and less code if I could just use ClayDropdown, but I can't because it's too narrow for all those Experiences. Screenshot 👇:

What are the alternatives to this proposal?

An alternative will be to pass props like className and style from ClayDropdown to the actual dropdown _(the one that shows and hides)_ and not the wrapper _(the one containing the trigger)_. That way I could do some decent CSS to make it bigger.

Codesandbox with some cheap CSS achieving what I want: https://codesandbox.io/embed/great-keldysh-f272t

Thanks!!

[bryceosterhaus]

hmm, I'm not entirely sure dropdown makes much sense for this case since your instance is more of a modal. Dropdowns tend to have actionable item, where when you click it, the dropdown then disappears. I'm not quite sure what lexicon would say though, let me cc them since they will have a much better idea than me.

Hey @drakonux, what lexicon component(s) do you think should be used for this type of design?

[jbalsas]

Pinging @victorvalle while @drakonux is on PTO, just in case.

I agree with @bryceosterhaus that we're looking at something different than a select/dropdown and something more around the Popover lines...

[pat270]

This Bootstrap's JS dropdown plugin works the same way unless the element is wrapped in a form element or stopPropagation is used. I think implementing this makes sense since the markup is difficult to change in our components. I can add some modifiers for dropdown-menu to make it specific widths. I don't think I could accomplish making it fluid to a specific container since we place the dropdown-menu inside the body tag.

[victorvalle]

We can use the dropdown button. We use a similar approach in the management toolbar for the filters.

[andresfulla]

hmm, I'm not entirely sure dropdown makes much sense for this case since your instance is more of a modal. Dropdowns tend to have actionable item, where when you click it, the dropdown then disappears. I'm not quite sure what lexicon would say though, let me cc them since they will have a much better idea than me.

Hey @drakonux, what lexicon component(s) do you think should be used for this type of design?

Yeah, I agree. But still it has selectable items and it visually _drops down the button_. I've been looking on the Internet for some time, and couldn't find anything similar. Estrange animal we built here.

[bryceosterhaus]

@victorg1991 just for clarification, how would we distinguish when to use popover vs a dropdown? Is popover just for content you don't interact with?

[pat270]

https://github.com/liferay/clay/pull/2832