Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
Reduce the risk of text truncation in buttons.
This commit is contained in:
Benoit Marty 2024-07-18 10:32:48 +02:00 • committed by GitHub
commit 2216c11039
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 126 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt
View file

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

6
features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt
View file

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

19
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/SuperButton.kt
View file

@ -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,

85
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt
View file

@ -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,

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

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

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

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

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_FilledButtonLargeLowPadding_Buttons_en.png Normal file
View file

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

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_FilledButtonMediumLowPadding_Buttons_en.png Normal file
View file

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

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_OutlinedButtonLargeLowPadding_Buttons_en.png Normal file
View file

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

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_OutlinedButtonMediumLowPadding_Buttons_en.png Normal file
View file

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

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_TextButtonLargeLowPadding_Buttons_en.png Normal file
View file

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

3
tests/uitests/src/test/snapshots/images/libraries.designsystem.theme.components_TextButtonMediumLowPadding_Buttons_en.png Normal file
View file

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