From 13853a39a57b25969bc69c07e5f6120758714803 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Wed, 17 Jul 2024 17:13:00 +0200 Subject: [PATCH] Reduce the risk of text truncation in buttons. --- .../features/joinroom/impl/JoinRoomView.kt | 4 +- .../impl/components/RoomSummaryRow.kt | 6 +- .../components/button/SuperButton.kt | 19 +++++ .../designsystem/theme/components/Button.kt | 85 +++++++++++++++++-- 4 files changed, 104 insertions(+), 10 deletions(-) diff --git a/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt b/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt index 2a4989e613..05e906b4e4 100644 --- a/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt +++ b/features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt @@ -155,13 +155,13 @@ private fun JoinRoomFooter( text = stringResource(CommonStrings.action_decline), onClick = onDeclineInvite, modifier = Modifier.weight(1f), - size = ButtonSize.Large, + size = ButtonSize.LargeLowPadding, ) Button( text = stringResource(CommonStrings.action_accept), onClick = onAcceptInvite, modifier = Modifier.weight(1f), - size = ButtonSize.Large, + size = ButtonSize.LargeLowPadding, ) } } diff --git a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt index f673998872..d80f1c7334 100644 --- a/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt +++ b/features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt @@ -307,19 +307,19 @@ private fun InviteButtonsRow( modifier: Modifier = Modifier ) { Row( - modifier = modifier.padding(), + modifier = modifier, horizontalArrangement = spacedBy(12.dp) ) { OutlinedButton( text = stringResource(CommonStrings.action_decline), onClick = onDeclineClick, - size = ButtonSize.Medium, + size = ButtonSize.MediumLowPadding, modifier = Modifier.weight(1f), ) Button( text = stringResource(CommonStrings.action_accept), onClick = onAcceptClick, - size = ButtonSize.Medium, + size = ButtonSize.MediumLowPadding, modifier = Modifier.weight(1f), ) } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/SuperButton.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/SuperButton.kt index 56da5f5211..6e9d70d407 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/SuperButton.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/SuperButton.kt @@ -53,6 +53,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview import io.element.android.libraries.designsystem.preview.PreviewsDayNight import io.element.android.libraries.designsystem.theme.components.ButtonSize import io.element.android.libraries.designsystem.theme.components.HorizontalDivider +import io.element.android.libraries.designsystem.theme.components.lowPaddingValue @OptIn(CoreColorToken::class) @Composable @@ -67,7 +68,9 @@ fun SuperButton( val contentPadding = remember(buttonSize) { when (buttonSize) { ButtonSize.Large -> PaddingValues(horizontal = 24.dp, vertical = 13.dp) + ButtonSize.LargeLowPadding -> PaddingValues(horizontal = lowPaddingValue, vertical = 13.dp) ButtonSize.Medium -> PaddingValues(horizontal = 20.dp, vertical = 9.dp) + ButtonSize.MediumLowPadding -> PaddingValues(horizontal = lowPaddingValue, vertical = 9.dp) ButtonSize.Small -> PaddingValues(horizontal = 16.dp, vertical = 5.dp) } } @@ -144,6 +147,14 @@ internal fun SuperButtonPreview() { Text("Super button!") } + SuperButton( + modifier = Modifier.padding(10.dp), + buttonSize = ButtonSize.LargeLowPadding, + onClick = {}, + ) { + Text("Super LargeLowPadding") + } + SuperButton( modifier = Modifier.padding(10.dp), buttonSize = ButtonSize.Medium, @@ -152,6 +163,14 @@ internal fun SuperButtonPreview() { Text("Super button!") } + SuperButton( + modifier = Modifier.padding(10.dp), + buttonSize = ButtonSize.MediumLowPadding, + onClick = {}, + ) { + Text("Super MediumLowPadding") + } + SuperButton( modifier = Modifier.padding(10.dp), buttonSize = ButtonSize.Small, diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt index c4e2f16fc2..cea4ff81df 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt @@ -58,6 +58,9 @@ import io.element.android.libraries.designsystem.preview.PreviewGroup // Designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&mode=design&t=U03tOFZz5FSLVUMa-1 +// Horizontal padding for button with low padding +internal val lowPaddingValue = 4.dp + @Composable fun Button( text: String, @@ -139,8 +142,10 @@ private fun ButtonInternal( ) { val minHeight = when (size) { ButtonSize.Small -> 32.dp - ButtonSize.Medium -> 40.dp - ButtonSize.Large -> 48.dp + ButtonSize.Medium, + ButtonSize.MediumLowPadding -> 40.dp + ButtonSize.Large, + ButtonSize.LargeLowPadding -> 48.dp } val hasStartDrawable = showProgress || leadingIcon != null @@ -166,6 +171,7 @@ private fun ButtonInternal( PaddingValues(start = 12.dp, top = 10.dp, end = 12.dp, bottom = 10.dp) } } + ButtonSize.MediumLowPadding -> PaddingValues(horizontal = lowPaddingValue, vertical = 10.dp) ButtonSize.Large -> when (style) { ButtonStyle.Filled, ButtonStyle.Outlined -> if (hasStartDrawable) { @@ -179,6 +185,7 @@ private fun ButtonInternal( PaddingValues(start = 16.dp, top = 13.dp, end = 16.dp, bottom = 13.dp) } } + ButtonSize.LargeLowPadding -> PaddingValues(horizontal = lowPaddingValue, vertical = 13.dp) } val shape = when (style) { @@ -204,8 +211,10 @@ private fun ButtonInternal( val textStyle = when (size) { ButtonSize.Small, - ButtonSize.Medium -> MaterialTheme.typography.labelLarge - ButtonSize.Large -> ElementTheme.typography.fontBodyLgMedium + ButtonSize.Medium, + ButtonSize.MediumLowPadding -> MaterialTheme.typography.labelLarge + ButtonSize.Large, + ButtonSize.LargeLowPadding -> ElementTheme.typography.fontBodyLgMedium } androidx.compose.material3.Button( @@ -270,7 +279,19 @@ sealed interface IconSource { enum class ButtonSize { Small, Medium, - Large + + /** + * Like [Medium] but with minimal horizontal padding, so that large texts have less risk to get truncated. + * To be used for instance for button with weight which ensures a maximal width. + */ + MediumLowPadding, + Large, + + /** + * Like [Large] but with minimal horizontal padding, so that large texts have less risk to get truncated. + * To be used for instance for button with weight which ensures a maximal width. + */ + LargeLowPadding, } internal enum class ButtonStyle { @@ -345,6 +366,15 @@ internal fun FilledButtonMediumPreview() { ) } +@Preview(group = PreviewGroup.Buttons) +@Composable +internal fun FilledButtonMediumLowPaddingPreview() { + ButtonCombinationPreview( + style = ButtonStyle.Filled, + size = ButtonSize.MediumLowPadding, + ) +} + @Preview(group = PreviewGroup.Buttons) @Composable internal fun FilledButtonLargePreview() { @@ -354,6 +384,15 @@ internal fun FilledButtonLargePreview() { ) } +@Preview(group = PreviewGroup.Buttons) +@Composable +internal fun FilledButtonLargeLowPaddingPreview() { + ButtonCombinationPreview( + style = ButtonStyle.Filled, + size = ButtonSize.LargeLowPadding, + ) +} + @Preview(group = PreviewGroup.Buttons) @Composable internal fun OutlinedButtonSmallPreview() { @@ -372,6 +411,15 @@ internal fun OutlinedButtonMediumPreview() { ) } +@Preview(group = PreviewGroup.Buttons) +@Composable +internal fun OutlinedButtonMediumLowPaddingPreview() { + ButtonCombinationPreview( + style = ButtonStyle.Outlined, + size = ButtonSize.MediumLowPadding, + ) +} + @Preview(group = PreviewGroup.Buttons) @Composable internal fun OutlinedButtonLargePreview() { @@ -381,6 +429,15 @@ internal fun OutlinedButtonLargePreview() { ) } +@Preview(group = PreviewGroup.Buttons) +@Composable +internal fun OutlinedButtonLargeLowPaddingPreview() { + ButtonCombinationPreview( + style = ButtonStyle.Outlined, + size = ButtonSize.LargeLowPadding, + ) +} + @Preview(group = PreviewGroup.Buttons) @Composable internal fun TextButtonSmallPreview() { @@ -399,6 +456,15 @@ internal fun TextButtonMediumPreview() { ) } +@Preview(group = PreviewGroup.Buttons) +@Composable +internal fun TextButtonMediumLowPaddingPreview() { + ButtonCombinationPreview( + style = ButtonStyle.Text, + size = ButtonSize.MediumLowPadding, + ) +} + @Preview(group = PreviewGroup.Buttons) @Composable internal fun TextButtonLargePreview() { @@ -408,6 +474,15 @@ internal fun TextButtonLargePreview() { ) } +@Preview(group = PreviewGroup.Buttons) +@Composable +internal fun TextButtonLargeLowPaddingPreview() { + ButtonCombinationPreview( + style = ButtonStyle.Text, + size = ButtonSize.LargeLowPadding, + ) +} + @Composable private fun ButtonCombinationPreview( style: ButtonStyle,