Single-select Combobox is 2px taller than other form elements

[mitc7862]

Actual Behavior

The Combobox component at medium scale is 34px tall, whereas all other form elements are 32px (at the same scale). This isn't a perceptible difference in vertical form layouts, but it makes alignment impossible for horizontal designs. I think this is a bug since scales seem to be based on multiples of 4.

(screenshot from Figma)

The same difference is apparent at small and large scales as well.

Expected Behavior

When the Combobox is set to single-select, its height should be the same as that of all other form elements with the same scale.

Reproduction Sample

https://codepen.io/MitchelCox/pen/GRBzMKa

Reproduction Steps

Place Combobox alongside other form elements
Use flex to position them horizontally
Ensure that the combo box is set to single-select

Reproduction Version

1.0.3

Relevant Info

No response

Regression?

No response

Impact

As described above, this issue affects any application where horizontal alignment is important. This is not a functional bug, so it's not high-impact. However, the single-select Combobox is one of the most-used form elements in Web Analysis and is sometimes shown side-by-side with other inputs.

Esri team

ArcGIS Map Viewer

[ashetland]

@geospatialem Another add for the Combobox Redesign Epic.

[ashetland]

Proposed updates to match Combobox height to other inputs:

• For single-select, heights should be reduced by 2px for no selection and selected.
• For multi-select, heights should be reduced by 2px when no selection is made. Combobox should be allowed to grow in height as it currently does when selections are made.

See image:

[macandcheese]

We'll be able to use the new focus offset css variable to prevent the overlap of focus from Chips.

[ashetland]

We'll be able to use the new focus offset css variable to prevent the overlap of focus from Chips.

Do we need to use the focus offset variable to correct anything? The idea with what's outlined above is that once chips populate the input, it would grow in height as it currently does. The spec'd update to the height is only to the initial unpopulated height of the input.

[macandcheese]

Yeah, maybe we could bump the y-padding on the combobox when populated - if its growing in height anyway it could have some more room. It could also be balanced with the padding to the left border of the input.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.7.0-next.9.