Hello, is `TextButton`’s `contentPadding` dependin...

# compose

[nuhkoca]

Hello, is `TextButton`’s contentPadding depending on text length? Longer text lesser contentPadding or?

[Stylianos Gakis]

Doesn’t sound like that would be the case.
Maybe try adding a debug modifier to check how much space your two buttons actually take?

fun Modifier.debugBorder(color: Color = Color.Red, width: Dp = 1.dp): Modifier {
    return this.border(width, color)
}

[nuhkoca]

Thank you. It is like

[nuhkoca]

Apparently start and end paddings differ 😕

[Stylianos Gakis]

Very interesting, could you also share the code of how you define those two, just to make sure there’s nothing obviously different there either. Then I guess we’d have to cc someone who works with compose text and whatnot to give us a better idea what is happening here and if there’s a way to avoid it.

[nuhkoca]

Thanks, we have our own DS actually I don’t know how can I help here but let me share some code blocks. I never play with paddings btw

This is the component

@Composable
fun SortBy(
    label: String,
    criteria: String,
    direction: Direction,
    onSortCriteriaClicked: () -> Unit,
    onSortDirectionClicked: () -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = TRTheme.spacing.default, end = TRTheme.spacing.single),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        TRText(
            text = label,
            style = TRTheme.typography.subtitle,
            color = TRTheme.colors.appForeground2
        )

        Box(Modifier.weight(1f)) {
            TRTextButtonDefault(text = criteria, onClick = onSortCriteriaClicked)
        }

        TRIconButtonSmall(onClick = onSortDirectionClicked) {
            val rotation = animateFloatAsState(targetValue = if (direction == Direction.Ascending) 180f else 0f)

            TRIcon(
                modifier = TRModifier().graphicsLayer(rotation.value),
                iconResId = TRTheme.icons.arrowUpXS,
                useLocalColorAndAlpha = true
            )
        }
    }
}

This is our TextButton definition

@Composable
fun TRTextButtonDefault(
    modifier: TRModifier = TRModifier(),
    text: String,
    onClick: () -> Unit,
    isEnabled: Boolean = true
) {
    TRTextButton(
        modifier = modifier,
        color = TRTheme.colors.primaryBlue2,
        onClick = onClick,
        isEnabled = isEnabled
    ) {
        Label(text, TRTheme.typography.subtitle)
    }
}

@Composable
private fun Label(text: String, textStyle: TextStyle) {
    TRText(
        text = text,
        maxLines = 1,
        style = textStyle,
        overflow = TextOverflow.Ellipsis
    )
}

[nuhkoca]

I see, I used Compose’s TextButton and it works well. Something problematic in our implementation, looking into it, thank you!

[Stylianos Gakis]

Nice! I am glad I helped do the first step at least. If you do find out what the issue was exactly I would be happy to hear about it. I am really curious to learn what could be happening 😅

[nuhkoca]

I am sorry, couldn’t get back to you 🙂

Since TextButton is a button under the hood, it centers its content. Since my custom font is small-sized, text seems to be a bit more indented when the text is small enough, so root cause was my font size 🙂 However, if I don’t specify any textStyle, it looks good and consistent

[Stylianos Gakis]

Interesting, thanks for sharing 😊