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..3106043ed8 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.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, 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..fa20c968a9 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 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.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 = 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.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, diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.button_SuperButton_Day_0_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.button_SuperButton_Day_0_en.png index c6cac3c106..c8ec08b001 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.button_SuperButton_Day_0_en.png +++ b/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 -size 48870 +oid sha256:6fd8d40302816ede944263e87ee105ce3bb33bcf1f3861dc59bb0ff4f31c1d1b +size 72118 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.button_SuperButton_Night_0_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.button_SuperButton_Night_0_en.png index 3c87aacfd5..d6019ca1c8 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.button_SuperButton_Night_0_en.png +++ b/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 -size 49752 +oid sha256:fea1bfdd8845b09539436449ee9920dab20228eac688bf1e8f7af0fd01ad004e +size 73745 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_FilledButtonLargeLowPadding_Buttons_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_FilledButtonLargeLowPadding_Buttons_en.png new file mode 100644 index 0000000000..811fb4cd1a --- /dev/null +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_FilledButtonMediumLowPadding_Buttons_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_FilledButtonMediumLowPadding_Buttons_en.png new file mode 100644 index 0000000000..c5e92cc540 --- /dev/null +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_OutlinedButtonLargeLowPadding_Buttons_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_OutlinedButtonLargeLowPadding_Buttons_en.png new file mode 100644 index 0000000000..8e6a12e5b0 --- /dev/null +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_OutlinedButtonMediumLowPadding_Buttons_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_OutlinedButtonMediumLowPadding_Buttons_en.png new file mode 100644 index 0000000000..0a397ea213 --- /dev/null +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_TextButtonLargeLowPadding_Buttons_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_TextButtonLargeLowPadding_Buttons_en.png new file mode 100644 index 0000000000..0575d612aa --- /dev/null +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_TextButtonMediumLowPadding_Buttons_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_TextButtonMediumLowPadding_Buttons_en.png new file mode 100644 index 0000000000..844c2a13a2 --- /dev/null +++ b/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