library: Remove ripple effect for disabled components

Author: YuKongA

composeApp/src/commonMain/kotlin/component/TextComponent.kt

@@ -77,8 +77,7 @@ fun TextComponent() {
             Text(text = "Right1")
             Spacer(Modifier.width(6.dp))
             Text(text = "Right2")
-        },
-        onClick = {}
+        }
     )
 
     SuperArrow(

miuix/src/androidMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.android.kt

@@ -8,4 +8,4 @@ import androidx.compose.ui.Modifier
  * Returns modifier to be used for the current platform.
  */
 @SuppressLint("ModifierFactoryExtensionFunction")
-actual fun modifierPlatform(modifier: Modifier, isHovered: MutableState<Boolean>): Modifier = modifier
+actual fun modifierPlatform(modifier: Modifier, isHovered: MutableState<Boolean>, isEnable: Boolean): Modifier = modifier

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Button.kt

@@ -1,5 +1,7 @@
 package top.yukonga.miuix.kmp.basic
 
+import androidx.compose.foundation.Indication
+import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
@@ -33,6 +35,7 @@ import top.yukonga.miuix.kmp.utils.squircleshape.SquircleShape
  * @param submit Whether the [Button] is a submit button.
  * @param cornerRadius The corner radius of the [Button].
  * @param interactionSource The interaction source to be applied to the [Button].
+ * @param indication The indication to be applied to the [Button].
  */
 @Composable
 fun Button(
@@ -42,7 +45,8 @@ fun Button(
     enabled: Boolean = true,
     submit: Boolean = false,
     cornerRadius: Dp = 18.dp,
-    interactionSource: MutableInteractionSource? = null
+    interactionSource: MutableInteractionSource? = null,
+    indication: Indication? = LocalIndication.current,
 ) {
     @Suppress("NAME_SHADOWING")
     val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
@@ -59,7 +63,8 @@ fun Button(
         modifier = modifier.semantics { role = Role.Button },
         shape = SquircleShape(cornerRadius),
         color = color,
-        interactionSource = interactionSource
+        interactionSource = interactionSource,
+        indication = indication
     ) {
         Row(
             Modifier

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Checkbox.kt

@@ -5,6 +5,7 @@ import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.Indication
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectDragGestures
 import androidx.compose.foundation.gestures.detectTapGestures
@@ -42,14 +43,16 @@ import top.yukonga.miuix.kmp.utils.squircleshape.SquircleShape
  * @param modifier The modifier to be applied to the [Checkbox].
  * @param enabled Whether the [Checkbox] is enabled.
  * @param interactionSource The interaction source to be applied to the [Checkbox].
+ * @param indication The indication to be applied to the [Checkbox].
  */
 @Composable
 fun Checkbox(
     checked: Boolean,
     onCheckedChange: ((Boolean) -> Unit)?,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    interactionSource: MutableInteractionSource? = null
+    interactionSource: MutableInteractionSource? = null,
+    indication: Indication? = null,
 ) {
     @Suppress("NAME_SHADOWING")
     val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
@@ -72,27 +75,24 @@ fun Checkbox(
         if (onCheckedChange != null) {
             Modifier.toggleable(
                 value = isChecked,
-                onValueChange = {
-                    onCheckedChange(it)
-                },
+                onValueChange = { onCheckedChange(it) },
                 enabled = enabled,
                 role = Role.Checkbox,
                 interactionSource = interactionSource,
-                indication = null
+                indication = indication
             )
         } else {
             Modifier
         }
     }
 
-    Box(
+    Surface(
+        shape = SquircleShape(100f),
         modifier = modifier
-            .then(toggleableModifier)
             .wrapContentSize(Alignment.Center)
             .size(22.dp)
+            .clip(SquircleShape(100f))
             .requiredSize(checkboxSize)
-            .clip(SquircleShape(100.dp))
-            .background(if (enabled) backgroundColor else disabledBackgroundColor)
             .pointerInput(Unit) {
                 detectTapGestures(
                     onPress = {
@@ -119,9 +119,12 @@ fun Checkbox(
                     }
                 )
             }
+            .then(toggleableModifier)
     ) {
         Canvas(
-            modifier = Modifier.requiredSize(checkboxSize)
+            modifier = Modifier
+                .requiredSize(checkboxSize)
+                .background(if (enabled) backgroundColor else disabledBackgroundColor)
         ) {
             val svgPath =
                 "m400-416 236-236q11-11 28-11t28 11q11 11 11 28t-11 28L428-332q-12 12-28 12t-28-12L268-436q-11-11-11-28t11-28q11-11 28-11t28 11l76 76Z"

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Component.kt

@@ -1,6 +1,7 @@
 package top.yukonga.miuix.kmp.basic
 
 import androidx.compose.foundation.Indication
+import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -18,7 +19,6 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
-import top.yukonga.miuix.kmp.utils.createRipple
 
 /**
  * A basic component with Miuix style. Widely used in other extension components.
@@ -34,6 +34,7 @@ import top.yukonga.miuix.kmp.utils.createRipple
  * @param onClick The callback when the [BasicComponent] is clicked.
  * @param interactionSource The interaction source to be applied to the [BasicComponent].
  * @param indication The indication to be applied to the [BasicComponent].
+ * @param enabled Whether the [BasicComponent] is enabled.
  */
 @Composable
 @Suppress("NAME_SHADOWING")
@@ -48,23 +49,22 @@ fun BasicComponent(
     rightActions: @Composable RowScope.() -> Unit = {},
     onClick: (() -> Unit)? = null,
     interactionSource: MutableInteractionSource? = null,
-    indication: Indication? = null,
+    indication: Indication? = LocalIndication.current,
     enabled: Boolean = true
 ) {
     val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
-    val indication = indication ?: createRipple()
     val insideMargin = remember { insideMargin } ?: remember { DpSize(16.dp, 16.dp) }
     val paddingModifier = remember(insideMargin) {
         Modifier.padding(horizontal = insideMargin.width, vertical = insideMargin.height)
     }
     val titleColor = if (enabled) titleColor else MiuixTheme.colorScheme.disabledOnSecondaryVariant
     val summaryColor = if (enabled) summaryColor else MiuixTheme.colorScheme.disabledOnSecondaryVariant
     Row(
-        modifier = if (onClick != null) {
+        modifier = if (onClick != null && enabled) {
             modifier
                 .clickable(
                     interactionSource = interactionSource,
-                    indication = indication
+                    indication = indication,
                 ) {
                     onClick.invoke()
                 }

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/FloatingActionButton.kt

@@ -1,5 +1,7 @@
 package top.yukonga.miuix.kmp.basic
 
+import androidx.compose.foundation.Indication
+import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.defaultMinSize
@@ -16,6 +18,18 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 
+/**
+ * A floating action button component with Miuix style.
+ *
+ * @param onClick The callback when the [FloatingActionButton] is clicked.
+ * @param modifier The modifier to be applied to the [FloatingActionButton].
+ * @param shape The shape of the [FloatingActionButton].
+ * @param containerColor The color of the [FloatingActionButton].
+ * @param shadowElevation The shadow elevation of the [FloatingActionButton].
+ * @param interactionSource The interaction source to be applied to the [FloatingActionButton].
+ * @param indication The indication to be applied to the [FloatingActionButton].
+ * @param content The [Composable] content of the [FloatingActionButton].
+ */
 @Composable
 fun FloatingActionButton(
     onClick: () -> Unit,
@@ -24,6 +38,7 @@ fun FloatingActionButton(
     containerColor: Color = MiuixTheme.colorScheme.primary,
     shadowElevation: Float = 18f,
     interactionSource: MutableInteractionSource? = null,
+    indication: Indication? = LocalIndication.current,
     content: @Composable () -> Unit,
 ) {
     @Suppress("NAME_SHADOWING")
@@ -34,7 +49,8 @@ fun FloatingActionButton(
         shape = shape,
         color = containerColor,
         shadowElevation = shadowElevation,
-        interactionSource = interactionSource
+        interactionSource = interactionSource,
+        indication = indication,
     ) {
         Box(
             modifier =

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Surface.kt

@@ -1,6 +1,8 @@
 package top.yukonga.miuix.kmp.basic
 
 import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Indication
+import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.clickable
@@ -17,7 +19,6 @@ import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.graphicsLayer
 import top.yukonga.miuix.kmp.theme.MiuixTheme
-import top.yukonga.miuix.kmp.utils.createRipple
 
 /**
  * A surface component with Miuix style.
@@ -64,6 +65,7 @@ fun Surface(
  * @param border The border of the [Surface].
  * @param shadowElevation The shadow elevation of the [Surface].
  * @param interactionSource The interaction source to be applied to the [Surface].
+ * @param indication The indication to be applied to the [Surface].
  * @param content The [Composable] content of the [Surface].
  */
 @Composable
@@ -77,6 +79,7 @@ fun Surface(
     border: BorderStroke? = null,
     shadowElevation: Float = 0f,
     interactionSource: MutableInteractionSource? = null,
+    indication: Indication? = LocalIndication.current,
     content: @Composable () -> Unit
 ) {
     @Suppress("NAME_SHADOWING")
@@ -93,7 +96,7 @@ fun Surface(
             .minimumInteractiveComponentSize()
             .clickable(
                 interactionSource = interactionSource,
-                indication = createRipple(),
+                indication = indication,
                 enabled = enabled,
                 onClick = onClick
             ),

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Switch.kt

@@ -5,6 +5,7 @@ import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Indication
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectDragGestures
 import androidx.compose.foundation.gestures.detectTapGestures
@@ -41,14 +42,16 @@ import kotlin.math.absoluteValue
  * @param modifier The modifier to be applied to the [Switch].
  * @param enabled Whether the [Switch] is enabled.
  * @param interactionSource The interaction source to be applied to the [Switch].
+ * @param indication The indication to be applied to the [Switch].
  */
 @Composable
 fun Switch(
     checked: Boolean,
     onCheckedChange: ((Boolean) -> Unit)?,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
-    interactionSource: MutableInteractionSource? = null
+    interactionSource: MutableInteractionSource? = null,
+    indication: Indication? = null
 ) {
     @Suppress("NAME_SHADOWING")
     val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
@@ -99,7 +102,7 @@ fun Switch(
                 enabled = enabled,
                 role = Role.Switch,
                 interactionSource = interactionSource,
-                indication = null
+                indication = indication
             )
         } else {
             Modifier

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt

@@ -1,6 +1,8 @@
 package top.yukonga.miuix.kmp.extra
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.Indication
+import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
@@ -66,15 +68,14 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.BackHandler
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissPopup
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.showPopup
-import top.yukonga.miuix.kmp.utils.createRipple
 import top.yukonga.miuix.kmp.utils.getWindowSize
 import top.yukonga.miuix.kmp.utils.squircleshape.SquircleShape
 import kotlin.math.roundToInt
 
 /**
  * Returns modifier to be used for the current platform.
  */
-expect fun modifierPlatform(modifier: Modifier, isHovered: MutableState<Boolean>): Modifier
+expect fun modifierPlatform(modifier: Modifier, isHovered: MutableState<Boolean>, isEnable: Boolean): Modifier
 
 /**
  * A dropdown with a title and a summary.
@@ -106,12 +107,15 @@ fun SuperDropdown(
     defaultWindowInsetsPadding: Boolean = true,
     selectedIndex: Int,
     onSelectedIndexChange: (Int) -> Unit,
+    interactionSource: MutableInteractionSource? = null,
+    indication: Indication? = null,
     enabled: Boolean = true
 ) {
+    @Suppress("NAME_SHADOWING")
+    val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
     val hapticFeedback = LocalHapticFeedback.current
     val density = LocalDensity.current
     val coroutineScope = rememberCoroutineScope()
-    val interactionSource = remember { MutableInteractionSource() }
     val isDropdownExpanded = remember { mutableStateOf(false) }
     var alignLeft by rememberSaveable { mutableStateOf(true) }
     val textMeasurer = rememberTextMeasurer()
@@ -147,9 +151,9 @@ fun SuperDropdown(
     )
 
     BasicComponent(
-        modifier = modifierPlatform(modifier = Modifier, isHovered = isHovered)
+        modifier = modifierPlatform(modifier = Modifier, isHovered = isHovered, isEnable = enabled)
             .background(if (isHovered.value) MiuixTheme.colorScheme.onBackground.copy(0.08f) else Color.Transparent)
-            .indication(interactionSource, createRipple())
+            .indication(interactionSource, if (enabled) indication ?: LocalIndication.current else null)
             .pointerInput(Unit) {
                 detectTapGestures(
                     onPress = { offset ->
@@ -314,7 +318,7 @@ fun DropdownImpl(
         modifier = Modifier
             .clickable(
                 interactionSource = dropdownInteractionSource,
-                indication = createRipple(),
+                indication = LocalIndication.current,
             ) {
                 onSelectedIndexChange(index)
             }

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/theme/MiuixTheme.kt

@@ -1,5 +1,7 @@
 package top.yukonga.miuix.kmp.theme
 
+import androidx.compose.foundation.LocalIndication
+import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.ReadOnlyComposable
@@ -31,7 +33,8 @@ fun MiuixTheme(
     }
     CompositionLocalProvider(
         LocalMiuixColor provides colorScheme,
-        LocalMiuixTextStyles provides miuixTextStyles
+        LocalMiuixTextStyles provides miuixTextStyles,
+        LocalIndication provides ripple(),
     ) {
         content()
     }