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