-
Notifications
You must be signed in to change notification settings - Fork 1.1k
TextInput: text size ignores size; add a text-input-control target #6014
Description
Version: @astryxdesign/core 0.5.2, @astryxdesign/theme-neutral 0.5.2
What I'm seeing
size="sm" | "md" | "lg" on TextInput changes the height of the control (24 / 32 / 40px via --size-element-*) and nothing else. The typed text and the placeholder stay at --text-body-size (14px in neutral) in all three. A sm input is therefore body-size text squeezed into a 24px box, and an lg input is the same 14px text floating in a 40px box.
TextArea behaves the same way: sm and md add no styles to the control at all, lg only adds vertical padding.
Quick repro:
<TextInput size="sm" label="Search" placeholder="Search vehicles..." /> <TextInput size="md" label="Search" placeholder="Search vehicles..." /> <TextInput size="lg" label="Search" placeholder="Search vehicles..." />
Inspect the three <input> elements: computed font-size is identical.
What I'd expect
Two options, in order of preference:
-
Let typography follow
size. Something likesm → --font-size-sm,md → --font-size-base,lg → --font-size-lg, so a compact toolbar search and a hero form field don't share the exact same type. The field label already adapts to the size, so the control is the odd one out. -
If keeping the type fixed is intentional, expose a
text-input-controltheme target on the inner<input>, the way 0.5.1 addedtext-area-controlforTextArea. Right now the only reachable targets aretext-input(the wrapper),fieldandfield-label. Setting a font size on the wrapper does nothing because the control sets its own, so a theme has no sanctioned way to adjust this per size. With the target we could decide the scale in our own theme and leave the default alone.