[fenix] For https://github.com/mozilla-mobile/fenix/issues/25176 - Refactor TabTitle and TabSubtitle

app/src/main/java/org/mozilla/fenix/compose/ListItemTabLarge.kt

@@ -18,8 +18,10 @@ import androidx.compose.material.Card
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+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 org.mozilla.fenix.theme.FirefoxTheme
 import org.mozilla.fenix.theme.Theme
 
@@ -49,10 +51,20 @@ fun ListItemTabLarge(
     onClick: (() -> Unit)? = null
 ) {
     ListItemTabSurface(imageUrl, onClick) {
-        TabTitle(text = title, maxLines = 3)
+        PrimaryText(
+            text = title,
+            fontSize = 14.sp,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 3,
+        )
 
         if (caption != null) {
-            TabSubtitle(text = caption)
+            SecondaryText(
+                text = caption,
+                fontSize = 12.sp,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+            )
         }
     }
 }

app/src/main/java/org/mozilla/fenix/compose/TabSubtitle.kt

@@ -1,54 +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/. */
-
-package org.mozilla.fenix.compose
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.foundation.layout.Box
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-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.sp
-import org.mozilla.fenix.theme.FirefoxTheme
-import org.mozilla.fenix.theme.Theme
-
-/**
- * Default layout for a tab composable caption.
- *
- * @param text Tab caption.
- * @param modifier Optional [Modifier] to be applied to the layout.
- */
-@Composable
-fun TabSubtitle(
-    text: String,
-    modifier: Modifier = Modifier
-) {
-    Text(
-        modifier = modifier,
-        maxLines = 1,
-        text = text,
-        style = TextStyle(fontSize = 12.sp),
-        overflow = TextOverflow.Ellipsis,
-        color = when (isSystemInDarkTheme()) {
-            true -> FirefoxTheme.colors.textPrimary
-            false -> FirefoxTheme.colors.textSecondary
-        }
-    )
-}
-
-@Composable
-@Preview
-private fun TabSubtitlePreview() {
-    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
-        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
-            TabSubtitle(
-                "Awesome tab subtitle",
-            )
-        }
-    }
-}

app/src/main/java/org/mozilla/fenix/compose/TabSubtitleWithInterdot.kt

@@ -11,7 +11,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
 import org.mozilla.fenix.theme.FirefoxTheme
 import org.mozilla.fenix.theme.Theme
 
@@ -47,9 +49,24 @@ fun TabSubtitleWithInterdot(
 
     Layout(
         content = {
-            TabSubtitle(text = firstText)
+            SecondaryText(
-            TabSubtitle(text = " \u00b7 ")
+                text = firstText,
-            TabSubtitle(text = secondText)
+                fontSize = 12.sp,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+            )
+            SecondaryText(
+                text = " \u00b7 ",
+                fontSize = 12.sp,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+            )
+            SecondaryText(
+                text = secondText,
+                fontSize = 12.sp,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+            )
         }
     ) { items, constraints ->
 

app/src/main/java/org/mozilla/fenix/compose/TabTitle.kt

@@ -1,54 +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/. */
-
-package org.mozilla.fenix.compose
-
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-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.sp
-import org.mozilla.fenix.theme.FirefoxTheme
-import org.mozilla.fenix.theme.Theme
-
-/**
- * Default layout for a tab composable title.
- *
- * @param text Tab title
- * @param maxLines Maximum number of lines for [text] to span, wrapping if necessary.
- * If the text exceeds the given number of lines it will be ellipsized.
- * @param modifier Optional [Modifier] to be applied to the layout.
- */
-@Composable
-fun TabTitle(
-    text: String,
-    maxLines: Int,
-    modifier: Modifier = Modifier
-) {
-    Text(
-        modifier = modifier,
-        maxLines = maxLines,
-        text = text,
-        style = TextStyle(fontSize = 14.sp),
-        overflow = TextOverflow.Ellipsis,
-        color = FirefoxTheme.colors.textPrimary
-    )
-}
-
-@Composable
-@Preview
-private fun TabTitlePreview() {
-    FirefoxTheme(theme = Theme.getTheme(isPrivate = false)) {
-        Box(Modifier.background(FirefoxTheme.colors.layer2)) {
-            TabTitle(
-                "Awesome tab title",
-                2
-            )
-        }
-    }
-}

app/src/main/java/org/mozilla/fenix/home/pocket/PocketStoriesComposables.kt

@@ -30,6 +30,7 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
@@ -44,9 +45,9 @@ import org.mozilla.fenix.compose.ListItemTabLarge
 import org.mozilla.fenix.compose.ListItemTabLargePlaceholder
 import org.mozilla.fenix.compose.SelectableChip
 import org.mozilla.fenix.compose.StaggeredHorizontalGrid
-import org.mozilla.fenix.compose.TabSubtitle
+import org.mozilla.fenix.compose.PrimaryText
 import org.mozilla.fenix.compose.TabSubtitleWithInterdot
-import org.mozilla.fenix.compose.TabTitle
+import org.mozilla.fenix.compose.SecondaryText
 import org.mozilla.fenix.theme.FirefoxTheme
 import org.mozilla.fenix.theme.Theme
 import kotlin.math.roundToInt
@@ -83,15 +84,30 @@ fun PocketStory(
         imageUrl = imageUrl,
         onClick = { onStoryClick(story) },
         title = {
-            TabTitle(text = story.title, maxLines = 2)
+            PrimaryText(
+                text = story.title,
+                fontSize = 14.sp,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 2,
+            )
         },
         subtitle = {
             if (isValidPublisher && isValidTimeToRead) {
                 TabSubtitleWithInterdot(story.publisher, "${story.timeToRead} min")
             } else if (isValidPublisher) {
-                TabSubtitle(story.publisher)
+                SecondaryText(
+                    text = story.publisher,
+                    fontSize = 12.sp,
+                    overflow = TextOverflow.Ellipsis,
+                    maxLines = 1,
+                )
             } else if (isValidTimeToRead) {
-                TabSubtitle("${story.timeToRead} min")
+                SecondaryText(
+                    text = "${story.timeToRead} min",
+                    fontSize = 12.sp,
+                    overflow = TextOverflow.Ellipsis,
+                    maxLines = 1,
+                )
             }
         }
     )