TextInput: Value/Placeholder font size doesn't respect it's size variant

[maximedegreve]

Description

We've noticed an issue on the platform where small buttons are paired with small text inputs, the text inputs use a medium font size instead of a small font-size. This creates a mismatch in the visual hierarchy, as shown below:

Upon investigation, we found that small text fields are implemented correctly in Rails. However, in React and Figma, this implementation isn't consistent.

You can check the correct Rails implementation here: Text Field Playground.

Steps to reproduce

Go in Figma or the React playground and set the size to small. Then inspect the font-size which will indicate a medium size.

Version

Latest

Browser

Safari

[siddharthkp]

~@maximedegreve Should this be in primer/view_components?~

I read that incorrectly, sorry!

[lesliecdubs]

Sending this over to @langermank since she helps run the UI mob pair meeting on @tallys's recommendation 😄

[onehanddev]

Hi! @lesliecdubs @langermank I’m interested in working on this bug. Is it still available for someone to take? If there are any specific details I should consider, please let me know. Thanks!

[langermank]

Hey @onehanddev! Thanks for offering to help with this one. The issue came up again while we were working on another work stream, so @hussam-i-am has already started to fix it.