Hi All. I'm noticing some strange behavior with T...

# compose

[mattinger]

Hi All. I'm noticing some strange behavior with TextButton (and likely just Button in general, as TextButton is just a styled button). I have the following preview using material3:

@Preview
@Composable
fun PreviewSingleButton() {
    Scaffold {
        Box(modifier = Modifier.padding(it)) {
            TextButton(
                onClick = {},
                shape = RectangleShape,
                modifier = Modifier,
            ) {
                Text("This is the secondary CTA. It is long and will go to another line and another line")
                Spacer(modifier = Modifier.width(4.dp))
                Icon(
                    modifier = Modifier.requiredSize(16.dp),
                    painter = painterResource(android.R.drawable.arrow_down_float),
                    contentDescription = null
                )
            }
        }
    }
}

When i run this preview, it seems that the measurement is way off when i have long blurbs of text (yes i know buttons should have short concise text, but i don't have control over the text). It seems like it's not respecting the sizing properly and it's overlapping the icon and the text. I also tried using the size modifier on the icon instead, but when i do that, it doesn't appear at all and the layout inspector indicates that it's measured at zero width.

[stantronic]

try setting maxLines =1 and overflow = TextOverflow.Ellipsis on the Text.

[stantronic]

you can also add a Modifier.weight(1f) on the text if you want the text to use all the space not used by the icon and spacer

[mattinger]

we actually don't want to set the max lines (again this is not my decision, it's the parameters we've been given to work with).

[Aditya Bhaskar]

Add weight(1f) on the text. That will place the text last after the icon and the spacer, and it'll only occupy the remaining space.