diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconToggleButton.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconToggleButton.kt index 6b0965ffb1..dbf1365bb2 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconToggleButton.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconToggleButton.kt @@ -17,6 +17,7 @@ package io.element.android.libraries.designsystem.theme.components import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Column import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.CheckCircle import androidx.compose.material.icons.filled.RadioButtonUnchecked @@ -55,18 +56,23 @@ fun IconToggleButton( @Preview(group = PreviewGroup.Toggles) @Composable -internal fun IconToggleButtonPreview() = ElementThemedPreview(vertical = false) { ContentToPreview() } +internal fun IconToggleButtonCheckedPreview() = ElementThemedPreview(vertical = false) { ContentToPreview(true) } + +@Preview(group = PreviewGroup.Toggles) +@Composable +internal fun IconToggleButtonUncheckedPreview() = ElementThemedPreview(vertical = false) { ContentToPreview(false) } @Composable -private fun ContentToPreview() { - var checked by remember { mutableStateOf(false) } - IconToggleButton( - checked = checked, - onCheckedChange = { checked = !checked }, - ) { +private fun ContentToPreview(defaultCheck: Boolean) { + var checked by remember { mutableStateOf(defaultCheck) } + val icon: @Composable () -> Unit = { Icon( imageVector = if (checked) Icons.Default.CheckCircle else Icons.Default.RadioButtonUnchecked, contentDescription = "IconToggleButton" ) } + Column { + IconToggleButton(checked = checked, enabled = true, onCheckedChange = { checked = !checked }, content = icon) + IconToggleButton(checked = checked, enabled = false, onCheckedChange = { checked = !checked }, content = icon) + } } diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/RadioButton.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/RadioButton.kt index a8b186a6b2..9d85cf8d87 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/RadioButton.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/RadioButton.kt @@ -17,16 +17,16 @@ package io.element.android.libraries.designsystem.theme.components 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.material3.RadioButtonColors import androidx.compose.material3.RadioButtonDefaults import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview -import androidx.compose.ui.unit.dp import io.element.android.libraries.designsystem.preview.ElementThemedPreview import io.element.android.libraries.designsystem.preview.PreviewGroup import io.element.android.libraries.theme.ElementTheme @@ -63,18 +63,17 @@ internal fun compoundRadioButtonColors(): RadioButtonColors { @Preview(group = PreviewGroup.Toggles) @Composable -internal fun RadioButtonPreview() = ElementThemedPreview(vertical = false) { ContentToPreview() } +internal fun RadioButtonCheckedPreview() = ElementThemedPreview(vertical = false) { ContentToPreview(true) } + +@Preview(group = PreviewGroup.Toggles) +@Composable +internal fun RadioButtonUncheckedPreview() = ElementThemedPreview(vertical = false) { ContentToPreview(false) } @Composable -private fun ContentToPreview() { +private fun ContentToPreview(defaultCheck: Boolean) { + var checked by remember { mutableStateOf(defaultCheck) } Column { - Row(horizontalArrangement = Arrangement.spacedBy(6.dp)) { - RadioButton(selected = false, onClick = {}) - RadioButton(selected = false, enabled = false, onClick = {}) - } - Row(horizontalArrangement = Arrangement.spacedBy(6.dp)) { - RadioButton(selected = true, onClick = {}) - RadioButton(selected = true, enabled = false, onClick = {}) - } + RadioButton(selected = checked, enabled = true, onClick = { checked = !checked }) + RadioButton(selected = checked, enabled = false, onClick = { checked = !checked }) } }