papercuts

[markacianfrani]

Select

value being string | string[] | undefined is kind of annoying to work with in typescript. If you know you're only using the normal, non multiple version of select (most common use case), you have to narrow your type down. for example:

//what I want
const handleThing = (event: Event) => {
    const target = event.target as HTMLRuxSelectElement;
    setNewThing(target.value) // Argument of type 'string | string[] | undefined' is not assignable to param of type 'SetStateAction.....'
};

//what I have to do
const handleThing = (event: Event) => {
    const target = event.target as HTMLRuxSelectElement;
    if (typeof target.value === "string") {
        setNewThing(target.value)
     }
};

Consider: breaking multiselect out into its own component. In hindsight, following the precedent of HTML probably wasn't the right call here

hr

Add some generic divider styles:

• a css class
• some copy/paste markup
• opt in stylesheet default styling for

  ---

  elements

is semantically close, but zero thought has been given to that component being standalone outside menus. its also completely overkill for a custom element.

There aren't really any system tokens for this either. The only token even close to appropriate is text-secondary, but it's way too bright. There's also not any options for border colors either. So right now, the best anyone can do is just use reference tokens like var(--color-palette-grey-800) for both text color and border color. This works, but will break on light theme.