commit 7c72462df49f6f0f54d9a0efac92e23e485c7c52
parent f763fbc4a76a7e5d7c3038b75aa138df8e3d6bab
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Mon, 24 Nov 2025 06:09:20 +0000
Bug 1993368 - Part 22: Migrate Microsurvey to use M3 Acorn color tokens r=android-reviewers,007
Relevant components that were used as reference for mapping to the M3 Acorn colors:
- Bottom Sheet: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64221-16576&m=dev
- Card: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=61820-4186&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D273050
Diffstat:
6 files changed, 127 insertions(+), 94 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyBottomSheet.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyBottomSheet.kt
@@ -29,12 +29,13 @@ import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.traversalIndex
import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.tooling.preview.PreviewLightDark
-import androidx.compose.ui.tooling.preview.PreviewScreenSizes
import androidx.compose.ui.unit.dp
+import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.BottomSheetHandle
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
+import mozilla.components.ui.icons.R as iconsR
private const val BOTTOM_SHEET_HANDLE_WIDTH_PERCENT = 0.1f
private val bottomSheetShape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
@@ -62,7 +63,6 @@ fun MicrosurveyBottomSheet(
var isSubmitted by remember { mutableStateOf(false) }
Scaffold(
- containerColor = FirefoxTheme.colors.layer1,
topBar = {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
@@ -110,7 +110,6 @@ fun MicrosurveyBottomSheet(
modifier = Modifier
.wrapContentHeight()
.padding(innerPadding),
- color = FirefoxTheme.colors.layer1,
shape = bottomSheetShape,
) {
if (isSubmitted) {
@@ -128,8 +127,7 @@ fun MicrosurveyBottomSheet(
}
}
-@PreviewScreenSizes
-@PreviewLightDark
+@FlexibleWindowLightDarkPreview
@Preview(
name = "Large Font",
fontScale = 2.0f,
@@ -139,7 +137,29 @@ private fun MicrosurveyBottomSheetPreview() {
FirefoxTheme {
MicrosurveyBottomSheet(
question = "How satisfied are you with printing in Firefox?",
- icon = R.drawable.ic_print,
+ icon = iconsR.drawable.mozac_ic_print_24,
+ onPrivacyPolicyLinkClick = {},
+ onCloseButtonClicked = {},
+ onSubmitButtonClicked = {},
+ answers = listOf(
+ stringResource(id = R.string.likert_scale_option_1),
+ stringResource(id = R.string.likert_scale_option_2),
+ stringResource(id = R.string.likert_scale_option_3),
+ stringResource(id = R.string.likert_scale_option_4),
+ stringResource(id = R.string.likert_scale_option_5),
+ stringResource(id = R.string.likert_scale_option_6),
+ ),
+ )
+ }
+}
+
+@Preview
+@Composable
+private fun MicrosurveyBottomSheetPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ MicrosurveyBottomSheet(
+ question = "How satisfied are you with printing in Firefox?",
+ icon = iconsR.drawable.mozac_ic_print_24,
onPrivacyPolicyLinkClick = {},
onCloseButtonClicked = {},
onSubmitButtonClicked = {},
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyBottomSheetFragment.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyBottomSheetFragment.kt
@@ -17,7 +17,6 @@ import com.google.android.material.bottomsheet.BottomSheetBehavior
import com.google.android.material.bottomsheet.BottomSheetDialogFragment
import kotlinx.coroutines.launch
import org.mozilla.fenix.HomeActivity
-import org.mozilla.fenix.R
import org.mozilla.fenix.ext.components
import org.mozilla.fenix.ext.requireComponents
import org.mozilla.fenix.ext.settings
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyCompleted.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyCompleted.kt
@@ -8,7 +8,6 @@ import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
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.height
@@ -17,6 +16,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -25,11 +25,12 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.PreviewLightDark
-import androidx.compose.ui.tooling.preview.PreviewScreenSizes
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
+import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
import org.mozilla.fenix.R
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
private val shape = RoundedCornerShape(8.dp)
@@ -40,10 +41,10 @@ private val shape = RoundedCornerShape(8.dp)
*/
@Composable
fun MicrosurveyCompleted(
- backgroundColor: Color = FirefoxTheme.colors.layer2,
+ backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
) {
Card(
- border = BorderStroke(1.dp, FirefoxTheme.colors.borderPrimary),
+ border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant),
shape = shape,
colors = CardDefaults.cardColors(containerColor = backgroundColor),
modifier = Modifier
@@ -60,37 +61,36 @@ fun MicrosurveyCompleted(
) {
Spacer(modifier = Modifier.height(50.dp))
- Row {
- Image(
- painter = painterResource(R.drawable.microsurvey_success),
- contentDescription = null,
- contentScale = ContentScale.None,
- )
- }
+ Image(
+ painter = painterResource(R.drawable.microsurvey_success),
+ contentDescription = null,
+ contentScale = ContentScale.None,
+ )
Spacer(modifier = Modifier.height(40.dp))
- Row {
- Text(
- text = stringResource(id = R.string.micro_survey_feedback_confirmation),
- style = FirefoxTheme.typography.headline7,
- color = FirefoxTheme.colors.textPrimary,
- )
- }
+ Text(
+ text = stringResource(id = R.string.micro_survey_feedback_confirmation),
+ style = FirefoxTheme.typography.headline7,
+ )
Spacer(modifier = Modifier.height(60.dp))
}
}
}
-/**
- * Preview for [MicrosurveyCompleted].
- */
-@PreviewScreenSizes
-@PreviewLightDark
+@FlexibleWindowLightDarkPreview
@Composable
-fun MicrosurveyCompletedPreview() {
+private fun MicrosurveyCompletedPreview() {
FirefoxTheme {
MicrosurveyCompleted()
}
}
+
+@Preview
+@Composable
+private fun MicrosurveyCompletedPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ MicrosurveyCompleted()
+ }
+}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyContent.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyContent.kt
@@ -6,7 +6,6 @@ package org.mozilla.fenix.microsurvey.ui
import androidx.annotation.DrawableRes
import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
@@ -21,6 +20,8 @@ import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -30,12 +31,14 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.rememberNestedScrollInteropConnection
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.PreviewLightDark
-import androidx.compose.ui.tooling.preview.PreviewScreenSizes
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
+import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.list.RadioButtonListItem
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
+import mozilla.components.ui.icons.R as iconsR
private val shape = RoundedCornerShape(8.dp)
@@ -53,13 +56,13 @@ private val shape = RoundedCornerShape(8.dp)
fun MicrosurveyContent(
question: String,
answers: List<String>,
- @DrawableRes icon: Int = R.drawable.ic_print,
- backgroundColor: Color = FirefoxTheme.colors.layer2,
+ @DrawableRes icon: Int = iconsR.drawable.mozac_ic_print_24,
+ backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
selectedAnswer: String? = null,
onSelectionChange: (String) -> Unit,
) {
Card(
- border = BorderStroke(1.dp, FirefoxTheme.colors.borderPrimary),
+ border = BorderStroke(1.dp, MaterialTheme.colorScheme.outlineVariant),
shape = shape,
colors = CardDefaults.cardColors(containerColor = backgroundColor),
modifier = Modifier
@@ -97,7 +100,7 @@ private fun Header(icon: Int, question: String) {
modifier = Modifier.padding(16.dp),
verticalAlignment = Alignment.CenterVertically,
) {
- Image(
+ Icon(
painter = painterResource(icon),
contentDescription = stringResource(id = R.string.microsurvey_feature_icon_content_description),
modifier = Modifier.size(24.dp),
@@ -107,23 +110,37 @@ private fun Header(icon: Int, question: String) {
Text(
text = question,
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline7,
)
}
}
-/**
- * Preview for [MicrosurveyContent].
- */
-@PreviewScreenSizes
-@PreviewLightDark
+@FlexibleWindowLightDarkPreview
@Composable
-fun MicrosurveyContentPreview() {
+private fun MicrosurveyContentPreview() {
FirefoxTheme {
MicrosurveyContent(
question = "How satisfied are you with printing in Firefox?",
- icon = R.drawable.ic_print,
+ icon = iconsR.drawable.mozac_ic_print_24,
+ answers = listOf(
+ stringResource(id = R.string.likert_scale_option_1),
+ stringResource(id = R.string.likert_scale_option_2),
+ stringResource(id = R.string.likert_scale_option_3),
+ stringResource(id = R.string.likert_scale_option_4),
+ stringResource(id = R.string.likert_scale_option_5),
+ ),
+ onSelectionChange = {},
+ )
+ }
+}
+
+@Preview
+@Composable
+private fun MicrosurveyContentPrivatereview() {
+ FirefoxTheme(theme = Theme.Private) {
+ MicrosurveyContent(
+ question = "How satisfied are you with printing in Firefox?",
+ icon = iconsR.drawable.mozac_ic_print_24,
answers = listOf(
stringResource(id = R.string.likert_scale_option_1),
stringResource(id = R.string.likert_scale_option_2),
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyFooter.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyFooter.kt
@@ -4,21 +4,20 @@
package org.mozilla.fenix.microsurvey.ui
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextDecoration
-import androidx.compose.ui.tooling.preview.PreviewLightDark
-import androidx.compose.ui.tooling.preview.PreviewScreenSizes
import androidx.compose.ui.unit.dp
+import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
import mozilla.components.compose.base.button.FilledButton
import org.mozilla.fenix.R
import org.mozilla.fenix.compose.LinkText
@@ -70,37 +69,36 @@ fun MicrosurveyFooter(
}
}
-@PreviewScreenSizes
-@PreviewLightDark
+@FlexibleWindowLightDarkPreview
@Composable
private fun MicrosurveyFooterPreview() {
FirefoxTheme {
- Column(
- modifier = Modifier
- .background(FirefoxTheme.colors.layer1)
- .padding(16.dp),
- verticalArrangement = Arrangement.spacedBy(16.dp),
- ) {
- MicrosurveyFooter(
- isSubmitted = false,
- isContentAnswerSelected = false,
- onPrivacyPolicyLinkClick = {},
- onButtonClick = {},
- )
+ Surface {
+ Column(
+ modifier = Modifier.padding(16.dp),
+ verticalArrangement = Arrangement.spacedBy(16.dp),
+ ) {
+ MicrosurveyFooter(
+ isSubmitted = false,
+ isContentAnswerSelected = false,
+ onPrivacyPolicyLinkClick = {},
+ onButtonClick = {},
+ )
- MicrosurveyFooter(
- isSubmitted = false,
- isContentAnswerSelected = true,
- onPrivacyPolicyLinkClick = {},
- onButtonClick = {},
- )
+ MicrosurveyFooter(
+ isSubmitted = false,
+ isContentAnswerSelected = true,
+ onPrivacyPolicyLinkClick = {},
+ onButtonClick = {},
+ )
- MicrosurveyFooter(
- isSubmitted = true,
- isContentAnswerSelected = true,
- onPrivacyPolicyLinkClick = {},
- onButtonClick = {},
- )
+ MicrosurveyFooter(
+ isSubmitted = true,
+ isContentAnswerSelected = true,
+ onPrivacyPolicyLinkClick = {},
+ onButtonClick = {},
+ )
+ }
}
}
}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyHeader.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/microsurvey/ui/MicrosurveyHeader.kt
@@ -5,9 +5,7 @@
package org.mozilla.fenix.microsurvey.ui
import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
@@ -16,7 +14,7 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
@@ -24,11 +22,12 @@ import androidx.compose.ui.Modifier
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.tooling.preview.PreviewScreenSizes
import androidx.compose.ui.unit.dp
+import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
+import mozilla.components.compose.base.button.IconButton
import org.mozilla.fenix.R
import org.mozilla.fenix.theme.FirefoxTheme
+import mozilla.components.ui.icons.R as iconsR
/**
* The header UI used for microsurvey.
@@ -52,33 +51,35 @@ fun MicrosurveyHeader(
modifier = Modifier
.wrapContentWidth()
.weight(1f, fill = false)
- .padding(start = 32.dp),
+ .padding(start = 32.dp, end = 16.dp),
) {
Image(
painter = painterResource(R.drawable.ic_firefox),
contentDescription = stringResource(id = R.string.microsurvey_app_icon_content_description),
modifier = Modifier.size(24.dp),
)
+
Spacer(modifier = Modifier.width(8.dp))
+
Text(
text = title,
style = FirefoxTheme.typography.headline6,
- color = FirefoxTheme.colors.textPrimary,
)
}
- IconButton(onClick = onCloseButtonClick) {
+
+ IconButton(
+ onClick = onCloseButtonClick,
+ contentDescription = stringResource(id = R.string.microsurvey_close_button_content_description),
+ ) {
Icon(
- painter = painterResource(id = R.drawable.ic_close),
- contentDescription = stringResource(id = R.string.microsurvey_close_button_content_description),
- tint = FirefoxTheme.colors.iconPrimary,
- modifier = Modifier.size(20.dp),
+ painter = painterResource(id = iconsR.drawable.mozac_ic_cross_20),
+ contentDescription = null,
)
}
}
}
-@PreviewScreenSizes
-@PreviewLightDark
+@FlexibleWindowLightDarkPreview
@Preview(
name = "Large Font",
fontScale = 2.0f,
@@ -86,9 +87,7 @@ fun MicrosurveyHeader(
@Composable
private fun MicrosurveyHeaderPreview() {
FirefoxTheme {
- Box(
- modifier = Modifier.background(color = FirefoxTheme.colors.layer1),
- ) {
+ Surface {
MicrosurveyHeader(stringResource(R.string.micro_survey_survey_header_2)) {}
}
}
