Bug 1816867 - Ensure Pocket topics selections are properly shown

A past refactoring resulted in the functionality still working as intended - no
more than 8 topics being selectable at a time but when a topic would be
automatically deselected this would not show - that topic would still be
displayed as selected.

Moving the implementation to a new `FilterChip` Compose api fixes the UI issue
and also allows for more idiomatic code and fixes a previously disabled UI test

app/src/androidTest/java/org/mozilla/fenix/ui/HomeScreenTest.kt

@@ -227,7 +227,6 @@ class HomeScreenTest {
         }
     }
 
-    @Ignore("failing after a design refactor, see https://github.com/mozilla-mobile/fenix/issues/28472")
     @Test
     fun selectStoriesByTopicItemTest() {
         activityTestRule.activityRule.applySettingsExceptions {

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

@@ -2,6 +2,8 @@
  * 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/. */
 
+@file:OptIn(ExperimentalMaterialApi::class)
+
 package org.mozilla.fenix.compose
 
 import android.content.res.Configuration
@@ -12,13 +14,11 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ChipDefaults.chipColors
+import androidx.compose.material.ChipDefaults.filterChipColors
 import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.FilterChip
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
@@ -79,20 +79,16 @@ fun SelectableChip(
     selectableChipColors: SelectableChipColors = SelectableChipColors.buildColors(),
     onClick: () -> Unit,
 ) {
-    var selected by remember { mutableStateOf(isSelected) }
-
-    Chip(
-        text = text,
-        backgroundColor = if (selected) {
-            selectableChipColors.selectedBackgroundColor
-        } else {
-            selectableChipColors.unselectedBackgroundColor
-        },
-        isSquare = isSquare,
-        textColor = if (selected) selectableChipColors.selectedTextColor else selectableChipColors.unselectedTextColor,
+    FilterChip(
+        selected = isSelected,
+        onClick = onClick,
+        shape = if (isSquare) RoundedCornerShape(4.dp) else RoundedCornerShape(25.dp),
+        colors = selectableChipColors.toMaterialChipColors(),
     ) {
-        selected = !selected
-        onClick()
+        Text(
+            text = text,
+            style = FirefoxTheme.typography.body2,
+        )
     }
 }
 
@@ -130,6 +126,17 @@ data class SelectableChipColors(
     }
 }
 
+/**
+ * Map applications' colors for selectable chips to the platform type.
+ */
+@Composable
+private fun SelectableChipColors.toMaterialChipColors() = filterChipColors(
+    selectedBackgroundColor = selectedBackgroundColor,
+    backgroundColor = unselectedBackgroundColor,
+    selectedContentColor = selectedTextColor,
+    contentColor = unselectedTextColor,
+)
+
 @Composable
 @LightDarkPreview
 private fun ChipPreview() {

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

@@ -439,13 +439,6 @@ fun PocketStoriesCategories(
     categoryColors: SelectableChipColors = SelectableChipColors.buildColors(),
     onCategoryClick: (PocketRecommendedStoriesCategory) -> Unit,
 ) {
-    val selectableChipColors = SelectableChipColors(
-        selectedTextColor = categoryColors.selectedTextColor,
-        unselectedTextColor = categoryColors.unselectedTextColor,
-        selectedBackgroundColor = categoryColors.selectedBackgroundColor,
-        unselectedBackgroundColor = categoryColors.unselectedBackgroundColor,
-    )
-
     Box(
         modifier = modifier.semantics {
             testTagsAsResourceId = true
@@ -461,7 +454,7 @@ fun PocketStoriesCategories(
                     text = category.name,
                     isSelected = selections.map { it.name }.contains(category.name),
                     isSquare = true,
-                    selectableChipColors = selectableChipColors,
+                    selectableChipColors = categoryColors,
                 ) {
                     onCategoryClick(category)
                 }