Reduce the risk of text truncation in buttons.

2024-07-17 17:13:00 +02:00
parent a6b6d2ab7a
commit 1dcdde98c2
4 changed files with 104 additions and 10 deletions
--- 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,
                    )
                }
            }
--- 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),
        )
    }
--- 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,
--- 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,