Query about tokens

[PoojMenon]

Hi,

I'm wondering if there is any guidance on how to go about sizing components when the size tokens aren't suitable?

For example, in the snapshot below - the first input is size-30 and the second one is size-40. There's a difference of 104px between these two sizes. size-30 is clearly too small for the Account SID and size-40 leaves a good bit of empty space and takes up more real estate. In this case, the SID will always have the same number of characters.

[kate-porter]

Hey @PoojMenon! Would you mind sharing a screenshot (or Figma/Codesandbox link) of the full page where this will appear? I'm wondering if laying out the page on a grid would be a good option for you, so the input can just span the appropriate number of columns to control the size.

Trying to match the width of the input exactly to the content inside it can be tricky, because a user may use a larger typeface in their browser for readability, or we may move away from Inter to a different typeface in the future, which would mean that this Account SID would take up a different amount of space. So, fixed widths in general are best avoided whenever possible. Laying it out on a grid and letting the input take up the full width of its container within the grid might be a better option.

[PoojMenon]

Hi Katie,

It's currently being used in the masthead as well as on an empty state. I'm not sure how we'd go about using grids here - so would appreciate any guidance.

Figma design

[loreina]

Hi @PoojMenon!

In general, it would be nice if the Input field could be fluid with the page rather than using a fixed width. For example, you could use the Grid component inside of the Empty State Card to fluidly define the width of the elements inside it at varying screen sizes. If we moved to a different typeface, or if this page was viewed at various screen sizes, the SID might take up different amounts of space.

In this particular use case, a fixed width using size-40 could work so there's space to avoid the SID looking truncated. With either size, it would be nice to have width of the input field in the empty state match with the width used in the masthead.