Select: incorrect size rendering in render in dropdown control

[tamara-nexus]

Describe the bug

We needed to have a Select component in a filter panel and we could not find any other control (other than dropdown) to implement this e.g. a special popup panel control or something else.

The Select component was added with a text input in the Dropdown component and both had the size attribute set to small, the input renders correctly but the select component renders as medium instead of small.

P.S. this does not appear when button group is used directly e.g. in a page

To Reproduce

Steps to reproduce the behavior:

1. Add a select and text input control in a dropdown control
2. Set both their sizes to be small
3. View in browser
   Controls are rendered with different sizes.

[b-d-m-p]

If I am understanding correctly, for me both the sl-select & sl-input are rendering size="small" correctly. The text size for both of them is 14px, and they look to be size="small".

<sl-dropdown>
    <sl-button slot="trigger" caret>Dropdown</sl-button>
    <sl-menu>
	<sl-menu-item>
            <sl-select placeholder="Select one" size="small">
	        <sl-option value="option-1">Option 1</sl-option>
	        <sl-option value="option-2">Option 2</sl-option>
	        <sl-option value="option-3">Option 3</sl-option>
            </sl-select>
	</sl-menu-item>
	<sl-menu-item>
	    <sl-input placeholder="Small" size="small"></sl-input>
	</sl-menu-item>
    </sl-menu>
</sl-dropdown>

@tamara-nexus if this is not what you are attempting, please explain & provide me with code/image examples.

[claviska]

I wasn't able to reproduce this.

https://codepen.io/claviska/pen/xxowgKm?editors=1100

If you can post a repro, that would be helpful.

[Selveris]

This issue arise from sl-tag instead of sl-dropdown, my apologies for the misleading informations

<sl-tag removable pill>
    <sl-select size="small">
      <sl-option value="option-1">Option 1</sl-option>
      <sl-option value="option-2">Option 2</sl-option>
      <sl-option value="option-3">Option 3</sl-option>
    </sl-select>
    <sl-input size="small"></sl-input>
</sl-tag>

[tamara-nexus]

Thanks for updating this. I apologize for the incorrect information from my side!

[claviska]

I'm not sure putting a form control inside a tag is a use case we want to support but, in this case, the tag is overriding the font size and line height. Adding this to the select will change it back.

sl-select {
  line-height: var(--sl-line-height-normal);
  font-size: var(--sl-input-font-size-small);
}

There may be additional styles you'll want to adjust depending on what you're trying to do.

[Selveris]

Thank's for the solution, it does fix the issue

Here is a picture to add a bit of context on how we ended up with this kind of nested components (tag > dropdown > form control):

The tag seemed to be the easiest component to use as it is easy to remove and its style was fitting well

[tamara-nexus]

Thanks @Selveris. @claviska I think that what my colleague @Selveris is trying to explain is that we need filter panels where we can add and remove filters as in the grey pill-controls e.g. email end with xxxx and we are trying to figure out the best way to do this using Shoelace. We are open to suggestions.