Small/large version of dropdowns

[patrickvuarnoz]

Some filters can easily be built using <wa-select>. In my situation for some of the filters I want to have more than just the options in the menu – think of a filter box for the options or toggles for all/none. This is very easy to build with a <wa-dropdown>. In my layout I do use those <wa-dropdown> alongside <wa-select>.

My problem now is that I'm using the <wa-select> with size="small". In the <wa-dropdown> I'm using a <wa-button> with size="small" which makes the elements look the same size. But when you click on the <wa-select> the menu options are also small but for the <wa-dropdown> the menu options are regular size. This makes the whole thing inconsistent.

Of course this can be fixed with some CSS and classes, but for consistency and simplicity it would be really cool/helpful if there was a small/large version of the <wa-dropdown> that could also be simply set by size="small".

I guess the <wa-menu-item> would also need to have a size option where you could set that individually, but by default it would be easier if the <wa-menu-item> and <wa-button> would inherit the size setting from the <wa-dropdown>, if this is even possible.

I'm imagining something like this in an ideal world:

<wa-dropdown size="small">
  <wa-button slot="trigger" caret>Dropdown</wa-button><!-- Inherits size attribute from dropdown -->
  <wa-menu>
    <wa-menu-item>Dropdown Item 1</wa-menu-item><!-- Inherits size attribute from dropdown -->
    <wa-menu-item>Dropdown Item 2</wa-menu-item>
    <wa-menu-item>Dropdown Item 3</wa-menu-item>
  </wa-menu>
</wa-dropdown>

[claviska]

@lindsaym-fa curious of your thoughts on this? Would specific sizes be better or would scaling based on, e.g. the current font size, be better?

[lindsaym-fa]

size is a great shorthand and super helpful to ensure that the sizes of the elements it's applied to are compatible — e.g., you don't have to guess which font size to use on <wa-menu> to best match <wa-button size="small"> (in this case, var(--wa-font-size-s) is the answer, which admittedly is easy to guess...but why guess at all if you don't have to? 😉).

imo, a combination of both is best, where size gets you a common preset and setting font-size lets you fine-tune or off-road. And, fwiw, <wa-menu-item> does already inherit font-size when set on <wa-menu> (although the padding doesn't scale, so perhaps there's room for improvement there).

[LeaVerou]

Hi @patrickvuarnoz, just a quick note that we're looking into this (and generally making size and variant inheritable and more widely available). I'm hoping it will be in the next release, though I cannot yet 100% guarantee it. 😊

[patrickvuarnoz]

Many thanks. It's not an urgent thing but nice to know that there might be a solutions to this in the future.