Hey everyone, I have a question regarding the material3 `OutlinedTextField` According to the M3 spec...

# compose

[francisco]

Hey everyone, I have a question regarding the material3 OutlinedTextField
According to the M3 spec, an optional leading/trailing icon slot of size 24.dp exists.
When I implement the OutlinedTextField and pass in an icon, I see the slot gets hardcoded to be 48x48.dp based on this property:

internal val IconDefaultSizeModifier = Modifier.defaultMinSize(48.dp, 48.dp)

in TextFieldImpl.kt
This is causing some bad “padding” between a trailing/leading icon and prefix/suffix.
is this a bug on compose implementation? shouldn’t it be 24x24?
Here is what my text input looks like. notice how “far” away the traling icon is from suffix

[francisco]

my OutlinedTextInput composable

[francisco]

What I am trying to achieve:

[francisco]

material 3 spec:
https://m3.material.io/components/text-fields/specs

[dewildte]

I would assert this is not a bug because the leading and trailing icons are intended to support click-ability.
Clickable icon buttons are supposed to have a touch target of at least 48.dp .
That makes the padding intended and as per design.

[dewildte]

The icon itself is 24.dp but it probably lives in a box of at least 48.dp

[francisco]

image.png

[francisco]

ok yeah that makes more sense

[francisco]

thanks @dewildte

[dewildte]

Screenshot 2023-08-31 at 18.11.00.png

[dewildte]

Screenshot 2023-08-31 at 18.12.19.png

[dewildte]

And there it is.

[francisco]

👀
what theme are you using? it’s beautiful

[dewildte]

I am using the Material Theme plugin with the Night Owl theme applied.

[dewildte]

It has a Light Owl theme for the day time too.