commit 8e87d8b90b5201f9de9a36a76b95827fce542755
parent 79620816f8617348fd9fabe59c3bf4d5e0d974ae
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 08:12:39 +0000
Bug 1993368 - Part 18: Migrate PermissionDialog to M3 Acorn specs r=android-reviewers,007
- Removed the explicit tint and color in favor of the `AlertDialog` implementation defaults which will utilize the M3 Acorn colors. Title text is also centered when an icon is present within the `AlertDialog` internal implementation so we are removing the explicit parameters that aren't necessary and defaulting to the M3 component internals.
- Added the correct typography for Alert Dialog title and text.
- Removed the `DialogButton` composable in favor of the current reusable `TextButton` composable that lives in compose-base.
- Used the icon that was provided in the Permission Dialog figma that was mentioned in https://bugzilla.mozilla.org/show_bug.cgi?id=1986429#c3.
- Alert Dialog: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63942-53809&m=dev
- Permission Dialog: https://www.figma.com/design/ctk1Pw1TBxUwVgTTOvjHb4/2025-Android-Fundamentals?node-id=3232-6114&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D272203
Diffstat:
3 files changed, 43 insertions(+), 52 deletions(-)
diff --git a/mobile/android/android-components/components/feature/sitepermissions/src/main/java/mozilla/components/feature/sitepermissions/NotificationPermissionDialogFragment.kt b/mobile/android/android-components/components/feature/sitepermissions/src/main/java/mozilla/components/feature/sitepermissions/NotificationPermissionDialogFragment.kt
@@ -15,6 +15,7 @@ import androidx.fragment.app.DialogFragment
import mozilla.components.compose.base.theme.AcornTheme
import mozilla.components.compose.base.theme.acornDarkColorScheme
import mozilla.components.compose.base.theme.acornLightColorScheme
+import mozilla.components.ui.icons.R as iconsR
/**
* A dialog to be displayed to explain to the user why notification access is required.
@@ -44,7 +45,7 @@ class NotificationPermissionDialogFragment(val positiveButtonAction: () -> Unit)
AcornTheme(colorScheme = colors) {
PermissionDialog(
- icon = R.drawable.ic_system_permission_dialog,
+ icon = iconsR.drawable.mozac_ic_notification_24,
title = title,
message = message,
positiveButtonLabel = positiveButtonLabel,
diff --git a/mobile/android/android-components/components/feature/sitepermissions/src/main/java/mozilla/components/feature/sitepermissions/PermissionDialog.kt b/mobile/android/android-components/components/feature/sitepermissions/src/main/java/mozilla/components/feature/sitepermissions/PermissionDialog.kt
@@ -8,15 +8,17 @@ import androidx.annotation.DrawableRes
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import mozilla.components.compose.base.button.TextButton
import mozilla.components.compose.base.theme.AcornTheme
+import mozilla.components.compose.base.theme.acornPrivateColorScheme
+import mozilla.components.compose.base.theme.privateColorPalette
import mozilla.components.support.ktx.util.PromptAbuserDetector
+import mozilla.components.ui.icons.R as iconsR
/**
* Reusable composable for a permission dialog.
@@ -55,32 +57,36 @@ fun PermissionDialog(
Icon(
painter = painterResource(icon),
contentDescription = null,
- tint = AcornTheme.colors.iconSecondary,
)
}
},
title = {
Text(
text = title,
- textAlign = TextAlign.Center,
- color = AcornTheme.colors.formDefault,
+ style = AcornTheme.typography.headline5,
)
},
text = {
- Text(text = message)
+ Text(
+ text = message,
+ style = AcornTheme.typography.body2,
+ )
},
confirmButton = {
- DialogButton(text = positiveButtonLabel) {
- if (promptAbuserDetector.areDialogsBeingAbused()) {
- promptAbuserDetector.updateJSDialogAbusedState()
- } else {
- onConfirmRequest()
- onDismissRequest()
- }
- }
+ TextButton(
+ text = positiveButtonLabel,
+ onClick = {
+ if (promptAbuserDetector.areDialogsBeingAbused()) {
+ promptAbuserDetector.updateJSDialogAbusedState()
+ } else {
+ onConfirmRequest()
+ onDismissRequest()
+ }
+ },
+ )
},
dismissButton = {
- DialogButton(
+ TextButton(
text = negativeButtonLabel,
onClick = onDismissRequest,
)
@@ -89,40 +95,37 @@ fun PermissionDialog(
)
}
-/**
- * Reusable composable for a dialog button with text.
- */
+@PreviewLightDark
@Composable
-private fun DialogButton(
- text: String,
- modifier: Modifier = Modifier,
- enabled: Boolean = true,
- onClick: () -> Unit,
-) {
- TextButton(
- onClick = onClick,
- modifier = modifier,
- enabled = enabled,
- ) {
- Text(
- modifier = modifier,
- text = text,
+private fun PermissionDialogPreview() {
+ AcornTheme {
+ PermissionDialog(
+ icon = iconsR.drawable.mozac_ic_notification_24,
+ message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sodales laoreet commodo.",
+ title = "Dialog title",
+ positiveButtonLabel = "Go to settings",
+ negativeButtonLabel = "Cancel",
+ onConfirmRequest = {},
+ onDismissRequest = {},
)
}
}
@Preview
@Composable
-private fun PermissionDialogPreview() {
- AcornTheme {
+private fun PermissionDialogPrivatePreview() {
+ AcornTheme(
+ colors = privateColorPalette,
+ colorScheme = acornPrivateColorScheme(),
+ ) {
PermissionDialog(
- icon = R.drawable.ic_system_permission_dialog,
+ icon = iconsR.drawable.mozac_ic_notification_24,
message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sodales laoreet commodo.",
title = "Dialog title",
positiveButtonLabel = "Go to settings",
negativeButtonLabel = "Cancel",
- onConfirmRequest = { },
- onDismissRequest = { },
+ onConfirmRequest = {},
+ onDismissRequest = {},
)
}
}
diff --git a/mobile/android/android-components/components/feature/sitepermissions/src/main/res/drawable/ic_system_permission_dialog.xml b/mobile/android/android-components/components/feature/sitepermissions/src/main/res/drawable/ic_system_permission_dialog.xml
@@ -1,13 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
- - License, v. 2.0. If a copy of the MPL was not distributed with this
- - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
- android:width="24dp"
- android:height="24dp"
- android:viewportWidth="24"
- android:viewportHeight="24">
- <path
- android:pathData="M4.5,4C3.12,4 2,5.12 2,6.5V16.5C2,17.88 3.12,19 4.5,19H1V20.75H23V19H19.5C20.88,19 22,17.88 22,16.5V6.5C22,5.12 20.88,4 19.5,4H4.5ZM3.75,6.5C3.75,6.086 4.086,5.75 4.5,5.75H19.5C19.914,5.75 20.25,6.086 20.25,6.5V16.5C20.25,16.914 19.914,17.25 19.5,17.25H4.5C4.086,17.25 3.75,16.914 3.75,16.5V6.5Z"
- android:fillColor="#5B5B66"
- android:fillType="evenOdd"/>
-</vector>
