commit 77be8fe7b2f260870e3a88f2023bc1fcc5c6e9ed
parent 9a1289a9402a2eb2ae8af10915afbb86337ae37a
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 20 Nov 2025 01:11:16 +0000
Bug 1983833 - Part 3: Migrate IconButton to use M3 Acorn color tokens r=android-reviewers,007
Figma: https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=63872-9687&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D270337
Diffstat:
2 files changed, 86 insertions(+), 44 deletions(-)
diff --git a/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/button/IconButton.kt b/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/button/IconButton.kt
@@ -5,15 +5,19 @@
package mozilla.components.compose.base.button
import android.view.SoundEffectConstants
-import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.Interaction
import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButtonColors
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.minimumInteractiveComponentSize
import androidx.compose.material3.ripple
@@ -27,9 +31,12 @@ import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.unit.dp
import mozilla.components.compose.base.theme.AcornTheme
+import mozilla.components.compose.base.theme.acornPrivateColorScheme
+import mozilla.components.compose.base.theme.privateColorPalette
import mozilla.components.ui.icons.R as iconsR
// Temporary workaround to Compose buttons not having click sounds
@@ -62,8 +69,8 @@ fun IconButton(
contentDescription: String?,
modifier: Modifier = Modifier,
colors: IconButtonColors = IconButtonDefaults.iconButtonColors(
- contentColor = AcornTheme.colors.iconButton,
- disabledContentColor = AcornTheme.colors.iconDisabled,
+ contentColor = MaterialTheme.colorScheme.onSurface,
+ disabledContentColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f),
),
onClickLabel: String? = null,
enabled: Boolean = true,
@@ -105,30 +112,63 @@ fun IconButton(
@Composable
private fun IconButtonPreview() {
AcornTheme {
- IconButton(
- onClick = {},
- contentDescription = "test",
- modifier = Modifier.background(AcornTheme.colors.layer1),
- ) {
- Icon(
- painter = painterResource(iconsR.drawable.mozac_ic_bookmark_fill_24),
- contentDescription = null,
- )
+ Surface {
+ Column(
+ modifier = Modifier.padding(all = 16.dp),
+ verticalArrangement = Arrangement.spacedBy(4.dp),
+ ) {
+ IconButton(
+ onClick = {},
+ contentDescription = "test",
+ ) {
+ Icon(
+ painter = painterResource(iconsR.drawable.mozac_ic_bookmark_fill_24),
+ contentDescription = null,
+ )
+ }
+
+ IconButton(
+ onClick = {},
+ contentDescription = "test",
+ colors = IconButtonDefaults.iconButtonColors(contentColor = MaterialTheme.colorScheme.onSurface),
+ ) {
+ Text(text = "button")
+ }
+ }
}
}
}
-@PreviewLightDark
+@Preview
@Composable
-private fun TextButtonPreview() {
- AcornTheme {
- IconButton(
- onClick = {},
- contentDescription = "test",
- modifier = Modifier.background(AcornTheme.colors.layer1),
- colors = IconButtonDefaults.iconButtonColors(contentColor = AcornTheme.colors.textPrimary),
- ) {
- Text(text = "button")
+private fun IconButtonPrivatePreview() {
+ AcornTheme(
+ colors = privateColorPalette,
+ colorScheme = acornPrivateColorScheme(),
+ ) {
+ Surface {
+ Column(
+ modifier = Modifier.padding(all = 16.dp),
+ verticalArrangement = Arrangement.spacedBy(4.dp),
+ ) {
+ IconButton(
+ onClick = {},
+ contentDescription = "test",
+ ) {
+ Icon(
+ painter = painterResource(iconsR.drawable.mozac_ic_bookmark_fill_24),
+ contentDescription = null,
+ )
+ }
+
+ IconButton(
+ onClick = {},
+ contentDescription = "test",
+ colors = IconButtonDefaults.iconButtonColors(contentColor = MaterialTheme.colorScheme.onSurface),
+ ) {
+ Text(text = "button")
+ }
+ }
}
}
}
diff --git a/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/button/LongPressIconButton.kt b/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/button/LongPressIconButton.kt
@@ -5,7 +5,6 @@
package mozilla.components.compose.base.button
import android.view.SoundEffectConstants
-import androidx.compose.foundation.background
import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.interaction.Interaction
import androidx.compose.foundation.interaction.MutableInteractionSource
@@ -14,6 +13,8 @@ import androidx.compose.material3.Icon
import androidx.compose.material3.IconButtonColors
import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.minimumInteractiveComponentSize
import androidx.compose.material3.ripple
@@ -70,8 +71,8 @@ fun LongPressIconButton(
contentDescription: String,
modifier: Modifier = Modifier,
colors: IconButtonColors = IconButtonDefaults.iconButtonColors(
- contentColor = AcornTheme.colors.iconPrimary,
- disabledContentColor = AcornTheme.colors.iconDisabled,
+ contentColor = MaterialTheme.colorScheme.onSurface,
+ disabledContentColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.38f),
),
onClickLabel: String? = null,
onLongClickLabel: String? = null,
@@ -120,17 +121,17 @@ fun LongPressIconButton(
@Composable
private fun LongPressIconButtonPreview() {
AcornTheme {
- LongPressIconButton(
- onClick = {},
- onLongClick = {},
- contentDescription = "test",
- modifier = Modifier.background(AcornTheme.colors.layer1),
- colors = IconButtonDefaults.iconButtonColors(contentColor = AcornTheme.colors.iconButton),
- ) {
- Icon(
- painter = painterResource(iconsR.drawable.mozac_ic_bookmark_fill_24),
- contentDescription = null,
- )
+ Surface {
+ LongPressIconButton(
+ onClick = {},
+ onLongClick = {},
+ contentDescription = "test",
+ ) {
+ Icon(
+ painter = painterResource(iconsR.drawable.mozac_ic_bookmark_fill_24),
+ contentDescription = null,
+ )
+ }
}
}
}
@@ -139,14 +140,15 @@ private fun LongPressIconButtonPreview() {
@Composable
private fun LongPressTextButtonPreview() {
AcornTheme {
- LongPressIconButton(
- onClick = {},
- onLongClick = {},
- contentDescription = "test",
- modifier = Modifier.background(AcornTheme.colors.layer1),
- colors = IconButtonDefaults.iconButtonColors(contentColor = AcornTheme.colors.textPrimary),
- ) {
- Text(text = "button")
+ Surface {
+ LongPressIconButton(
+ onClick = {},
+ onLongClick = {},
+ contentDescription = "test",
+ colors = IconButtonDefaults.iconButtonColors(contentColor = MaterialTheme.colorScheme.onSurface),
+ ) {
+ Text(text = "button")
+ }
}
}
}
