update: [ANDROAPP-6097] Styles updated, samples with badges added

dhis2 · May 10, 2024 · 51e2e11 · 51e2e11
1 parent dcfe06f
commit 51e2e11
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 14 deletions.
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/others/ChipsScreen.kt
@@ -4,6 +4,8 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.AssistChipDefaults
+import androidx.compose.material3.FilterChipDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -67,17 +69,43 @@ fun ChipsScreen() {
 
         SubTitle("Assist Chips")
         //var isSelected5 by remember { mutableStateOf(false) }
-        AssistChip(label = "Label", /*state = AssistChipState.PRESSED,*/ onClick = {  })
+        AssistChip(
+            label = "Label",
+            onClick = {  }
+        )
         AssistChip(
             label = "Label",
             icon = {
                 Icon(
                     imageVector = Icons.Filled.Search,
                     contentDescription = "search icon",
+                    modifier = Modifier
+                        .size(AssistChipDefaults.IconSize)
                 )
-            },/*state = AssistChipState.PRESSED,*/
+            },
             onClick = {  }
         )
         Spacer(Modifier.size(Spacing.Spacing18))
+
+
+        SubTitle("Assist Chips With badges")
+        AssistChip(
+            label = "Label",
+            icon = {
+                Icon(
+                    imageVector = Icons.Filled.Search,
+                    contentDescription = "search icon",
+                    modifier = Modifier
+                        .size(AssistChipDefaults.IconSize)
+                )
+            },
+            onClick = {},
+            badge = "2"
+        )
+        AssistChip(
+            label = "Label",
+            onClick = {},
+            badge = "4"
+        )
     }
 }
diff --git a/...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/AssistChip.kt b/...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/AssistChip.kt
@@ -1,5 +1,7 @@
 package org.hisp.dhis.mobile.ui.designsystem.component
 
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.offset
 import androidx.compose.material.ripple.LocalRippleTheme
@@ -28,25 +30,34 @@ fun AssistChip(
     modifier: Modifier = Modifier,
     label: String,
     icon: @Composable (() -> Unit)? = null,
-    //state: AssistChipState,
     enabled: Boolean = true,
     onClick: (() -> Unit),
     badge: String? = null,
 ) {
+
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+
     Box(modifier = modifier) {
         CompositionLocalProvider(LocalRippleTheme provides Ripple.CustomDHISRippleTheme()) {
             AssistChip(
                 onClick = { onClick.invoke() },
                 label = { Text(label, color = TextColor.OnSurfaceVariant) },
                 enabled = enabled,
-                colors = AssistChipDefaults.assistChipColors(
-                    containerColor = SurfaceColor.SurfaceBright,
-                    labelColor = SurfaceColor.Container,
-                    leadingIconContentColor = TextColor.OnSurfaceVariant
-                ),
+                colors = if (isPressed) {
+                    AssistChipDefaults.assistChipColors(
+                        containerColor = SurfaceColor.Container,
+                        leadingIconContentColor = TextColor.OnSurfaceVariant
+                    )
+                } else {
+                    AssistChipDefaults.assistChipColors(
+                        containerColor = SurfaceColor.SurfaceBright,
+                        leadingIconContentColor = TextColor.OnSurfaceVariant
+                    )
+                       },
                 border = AssistChipDefaults.assistChipBorder(
-                    borderColor = Outline.Dark,
-                ),
+                            borderColor = Outline.Dark,
+                    ),
                 leadingIcon = {
                     icon?.invoke()
                 }
@@ -64,8 +75,4 @@ fun AssistChip(
             )
         }
     }
-}
-
-enum class AssistChipState {
-    PRESSED
 }