commit 2855afac30899195f3291c8118339ab8f6076c48
parent e02ef7a8b04afaf81e8ecd70cea3ea7ddffb46cc
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Fri, 21 Nov 2025 05:44:31 +0000
Bug 1993368 - Part 19: Migrate CustomReviewPrompt to M3 Acorn specs r=android-reviewers,007
- Aligned the BottomSheet with the M3 Acorn specs: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64221-17056&m=dev
- Aligned the FoxEmojiButton with the Menu Items M3 specs: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=64183-19750&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D273043
Diffstat:
1 file changed, 104 insertions(+), 39 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/reviewprompt/ui/CustomReviewPrompt.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/reviewprompt/ui/CustomReviewPrompt.kt
@@ -18,9 +18,12 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.BottomSheetDefaults
import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SheetState
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
@@ -37,6 +40,7 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
import mozilla.components.compose.base.button.FilledButton
+import mozilla.components.compose.base.theme.surfaceDimVariant
import mozilla.components.lib.state.ext.observeAsState
import org.mozilla.fenix.R
import org.mozilla.fenix.reviewprompt.CustomReviewPromptAction
@@ -46,6 +50,7 @@ import org.mozilla.fenix.reviewprompt.CustomReviewPromptState.PrePrompt
import org.mozilla.fenix.reviewprompt.CustomReviewPromptState.Rate
import org.mozilla.fenix.reviewprompt.CustomReviewPromptStore
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
/**
* Prompt that can show either:
@@ -106,7 +111,8 @@ private fun BottomSheet(
onDismissRequest = onDismissRequest,
modifier = modifier,
sheetState = sheetState,
- containerColor = FirefoxTheme.colors.layer2,
+ containerColor = MaterialTheme.colorScheme.surface,
+ dragHandle = { BottomSheetDefaults.DragHandle(color = MaterialTheme.colorScheme.outline) },
) {
Box(
modifier = Modifier
@@ -138,7 +144,6 @@ private fun PrePrompt(
R.string.review_prompt_pre_prompt_header,
stringResource(R.string.firefox),
),
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline7,
)
@@ -175,8 +180,8 @@ private fun FoxEmojiButton(
modifier
.height(100.dp)
.clip(RoundedCornerShape(size = 18.dp))
- .border(1.dp, FirefoxTheme.colors.borderPrimary, RoundedCornerShape(size = 18.dp))
- .background(FirefoxTheme.colors.layer1)
+ .border(1.dp, MaterialTheme.colorScheme.outlineVariant, RoundedCornerShape(size = 18.dp))
+ .background(MaterialTheme.colorScheme.surfaceDimVariant)
.clickable(onClick = onClick),
Arrangement.Center,
Alignment.CenterHorizontally,
@@ -186,8 +191,7 @@ private fun FoxEmojiButton(
Spacer(Modifier.height(10.dp))
Text(
- label,
- color = FirefoxTheme.colors.textPrimary,
+ text = label,
style = FirefoxTheme.typography.caption,
)
}
@@ -209,7 +213,6 @@ private fun RateStep(onRateButtonClick: () -> Unit, modifier: Modifier = Modifie
R.string.review_prompt_rate_header,
stringResource(R.string.firefox),
),
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline7,
)
}
@@ -243,7 +246,6 @@ private fun FeedbackStep(onLeaveFeedbackButtonClick: () -> Unit, modifier: Modif
R.string.review_prompt_feedback_header,
stringResource(R.string.firefox),
),
- color = FirefoxTheme.colors.textPrimary,
style = FirefoxTheme.typography.headline7,
)
}
@@ -336,24 +338,62 @@ private fun FeedbackPromptPreview() {
}
}
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+private fun FeedbackPromptPrivatePreview() {
+ val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+
+ FirefoxTheme(theme = Theme.Private) {
+ BottomSheet(
+ sheetState = sheetState,
+ customReviewPromptState = Feedback,
+ onDismissRequest = {},
+ onNegativePrePromptButtonClick = {},
+ onPositivePrePromptButtonClick = {},
+ onRateButtonClick = {},
+ onLeaveFeedbackButtonClick = {},
+ )
+ }
+}
+
@PreviewLightDark
@Composable
private fun FoxEmojiButtonPreview() {
FirefoxTheme {
- FoxEmojiButton(
- emoji = painterResource(R.drawable.review_prompt_positive_button),
- label = "It’s great!",
- onClick = {},
- modifier = Modifier
- .padding(16.dp)
- .width(176.dp),
- )
+ Surface {
+ FoxEmojiButton(
+ emoji = painterResource(R.drawable.review_prompt_positive_button),
+ label = "It’s great!",
+ onClick = {},
+ modifier = Modifier
+ .padding(16.dp)
+ .width(176.dp),
+ )
+ }
}
}
-@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
+private fun FoxEmojiButtonPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ Surface {
+ FoxEmojiButton(
+ emoji = painterResource(R.drawable.review_prompt_positive_button),
+ label = "It’s great!",
+ onClick = {},
+ modifier = Modifier
+ .padding(16.dp)
+ .width(176.dp),
+ )
+ }
+ }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@PreviewLightDark
+@Composable
private fun InteractiveBottomSheetPreview() {
val store = CustomReviewPromptStore(PrePrompt)
val promptState by store.observeAsState(PrePrompt) { it }
@@ -361,27 +401,52 @@ private fun InteractiveBottomSheetPreview() {
val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
FirefoxTheme {
- Box(
- modifier = Modifier.height(224.dp),
- contentAlignment = Alignment.BottomCenter,
- ) {
- BottomSheet(
- sheetState = sheetState,
- customReviewPromptState = promptState,
- onDismissRequest = {},
- onNegativePrePromptButtonClick = {
- store.dispatch(CustomReviewPromptAction.PositivePrePromptButtonClicked)
- },
- onPositivePrePromptButtonClick = {
- store.dispatch(CustomReviewPromptAction.NegativePrePromptButtonClicked)
- },
- onRateButtonClick = {
- store.dispatch(CustomReviewPromptAction.RateButtonClicked)
- },
- onLeaveFeedbackButtonClick = {
- store.dispatch(CustomReviewPromptAction.LeaveFeedbackButtonClicked)
- },
- )
- }
+ BottomSheet(
+ sheetState = sheetState,
+ customReviewPromptState = promptState,
+ onDismissRequest = {},
+ onNegativePrePromptButtonClick = {
+ store.dispatch(CustomReviewPromptAction.PositivePrePromptButtonClicked)
+ },
+ onPositivePrePromptButtonClick = {
+ store.dispatch(CustomReviewPromptAction.NegativePrePromptButtonClicked)
+ },
+ onRateButtonClick = {
+ store.dispatch(CustomReviewPromptAction.RateButtonClicked)
+ },
+ onLeaveFeedbackButtonClick = {
+ store.dispatch(CustomReviewPromptAction.LeaveFeedbackButtonClicked)
+ },
+ )
+ }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+private fun InteractiveBottomSheetPrivatePreview() {
+ val store = CustomReviewPromptStore(PrePrompt)
+ val promptState by store.observeAsState(PrePrompt) { it }
+
+ val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+
+ FirefoxTheme(theme = Theme.Private) {
+ BottomSheet(
+ sheetState = sheetState,
+ customReviewPromptState = promptState,
+ onDismissRequest = {},
+ onNegativePrePromptButtonClick = {
+ store.dispatch(CustomReviewPromptAction.PositivePrePromptButtonClicked)
+ },
+ onPositivePrePromptButtonClick = {
+ store.dispatch(CustomReviewPromptAction.NegativePrePromptButtonClicked)
+ },
+ onRateButtonClick = {
+ store.dispatch(CustomReviewPromptAction.RateButtonClicked)
+ },
+ onLeaveFeedbackButtonClick = {
+ store.dispatch(CustomReviewPromptAction.LeaveFeedbackButtonClicked)
+ },
+ )
}
}
