For mozilla-mobile#27401 - refactor SelectableChip into Chip composable

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

@@ -0,0 +1,78 @@
+/* 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 android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material.ChipDefaults.chipColors
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.sp
+import org.mozilla.fenix.theme.FirefoxTheme
+
+/**
+ * Default layout for a clickable chip.
+ *
+ * @param text [String] displayed in this chip.
+ * @param modifider [Modifier] used to be applied to the layout of the chip.
+ * @param textColor Optional text [Color] for the chip.
+ * @param backgroundColor Optional background [Color] for the chip.
+// * @param enabled [Boolean] used to determine if chip responds to user input
+ * @param onClick Optional Callback for when the user taps this chip.
+ */
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun Chip(
+    text: String,
+    modifier: Modifier = Modifier,
+    textColor: Color = FirefoxTheme.colors.textActionPrimary,
+    backgroundColor: Color = FirefoxTheme.colors.actionPrimary,
+    enabled: Boolean = false,
+    onClick: () -> Unit,
+) {
+    androidx.compose.material.Chip(
+        onClick = onClick,
+        enabled = enabled,
+        modifier = modifier,
+        colors = chipColors(
+            backgroundColor = backgroundColor,
+            disabledBackgroundColor = FirefoxTheme.colors.actionTertiary,
+            contentColor = textColor,
+            disabledContentColor = FirefoxTheme.colors.textActionTertiary,
+        )
+    ) {
+        Text(
+            text = text,
+            style = TextStyle(fontSize = 14.sp),
+            color = textColor,
+        )
+    }
+}
+
+/**
+ * An example of a chip with no interactions
+ */
+@Composable
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+private fun ChipPreview() {
+    FirefoxTheme {
+        Column(
+            modifier = Modifier
+                .background(FirefoxTheme.colors.layer1),
+        ) {
+            Chip(
+                text = "Chirp",
+                onClick = {},
+            )
+        }
+    }
+}

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

@@ -4,33 +4,29 @@
 
 package org.mozilla.fenix.compose
 
-import android.content.res.Configuration.UI_MODE_NIGHT_NO
-import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import android.content.res.Configuration
+import android.util.Log
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.selection.selectable
-import androidx.compose.material.MaterialTheme
+import androidx.compose.material.ChipDefaults.filterChipColors
+import androidx.compose.material.ExperimentalMaterialApi
 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.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.capitalize
-import androidx.compose.ui.text.intl.Locale
 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
 
 /**
  * Default layout of a selectable chip.
  *
- * @param text [String] displayed in this chip. Ideally should only be one word.
+ * @param text [String] displayed in this chip.
  * @param isSelected Whether this should be shown as selected.
  * @param selectedTextColor Optional text [Color] when the chip is selected.
  * @param unselectedTextColor Optional text [Color] when the chip is not selected.
@@ -42,40 +38,33 @@ import org.mozilla.fenix.theme.FirefoxTheme
 fun SelectableChip(
     text: String,
     isSelected: Boolean,
-    selectedTextColor: Color? = null,
-    unselectedTextColor: Color? = null,
-    selectedBackgroundColor: Color? = null,
-    unselectedBackgroundColor: Color? = null,
+    selectedTextColor: Color = FirefoxTheme.colors.textActionPrimary,
+    unselectedTextColor: Color = FirefoxTheme.colors.textActionPrimary,
+    selectedBackgroundColor: Color = FirefoxTheme.colors.actionPrimary,
+    unselectedBackgroundColor: Color = FirefoxTheme.colors.actionTertiary,
     onClick: () -> Unit,
 ) {
-    Box(
-        modifier = Modifier
-            .selectable(isSelected) { onClick() }
-            .clip(MaterialTheme.shapes.small)
-            .background(
-                color = if (isSelected) {
-                    selectedBackgroundColor ?: FirefoxTheme.colors.actionPrimary
-                } else {
-                    unselectedBackgroundColor ?: FirefoxTheme.colors.actionTertiary
-                },
-            )
-            .padding(horizontal = 16.dp, vertical = 10.dp),
+    var selected by remember { mutableStateOf(isSelected) }
+
+    Chip(
+        enabled = true,
+        textColor = if (selected) selectedTextColor else unselectedTextColor,
+        backgroundColor = if (selected) selectedBackgroundColor else unselectedBackgroundColor,
+        text = text
     ) {
-        Text(
-            text = text.capitalize(Locale.current),
-            style = TextStyle(fontSize = 14.sp),
-            color = if (isSelected) {
-                selectedTextColor ?: FirefoxTheme.colors.textActionPrimary
-            } else {
-                unselectedTextColor ?: FirefoxTheme.colors.textActionTertiary
-            },
-        )
+        selected = !selected
+        onClick()
     }
 }
 
+/**
+ * An example of a [SelectableChip] with the selected value accessible outside the
+ * Chip.
+ *
+ */
 @Composable
-@Preview(uiMode = UI_MODE_NIGHT_YES)
-@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 private fun SelectableChipPreview() {
     FirefoxTheme {
         Row(
@@ -84,15 +73,21 @@ private fun SelectableChipPreview() {
                 .background(FirefoxTheme.colors.layer1),
             horizontalArrangement = Arrangement.SpaceEvenly,
         ) {
-            SelectableChip(text = "Chirp", isSelected = false) { }
-            SelectableChip(text = "Chirp", isSelected = true) { }
+            var firstSelected by remember { mutableStateOf(false) }
+            var secondSelected by remember { mutableStateOf(true) }
+
+            SelectableChip(text = "ChirpOne", isSelected = firstSelected) {}
+            SelectableChip(text = "ChirpTwo", isSelected = secondSelected) { }
         }
     }
 }
 
+/**
+ * An example of a [SelectableChip] with custom colors
+ */
 @Composable
-@Preview(uiMode = UI_MODE_NIGHT_YES)
-@Preview(uiMode = UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
 private fun SelectableChipWithCustomColorsPreview() {
     FirefoxTheme {
         Row(
@@ -116,3 +111,40 @@ private fun SelectableChipWithCustomColorsPreview() {
         }
     }
 }
+
+/**
+ * An example of a FilterChip material compose component
+ */
+@Composable
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@OptIn(ExperimentalMaterialApi::class)
+private fun FilterChipComponentPreview() {
+    FirefoxTheme {
+        Row(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(FirefoxTheme.colors.layer1),
+            horizontalArrangement = Arrangement.SpaceEvenly,
+        ) {
+            var isSelected by remember { mutableStateOf(false) }
+
+            androidx.compose.material.FilterChip(
+                selected = isSelected,
+                enabled = true,
+                colors = filterChipColors(
+                    selectedBackgroundColor = FirefoxTheme.colors.actionPrimary,
+                    backgroundColor = FirefoxTheme.colors.actionTertiary,
+                    selectedContentColor = FirefoxTheme.colors.textActionPrimary,
+                    contentColor = FirefoxTheme.colors.textActionTertiary,
+                ),
+                onClick = {
+                    isSelected = !isSelected
+                    Log.d("click", "clicked $isSelected")
+                },
+            ) {
+                Text(text = "ChirpSelect")
+            }
+        }
+    }
+}

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

@@ -443,9 +443,11 @@ fun PocketStoriesCategories(
             verticalItemsSpacing = 16.dp,
         ) {
             categories.filter { it.name != POCKET_STORIES_DEFAULT_CATEGORY_NAME }.forEach { category ->
+                var selectedState by remember { mutableStateOf(selections.map { it.name }.contains(category.name)) }
+
                 SelectableChip(
                     text = category.name,
-                    isSelected = selections.map { it.name }.contains(category.name),
+                    isSelected = selectedState,
                     selectedTextColor = categoryColors.selectedTextColor,
                     unselectedTextColor = categoryColors.unselectedTextColor,
                     selectedBackgroundColor = categoryColors.selectedBackgroundColor,