Merge pull request #3209 from element-hq/feature/bma/fixTruncatedButtons

Reduce the risk of text truncation in buttons.

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,
                     )
                 }
             }

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),
         )
     }

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.lowHorizontalPaddingValue
 
 @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 = lowHorizontalPaddingValue, vertical = 13.dp)
             ButtonSize.Medium -> PaddingValues(horizontal = 20.dp, vertical = 9.dp)
+            ButtonSize.MediumLowPadding -> PaddingValues(horizontal = lowHorizontalPaddingValue, 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,

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 lowHorizontalPaddingValue = 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.Medium,
-        ButtonSize.Large -> 48.dp
+        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 = lowHorizontalPaddingValue, 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 = lowHorizontalPaddingValue, 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.Medium,
-        ButtonSize.Large -> ElementTheme.typography.fontBodyLgMedium
+        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,

tests/uitests/src/test/snapshots/images/libraries.designsystem.components.button_SuperButton_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1c0eb69c3ea131caaa9b540b0c6e23111b75073d4342c5f3cea4bdb12bed7fbf
+oid sha256:6fd8d40302816ede944263e87ee105ce3bb33bcf1f3861dc59bb0ff4f31c1d1b
-size 48870
+size 72118

tests/uitests/src/test/snapshots/images/libraries.designsystem.components.button_SuperButton_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:84a5cb5e533bebba21a2ca099d8d047eff414240b6a21171502a8db30077966d
+oid sha256:fea1bfdd8845b09539436449ee9920dab20228eac688bf1e8f7af0fd01ad004e
-size 49752
+size 73745

tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_FilledButtonLargeLowPadding_Buttons_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:08838e599a49c114a9736303953b031f08f53ce690080c909bda0efddfe4bd0b
+size 65374

tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_FilledButtonMediumLowPadding_Buttons_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a34ae5ed6a1ad53a44336cd2042fc14243a759bed7c81f0de9e7a05fcb0ce3d2
+size 58604

tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_OutlinedButtonLargeLowPadding_Buttons_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:198f87b7bd5cbcbfcd076950026ff1a4f0eadc50fdd98cba6ee84a1faaead788
+size 78025

tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_OutlinedButtonMediumLowPadding_Buttons_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:52aa136b01eed48c172d219b20509e6836b06f12456033a6b86145706d4a316c
+size 70300

tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_TextButtonLargeLowPadding_Buttons_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8679b3b62448612b75073886eb9de0b92a1000d9a81bb2ed9cc25317700a12fe
+size 42786

tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_TextButtonMediumLowPadding_Buttons_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82b77833724443090325023f883dc8c073f71bdcc0ff1b3f12d7c557cdab5e59
+size 40378