commit 58a5acf7b67ab099d6fba4253d2b91a753af8b2d
parent 8490d107c724dc0d3c4fed9f50319d3ac795dbcc
Author: Gabriel Luong <gabriel.luong@gmail.com>
Date: Wed, 3 Dec 2025 01:08:45 +0000
Bug 1993856 - Part 17: Migrate PocketSection and Stories to M3 color tokens r=android-reviewers,devota
- Aligned the Card colors with https://www.figma.com/design/MjufE1X5fvkxZ0YneX4kRd/Android-Library--2025-?node-id=61820-4186&m=dev
Differential Revision: https://phabricator.services.mozilla.com/D274681
Diffstat:
3 files changed, 23 insertions(+), 37 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/fake/FakeHomepagePreview.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/fake/FakeHomepagePreview.kt
@@ -29,6 +29,7 @@ import org.mozilla.fenix.components.appstate.AppState
import org.mozilla.fenix.components.appstate.setup.checklist.ChecklistItem
import org.mozilla.fenix.compose.MessageCardColors
import org.mozilla.fenix.compose.MessageCardState
+import org.mozilla.fenix.ext.CONTENT_RECOMMENDATIONS_TO_SHOW_COUNT
import org.mozilla.fenix.home.bookmarks.Bookmark
import org.mozilla.fenix.home.bookmarks.interactor.BookmarksInteractor
import org.mozilla.fenix.home.collections.CollectionColors
@@ -396,7 +397,7 @@ internal object FakeHomepagePreview {
}
@Composable
- internal fun pocketState(limit: Int = 1) = PocketState(
+ internal fun pocketState(limit: Int = CONTENT_RECOMMENDATIONS_TO_SHOW_COUNT) = PocketState(
stories = stories(limit = limit),
categories = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"
.split(" ")
@@ -408,7 +409,7 @@ internal object FakeHomepagePreview {
showDiscoverMoreButton = false,
)
- internal fun contentRecommendation(index: Int = 0): ContentRecommendation =
+ internal fun contentRecommendation(index: Int = Random.nextInt(until = 5)): ContentRecommendation =
ContentRecommendation(
corpusItemId = "corpusItemId$index",
scheduledCorpusItemId = "scheduledCorpusItemId$index",
@@ -425,7 +426,7 @@ internal object FakeHomepagePreview {
impressions = index.toLong(),
)
- internal fun sponsoredContent(index: Int = 0) = SponsoredContent(
+ internal fun sponsoredContent(index: Int = Random.nextInt(until = 5)) = SponsoredContent(
url = "https://sponsored-story$index.com",
title = "This is a ${"very ".repeat(index)}long title",
callbacks = PocketStory.SponsoredContentCallbacks(clickUrl = "", impressionUrl = ""),
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/PocketSection.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/PocketSection.kt
@@ -4,12 +4,11 @@
package org.mozilla.fenix.home.pocket.ui
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Modifier
@@ -78,7 +77,7 @@ fun PocketSection(
@Composable
private fun PocketSectionPreview() {
FirefoxTheme {
- Box(Modifier.background(FirefoxTheme.colors.layer2)) {
+ Surface {
PocketSection(
state = FakeHomepagePreview.pocketState(),
cardBackgroundColor = WallpaperState.default.cardBackgroundColor,
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/Stories.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/home/pocket/ui/Stories.kt
@@ -5,7 +5,6 @@
package org.mozilla.fenix.home.pocket.ui
import android.graphics.Rect
-import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
@@ -17,9 +16,9 @@ import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.systemBarsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.ReadOnlyComposable
@@ -35,7 +34,7 @@ import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.testTag
import androidx.compose.ui.semantics.testTagsAsResourceId
import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.Dp
@@ -90,7 +89,6 @@ fun SponsoredContentStory(
testTagsAsResourceId = true
testTag = "pocket.sponsoredContent.title"
},
- color = FirefoxTheme.colors.textPrimary,
overflow = TextOverflow.Ellipsis,
maxLines = maxSponsoredLines(),
style = FirefoxTheme.typography.body2,
@@ -102,7 +100,7 @@ fun SponsoredContentStory(
testTagsAsResourceId = true
testTag = "pocket.sponsoredContent.identifier"
},
- color = FirefoxTheme.colors.textSecondary,
+ color = MaterialTheme.colorScheme.onSurfaceVariant,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = FirefoxTheme.typography.caption,
@@ -144,7 +142,6 @@ fun ContentRecommendationStory(
testTagsAsResourceId = true
testTag = "pocket.contentRecommendation.title"
},
- color = FirefoxTheme.colors.textPrimary,
overflow = TextOverflow.Ellipsis,
maxLines = maxLines(),
style = FirefoxTheme.typography.body2,
@@ -167,7 +164,7 @@ fun ContentRecommendationStory(
fun Stories(
@PreviewParameter(StoryProvider::class) stories: List<PocketStory>,
contentPadding: Dp,
- backgroundColor: Color = FirefoxTheme.colors.layer2,
+ backgroundColor: Color = MaterialTheme.colorScheme.surfaceContainerLowest,
onStoryShown: (PocketStory, Triple<Int, Int, Int>) -> Unit,
onStoryClicked: (PocketStory, Triple<Int, Int, Int>) -> Unit,
) {
@@ -270,29 +267,24 @@ fun Stories(
}
}
-@Suppress("MagicNumber")
@Composable
-@Preview
+@PreviewLightDark
private fun StoriesWithCategoriesPreview() {
FirefoxTheme {
- Box(
- Modifier
- .background(MaterialTheme.colorScheme.surface)
- .systemBarsPadding()
- .padding(top = 32.dp),
- ) {
+ Surface {
Column {
Stories(
stories = listOf(
- FakeHomepagePreview.contentRecommendation(15),
- FakeHomepagePreview.sponsoredContent(15),
- FakeHomepagePreview.contentRecommendation(1),
- FakeHomepagePreview.sponsoredContent(1),
+ FakeHomepagePreview.contentRecommendation(),
+ FakeHomepagePreview.sponsoredContent(),
+ FakeHomepagePreview.contentRecommendation(),
+ FakeHomepagePreview.sponsoredContent(),
),
contentPadding = 0.dp,
onStoryShown = { _, _ -> },
onStoryClicked = { _, _ -> },
)
+
Spacer(Modifier.height(10.dp))
StoriesCategories(
@@ -307,23 +299,17 @@ private fun StoriesWithCategoriesPreview() {
}
}
-@Suppress("MagicNumber")
@Composable
-@Preview
+@PreviewLightDark
private fun StoriesPreview() {
FirefoxTheme {
- Box(
- Modifier
- .background(MaterialTheme.colorScheme.surface)
- .systemBarsPadding()
- .padding(top = 32.dp),
- ) {
+ Surface {
Stories(
stories = listOf(
- FakeHomepagePreview.contentRecommendation(15),
- FakeHomepagePreview.sponsoredContent(15),
- FakeHomepagePreview.contentRecommendation(1),
- FakeHomepagePreview.sponsoredContent(1),
+ FakeHomepagePreview.contentRecommendation(),
+ FakeHomepagePreview.sponsoredContent(),
+ FakeHomepagePreview.contentRecommendation(),
+ FakeHomepagePreview.sponsoredContent(),
),
contentPadding = 0.dp,
onStoryShown = { _, _ -> },
