Component margins should include border

[mollykreis]

🐛 Bug Report

In many components (text-field, number-field, select, combobox, etc), the visual design spec shows a specific spacing (e.g. 4px or 8px) from the border of the component to the inner element (e.g. input, icon, button). Within the visual designs, that spacing includes the border. However, in the implementation, the spacing does not include the border. As a result, the implementation and visual designs are 1px off from each other.

For example, in the select/combobox, the visual design shows 3px between the border and the options (4px from the edge of the control and the options):

while the implementation has 4px between the border and the options.

💻 Repro or Code Sample

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
• Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
• Version [e.g. 1.8.0]

[rajsite]

I'm gonna capture this old comment here but don't have a precise idea of the outcome yet.

My concern is that trying to include the border size as part of the spacing is a figma problem. Figma's settings can be changed to align with CSS, but not CSS's out of the box behavior. I think trying to fight this everywhere is going to be very difficult to get consistent. Particularly for compositions outside of nimble (even if we accurately handle the spacing everywhere).

From Brandon (6/29/2023 Nimble Team Meeting):

Milan Raj Jesse Attas Aiden Ducey-Kline Here is an experiment with changing the stroke excluded to included setting.

The summary is that the change can be made if we decide it's truly helpful but will require a fair amount of work to adjust all the margin and padding settings.

Also, when the width of the stroke is changed, the reading of the padding in-between is accurate; it does not have the same issue as in code where the width in-between stays the same regardless of the stroke width.