Allow to control `contentAlignment` in TextField

[krizzu]

Hey Alex, thanks for great library 👋

I’m using the TextField component in one of my projects and I run into a use case, where I need the inner text input to be centered. Would it be possible to add a custom param to control Box’s contentAlignment parameter here?

[alexstyl]

Isn't this achieved by passing a vertical center alignment? for horizontal you could set the text alignment itself to center

[krizzu]

Text alignment wouldn't work here, because innerTextField is text component, which takes as little width as possible to render correctly in one line. Using content alignment prop on Box, you can organize the placement of the text field itself, not its content, so it can be placed in center, no matter the text size.

Here's an example:

    Box(modifier = Modifier.fillMaxSize().background(Color.White).padding(32.dp)) {
        TextField(
            value = "Am I centered?",
            onValueChange = {},
            backgroundColor = Color.Green,
            textAlign = TextAlign.Center,
        )
    }

---

Here's TextField2, which accepts contentAlignment param:

    Box(modifier = Modifier.fillMaxSize().background(Color.White).padding(32.dp)) {
        TextField2(
            value = "Am I centered?",
            onValueChange = {},
            backgroundColor = Color.Green,
            contentAlignment = Alignment.Center
        )
    }

[alexstyl]

I see what you mean. Valid request

I'll see if I can get textAlign = TextAlign.Center to control it though as you shouldn't need to worry about the implementation details.

[alexstyl]

Just pushed a new API for TextField with better styling controls.

the TextAlign property also controls where the text input will be placed inside the TextField.

Will be available in the next release

[krizzu]

Great, thank you