Add Buttons object for properly themed compose buttons.
This commit is contained in:
Alex Hart
Greyson Parrelli
parent
a9accfb074
commit
f20d929292
1 changed files with 291 additions and 0 deletions
291
core-ui/src/main/java/org/signal/core/ui/Buttons.kt
Normal file
291
core-ui/src/main/java/org/signal/core/ui/Buttons.kt
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
package org.signal.core.ui
|
||||
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.RowScope
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.heightIn
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.material3.Button
|
||||
import androidx.compose.material3.ButtonColors
|
||||
import androidx.compose.material3.ButtonDefaults
|
||||
import androidx.compose.material3.ButtonElevation
|
||||
import androidx.compose.material3.FilledTonalButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.ProvideTextStyle
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import org.signal.core.ui.theme.SignalTheme
|
||||
|
||||
object Buttons {
|
||||
|
||||
private val largeButtonContentPadding = PaddingValues(
|
||||
horizontal = 24.dp,
|
||||
vertical = 12.dp
|
||||
)
|
||||
|
||||
private val mediumButtonContentPadding = PaddingValues(
|
||||
horizontal = 24.dp,
|
||||
vertical = 10.dp
|
||||
)
|
||||
|
||||
private val smallButtonContentPadding = PaddingValues(
|
||||
horizontal = 16.dp,
|
||||
vertical = 8.dp
|
||||
)
|
||||
|
||||
@Composable
|
||||
fun LargePrimary(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
shape: Shape = ButtonDefaults.shape,
|
||||
colors: ButtonColors = ButtonDefaults.buttonColors(),
|
||||
elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
|
||||
border: BorderStroke? = null,
|
||||
contentPadding: PaddingValues = largeButtonContentPadding,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
content: @Composable RowScope.() -> Unit
|
||||
) {
|
||||
Button(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
shape = shape,
|
||||
colors = colors,
|
||||
elevation = elevation,
|
||||
border = border,
|
||||
contentPadding = contentPadding,
|
||||
interactionSource = interactionSource,
|
||||
content = content
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun LargeTonal(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
shape: Shape = ButtonDefaults.filledTonalShape,
|
||||
colors: ButtonColors = ButtonDefaults.filledTonalButtonColors(),
|
||||
elevation: ButtonElevation? = ButtonDefaults.filledTonalButtonElevation(),
|
||||
border: BorderStroke? = null,
|
||||
contentPadding: PaddingValues = largeButtonContentPadding,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
content: @Composable RowScope.() -> Unit
|
||||
) {
|
||||
FilledTonalButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
shape = shape,
|
||||
colors = colors,
|
||||
elevation = elevation,
|
||||
border = border,
|
||||
contentPadding = contentPadding,
|
||||
interactionSource = interactionSource,
|
||||
content = content
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun MediumTonal(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
shape: Shape = ButtonDefaults.filledTonalShape,
|
||||
colors: ButtonColors = ButtonDefaults.filledTonalButtonColors(),
|
||||
elevation: ButtonElevation? = ButtonDefaults.filledTonalButtonElevation(),
|
||||
border: BorderStroke? = null,
|
||||
contentPadding: PaddingValues = mediumButtonContentPadding,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
content: @Composable RowScope.() -> Unit
|
||||
) {
|
||||
FilledTonalButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
shape = shape,
|
||||
colors = colors,
|
||||
elevation = elevation,
|
||||
border = border,
|
||||
contentPadding = contentPadding,
|
||||
interactionSource = interactionSource,
|
||||
content = content
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun Small(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
shape: Shape = ButtonDefaults.shape,
|
||||
colors: ButtonColors = ButtonDefaults.buttonColors(
|
||||
containerColor = MaterialTheme.colorScheme.secondaryContainer, // TODO -- need extended colors
|
||||
contentColor = MaterialTheme.colorScheme.onSurface
|
||||
),
|
||||
elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),
|
||||
border: BorderStroke? = null,
|
||||
contentPadding: PaddingValues = smallButtonContentPadding,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
content: @Composable RowScope.() -> Unit
|
||||
) {
|
||||
Button(
|
||||
onClick = onClick,
|
||||
modifier = modifier.heightIn(min = 32.dp),
|
||||
enabled = enabled,
|
||||
shape = shape,
|
||||
colors = colors,
|
||||
elevation = elevation,
|
||||
border = border,
|
||||
contentPadding = contentPadding,
|
||||
interactionSource = interactionSource,
|
||||
content = {
|
||||
ProvideTextStyle(value = MaterialTheme.typography.labelMedium) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun LargePrimaryButtonPreview(
|
||||
darkMode: Boolean,
|
||||
enabled: Boolean
|
||||
) {
|
||||
SignalTheme(isDarkMode = darkMode) {
|
||||
Buttons.LargePrimary(
|
||||
onClick = {},
|
||||
enabled = enabled
|
||||
) {
|
||||
Text("Button")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun LargeTonalButtonPreview(
|
||||
darkMode: Boolean,
|
||||
enabled: Boolean
|
||||
) {
|
||||
SignalTheme(isDarkMode = darkMode) {
|
||||
Buttons.LargeTonal(
|
||||
onClick = {},
|
||||
enabled = enabled
|
||||
) {
|
||||
Text("Button")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun MediumTonalButtonPreview(
|
||||
darkMode: Boolean,
|
||||
enabled: Boolean
|
||||
) {
|
||||
SignalTheme(isDarkMode = darkMode) {
|
||||
Buttons.MediumTonal(
|
||||
onClick = {},
|
||||
enabled = enabled
|
||||
) {
|
||||
Text("Button")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun SmallButtonPreview(
|
||||
darkMode: Boolean,
|
||||
enabled: Boolean
|
||||
) {
|
||||
SignalTheme(isDarkMode = darkMode) {
|
||||
Buttons.Small(
|
||||
onClick = {},
|
||||
enabled = enabled
|
||||
) {
|
||||
Text("Button")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun LargePrimaryButtonPreview() {
|
||||
Column {
|
||||
Row {
|
||||
LargePrimaryButtonPreview(darkMode = false, enabled = true)
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
LargePrimaryButtonPreview(darkMode = true, enabled = true)
|
||||
}
|
||||
|
||||
Row {
|
||||
LargePrimaryButtonPreview(darkMode = false, enabled = false)
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
LargePrimaryButtonPreview(darkMode = true, enabled = false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun LargeTonalButtonPreview() {
|
||||
Column {
|
||||
Row {
|
||||
LargeTonalButtonPreview(darkMode = false, enabled = true)
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
LargeTonalButtonPreview(darkMode = true, enabled = true)
|
||||
}
|
||||
|
||||
Row {
|
||||
LargeTonalButtonPreview(darkMode = false, enabled = false)
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
LargeTonalButtonPreview(darkMode = true, enabled = false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun MediumTonalButtonPreview() {
|
||||
Column {
|
||||
Row {
|
||||
MediumTonalButtonPreview(darkMode = false, enabled = true)
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
MediumTonalButtonPreview(darkMode = true, enabled = true)
|
||||
}
|
||||
|
||||
Row {
|
||||
MediumTonalButtonPreview(darkMode = false, enabled = false)
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
MediumTonalButtonPreview(darkMode = true, enabled = false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
private fun SmallButtonPreview() {
|
||||
Column {
|
||||
Row {
|
||||
SmallButtonPreview(darkMode = false, enabled = true)
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
SmallButtonPreview(darkMode = true, enabled = true)
|
||||
}
|
||||
|
||||
Row {
|
||||
SmallButtonPreview(darkMode = false, enabled = false)
|
||||
Spacer(modifier = Modifier.width(10.dp))
|
||||
SmallButtonPreview(darkMode = true, enabled = false)
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue