Browse Source

Reduce the risk of text truncation in buttons.

pull/3209/head
Benoit Marty 2 months ago
parent
commit
13853a39a5
  1. 4
      features/joinroom/impl/src/main/kotlin/io/element/android/features/joinroom/impl/JoinRoomView.kt
  2. 6
      features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomSummaryRow.kt
  3. 19
      libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/SuperButton.kt
  4. 85
      libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/Button.kt

4
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), text = stringResource(CommonStrings.action_decline),
onClick = onDeclineInvite, onClick = onDeclineInvite,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
size = ButtonSize.Large, size = ButtonSize.LargeLowPadding,
) )
Button( Button(
text = stringResource(CommonStrings.action_accept), text = stringResource(CommonStrings.action_accept),
onClick = onAcceptInvite, onClick = onAcceptInvite,
modifier = Modifier.weight(1f), 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

@ -307,19 +307,19 @@ private fun InviteButtonsRow(
modifier: Modifier = Modifier modifier: Modifier = Modifier
) { ) {
Row( Row(
modifier = modifier.padding(), modifier = modifier,
horizontalArrangement = spacedBy(12.dp) horizontalArrangement = spacedBy(12.dp)
) { ) {
OutlinedButton( OutlinedButton(
text = stringResource(CommonStrings.action_decline), text = stringResource(CommonStrings.action_decline),
onClick = onDeclineClick, onClick = onDeclineClick,
size = ButtonSize.Medium, size = ButtonSize.MediumLowPadding,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
) )
Button( Button(
text = stringResource(CommonStrings.action_accept), text = stringResource(CommonStrings.action_accept),
onClick = onAcceptClick, onClick = onAcceptClick,
size = ButtonSize.Medium, size = ButtonSize.MediumLowPadding,
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
) )
} }

19
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.preview.PreviewsDayNight
import io.element.android.libraries.designsystem.theme.components.ButtonSize 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.HorizontalDivider
import io.element.android.libraries.designsystem.theme.components.lowPaddingValue
@OptIn(CoreColorToken::class) @OptIn(CoreColorToken::class)
@Composable @Composable
@ -67,7 +68,9 @@ fun SuperButton(
val contentPadding = remember(buttonSize) { val contentPadding = remember(buttonSize) {
when (buttonSize) { when (buttonSize) {
ButtonSize.Large -> PaddingValues(horizontal = 24.dp, vertical = 13.dp) 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.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) ButtonSize.Small -> PaddingValues(horizontal = 16.dp, vertical = 5.dp)
} }
} }
@ -144,6 +147,14 @@ internal fun SuperButtonPreview() {
Text("Super button!") Text("Super button!")
} }
SuperButton(
modifier = Modifier.padding(10.dp),
buttonSize = ButtonSize.LargeLowPadding,
onClick = {},
) {
Text("Super LargeLowPadding")
}
SuperButton( SuperButton(
modifier = Modifier.padding(10.dp), modifier = Modifier.padding(10.dp),
buttonSize = ButtonSize.Medium, buttonSize = ButtonSize.Medium,
@ -152,6 +163,14 @@ internal fun SuperButtonPreview() {
Text("Super button!") Text("Super button!")
} }
SuperButton(
modifier = Modifier.padding(10.dp),
buttonSize = ButtonSize.MediumLowPadding,
onClick = {},
) {
Text("Super MediumLowPadding")
}
SuperButton( SuperButton(
modifier = Modifier.padding(10.dp), modifier = Modifier.padding(10.dp),
buttonSize = ButtonSize.Small, buttonSize = ButtonSize.Small,

85
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 // 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 @Composable
fun Button( fun Button(
text: String, text: String,
@ -139,8 +142,10 @@ private fun ButtonInternal(
) { ) {
val minHeight = when (size) { val minHeight = when (size) {
ButtonSize.Small -> 32.dp 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 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) 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) { ButtonSize.Large -> when (style) {
ButtonStyle.Filled, ButtonStyle.Filled,
ButtonStyle.Outlined -> if (hasStartDrawable) { ButtonStyle.Outlined -> if (hasStartDrawable) {
@ -179,6 +185,7 @@ private fun ButtonInternal(
PaddingValues(start = 16.dp, top = 13.dp, end = 16.dp, bottom = 13.dp) 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) { val shape = when (style) {
@ -204,8 +211,10 @@ private fun ButtonInternal(
val textStyle = when (size) { val textStyle = when (size) {
ButtonSize.Small, 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( androidx.compose.material3.Button(
@ -270,7 +279,19 @@ sealed interface IconSource {
enum class ButtonSize { enum class ButtonSize {
Small, Small,
Medium, 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 { 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) @Preview(group = PreviewGroup.Buttons)
@Composable @Composable
internal fun FilledButtonLargePreview() { 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) @Preview(group = PreviewGroup.Buttons)
@Composable @Composable
internal fun OutlinedButtonSmallPreview() { 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) @Preview(group = PreviewGroup.Buttons)
@Composable @Composable
internal fun OutlinedButtonLargePreview() { 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) @Preview(group = PreviewGroup.Buttons)
@Composable @Composable
internal fun TextButtonSmallPreview() { 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) @Preview(group = PreviewGroup.Buttons)
@Composable @Composable
internal fun TextButtonLargePreview() { 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 @Composable
private fun ButtonCombinationPreview( private fun ButtonCombinationPreview(
style: ButtonStyle, style: ButtonStyle,

Loading…
Cancel
Save