Button/Input Sizing and Alignment Questions

[jkiga]

Hi there!

I'm new to Twilio and I have a couple of questions around how the buttons and inputs are built.
@ceyerkes and I are building out an A2P library for ourselves so it will faster for us to design in the future as we are both working on this project.

We have noticed on buttons and inputs specifically that objects that have borders sit outside the bound of the constraint. So when we align buttons or inputs to other objects, it is ever so slightly off by 1px because it aligns from the bounds of the button/input and not the outer edge of the border. I've attached a few examples - hopefully they help my explanation :)

We were just wondering if this is intentional or if we could fix this in Paste so the alignment and spacing can be a little more accurate.

[serifluous]

Hey @jkiga ! You've stumbled upon one of the quirks of the system, and the restrictions of working within a consistent 4px spacing & sizing structure.

Our buttons and inputs use shadows for their borders (rather than true borders), so that the full height of a button/input is still a multiple of 4. Shadows don't factor into the browser's size calculations for UI elements, but borders do (i.e., a 1px border would add 2px extra height/width to each element). Not sure if you're familiar or not with the CSS Box model, but that's what's happening here—I'm happy to share more if you're not familiar.

Screenshot of our secondary button if you use inspect its size and border:

However this does make the border visually appear a few extra pixels wider and taller than their true size, which you've pointed out. For form fields, we were ok with the trade-off of the "border" appearing a pixel off from the form text label and believed that customers would find it negligible.

tl;dr Yep, it's intentional. This question's come up a few times in the past (but not in GitHub Discussions unfortunately), so I wanted to make sure our answer here is documented comprehensively. Sorry if it's more than you asked for :)

But! I'm curious what you're trying to align in your last 2 screenshots. If you can share a Figma file, that'd be really helpful.

[jkiga]

Thank you @serifluous! This makes a ton of sense. I was thinking that it had something to do with the CSS Box model but wasn't sure. Ah yes, the 4px spacing - it's clicking now. This is exactly what I needed, very helpful!

One follow up question - what would your recommendation be to calculate the distance from the button/input to another element? Would the best practice be to calculate from hard bound of the button/input to another element or from the edge of the shadow from the button/input? I added more screenshots, hopefully that helps too.

This is the file where we are building out the A2P library. Hopefully it is helpful! Common items we ran into alignment issues with were things that didn't have a border, like alerts or tables.
https://www.figma.com/file/SvLsXka2VJj1jXCgMzKGJN/%F0%9F%93%95-A2P?node-id=0%3A1

[serifluous]

I'd recommend calculating spacing from the boundary Figma gives you since that's what engineers will see when they inspect the files for spacing.

As a reference for Button spacing, you can take a look at our Modals, which have buttons horizontally separated by space-50 (or 16px): https://paste.twilio.design/components/modal#default-modal

For alignment with other components, feel free to drop a comment in your Figma file to point out where you feel like the alignment really feels off, and at-mention me so I can grab a screenshot of it. We can take it into consideration as we evolve the design language. It'll be easier for us to align things that have borders all around (cards, tables) with buttons and form fields than things that don't (alerts). But we'll be working on layouts more as part of our design language work this year, so we'll take the time to refine some of these things and would love some real scenarios and screens where you'd like to see improvement.

[ceyerkes]

Thanks so much for the comprehensive reply @serifluous! And if I can help out with the layout project, please let me know.

[jkiga]

Thank you @serifluous for helping us out! This is exactly what we needed.