commit c6e797fee9468252c5ec5ec1255bbc08a6347c02
parent 43e7213beb2063747c45be41007919bf174f8b77
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Tue, 18 Nov 2025 23:32:37 +0000
Bug 1993856 - Part 2: Align the HomeSectionsHeader with the M3 Acorn Specs r=android-reviewers,007
Figma:
- https://www.figma.com/design/NSjxxopvFmRFu0m61T1N4E/HNT-Android-2025?node-id=14102-18123&m=dev
- https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=59929-28685&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D268439
Diffstat:
3 files changed, 72 insertions(+), 24 deletions(-)
diff --git a/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/theme/layout/AcornSize.kt b/mobile/android/android-components/components/compose/base/src/main/java/mozilla/components/compose/base/theme/layout/AcornSize.kt
@@ -24,6 +24,7 @@ sealed class AcornSize {
* A palette defining the static sizing dimensions of visual elements styled by
* the Acorn Design System.
*/
+ val static50: Dp = 4.dp
val static100: Dp = 8.dp
val static200: Dp = 16.dp
val static250: Dp = 20.dp
diff --git a/mobile/android/android-components/components/ui/icons/src/main/res/drawable/mozac_ic_chevron_right_16.xml b/mobile/android/android-components/components/ui/icons/src/main/res/drawable/mozac_ic_chevron_right_16.xml
@@ -0,0 +1,13 @@
+<!-- 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="16dp"
+ android:height="16dp"
+ android:autoMirrored="true"
+ android:viewportWidth="16"
+ android:viewportHeight="16">
+ <path
+ android:fillColor="@color/mozac_ui_icons_fill"
+ android:pathData="M6.26,13L5.376,12.115L9.491,8L5.376,3.885L6.26,3L10.817,7.558C11.061,7.802 11.061,8.199 10.817,8.443L6.26,13Z" />
+</vector>
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/home/HomeSectionHeader.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/home/HomeSectionHeader.kt
@@ -5,31 +5,37 @@
package org.mozilla.fenix.compose.home
import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import androidx.compose.ui.tooling.preview.PreviewLightDark
import mozilla.components.compose.base.utils.inComposePreview
import mozilla.components.lib.state.ext.observeAsComposableState
import org.mozilla.fenix.R
import org.mozilla.fenix.components.components
import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
import org.mozilla.fenix.wallpapers.Wallpaper
+import mozilla.components.ui.icons.R as iconsR
/**
* Homepage header.
@@ -64,12 +70,12 @@ fun HomeSectionHeader(
HomeSectionHeaderContent(
headerText = headerText,
modifier = modifier,
- textColor = wallpaperAdaptedTextColor ?: FirefoxTheme.colors.textPrimary,
+ textColor = wallpaperAdaptedTextColor ?: MaterialTheme.colorScheme.onSurface,
description = description,
- showAllTextColor = if (isWallpaperDefault) {
- MaterialTheme.colorScheme.tertiary
+ buttonColor = if (isWallpaperDefault) {
+ MaterialTheme.colorScheme.onSurface
} else {
- wallpaperAdaptedTextColor ?: MaterialTheme.colorScheme.tertiary
+ wallpaperAdaptedTextColor ?: MaterialTheme.colorScheme.onSurface
},
onShowAllClick = onShowAllClick,
)
@@ -83,20 +89,20 @@ fun HomeSectionHeader(
* @param modifier Modifier to apply.
* @param textColor [Color] to apply to the text.
* @param description The content description for the "Show all" button.
- * @param showAllTextColor [Color] for the "Show all" button.
+ * @param buttonColor [Color] for the "Show all" button contents.
* @param onShowAllClick Invoked when "Show all" button is clicked.
*/
@Composable
private fun HomeSectionHeaderContent(
headerText: String,
modifier: Modifier = Modifier,
- textColor: Color = FirefoxTheme.colors.textPrimary,
+ textColor: Color = MaterialTheme.colorScheme.onSurface,
description: String = "",
- showAllTextColor: Color = MaterialTheme.colorScheme.tertiary,
+ buttonColor: Color = MaterialTheme.colorScheme.onSurface,
onShowAllClick: (() -> Unit)? = null,
) {
Row(
- modifier = Modifier.fillMaxWidth().then(modifier),
+ modifier = modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
) {
Text(
@@ -108,22 +114,32 @@ private fun HomeSectionHeaderContent(
color = textColor,
overflow = TextOverflow.Ellipsis,
maxLines = 2,
- style = FirefoxTheme.typography.headline6,
+ style = FirefoxTheme.typography.subtitle1,
)
+ Spacer(modifier = Modifier.width(FirefoxTheme.layout.space.dynamic100))
+
onShowAllClick?.let {
- TextButton(onClick = { onShowAllClick() }) {
+ TextButton(
+ onClick = { onShowAllClick() },
+ colors = ButtonDefaults.textButtonColors(
+ contentColor = buttonColor,
+ ),
+ ) {
Text(
text = stringResource(id = R.string.recent_tabs_show_all),
modifier = Modifier
- .padding(start = 16.dp)
.semantics {
contentDescription = description
},
- style = TextStyle(
- color = showAllTextColor,
- fontSize = 14.sp,
- ),
+ style = FirefoxTheme.typography.subtitle1,
+ )
+
+ Spacer(modifier = Modifier.width(FirefoxTheme.layout.size.static50))
+
+ Icon(
+ painter = painterResource(id = iconsR.drawable.mozac_ic_chevron_right_16),
+ contentDescription = null,
)
}
}
@@ -131,13 +147,31 @@ private fun HomeSectionHeaderContent(
}
@Composable
-@Preview
+@PreviewLightDark
private fun HomeSectionsHeaderPreview() {
FirefoxTheme {
- HomeSectionHeader(
- headerText = stringResource(R.string.home_bookmarks_title),
- description = stringResource(R.string.home_bookmarks_show_all_content_description),
- onShowAllClick = {},
- )
+ Surface {
+ HomeSectionHeader(
+ headerText = stringResource(R.string.home_bookmarks_title),
+ modifier = Modifier.padding(horizontal = FirefoxTheme.layout.size.static300),
+ description = stringResource(R.string.home_bookmarks_show_all_content_description),
+ onShowAllClick = {},
+ )
+ }
+ }
+}
+
+@Composable
+@Preview
+private fun HomeSectionsHeaderPrivatePreview() {
+ FirefoxTheme(theme = Theme.Private) {
+ Surface {
+ HomeSectionHeader(
+ headerText = stringResource(R.string.home_bookmarks_title),
+ modifier = Modifier.padding(horizontal = FirefoxTheme.layout.size.static300),
+ description = stringResource(R.string.home_bookmarks_show_all_content_description),
+ onShowAllClick = {},
+ )
+ }
}
}
