Tag max-width limitation in <wa-select>

[patrickvuarnoz]

In <wa-select> there is a hard fix limit on how many "characters" are displayed in a tag:

:host wa-tag::part(content) {
    ...
    max-width: 7ch;
}

This not ideal. I like the idea that it uses the number of characters as measure but it would be much better if this could be set via a property. Or alternatively as a design token. But I would prefer a property. There should also be an option to not set a limit at all. Personally I would prefer if the default was no limit but I can't speak for others.

My current workaround goes like this:

wa-select {
  &::part(tag__content) {
    max-width: none ! important;
  }
}

[claviska]

Pinging @lindsaym-fa on this one. Let me know which direction you'd like to go and I'll be happy to implement it.

[lindsaym-fa]

A custom CSS property would be perfect for this, imo — they're well suited for single length values. --tag-max-width, maybe?

I generally share your preference for property/attribute syntax, @patrickvuarnoz, but one benefit of a CSS property here is that we can set the max tag width for every <wa-select> with a single CSS rule rather than needing to define it on every instance in our HTML. It sounds like we'd want to be able to change the default value and only override as needed, right?

[patrickvuarnoz]

You are right. I a project you most probably just want a consistent setting over all selects. So the ability to set it once makes more sense. I was wondering whether a CSS property or a design token would be better:

:root {
  --wa-select-tag-content-max-length: 10ch;
}

--- or ---

wa-select {
  --tag-content-max-length: 10ch;
}

Probably the latter as it is more contextualized and is clearer from a documentation standpoint.