commit 4bb0da661fc2eae340c5a7954676d168fc117c9e
parent e81a40f142ee502ff91a553012b1fbef3b5fe108
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Tue, 2 Dec 2025 07:24:57 +0000
Bug 1993368 - Part 32: Migrate Dropdown to use M3 color tokens r=android-reviewers,007
- This does not migrate Dropdown to the M3 specs. This is a simple M3 color tokens refactor with no changes to the HorizontalDivider.
Differential Revision: https://phabricator.services.mozilla.com/D274535
Diffstat:
1 file changed, 82 insertions(+), 83 deletions(-)
diff --git a/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/Dropdown.kt b/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/Dropdown.kt
@@ -4,7 +4,6 @@
package mozilla.components.compose.base
-import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
@@ -20,6 +19,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
@@ -96,80 +96,79 @@ fun Dropdown(
var measuredDropdownMenuWidthDp by remember { mutableStateOf(0.dp) }
- Column(
- modifier = modifier
- .clickable {
- expanded = true
- }
- .semantics { role = Role.DropdownList },
- ) {
- Text(
- text = label,
- modifier = Modifier
- .wrapContentSize()
- .defaultMinSize(minHeight = 16.dp)
- .wrapContentHeight(),
- color = AcornTheme.colors.textPrimary,
- style = AcornTheme.typography.caption,
- )
-
- Spacer(modifier = Modifier.height(4.dp))
+ Surface {
+ Column(
+ modifier = modifier
+ .clickable {
+ expanded = true
+ }
+ .semantics { role = Role.DropdownList },
+ ) {
+ Text(
+ text = label,
+ modifier = Modifier
+ .wrapContentSize()
+ .defaultMinSize(minHeight = 16.dp)
+ .wrapContentHeight(),
+ style = AcornTheme.typography.caption,
+ )
- val placeholderText = checkedItemText?.value ?: placeholder
+ Spacer(modifier = Modifier.height(4.dp))
- Box {
- Row {
- Text(
- text = placeholderText,
- modifier = Modifier.weight(1f),
- color = AcornTheme.colors.textPrimary,
- style = AcornTheme.typography.subtitle1,
- )
+ val placeholderText = checkedItemText?.value ?: placeholder
- Spacer(modifier = Modifier.width(10.dp))
+ Box {
+ Row {
+ Text(
+ text = placeholderText,
+ modifier = Modifier.weight(1f),
+ style = AcornTheme.typography.subtitle1,
+ )
- Icon(
- painter = painterResource(id = iconsR.drawable.mozac_ic_dropdown_arrow),
- contentDescription = null,
- tint = AcornTheme.colors.iconPrimary,
- )
- }
+ Spacer(modifier = Modifier.width(10.dp))
- Box(modifier = Modifier.align(Alignment.TopEnd)) {
- val widthModifier = if (dropdownMenuWidth == null) {
- Modifier
- } else {
- Modifier.width(width = dropdownMenuWidth)
+ Icon(
+ painter = painterResource(id = iconsR.drawable.mozac_ic_dropdown_arrow),
+ contentDescription = null,
+ )
}
- DropdownMenu(
- menuItems = dropdownItems,
- expanded = expanded,
- modifier = Modifier
- .onGloballyPositioned { coordinates ->
- measuredDropdownMenuWidthDp = with(density) {
- coordinates.size.width.toDp()
- }
- }
- .requiredSizeIn(maxHeight = DropdownMenuMaxHeight)
- .then(widthModifier),
- offset = if (isInLandscapeMode) {
- DpOffset(
- -measuredDropdownMenuWidthDp,
- IconSize,
- )
+ Box(modifier = Modifier.align(Alignment.TopEnd)) {
+ val widthModifier = if (dropdownMenuWidth == null) {
+ Modifier
} else {
- DpOffset(
- 0.dp,
- IconSize,
- )
- },
- onDismissRequest = { expanded = false },
- )
+ Modifier.width(width = dropdownMenuWidth)
+ }
+
+ DropdownMenu(
+ menuItems = dropdownItems,
+ expanded = expanded,
+ modifier = Modifier
+ .onGloballyPositioned { coordinates ->
+ measuredDropdownMenuWidthDp = with(density) {
+ coordinates.size.width.toDp()
+ }
+ }
+ .requiredSizeIn(maxHeight = DropdownMenuMaxHeight)
+ .then(widthModifier),
+ offset = if (isInLandscapeMode) {
+ DpOffset(
+ -measuredDropdownMenuWidthDp,
+ IconSize,
+ )
+ } else {
+ DpOffset(
+ 0.dp,
+ IconSize,
+ )
+ },
+ onDismissRequest = { expanded = false },
+ )
+ }
}
- }
- HorizontalDivider(color = AcornTheme.colors.formDefault)
+ HorizontalDivider(color = AcornTheme.colors.formDefault)
+ }
}
}
@@ -228,26 +227,26 @@ private fun getSelectedDropdownItems(): List<MenuItem.CheckableItem> =
@Composable
private fun DropdownPreview() {
AcornTheme {
- Column(
- modifier = Modifier
- .fillMaxSize()
- .background(color = AcornTheme.colors.layer1),
- ) {
- Dropdown(
- label = "Placeholder and nothing selected",
- dropdownItems = getDropdownItems(),
- placeholder = "Placeholder",
- modifier = Modifier.fillMaxWidth(),
- )
+ Surface {
+ Column(
+ modifier = Modifier.fillMaxSize(),
+ ) {
+ Dropdown(
+ label = "Placeholder and nothing selected",
+ dropdownItems = getDropdownItems(),
+ placeholder = "Placeholder",
+ modifier = Modifier.fillMaxWidth(),
+ )
- Spacer(modifier = Modifier.height(AcornTheme.layout.space.dynamic150))
+ Spacer(modifier = Modifier.height(AcornTheme.layout.space.dynamic150))
- Dropdown(
- label = "Placeholder and item selected",
- placeholder = "Placeholder",
- dropdownItems = getSelectedDropdownItems(),
- modifier = Modifier.fillMaxWidth(),
- )
+ Dropdown(
+ label = "Placeholder and item selected",
+ placeholder = "Placeholder",
+ dropdownItems = getSelectedDropdownItems(),
+ modifier = Modifier.fillMaxWidth(),
+ )
+ }
}
}
}
