commit 2ca542d1243065f94529c1d8553b47ef80844e3b
parent 4c7972911ef07235454d8d0a159d1acb1a5ea959
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Tue, 2 Dec 2025 07:24:55 +0000
Bug 1993368 - Part 27: Migrate CreditCardEditorScreen to use M3 color tokens r=android-reviewers,007,sfamisa
- Migrated CreditCardEditorScreen to use M3 color tokens.
- Used the correct text style for TopAppBar title. Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=61795-11261&m=dev
- Simplified CreditCardEditorScreen Previews by using PreviewParameter.
- Added Edit Mode Preview for CreditCardEditorScreen.
Differential Revision: https://phabricator.services.mozilla.com/D274530
Diffstat:
1 file changed, 65 insertions(+), 72 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/creditcards/ui/CreditCardEditorScreen.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/creditcards/ui/CreditCardEditorScreen.kt
@@ -20,15 +20,12 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@@ -44,11 +41,14 @@ import androidx.compose.ui.semantics.testTagsAsResourceId
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.dp
import mozilla.components.compose.base.Dropdown
import mozilla.components.compose.base.annotation.FlexibleWindowLightDarkPreview
import mozilla.components.compose.base.button.DestructiveButton
import mozilla.components.compose.base.button.FilledButton
+import mozilla.components.compose.base.button.IconButton
import mozilla.components.compose.base.button.OutlinedButton
import mozilla.components.compose.base.menu.MenuItem
import mozilla.components.compose.base.text.Text
@@ -98,7 +98,6 @@ fun CreditCardEditorScreen(store: CreditCardEditorStore) {
},
)
},
- containerColor = FirefoxTheme.colors.layer1,
) {
if (state.showDeleteDialog) {
DeleteCreditCardDialog(
@@ -156,11 +155,6 @@ private fun EditorTopBar(
) {
TopAppBar(
modifier = modifier,
- colors = TopAppBarDefaults.topAppBarColors(
- containerColor = FirefoxTheme.colors.layer1,
- titleContentColor = FirefoxTheme.colors.textPrimary,
- actionIconContentColor = FirefoxTheme.colors.iconPrimary,
- ),
title = {
Text(
text = if (inEditMode) {
@@ -168,36 +162,42 @@ private fun EditorTopBar(
} else {
stringResource(R.string.credit_cards_add_card)
},
- style = FirefoxTheme.typography.headline6,
+ style = FirefoxTheme.typography.headline5,
)
},
navigationIcon = {
- IconButton(onClick = onBackClicked) {
+ IconButton(
+ onClick = onBackClicked,
+ contentDescription = stringResource(R.string.credit_cards_navigate_back_button_content_description),
+ ) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_back_24),
- contentDescription = stringResource(R.string.credit_cards_navigate_back_button_content_description),
+ contentDescription = null,
)
}
},
actions = {
if (inEditMode) {
IconButton(
- modifier = Modifier.testTag(CreditCardEditorTestTags.TOPBAR_DELETE_BUTTON),
onClick = onDeleteActionClicked,
+ contentDescription = stringResource(R.string.credit_cards_menu_delete_card),
+ modifier = Modifier.testTag(CreditCardEditorTestTags.TOPBAR_DELETE_BUTTON),
) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_delete_24),
- contentDescription = stringResource(R.string.credit_cards_menu_delete_card),
+ contentDescription = null,
)
}
}
+
IconButton(
- modifier = Modifier.testTag(CreditCardEditorTestTags.TOPBAR_SAVE_BUTTON),
onClick = onSaveActionClicked,
+ contentDescription = stringResource(R.string.credit_cards_menu_save),
+ modifier = Modifier.testTag(CreditCardEditorTestTags.TOPBAR_SAVE_BUTTON),
) {
Icon(
painter = painterResource(iconsR.drawable.mozac_ic_checkmark_24),
- contentDescription = stringResource(R.string.credit_cards_menu_save),
+ contentDescription = null,
)
}
},
@@ -397,72 +397,65 @@ private fun TextInput(
)
}
-@FlexibleWindowLightDarkPreview
-@Composable
-@Preview
-private fun CreditCardEditorScreenPreview() = FirefoxTheme {
- val state by remember {
- mutableStateOf(
- CreditCardEditorState(
- guid = "1234",
- cardNumber = "5555444433331111",
- nameOnCard = "Jane Doe",
- expiryMonths = listOf("January (01)", "February (02)"),
- selectedExpiryMonthIndex = 1,
- expiryYears = listOf("2025", "2026", "2027"),
- selectedExpiryYearIndex = 2,
- inEditMode = false,
- showDeleteDialog = false,
- ),
- )
- }
- CreditCardEditorScreen(
- store = CreditCardEditorStore(initialState = state),
+private data class CreditCardEditorPreviewState(
+ val guid: String = "1234",
+ val cardNumber: String = "5555444433331111",
+ val nameOnCard: String = "Jane Doe",
+ val expiryMonths: List<String> = listOf("January (01)", "February (02)"),
+ val selectedExpiryMonthIndex: Int = 1,
+ val expiryYears: List<String> = listOf("2025", "2026", "2027"),
+ val selectedExpiryYearIndex: Int = 2,
+ val inEditMode: Boolean = false,
+ val showDeleteDialog: Boolean = false,
+)
+
+private class CreditCardEditorPreviewProvider : PreviewParameterProvider<CreditCardEditorPreviewState> {
+ override val values = sequenceOf(
+ CreditCardEditorPreviewState(),
+ CreditCardEditorPreviewState(inEditMode = true),
+ CreditCardEditorPreviewState(inEditMode = true, showDeleteDialog = true),
)
}
+@FlexibleWindowLightDarkPreview
@Composable
-@Preview
-private fun CreditCardEditorScreenPrivateThemePreview() = FirefoxTheme(theme = Theme.Private) {
- val state by remember {
- mutableStateOf(
- CreditCardEditorState(
- guid = "1234",
- cardNumber = "5555444433331111",
- nameOnCard = "Jane Doe",
- expiryMonths = listOf("January (01)", "February (02)"),
- selectedExpiryMonthIndex = 1,
- expiryYears = listOf("2025", "2026", "2027"),
- selectedExpiryYearIndex = 2,
- inEditMode = false,
- showDeleteDialog = false,
- ),
+private fun CreditCardEditorScreenPreview(
+ @PreviewParameter(CreditCardEditorPreviewProvider::class) param: CreditCardEditorPreviewState,
+) {
+ val state = CreditCardEditorState(
+ guid = param.guid,
+ cardNumber = param.cardNumber,
+ nameOnCard = param.nameOnCard,
+ expiryMonths = param.expiryMonths,
+ selectedExpiryMonthIndex = param.selectedExpiryMonthIndex,
+ expiryYears = param.expiryYears,
+ selectedExpiryYearIndex = param.selectedExpiryYearIndex,
+ inEditMode = param.inEditMode,
+ showDeleteDialog = param.showDeleteDialog,
+ )
+ FirefoxTheme {
+ CreditCardEditorScreen(
+ store = CreditCardEditorStore(initialState = state),
)
}
- CreditCardEditorScreen(
- store = CreditCardEditorStore(initialState = state),
- )
}
-@FlexibleWindowLightDarkPreview
@Composable
@Preview
-private fun CreditCardEditorScreenDeleteDialogPreview() = FirefoxTheme {
- val state by remember {
- mutableStateOf(
- CreditCardEditorState(
- guid = "1234",
- cardNumber = "5555444433331111",
- nameOnCard = "Jane Doe",
- expiryMonths = listOf("January (01)", "February (02)"),
- selectedExpiryMonthIndex = 1,
- expiryYears = listOf("2025", "2026", "2027"),
- selectedExpiryYearIndex = 2,
- inEditMode = false,
- showDeleteDialog = true,
- ),
- )
- }
+private fun CreditCardEditorScreenPrivatePreview(
+ @PreviewParameter(CreditCardEditorPreviewProvider::class) param: CreditCardEditorPreviewState,
+) = FirefoxTheme(theme = Theme.Private) {
+ val state = CreditCardEditorState(
+ guid = param.guid,
+ cardNumber = param.cardNumber,
+ nameOnCard = param.nameOnCard,
+ expiryMonths = param.expiryMonths,
+ selectedExpiryMonthIndex = param.selectedExpiryMonthIndex,
+ expiryYears = param.expiryYears,
+ selectedExpiryYearIndex = param.selectedExpiryYearIndex,
+ inEditMode = param.inEditMode,
+ showDeleteDialog = param.showDeleteDialog,
+ )
CreditCardEditorScreen(
store = CreditCardEditorStore(initialState = state),
)
