Font Size Options for Dropdown Filters

[cvanwingerden]

Description

For dropdown lists with many values (and/or values with longer character count) the filter dropdown doesn't look clean. It would be awesome to have a new dropdown options (possibly 2). one for the text size and possibly another for the visible length of the dropdown.

What problem would this solve?

this would make the filter dropdown cleaner and easier to find values.

How should it work?

No response

[archiewood]

We would like to add a more general styling system that allows users to change the default style of components.

Some ideas

Tailwind utility styling

<Dropdown name=foo data={my_query} class="text-sm"/>

• Pros: Consistent, fairly easy to implement in standard way
• Cons: For components with multiple HTML elements, need to decide which element to apply the classes to, which may inhibit functionality. First approach would probably to be to apply to parent container.

Expose more props

<Dropdown name=foo data={my_query} fontSize=small/>

• Pros: fine grained control of styling
• Cons: lots of work to maintain and document, harder for user to discover

[cvanwingerden]

Thanks for the reply! I would prefer the Tailwind utility styling, but either would be great! From: Archie Sarre Wood ***@***.***> Date: Tuesday, January 21, 2025 at 12:00 PM To: evidence-dev/evidence ***@***.***> Cc: Caleb Vanwingerden ***@***.***>, Author ***@***.***> Subject: Re: [evidence-dev/evidence] Font Size Options for Dropdown Filters (Discussion #2996) We would like to add a more general styling system that allows users to change the default style of components. Some ideas Tailwind utility styling <Dropdown name=foo data={my_query} class="text-sm"/> * Pros: Consistent, fairly easy to implement in standard way * Cons: For components with multiple HTML elements, need to decide which element to apply the classes to, which may inhibit functionality. First approach would probably to be to apply to parent container. Expose more props <Dropdown name=foo data={my_query} fontSize=small/> * Pros: fine grained control of styling * Cons: lots of work to maintain and document, harder for user to discover — Reply to this email directly, view it on GitHub<#2996 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A35NJMNN6SVPX63T4UXYSJL2LZ4J5AVCNFSM6AAAAABU5CZBBCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCOJQGUYTSMI>. You are receiving this because you authored the thread.Message ID: ***@***.***>