commit 4333aee3fa73abfb3b4a6d5a9670001136e3e399
parent 8d7bf3b9d736ddc97a1d42acd23c0b7b8c1a49d8
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Tue, 25 Nov 2025 06:45:36 +0000
Bug 1997968 - Part 6: Migrate DownloadSearchField to use M3 Acorn color tokens r=android-reviewers,007
- Changes are focused on migrating existing color tokens to M3 Acorn color tokens.
- This does not align the Download Search Field with the new M3 spec designs.
Download Search: https://www.figma.com/design/d4VPwxnMK4nmaFvdlvfoIz/Mobile-Downloads?node-id=11598-17592&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D271148
Diffstat:
1 file changed, 69 insertions(+), 49 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/downloads/listscreen/ui/DownloadSearchField.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/downloads/listscreen/ui/DownloadSearchField.kt
@@ -18,6 +18,9 @@ import androidx.compose.foundation.text.input.delete
import androidx.compose.foundation.text.input.rememberTextFieldState
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
@@ -30,10 +33,12 @@ import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import org.mozilla.fenix.R
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import mozilla.components.ui.icons.R as iconsR
/**
@@ -54,55 +59,57 @@ fun DownloadSearchField(
val focusRequester = remember { FocusRequester() }
val state = rememberTextFieldState(initialText)
- Row(
- verticalAlignment = Alignment.CenterVertically,
- modifier = Modifier
- .padding(horizontal = 8.dp, vertical = 8.dp)
- .background(FirefoxTheme.colors.layer3, RoundedCornerShape(8.dp))
- .fillMaxWidth(),
- ) {
- IconButton(
- onClick = onSearchDismissRequest,
- ) {
- Icon(
- painter = painterResource(iconsR.drawable.mozac_ic_back_24),
- contentDescription = stringResource(R.string.download_close_search_description),
- tint = FirefoxTheme.colors.iconPrimary,
- modifier = Modifier.size(20.dp),
- )
- }
- Box(
- contentAlignment = Alignment.CenterStart,
- modifier = Modifier.weight(1f, fill = true),
+ Surface {
+ Row(
+ verticalAlignment = Alignment.CenterVertically,
+ modifier = Modifier
+ .padding(horizontal = 8.dp, vertical = 8.dp)
+ .background(MaterialTheme.colorScheme.surfaceContainerHigh, RoundedCornerShape(8.dp))
+ .fillMaxWidth(),
) {
- if (state.text.isEmpty()) {
- PlaceholderText()
- }
- BasicTextField(
- state = state,
- textStyle = FirefoxTheme.typography.body2.copy(color = FirefoxTheme.colors.textPrimary),
- lineLimits = TextFieldLineLimits.SingleLine,
- cursorBrush = SolidColor(FirefoxTheme.colors.textPrimary),
- modifier = modifier
- .fillMaxWidth()
- .focusRequester(focusRequester),
- )
- }
-
- if (state.text.isNotEmpty()) {
IconButton(
- onClick = {
- state.edit {
- delete(0, state.text.length)
- }
- },
+ onClick = onSearchDismissRequest,
) {
Icon(
- painter = painterResource(iconsR.drawable.mozac_ic_cross_circle_fill_20),
- contentDescription = stringResource(R.string.download_clear_search_description),
- tint = FirefoxTheme.colors.iconPrimary,
+ painter = painterResource(iconsR.drawable.mozac_ic_back_24),
+ contentDescription = stringResource(R.string.download_close_search_description),
+ modifier = Modifier.size(20.dp),
)
}
+
+ Box(
+ contentAlignment = Alignment.CenterStart,
+ modifier = Modifier.weight(1f, fill = true),
+ ) {
+ if (state.text.isEmpty()) {
+ PlaceholderText()
+ }
+
+ BasicTextField(
+ state = state,
+ textStyle = FirefoxTheme.typography.body2.copy(color = LocalContentColor.current),
+ lineLimits = TextFieldLineLimits.SingleLine,
+ cursorBrush = SolidColor(LocalContentColor.current),
+ modifier = modifier
+ .fillMaxWidth()
+ .focusRequester(focusRequester),
+ )
+ }
+
+ if (state.text.isNotEmpty()) {
+ IconButton(
+ onClick = {
+ state.edit {
+ delete(0, state.text.length)
+ }
+ },
+ ) {
+ Icon(
+ painter = painterResource(iconsR.drawable.mozac_ic_cross_circle_fill_20),
+ contentDescription = stringResource(R.string.download_clear_search_description),
+ )
+ }
+ }
}
}
@@ -120,7 +127,7 @@ fun DownloadSearchField(
private fun PlaceholderText() {
Text(
text = stringResource(R.string.download_search_placeholder),
- color = FirefoxTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
style = FirefoxTheme.typography.body2,
)
}
@@ -129,11 +136,24 @@ private fun PlaceholderText() {
@Composable
private fun DownloadSearchFieldPreview() {
FirefoxTheme {
- Box(
- modifier = Modifier
- .background(FirefoxTheme.colors.layer1)
- .padding(16.dp),
- ) {
+ Surface {
+ DownloadSearchField(
+ initialText = "",
+ onValueChange = {},
+ onSearchDismissRequest = {},
+ modifier = Modifier
+ .height(56.dp)
+ .fillMaxWidth(),
+ )
+ }
+ }
+}
+
+@Preview
+@Composable
+private fun DownloadSearchFieldPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ Surface {
DownloadSearchField(
initialText = "",
onValueChange = {},
