Voice message button: Show proper disabled color. (#1682)

Also changes a bit our own IconButton api to allow to mirror material's and allow color customization.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemVoiceView.kt

@@ -16,10 +16,7 @@
 
 package io.element.android.features.messages.impl.timeline.components.event
 
-import androidx.annotation.DrawableRes
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -28,11 +25,10 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.contentDescription
 import androidx.compose.ui.semantics.semantics
@@ -51,6 +47,7 @@ import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
 import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.IconButton
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
@@ -78,7 +75,7 @@ fun TimelineItemVoiceView(
             VoiceMessageState.Button.Pause -> PauseButton(onClick = ::playPause)
             VoiceMessageState.Button.Downloading -> ProgressButton()
             VoiceMessageState.Button.Retry -> RetryButton(onClick = ::playPause)
-            VoiceMessageState.Button.Disabled -> DisabledPlayButton()
+            VoiceMessageState.Button.Disabled -> PlayButton(onClick = {}, enabled = false)
         }
         Spacer(Modifier.width(8.dp))
         Text(
@@ -104,40 +101,54 @@ fun TimelineItemVoiceView(
 
 @Composable
 private fun PlayButton(
-    onClick: (() -> Unit)
+    onClick: () -> Unit,
+    enabled: Boolean = true,
 ) {
-    IconButton(
+    CustomIconButton(
-        drawableRes = R.drawable.play,
+        onClick = onClick,
-        contentDescription = stringResource(id = CommonStrings.a11y_play),
+        enabled = enabled,
-        onClick = onClick
+    ) {
-    )
+        Icon(
+            resourceId = R.drawable.play,
+            contentDescription = stringResource(id = CommonStrings.a11y_play),
+        )
+    }
 }
 
 @Composable
 private fun PauseButton(
-    onClick: (() -> Unit)
+    onClick: () -> Unit,
 ) {
-    IconButton(
+    CustomIconButton(
-        drawableRes = R.drawable.pause,
+        onClick = onClick,
-        contentDescription = stringResource(id = CommonStrings.a11y_play),
+    ) {
-        onClick = onClick
+        Icon(
-    )
+            resourceId = R.drawable.pause,
+            contentDescription = stringResource(id = CommonStrings.a11y_play),
+        )
+    }
 }
 
 @Composable
 private fun RetryButton(
-    onClick: (() -> Unit)
+    onClick: () -> Unit,
 ) {
-    IconButton(
+    CustomIconButton(
-        drawableRes = R.drawable.retry,
+        onClick = onClick,
-        contentDescription = stringResource(id = CommonStrings.action_retry),
+    ) {
-        onClick = onClick
+        Icon(
-    )
+            resourceId = R.drawable.retry,
+            contentDescription = stringResource(id = CommonStrings.action_retry),
+        )
+    }
 }
 
 @Composable
 private fun ProgressButton() {
-    Button {
+    CustomIconButton(
+        onClick = {},
+        enabled = false,
+    ) {
         CircularProgressIndicator(
             modifier = Modifier
                 .padding(2.dp)
@@ -149,49 +160,23 @@ private fun ProgressButton() {
 }
 
 @Composable
-private fun DisabledPlayButton() {
+private fun CustomIconButton(
-    IconButton(
+    onClick: () -> Unit,
-        drawableRes = R.drawable.play,
+    enabled: Boolean = true,
-        contentDescription = null,
-        onClick = null,
-    )
-}
-
-@Composable
-private fun IconButton(
-    @DrawableRes drawableRes: Int,
-    contentDescription: String?,
-    onClick: (() -> Unit)?,
-) {
-    Button(
-        onClick = onClick,
-    ) {
-        Icon(
-            painter = painterResource(id = drawableRes),
-            contentDescription = contentDescription,
-            tint = ElementTheme.colors.iconSecondary,
-            modifier = Modifier.size(24.dp),
-        )
-    }
-}
-
-@Composable
-private fun Button(
-    onClick: (() -> Unit)? = null,
     content: @Composable () -> Unit,
 ) {
-    Box(
+    IconButton(
+        onClick = onClick,
         modifier = Modifier
-            .size(36.dp)
+            .background(color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape)
-            .clip(CircleShape)
+            .size(36.dp),
-            .background(ElementTheme.materialColors.background)
+        enabled = enabled,
-            .let {
+        colors = IconButtonDefaults.iconButtonColors(
-                if (onClick != null) it.clickable(onClick = onClick) else it
+            contentColor = ElementTheme.colors.iconSecondary,
-            },
+            disabledContentColor = ElementTheme.colors.iconDisabled,
-        contentAlignment = Alignment.Center,
+        ),
-    ) {
+        content = content,
-        content()
+    )
-    }
 }
 
 open class TimelineItemVoiceViewParametersProvider : PreviewParameterProvider<TimelineItemVoiceViewParameters> {

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/IconButton.kt

@@ -19,6 +19,7 @@ package io.element.android.libraries.designsystem.theme.components
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.material3.IconButtonColors
 import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.runtime.Composable
@@ -38,13 +39,13 @@ fun IconButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(
+        contentColor = LocalContentColor.current,
+        disabledContentColor = ElementTheme.colors.iconDisabled,
+    ),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable () -> Unit
 ) {
-    val colors = IconButtonDefaults.iconButtonColors(
-        contentColor = LocalContentColor.current,
-        disabledContentColor = ElementTheme.colors.iconDisabled,
-    )
     androidx.compose.material3.IconButton(
         onClick = onClick,
         modifier = modifier,

libraries/textcomposer/impl/src/main/kotlin/io/element/android/libraries/textcomposer/components/VoiceMessagePreview.kt

@@ -28,6 +28,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.IconButtonDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -114,10 +115,14 @@ private fun PlayerButton(
 ) {
     IconButton(
         onClick = onClick,
-        enabled = enabled,
         modifier = modifier
             .background(color = ElementTheme.colors.bgCanvasDefault, shape = CircleShape)
-            .size(30.dp.applyScaleUp())
+            .size(30.dp.applyScaleUp()),
+        enabled = enabled,
+        colors = IconButtonDefaults.iconButtonColors(
+            contentColor = ElementTheme.colors.iconSecondary,
+            disabledContentColor = ElementTheme.colors.iconDisabled,
+        ),
     ) {
         when (type) {
             PlayerButtonType.Play -> PlayIcon()
@@ -130,14 +135,12 @@ private fun PlayerButton(
 private fun PauseIcon() = Icon(
     resourceId = R.drawable.ic_pause,
     contentDescription = stringResource(id = CommonStrings.a11y_pause),
-    tint = ElementTheme.colors.iconSecondary,
 )
 
 @Composable
 private fun PlayIcon() = Icon(
     resourceId = R.drawable.ic_play,
     contentDescription = stringResource(id = CommonStrings.a11y_play),
-    tint = ElementTheme.colors.iconSecondary,
 )
 
 @PreviewsDayNight

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-D-41_41_null_14,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dcb3c53fff0cf52bf4ff8f8ca0bafaa7f21d1c7a6d504070de3de8f42dac2864
+oid sha256:ab61d047110a59bfbf327980f08572d9f6a48854a27e9ac256956ac465733043
-size 9906
+size 9884

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-D-41_41_null_4,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0f52f22ad35d11d5124cfcc5128f97e121021dd09caa19c96f23ae8f39aa8cfe
+oid sha256:49066b0adf53941af950614f1090de66e372f1550d3f0a2b8f88d1bf255f7e3b
-size 6053
+size 6055

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-D-41_41_null_9,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7eb5e7f99047da383a6bc5a45eb76bd902c21fcede196626fc4f6f5507097d51
+oid sha256:098a61f028e90cdf8b7e708793ebfaab20cde82a23ea117acb901469947dc713
-size 7333
+size 7335

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1bfffebea253932b08a308ac098a392910233e4a8524a898b459842849854c91
+oid sha256:9863144e5ee8fc010351509a11eac8d66332df97e56a8c5f81f2d0eb128fa368
-size 6036
+size 6806

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_1,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b846d71d9d0019f55ee34e4ef38375f1501663a855f2c05742239a08d5b7501d
+oid sha256:7e19c2813f5db4f4732d158e41211c2de175f9ab97c83296f719b5bfab615be2
-size 6020
+size 6775

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_10,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ca13f10ca5fd6194829c3cef02fa5cd0c00790f23c82d2cf70ac5d1d58babb54
+oid sha256:a294dfa6003a4bba8a780169ced0df7b8e9bb5bd4113dd21d2a5467325f58023
-size 9656
+size 10396

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_11,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1dfdaca0c643c81a281658b4cee4d0e938d542a57964c3831496d04db543da45
+oid sha256:ba5a558037ae529515716a21b37070e5e04a9c0f6e0293a65a69cc3017a74b0d
-size 9827
+size 10591

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_12,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ad2ccde01384563471412843a48180b7acb3ba9bbedb9af60f96d403e564073d
+oid sha256:28d5c962fb8528a96758e704d392a8444b1920dc36e49fd1bc684e5def2cf656
-size 9566
+size 10312

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_13,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e32db0169cf50c2120a16efea3cb2b0f8a72f81ddce7a303c13bc2bf38c487ff
+oid sha256:8adb090451574a5019a1e5c599fa6b2099035c830cc21cec816787e22fe4e690
-size 9653
+size 10329

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_14,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:796854c3af1c45268c810f393842287d5fb3424f267f987f47bcd105e2a88448
+oid sha256:b9fd731cc3718c850372e3106969ec99180113dca0e41e02e5133b46a4efa745
-size 9621
+size 10319

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_2,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a0a6b88a5d7f001309dcb03da6151ac2949705b32a19301660a24fe02dc6fcdd
+oid sha256:72875fc0e93851a621ba9ded610c736133188e3609a9578209a90bce9e674641
-size 5562
+size 6333

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_3,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2f8562e1e599e16ecc05ec0471de70b9de9a88b347f622bc723f21cb5379b102
+oid sha256:393205bc33da82255be0f2f19846bdda87baa5f97ca7c623681ad9537fa3e677
-size 6033
+size 6733

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_4,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:32eba449e245eed3bc67c1ffdf47e267a6de2bf6832739f2902949af297391aa
+oid sha256:9ecc36796f0404123f5ec125b4631535e50e1ad6ad70f5d933ae43879e580121
-size 6001
+size 6740

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_5,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d4a2824fdc49adb0e3fc155e7da319414544a87dc083bdece78e85ba72669d78
+oid sha256:7e63f75edead31ff90194fedcdd6122503705d758959961466e652489f0819b0
-size 7155
+size 7879

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_6,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3817e348ba2775528e3805ad6f5eed044f82b241f73692180c0638c95fb79fa2
+oid sha256:636a174a411d9d76212d1fe51717b147a2d0586ab55a73a29c42c3d139617f6e
-size 7076
+size 7800

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_7,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fd21f1c5ad2616b698a386d78d5efe0ab40aa1959382ed2a568c10441d093a8f
+oid sha256:172b277c375702a57bdb204a0addadec0baa86236eab9130eb44b125bd615058
-size 6692
+size 7445

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_8,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:07f52161378dfab92ffb76b860680390ccb5dfcc05347c5fd99504c806dd3210
+oid sha256:3eeb21741d4caccb07cc93db32887ec423d1c149a5b769bc3cd4cd0d88aa566d
-size 6930
+size 7624

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceView-N-41_42_null_9,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4adce5249b20bdc9ed6f4d5f066140e8c9b0f62d04ebf953704a106a6ca2ff53
+oid sha256:4f3eb73f4a4ea4fb2e7b21d88393fab914b51cc63d9e01cd67fd4879ad856afe
-size 7178
+size 7899

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceViewUnified-D-42_42_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5c52825ef36b00ee13496c23db981c226a3f71c0d1755508835b4ab3a140cff6
+oid sha256:327a1fd51b242e1547878e58f32e6511e013cb440f4cd457a20e179ca3a1ed39
-size 46402
+size 46377

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline.components.event_null_TimelineItemVoiceViewUnified-N-42_43_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ceb0cfa1b7ac95de658e339d29b4e18d8e4673d1a269db3d46bc6fd97381e9c2
+oid sha256:d277630d19b10150d18a660c06d38c02ce19cd5079667bd58cca385a7b540ae2
-size 45460
+size 54302

tests/uitests/src/test/snapshots/images/ui_S_t[f.messages.impl.timeline_null_TimelineView-N-8_9_null_8,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:be817a2061d43e210c105b193f1baed6060c51f11d97f45d0593cb40ab7acd98
+oid sha256:e3be541cea4b8775aa141fd0f5e8d9b83f295684b4e9c8a070e9b1a4511e1531
-size 56403
+size 55884

tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_VoiceMessagePreview-D-16_16_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a53da79f9919d7f55884273fdcc473443a2d2a8eac36bc1e7c79baecff40b69e
+oid sha256:8521c3615973ebf8b5d09a596a6122866648f45fa2015b3261dcb64505ebc41d
-size 22526
+size 22459

tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer.components_null_VoiceMessagePreview-N-16_17_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:195cb0e133075a7c8d2b429c32337dd62a7ce97ede7c0a62b630f03eaa145f63
+oid sha256:fca03bd3111ed7ee360ef60211c790aac9bb21dc3dcac8d0bcb8f3f315d6dd93
-size 19293
+size 19232

tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerVoice-D-4_4_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e2fe52c3e34e58ab38f7fa0b4b2281bdd8ef269acb3426449faa93fe7b434feb
+oid sha256:4008401117a064b6eed9cf06ada8c15273a52dd729ae0fe989d075808c928cb5
-size 27393
+size 27376

tests/uitests/src/test/snapshots/images/ui_S_t[l.textcomposer_null_TextComposerVoice-N-4_5_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ffa7daeaf5e27170395307c87c68a7674fb115bb9806cfc0d438a905571ce37f
+oid sha256:875a8c7f394a0cd4c7944bf5cbf969a5e54108b8c3edee40c193d705c9ba3719
-size 25100
+size 25065