Select: add useFullWidthItems to allow dropdown with to expand

[hoorayimhelping]

Helps with https://github.com/ClickHouse/control-plane/issues/10057

• Adds useFullWidthItems to Select props
  • Tells the dropdown to expand its width to accommodate for long content
  • Has a max width of 64ch, which is approximately 64 characters
  • Adds itemCharacterLimit which is only applied when useFullWidtthItems to allow overriding the default max widtth of 64ch
  • Has a min width of the width of the dropdown selector, so that expanding the dropdown selector will cause the dropdown menu to be the same width as it, even if the content is shorter

Example from the Database selector in Sql Console

Reasonable length content

Very long content

Ludicrously long content (clipped at 64 characters)

Minimum width of the dropdown selector

itemCharacterLimit="32ch"

itemCharacterLimit="200ch" (can break things if not careful)

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
click-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 12, 2024 4:44pm

[gjones]

@hoorayimhelping I don't think we should allow the Ludicrously long content example, perhaps we can add a limit? 64 chars?

[gjones]

@hoorayimhelping Maybe a maxChars prop?

[ArctypeZach]

@gjones this would allow us to make the service selector wider as well

[hoorayimhelping]

@gjones I set the max-width to 64ch and replaced the outdated screenshots. What do you think?

[gjones]

@hoorayimhelping Yeah I think that's a good default limit, (I still think a prop to override it would provide really useful flexibility though)

[hoorayimhelping]

@gjones alright, I'll add that limit as a prop (was hoping I could be lazy, but alas 😉)

[gjones]

ha ha, sorry 😄

[hoorayimhelping]

@gjones alright, added itemCharacterLimit and a couple more screenshots showing it in use. What do you think?

[hoorayimhelping]

I looked into writing unit tests for this logic, but it's not possible (or is very difficult and brittle) to test text truncation using react-testing-library