commit 762cfb025da320e607e4f638a9dfa3f366515098
parent 0a9d66331dcb27da9e4eddb2de44855464bf1e19
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 01:11:17 +0000
Bug 1983833 - Part 8: Migrate ActionButton and ActionContainer to use M3 Acorn color tokens r=android-reviewers,007
Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63874-4867&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D270640
Diffstat:
2 files changed, 52 insertions(+), 23 deletions(-)
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ActionContainer.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ActionContainer.kt
@@ -6,8 +6,10 @@ package mozilla.components.compose.browser.toolbar
import android.graphics.drawable.Drawable
import androidx.appcompat.content.res.AppCompatResources
+import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.ReadOnlyComposable
import androidx.compose.runtime.remember
@@ -16,7 +18,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
import mozilla.components.compose.base.theme.AcornTheme
import mozilla.components.compose.browser.toolbar.concept.Action
import mozilla.components.compose.browser.toolbar.concept.Action.ActionButton
@@ -36,7 +38,7 @@ import mozilla.components.ui.icons.R as iconsR
/**
* A container for displaying [Action]s.
*
- * @param actions List of [Action]s to display in thuuuuuuuuuuu`e container.
+ * @param actions List of [Action]s to display in the container.
* @param onInteraction Callback for handling [BrowserToolbarEvent]s on user interactions.
* @param modifier Modifier to apply to the container.
* @param horizontalArrangement The horizontal arrangement of the layout's children.
@@ -111,7 +113,7 @@ fun ActionContainer(
@Composable
private fun ActionButtonRes.iconDrawable(): Drawable? {
val context = LocalContext.current
- val tint = AcornTheme.colors.iconPrimary
+ val tint = MaterialTheme.colorScheme.onSurface
return remember(this, context) {
AppCompatResources.getDrawable(context, drawableResId)
@@ -121,7 +123,7 @@ private fun ActionButtonRes.iconDrawable(): Drawable? {
@Composable
private fun ActionButton.iconDrawable(): Drawable? {
- val tint = AcornTheme.colors.iconPrimary
+ val tint = MaterialTheme.colorScheme.onSurface
return remember(this) {
when (shouldTint) {
@@ -141,7 +143,7 @@ private fun SearchSelectorAction.contentDescription() = when (contentDescription
@Composable
private fun SearchSelectorAction.iconDrawable(): Drawable? {
val context = LocalContext.current
- val tint = AcornTheme.colors.iconPrimary
+ val tint = MaterialTheme.colorScheme.onSurface
val drawable = remember(this, context) {
when (icon) {
@@ -153,7 +155,7 @@ private fun SearchSelectorAction.iconDrawable(): Drawable? {
return drawable
}
-@Preview(showBackground = true)
+@PreviewLightDark
@Composable
private fun ActionContainerPreview() {
AcornTheme {
@@ -183,6 +185,7 @@ private fun ActionContainerPreview() {
),
),
onInteraction = {},
+ modifier = Modifier.background(color = MaterialTheme.colorScheme.surfaceDim),
)
}
}
diff --git a/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/ActionButton.kt b/mobile/android/android-components/components/compose/browser-toolbar/src/main/java/mozilla/components/compose/browser/toolbar/ui/ActionButton.kt
@@ -7,8 +7,10 @@ package mozilla.components.compose.browser.toolbar.ui
import android.graphics.drawable.Drawable
import androidx.appcompat.content.res.AppCompatResources
import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+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
@@ -64,12 +66,12 @@ internal fun ActionButton(
onLongClick != null
}
var currentMenuState by remember { mutableStateOf(None) }
- val colors = AcornTheme.colors
+ val colors = MaterialTheme.colorScheme
val tint = remember(state, colors) {
when (state) {
- State.ACTIVE -> colors.iconAccentViolet
- State.DISABLED -> colors.iconDisabled
- State.DEFAULT -> colors.iconPrimary
+ State.ACTIVE -> colors.tertiary
+ State.DISABLED -> colors.onSurface.copy(alpha = 0.38f)
+ State.DEFAULT -> colors.onSurface
}
}
@@ -213,16 +215,40 @@ private enum class MenuState {
@Composable
private fun ActionButtonPreview() {
AcornTheme {
- Box(modifier = Modifier.background(AcornTheme.colors.layer1)) {
- ActionButton(
- icon = AppCompatResources.getDrawable(
- LocalContext.current,
- iconsR.drawable.mozac_ic_web_extension_default_icon,
- )!!,
- contentDescription = "Test",
- onClick = object : BrowserToolbarEvent {},
- onInteraction = {},
- )
+ Surface {
+ Row {
+ ActionButton(
+ icon = AppCompatResources.getDrawable(
+ LocalContext.current,
+ iconsR.drawable.mozac_ic_bookmark_24,
+ )!!,
+ contentDescription = "Test",
+ onClick = object : BrowserToolbarEvent {},
+ onInteraction = {},
+ )
+
+ ActionButton(
+ icon = AppCompatResources.getDrawable(
+ LocalContext.current,
+ iconsR.drawable.mozac_ic_bookmark_24,
+ )!!,
+ contentDescription = "Test",
+ state = State.ACTIVE,
+ onClick = object : BrowserToolbarEvent {},
+ onInteraction = {},
+ )
+
+ ActionButton(
+ icon = AppCompatResources.getDrawable(
+ LocalContext.current,
+ iconsR.drawable.mozac_ic_bookmark_24,
+ )!!,
+ contentDescription = "Test",
+ state = State.DISABLED,
+ onClick = object : BrowserToolbarEvent {},
+ onInteraction = {},
+ )
+ }
}
}
}
@@ -231,11 +257,11 @@ private fun ActionButtonPreview() {
@Composable
private fun HighlightedActionButtonPreview() {
AcornTheme {
- Box(modifier = Modifier.background(AcornTheme.colors.layer1)) {
+ Surface {
ActionButton(
icon = AppCompatResources.getDrawable(
LocalContext.current,
- iconsR.drawable.mozac_ic_web_extension_default_icon,
+ iconsR.drawable.mozac_ic_ellipsis_vertical_24,
)!!,
contentDescription = "Test",
onClick = object : BrowserToolbarEvent {},
