commit dc6cd6c9ae29f60feba4f5c4805fe307e39925c0
parent 0157d449876d731cabca7e662ca520918d57dce4
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Mon, 24 Nov 2025 06:49:58 +0000
Bug 1993368 - Part 24: Migrate RadioButton to use M3 Acorn specs r=android-reviewers,007
Radio Button: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-27981&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D273052
Diffstat:
1 file changed, 41 insertions(+), 41 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/button/RadioButton.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/button/RadioButton.kt
@@ -4,14 +4,15 @@
package org.mozilla.fenix.compose.button
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectable
+import androidx.compose.material3.RadioButtonColors
import androidx.compose.material3.RadioButtonDefaults
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
@@ -21,6 +22,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import org.mozilla.fenix.theme.FirefoxTheme
+import androidx.compose.material3.RadioButton as M3RadioButton
/**
* Radio Button.
@@ -28,6 +30,8 @@ import org.mozilla.fenix.theme.FirefoxTheme
* @param selected [Boolean] indicating whether the radio button is selected or not.
* @param modifier [Modifier] to be applied to the radio button.
* @param enabled [Boolean] that controls if radio button is selectable.
+ * @param colors [RadioButtonColors] that will be used to resolve the color used for this
+ * radio button in different states.
* @param onClick Invoked when the radio button is clicked.
*/
@Composable
@@ -35,18 +39,14 @@ fun RadioButton(
selected: Boolean,
modifier: Modifier = Modifier,
enabled: Boolean = true,
+ colors: RadioButtonColors = RadioButtonDefaults.colors(),
onClick: () -> Unit,
) {
- androidx.compose.material3.RadioButton(
+ M3RadioButton(
selected = selected,
modifier = modifier,
enabled = enabled,
- colors = RadioButtonDefaults.colors(
- selectedColor = FirefoxTheme.colors.formSelected,
- unselectedColor = FirefoxTheme.colors.formDefault,
- disabledSelectedColor = FirefoxTheme.colors.formDisabled,
- disabledUnselectedColor = FirefoxTheme.colors.formDisabled,
- ),
+ colors = colors,
onClick = onClick,
)
}
@@ -58,52 +58,52 @@ private fun RadioButtonPreview() {
val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[1]) }
FirefoxTheme {
- Column(
- modifier = Modifier.background(FirefoxTheme.colors.layer1),
- ) {
- radioOptions.forEach { text ->
- val selected = text == selectedOption
+ Surface {
+ Column {
+ radioOptions.forEach { text ->
+ val selected = text == selectedOption
+
+ Row(
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(horizontal = 16.dp)
+ .selectable(
+ selected = selected,
+ onClick = { onOptionSelected(text) },
+ ),
+ verticalAlignment = Alignment.CenterVertically,
+ ) {
+ RadioButton(
+ selected = selected,
+ onClick = { onOptionSelected(text) },
+ )
+
+ Spacer(modifier = Modifier.padding(16.dp))
+
+ Text(text = text)
+ }
+ }
Row(
modifier = Modifier
.fillMaxWidth()
- .padding(horizontal = 16.dp)
.selectable(
- selected = selected,
- onClick = { onOptionSelected(text) },
- ),
+ selected = false,
+ onClick = {},
+ )
+ .padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically,
) {
RadioButton(
- selected = selected,
- onClick = { onOptionSelected(text) },
- )
-
- Spacer(modifier = Modifier.padding(16.dp))
-
- Text(text = text)
- }
- }
-
- Row(
- modifier = Modifier
- .fillMaxWidth()
- .selectable(
selected = false,
+ enabled = false,
onClick = {},
)
- .padding(horizontal = 16.dp),
- verticalAlignment = Alignment.CenterVertically,
- ) {
- RadioButton(
- selected = false,
- enabled = false,
- onClick = {},
- )
- Spacer(modifier = Modifier.padding(16.dp))
+ Spacer(modifier = Modifier.padding(16.dp))
- Text(text = "Disabled")
+ Text(text = "Disabled")
+ }
}
}
}
