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 8c5d96c400..ff613226e2 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 @@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.IntrinsicSize import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding @@ -133,32 +134,46 @@ internal fun ButtonInternal( ButtonSize.Large -> 48.dp } + val hasStartDrawable = showProgress || leadingIcon != null + val contentPadding = when (size) { - ButtonSize.Medium -> { - when (style) { - ButtonStyle.Text -> PaddingValues(horizontal = 12.dp, vertical = 10.dp) - else -> PaddingValues(horizontal = 16.dp, vertical = 10.dp) - } + ButtonSize.Medium -> when (style) { + ButtonStyle.Filled, + ButtonStyle.Outlined -> if (hasStartDrawable) + PaddingValues(start = 16.dp, top = 10.dp, end = 24.dp, bottom = 10.dp) + else + PaddingValues(start = 24.dp, top = 10.dp, end = 24.dp, bottom = 10.dp) + ButtonStyle.Text -> if (hasStartDrawable) + PaddingValues(start = 12.dp, top = 10.dp, end = 16.dp, bottom = 10.dp) + else + PaddingValues(start = 12.dp, top = 10.dp, end = 12.dp, bottom = 10.dp) } - ButtonSize.Large -> { - when (style) { - ButtonStyle.Text -> PaddingValues(horizontal = 16.dp, vertical = 13.dp) - else -> PaddingValues(horizontal = 24.dp, vertical = 13.dp) - } + ButtonSize.Large -> when (style) { + ButtonStyle.Filled, + ButtonStyle.Outlined -> if (hasStartDrawable) + PaddingValues(start = 24.dp, top = 13.dp, end = 32.dp, bottom = 13.dp) + else + PaddingValues(start = 32.dp, top = 13.dp, end = 32.dp, bottom = 13.dp) + ButtonStyle.Text -> if (hasStartDrawable) + PaddingValues(start = 12.dp, top = 13.dp, end = 16.dp, bottom = 13.dp) + else + PaddingValues(start = 16.dp, top = 13.dp, end = 16.dp, bottom = 13.dp) } } val shape = when (style) { - ButtonStyle.Filled, ButtonStyle.Outlined -> RoundedCornerShape(percent = 50) + ButtonStyle.Filled, + ButtonStyle.Outlined -> RoundedCornerShape(percent = 50) ButtonStyle.Text -> RectangleShape } val border = when (style) { - ButtonStyle.Filled, ButtonStyle.Text -> null + ButtonStyle.Filled -> null ButtonStyle.Outlined -> BorderStroke( width = 1.dp, color = ElementTheme.colors.borderInteractiveSecondary ) + ButtonStyle.Text -> null } val textStyle = when (size) { @@ -166,11 +181,6 @@ internal fun ButtonInternal( ButtonSize.Large -> ElementTheme.typography.fontBodyLgMedium } - val internalPadding = when { - style == ButtonStyle.Text -> if (leadingIcon != null) PaddingValues(start = 8.dp) else PaddingValues(0.dp) - else -> PaddingValues(horizontal = 8.dp) - } - androidx.compose.material3.Button( onClick = { if (!showProgress) { @@ -195,6 +205,7 @@ internal fun ButtonInternal( color = LocalContentColor.current, strokeWidth = 2.dp, ) + Spacer(modifier = Modifier.width(8.dp)) } leadingIcon != null -> { androidx.compose.material.Icon( @@ -203,15 +214,14 @@ internal fun ButtonInternal( tint = LocalContentColor.current, modifier = Modifier.size(20.dp), ) + Spacer(modifier = Modifier.width(8.dp)) } - else -> Unit } Text( text = text, style = textStyle, maxLines = 1, overflow = TextOverflow.Ellipsis, - modifier = Modifier.padding(internalPadding), ) } } diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme.components_null_Buttons_TextButtonLarge_0_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme.components_null_Buttons_TextButtonLarge_0_null,NEXUS_5,1.0,en].png index 775891e893..1f610f0fa1 100644 --- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme.components_null_Buttons_TextButtonLarge_0_null,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme.components_null_Buttons_TextButtonLarge_0_null,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:83ae98e86b9e229c82e66e495ce9130f8aac3fd3364479409dd8aec2f60f5c44 -size 32430 +oid sha256:d8233ab7e58175a8dbd14aa8c30dda882176099232cd56417102fa3675efe92b +size 31114 diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme.components_null_Buttons_TextButtonMedium_0_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme.components_null_Buttons_TextButtonMedium_0_null,NEXUS_5,1.0,en].png index 5eb71bc999..9c23dea6cf 100644 --- a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme.components_null_Buttons_TextButtonMedium_0_null,NEXUS_5,1.0,en].png +++ b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme.components_null_Buttons_TextButtonMedium_0_null,NEXUS_5,1.0,en].png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d8e9ce0aafcaa2c873d706c6e477f2103c8f930f0c15e186a981eaa831e51bfc -size 30609 +oid sha256:974dd693b78cc08e278ff81a65e234629cdbf1075d3fbf255895cf1ee2eb906c +size 29264