Reduce the risk of text truncation in buttons.
This commit is contained in:
parent
a6b6d2ab7a
commit
1dcdde98c2
4 changed files with 104 additions and 10 deletions
|
|
@ -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,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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…
Add table
Add a link
Reference in a new issue