Improve CompactChip and OutlinedCompactChip (#1617)

google · Aug 30, 2023 · d29442b · d29442b
1 parent cd94c95
commit d29442b
Show file tree

Hide file tree

Showing 15 changed files with 287 additions and 146 deletions.
diff --git a/compose-material/api/current.api b/compose-material/api/current.api
@@ -52,7 +52,7 @@ package com.google.android.horologist.compose.material {
   }
 
   public final class CompactChipKt {
-    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void CompactChip(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, String label, optional Object? icon, optional com.google.android.horologist.compose.material.IconRtlMode iconRtlMode, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.wear.compose.material.ChipBorder border);
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void CompactChip(String label, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional Object? icon, optional com.google.android.horologist.compose.material.IconRtlMode iconRtlMode, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.wear.compose.material.ChipBorder border);
     method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void CompactChip(@StringRes int labelId, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional Object? icon, optional com.google.android.horologist.compose.material.IconRtlMode iconRtlMode, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.wear.compose.material.ChipBorder border);
     method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void CompactChip(Object icon, String contentDescription, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional com.google.android.horologist.compose.material.IconRtlMode iconRtlMode, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.wear.compose.material.ChipBorder border);
   }
@@ -74,8 +74,9 @@ package com.google.android.horologist.compose.material {
   }
 
   public final class OutlinedCompactChipKt {
-    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void OutlinedCompactChip(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional String? label, optional Object? icon, optional com.google.android.horologist.compose.material.IconRtlMode iconRtlMode, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.wear.compose.material.ChipBorder border);
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void OutlinedCompactChip(String label, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional Object? icon, optional com.google.android.horologist.compose.material.IconRtlMode iconRtlMode, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.wear.compose.material.ChipBorder border);
     method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void OutlinedCompactChip(@StringRes int labelId, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional Object? icon, optional com.google.android.horologist.compose.material.IconRtlMode iconRtlMode, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.wear.compose.material.ChipBorder border);
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void OutlinedCompactChip(Object icon, String contentDescription, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional com.google.android.horologist.compose.material.IconRtlMode iconRtlMode, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled, optional androidx.compose.foundation.interaction.MutableInteractionSource interactionSource, optional androidx.wear.compose.material.ChipBorder border);
   }
 
   public final class SplitToggleChipKt {

diff --git a/...erial/src/debug/java/com/google/android/horologist/compose/material/CompactChipPreview.kt b/...erial/src/debug/java/com/google/android/horologist/compose/material/CompactChipPreview.kt
@@ -25,17 +25,17 @@ import com.google.android.horologist.compose.tools.WearPreview
 @Composable
 fun CompactChipPreview() {
     CompactChip(
-        onClick = { },
         label = "Primary label",
+        onClick = { },
     )
 }
 
 @WearPreview
 @Composable
 fun CompactChipPreviewWithIcon() {
     CompactChip(
-        onClick = { },
         label = "Primary label",
+        onClick = { },
         icon = Icons.Filled.Add,
     )
 }
@@ -46,6 +46,6 @@ fun CompactChipPreviewIconOnly() {
     CompactChip(
         onClick = { },
         icon = Icons.Filled.Add,
-        contentDescription = "Add Icon",
+        contentDescription = "contentDescription",
     )
 }
diff --git a/...c/debug/java/com/google/android/horologist/compose/material/OutlinedCompactChipPreview.kt b/...c/debug/java/com/google/android/horologist/compose/material/OutlinedCompactChipPreview.kt
@@ -46,5 +46,6 @@ fun OutlinedCompactChipPreviewIconOnly() {
     OutlinedCompactChip(
         onClick = { },
         icon = Icons.Filled.Add,
+        contentDescription = "contentDescription",
     )
 }
diff --git a/compose-material/src/main/java/com/google/android/horologist/compose/material/CompactChip.kt b/compose-material/src/main/java/com/google/android/horologist/compose/material/CompactChip.kt
@@ -43,12 +43,17 @@ import coil.compose.rememberAsyncImagePainter
 import com.google.android.horologist.annotations.ExperimentalHorologistApi
 import com.google.android.horologist.compose.material.util.DECORATIVE_ELEMENT_CONTENT_DESCRIPTION
 
+/**
+ * This component is an alternative to [CompactChip], providing the following:
+ * - a convenient way of providing a string resource label;
+ * - a convenient way of providing an icon and a placeholder;
+ */
 @ExperimentalHorologistApi
 @Composable
 public fun CompactChip(
+    label: String,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
-    label: String,
     icon: Any? = null,
     iconRtlMode: IconRtlMode = IconRtlMode.Default,
     placeholder: Painter? = null,
@@ -57,60 +62,14 @@ public fun CompactChip(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     border: ChipBorder = ChipDefaults.chipBorder(),
 ) {
-    val iconParam: (@Composable BoxScope.() -> Unit)? =
-        icon?.let {
-            {
-                Row {
-                    val iconModifier = Modifier
-                        .size(ChipDefaults.SmallIconSize)
-                    when (icon) {
-                        is ImageVector ->
-                            Icon(
-                                imageVector = icon,
-                                contentDescription = DECORATIVE_ELEMENT_CONTENT_DESCRIPTION,
-                                modifier = iconModifier,
-                                rtlMode = iconRtlMode,
-                            )
-
-                        is Int ->
-                            Icon(
-                                id = icon,
-                                contentDescription = DECORATIVE_ELEMENT_CONTENT_DESCRIPTION,
-                                modifier = iconModifier,
-                            )
-
-                        else ->
-                            Image(
-                                painter = rememberAsyncImagePainter(
-                                    model = icon,
-                                    placeholder = placeholder,
-                                ),
-                                contentDescription = DECORATIVE_ELEMENT_CONTENT_DESCRIPTION,
-                                modifier = iconModifier,
-                                contentScale = ContentScale.Crop,
-                                alpha = LocalContentAlpha.current,
-                            )
-                    }
-                }
-            }
-        }
-    val hasIcon = icon != null
-
-    val labelParam: (@Composable RowScope.() -> Unit) = {
-        Text(
-            modifier = Modifier.fillMaxWidth(),
-            text = label,
-            textAlign = if (hasIcon) TextAlign.Start else TextAlign.Center,
-            overflow = TextOverflow.Ellipsis,
-            maxLines = 1,
-        )
-    }
-
     CompactChip(
-        modifier = modifier,
         onClick = onClick,
-        label = labelParam,
-        icon = iconParam,
+        modifier = modifier,
+        label = label,
+        icon = icon,
+        iconRtlMode = iconRtlMode,
+        placeholder = placeholder,
+        contentDescription = DECORATIVE_ELEMENT_CONTENT_DESCRIPTION,
         colors = colors,
         enabled = enabled,
         interactionSource = interactionSource,
@@ -121,8 +80,7 @@ public fun CompactChip(
 /**
  * This component is an alternative to [CompactChip], providing the following:
  * - a convenient way of providing a string resource label;
- * - a convenient way of providing an icon and a placeholder, and choosing their size based on the
- * sizes recommended by the Wear guidelines;
+ * - a convenient way of providing an icon and a placeholder;
  */
 @ExperimentalHorologistApi
 @Composable
@@ -139,9 +97,9 @@ public fun CompactChip(
     border: ChipBorder = ChipDefaults.chipBorder(),
 ) {
     CompactChip(
+        label = stringResource(id = labelId),
         onClick = onClick,
         modifier = modifier,
-        label = stringResource(id = labelId),
         icon = icon,
         iconRtlMode = iconRtlMode,
         placeholder = placeholder,
@@ -152,6 +110,10 @@ public fun CompactChip(
     )
 }
 
+/**
+ * This component is an alternative to [CompactChip], providing the following:
+ * - a convenient way of providing an icon and a placeholder;
+ */
 @ExperimentalHorologistApi
 @Composable
 public fun CompactChip(
@@ -166,11 +128,40 @@ public fun CompactChip(
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     border: ChipBorder = ChipDefaults.chipBorder(),
 ) {
-    val iconParam: (@Composable BoxScope.() -> Unit) =
+    CompactChip(
+        onClick = onClick,
+        modifier = modifier,
+        label = null,
+        icon = icon,
+        iconRtlMode = iconRtlMode,
+        placeholder = placeholder,
+        contentDescription = contentDescription,
+        colors = colors,
+        enabled = enabled,
+        interactionSource = interactionSource,
+        border = border,
+    )
+}
+
+@Composable
+internal fun CompactChip(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    label: String? = null,
+    icon: Any? = null,
+    iconRtlMode: IconRtlMode = IconRtlMode.Default,
+    placeholder: Painter? = null,
+    contentDescription: String? = DECORATIVE_ELEMENT_CONTENT_DESCRIPTION,
+    colors: ChipColors = ChipDefaults.primaryChipColors(),
+    enabled: Boolean = true,
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+    border: ChipBorder = ChipDefaults.chipBorder(),
+) {
+    val iconParam: (@Composable BoxScope.() -> Unit)? = icon?.let {
         {
             Row {
-                val iconModifier = Modifier
-                    .size(ChipDefaults.SmallIconSize)
+                val iconModifier = Modifier.size(ChipDefaults.SmallIconSize)
+
                 when (icon) {
                     is ImageVector ->
                         Icon(
@@ -185,6 +176,7 @@ public fun CompactChip(
                             id = icon,
                             contentDescription = contentDescription,
                             modifier = iconModifier,
+                            rtlMode = iconRtlMode,
                         )
 
                     else ->
@@ -201,10 +193,25 @@ public fun CompactChip(
                 }
             }
         }
+    }
+    val hasIcon = icon != null
+
+    val labelParam: (@Composable RowScope.() -> Unit)? = label?.let {
+        {
+            Text(
+                modifier = Modifier.fillMaxWidth(),
+                text = label,
+                textAlign = if (hasIcon) TextAlign.Start else TextAlign.Center,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = 1,
+            )
+        }
+    }
+
     CompactChip(
         modifier = modifier,
         onClick = onClick,
-        label = null,
+        label = labelParam,
         icon = iconParam,
         colors = colors,
         enabled = enabled,