tor-browser

commit d83a2bf4418983265a1e9a439679af12186447d1
parent f2c07bb9fc0171794a102bccfd6088d48f4146fb
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date:   Fri, 21 Nov 2025 18:05:30 +0000

Bug 1993368 - Part 13: Migrate TrailingIconScope to use M3 Acorn color tokens r=android-reviewers,007

Differential Revision: https://phabricator.services.mozilla.com/D270999

Diffstat:
M
mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/textfield/TrailingIconScope.kt
 | 
91
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------

1 file changed, 75 insertions(+), 16 deletions(-)
diff --git a/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/textfield/TrailingIconScope.kt b/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/textfield/TrailingIconScope.kt
@@ -5,12 +5,12 @@
 package mozilla.components.compose.base.textfield
 
 import androidx.annotation.DrawableRes
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -21,6 +21,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.input.PasswordVisualTransformation
 import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import mozilla.components.compose.base.R
@@ -28,6 +29,8 @@ import mozilla.components.compose.base.button.IconButton
 import mozilla.components.compose.base.text.Text
 import mozilla.components.compose.base.text.value
 import mozilla.components.compose.base.theme.AcornTheme
+import mozilla.components.compose.base.theme.acornPrivateColorScheme
+import mozilla.components.compose.base.theme.privateColorPalette
 import mozilla.components.ui.icons.R as iconsR
 
 /**
@@ -45,7 +48,7 @@ class TrailingIconScope(rowScope: RowScope) : RowScope by rowScope {
     ) = TrailingIconButton(
         iconId = iconsR.drawable.mozac_ic_eye_24,
         contentDescription = contentDescription,
-        tint = AcornTheme.colors.textPrimary,
+        tint = MaterialTheme.colorScheme.onSurfaceVariant,
         onTrailingIconClick = onTrailingIconClick,
     )
 
@@ -59,7 +62,7 @@ class TrailingIconScope(rowScope: RowScope) : RowScope by rowScope {
     ) = TrailingIconButton(
         iconId = iconsR.drawable.mozac_ic_cross_circle_fill_24,
         contentDescription = contentDescription,
-        tint = AcornTheme.colors.textPrimary,
+        tint = MaterialTheme.colorScheme.onSurfaceVariant,
         onTrailingIconClick = onTrailingIconClick,
     )
 
@@ -90,11 +93,40 @@ private fun EyeTextFieldButtonPreview() {
     var isPasswordVisible by remember { mutableStateOf(false) }
 
     AcornTheme {
-        Column(
-            modifier = Modifier
-                .background(color = AcornTheme.colors.layer1)
-                .padding(8.dp),
-        ) {
+        Surface {
+            TextField(
+                value = textFieldInput,
+                onValueChange = {
+                    textFieldInput = it
+                },
+                placeholder = "",
+                errorText = "",
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(8.dp),
+                label = "Eye",
+                trailingIcons = { EyeTextFieldButton { isPasswordVisible = !isPasswordVisible } },
+                visualTransformation = if (isPasswordVisible) {
+                    VisualTransformation.None
+                } else {
+                    PasswordVisualTransformation()
+                },
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun EyeTextFieldButtonPrivatePreview() {
+    var textFieldInput by remember { mutableStateOf("password") }
+    var isPasswordVisible by remember { mutableStateOf(false) }
+
+    AcornTheme(
+        colors = privateColorPalette,
+        colorScheme = acornPrivateColorScheme(),
+    ) {
+        Surface {
             TextField(
                 value = textFieldInput,
                 onValueChange = {
@@ -102,7 +134,9 @@ private fun EyeTextFieldButtonPreview() {
                 },
                 placeholder = "",
                 errorText = "",
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(8.dp),
                 label = "Eye",
                 trailingIcons = { EyeTextFieldButton { isPasswordVisible = !isPasswordVisible } },
                 visualTransformation = if (isPasswordVisible) {
@@ -121,11 +155,34 @@ private fun CrossTextFieldButtonPreview() {
     var textFieldInput by remember { mutableStateOf("Delete me") }
 
     AcornTheme {
-        Column(
-            modifier = Modifier
-                .background(color = AcornTheme.colors.layer1)
-                .padding(8.dp),
-        ) {
+        Surface {
+            TextField(
+                value = textFieldInput,
+                onValueChange = {
+                    textFieldInput = it
+                },
+                placeholder = "",
+                errorText = "",
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(8.dp),
+                label = "Cross",
+                trailingIcons = { CrossTextFieldButton { textFieldInput = "" } },
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun CrossTextFieldButtonPrivatePreview() {
+    var textFieldInput by remember { mutableStateOf("Delete me") }
+
+    AcornTheme(
+        colors = privateColorPalette,
+        colorScheme = acornPrivateColorScheme(),
+    ) {
+        Surface {
             TextField(
                 value = textFieldInput,
                 onValueChange = {
@@ -133,7 +190,9 @@ private fun CrossTextFieldButtonPreview() {
                 },
                 placeholder = "",
                 errorText = "",
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(8.dp),
                 label = "Cross",
                 trailingIcons = { CrossTextFieldButton { textFieldInput = "" } },
             )