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

Fix MainActionButton layout for long texts (#3158)

Browse source 
* Fix `MainActionButton` layout for long texts

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
Jorge Martin Espinosa 2024-07-08 13:43:24 +02:00 • committed by GitHub
parent d9a498c86a
commit c550436500
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
42 changed files with 97 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

22
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/button/MainActionButton.kt
View file

@ -18,12 +18,12 @@ package io.element.android.libraries.designsystem.components.button
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.LocalContentColor
@ -33,6 +33,9 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.text.style.Hyphens
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import io.element.android.compound.theme.ElementTheme
@ -61,7 +64,7 @@ fun MainActionButton(
onClick = onClick,
indication = ripple
)
.widthIn(min = 76.dp),
.widthIn(min = 76.dp, max = 96.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
val tintColor = if (enabled) LocalContentColor.current else MaterialTheme.colorScheme.secondary
@ -73,8 +76,10 @@ fun MainActionButton(
Spacer(modifier = Modifier.height(14.dp))
Text(
title,
style = ElementTheme.typography.fontBodyMdMedium,
style = ElementTheme.typography.fontBodyMdMedium.copy(hyphens = Hyphens.Auto),
color = tintColor,
overflow = TextOverflow.Visible,
textAlign = TextAlign.Center,
)
}
}
@ -89,13 +94,20 @@ internal fun MainActionButtonPreview() {
@Composable
private fun ContentsToPreview() {
Row(Modifier.padding(10.dp)) {
Row(
modifier = Modifier.padding(10.dp),
horizontalArrangement = Arrangement.spacedBy(20.dp)
) {
MainActionButton(
title = "Share",
imageVector = CompoundIcons.ShareAndroid(),
onClick = { },
)
Spacer(modifier = Modifier.width(20.dp))
MainActionButton(
title = "Share with a long text",
imageVector = CompoundIcons.ShareAndroid(),
onClick = { },
)
MainActionButton(
title = "Share",
imageVector = CompoundIcons.ShareAndroid(),