Sizing for Masthead and Sidebar

[hharnisc]

The Sidebar and the Masthead in the new console call for some pretty exact sizing and we can't quite get there with our current tokens. We have 3 sizes Open Sidebar Width: 220px, Collapsed Sidebar Width: 55px and Masthead Height: 76px We've got a couple options:

1. Add the sizing tokens to Paste
2. Use primitives outside of Paste to set the exact sizes

Happy to go either direction, but wanted to give y'all a chance to weigh in 🙌

[katieporter]

Hey @hharnisc! I was just thinking about this after you asked your question about the heights and widths in Slack...a couple of initial thoughts:

• On the topmast and the collapsed sidenav, you should be able to compose those without setting fixed widths/heights, and instead rely on the content inside them plus appropriate padding to get you to the height outlined in the designs (e.g. for the topmast, the tallest components inside it are 36px tall, plus 20px of padding on the top and bottom using the space-60 sizing token will get you to the desired 76px).
• The sidenav is trickier...but we might be able to get get there using existing tokens. Essentially, I think you might be able to use the size-20 sizing token (192px) + a combo of spacing tokens to get to 220px. I played around with it a little bit in a code sandbox here: https://codesandbox.io/s/console-nav-width-zis1u?file=/src/index.tsx. I'm not 100% sure if this option will work with how the design is spec'd—that'd require more investigation. If it doesn't work, I'd personally lean towards adding a 220px sizing token, but I'll let eng weigh in on this one.

[SiTaggart]

Pretty great answer @katieporter. 100% agree on heights being sized more by content.

With regards to widths, we have a similar problem with our site side nav. They are pretty arbitrary values and I don’t even think they match.

Are they even systemizable? Does a generic sizing scale make sense, like a generic spacing scale?

Is it fine to just size heights based on content but width based on arbitrary, any pixel value sizes?

I can see something like modal width sizes being systemized, but are those values reusable?

I'm not sure, widths are a bit of an unsolved problem for me at the moment.

[katieporter]

I think I like the idea of adding a specific sidebar width token, if we think that is something we'd want to unify across all of our products. Seems like a set of layout tokens—which could include the sidebar width, perhaps content area padding, that type of thing—might be useful.

[SiTaggart]

So much more use case specific, like the majority of our tokens. Less scale based. I'm into it.

[hharnisc]

I like the layout tokens idea too @katieporter

On the masthead height, we should be able to use the content to get the desired height with the approach you mentioned. Initially I was thinking a more defensive solution which locks down the height of the parent container and positions the items in the center via flexbox. I should be able to write some tests to measure the height of the parent and catch it before it hits customers though.