Add new icon card shadow modifier

One of the issues with existing bottom/button shadows extension function is, it doesn't change the change of the actual component. But we want to modify the size so that we don't have to offset the component it self.

Why we want that? In situation like grid or list or any component where the component gets clipped, the offset will get clipped as well. That would mean the component it self will get clipped. We don't want that. We can work around that by telling the component to avoid clipping or placing padding etc, but we would have to do that for all components that use it.

So, added a iconCardShadow modifier that would maintain the size and add shadow radius bottom padding to increase the size instead.

designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/internal/IconCard.kt

@@ -2,21 +2,18 @@ package org.hisp.dhis.mobile.ui.designsystem.component.internal
 
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.offset
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
 import org.hisp.dhis.mobile.ui.designsystem.theme.DHISShapes
 import org.hisp.dhis.mobile.ui.designsystem.theme.Outline
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 import org.hisp.dhis.mobile.ui.designsystem.theme.SurfaceColor
-import org.hisp.dhis.mobile.ui.designsystem.theme.bottomShadow
+import org.hisp.dhis.mobile.ui.designsystem.theme.iconCardShadow
 
 @Composable
 @OptIn(ExperimentalMaterial3Api::class)
@@ -27,14 +24,18 @@ internal fun IconCard(
     onClick: () -> Unit,
     content: @Composable ColumnScope.() -> Unit,
 ) {
-    val cardShadowModifier = if (!selected && enabled) {
-        Modifier.clip(DHISShapes.medium)
-            .bottomShadow(color = mutableStateOf(Outline.Light))
-            .offset(y = (-2).dp)
-    } else {
-        Modifier
+    val cardShadowColor = when {
+        !selected && enabled -> {
+            Outline.Light
+        }
+        else -> {
+            Color.Unspecified
+        }
     }
 
+    val cardShadowModifier = Modifier.clip(DHISShapes.medium)
+        .iconCardShadow(color = cardShadowColor)
+
     Card(
         modifier = modifier.then(cardShadowModifier),
         colors = CardDefaults.cardColors(

designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/theme/Shadow.kt

@@ -1,10 +1,13 @@
 package org.hisp.dhis.mobile.ui.designsystem.theme
 
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.drawWithCache
+import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Paint
 import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
@@ -75,3 +78,18 @@ internal fun Modifier.buttonShadow(
         }
     },
 )
+
+internal fun Modifier.iconCardShadow(
+    color: Color = SurfaceColor.ContainerHighest,
+    borderRadius: Dp = Radius.NoRounding,
+    shadowRadius: Dp = Border.Regular,
+) = drawWithCache {
+    val cornerRadius = CornerRadius(borderRadius.toPx(), borderRadius.toPx())
+    onDrawBehind {
+        drawRoundRect(
+            color = color,
+            cornerRadius = cornerRadius,
+            size = size,
+        )
+    }
+}.padding(bottom = shadowRadius)