Merge pull request #5701 from element-hq/feature/bma/improveComposerAlertMolecule

Improve composer alert molecule

.gitignore

@@ -50,6 +50,7 @@ captures/
 .idea/deviceManager.xml
 .idea/gradle.xml
 .idea/jarRepositories.xml
+.idea/markdown.xml
 .idea/misc.xml
 .idea/modules.xml
 # Comment next line if keeping position of elements in Navigation Editor is relevant for you

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt

@@ -522,7 +522,6 @@ private fun SuccessorRoomBanner(
         content = stringResource(R.string.screen_room_timeline_tombstoned_room_message).toAnnotatedString(),
         onSubmitClick = { onRoomSuccessorClick(roomSuccessor.roomId) },
         modifier = modifier,
-        isCritical = false,
         submitText = stringResource(R.string.screen_room_timeline_tombstoned_room_action)
     )
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/crypto/identity/IdentityChangeStateView.kt

@@ -19,6 +19,7 @@ import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import io.element.android.appconfig.LearnMoreConfig
 import io.element.android.compound.theme.ElementTheme
+import io.element.android.libraries.designsystem.atomic.molecules.ComposerAlertLevel
 import io.element.android.libraries.designsystem.atomic.molecules.ComposerAlertMolecule
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -113,7 +114,7 @@ private fun ViolationAlert(
         },
         submitText = stringResource(submitTextId),
         onSubmitClick = onSubmitClick,
-        isCritical = isCritical,
+        level = if (isCritical) ComposerAlertLevel.Critical else ComposerAlertLevel.Default,
     )
 }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/virtual/TimelineItemRoomBeginningView.kt

@@ -45,7 +45,6 @@ fun TimelineItemRoomBeginningView(
                 avatar = null,
                 content = stringResource(R.string.screen_room_timeline_upgraded_room_message).toAnnotatedString(),
                 onSubmitClick = { onPredecessorRoomClick(predecessorRoom.roomId) },
-                isCritical = false,
                 submitText = stringResource(R.string.screen_room_timeline_upgraded_room_action)
             )
         }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ComposerAlertMolecule.kt

@@ -24,18 +24,17 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
-import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.avatar.AvatarType
-import io.element.android.libraries.designsystem.components.avatar.anAvatarData
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.toAnnotatedString
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.ButtonSize
+import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.designsystem.utils.BooleanProvider
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
@@ -44,20 +43,37 @@ fun ComposerAlertMolecule(
     content: AnnotatedString,
     onSubmitClick: () -> Unit,
     modifier: Modifier = Modifier,
-    isCritical: Boolean = false,
+    level: ComposerAlertLevel = ComposerAlertLevel.Default,
+    showIcon: Boolean = false,
     submitText: String = stringResource(CommonStrings.action_ok),
 ) {
     Column(
         modifier.fillMaxWidth()
     ) {
-        val lineColor = if (isCritical) ElementTheme.colors.borderCriticalSubtle else ElementTheme.colors.borderInfoSubtle
+        val lineColor = when (level) {
+            ComposerAlertLevel.Default -> ElementTheme.colors.borderInfoSubtle
+            ComposerAlertLevel.Info -> ElementTheme.colors.borderInfoSubtle
+            ComposerAlertLevel.Critical -> ElementTheme.colors.borderCriticalSubtle
+        }
+
+        val startColor = when (level) {
+            ComposerAlertLevel.Default -> ElementTheme.colors.bgInfoSubtle
+            ComposerAlertLevel.Info -> ElementTheme.colors.bgInfoSubtle
+            ComposerAlertLevel.Critical -> ElementTheme.colors.bgCriticalSubtle
+        }
+
+        val textColor = when (level) {
+            ComposerAlertLevel.Default -> ElementTheme.colors.textPrimary
+            ComposerAlertLevel.Info -> ElementTheme.colors.textInfoPrimary
+            ComposerAlertLevel.Critical -> ElementTheme.colors.textCriticalPrimary
+        }
+
         Box(
             modifier = Modifier
                 .fillMaxWidth()
                 .height(1.dp)
                 .background(lineColor)
         )
-        val startColor = if (isCritical) ElementTheme.colors.bgCriticalSubtle else ElementTheme.colors.bgInfoSubtle
         val brush = Brush.verticalGradient(
             listOf(startColor, ElementTheme.colors.bgCanvasDefault),
         )
@@ -77,16 +93,28 @@ fun ComposerAlertMolecule(
                             avatarData = avatar,
                             avatarType = AvatarType.User,
                         )
+                    } else if (showIcon) {
+                        val icon = when (level) {
+                            ComposerAlertLevel.Default -> CompoundIcons.Info()
+                            ComposerAlertLevel.Info -> CompoundIcons.Info()
+                            ComposerAlertLevel.Critical -> CompoundIcons.Error()
+                        }
+                        val iconTint = when (level) {
+                            ComposerAlertLevel.Default -> ElementTheme.colors.iconPrimary
+                            ComposerAlertLevel.Info -> ElementTheme.colors.iconInfoPrimary
+                            ComposerAlertLevel.Critical -> ElementTheme.colors.iconCriticalPrimary
+                        }
+                        Icon(
+                            imageVector = icon,
+                            tint = iconTint,
+                            contentDescription = null,
+                        )
                     }
                     Text(
                         text = content,
                         modifier = Modifier.weight(1f),
                         style = ElementTheme.typography.fontBodyMdRegular,
-                        color = if (isCritical) {
+                        color = textColor,
-                            ElementTheme.colors.textCriticalPrimary
-                        } else {
-                            ElementTheme.colors.textPrimary
-                        },
                         textAlign = TextAlign.Start,
                     )
                 }
@@ -101,13 +129,22 @@ fun ComposerAlertMolecule(
     }
 }
 
+enum class ComposerAlertLevel {
+    Default,
+    Info,
+    Critical
+}
+
 @PreviewsDayNight
 @Composable
-internal fun ComposerAlertMoleculePreview(@PreviewParameter(BooleanProvider::class) isCritical: Boolean) = ElementPreview {
+internal fun ComposerAlertMoleculePreview(
+    @PreviewParameter(ComposerAlertMoleculeParamsProvider::class) params: ComposerAlertMoleculeParams,
+) = ElementPreview {
     ComposerAlertMolecule(
-        avatar = anAvatarData(size = AvatarSize.ComposerAlert),
+        avatar = params.avatar,
         content = "Alice’s verified identity has changed. Learn more".toAnnotatedString(),
-        isCritical = isCritical,
+        level = params.level,
+        showIcon = params.showIcon,
         onSubmitClick = {},
     )
 }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/ComposerAlertMoleculeParamsProvider.kt

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.libraries.designsystem.atomic.molecules
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarSize
+import io.element.android.libraries.designsystem.components.avatar.anAvatarData
+
+internal data class ComposerAlertMoleculeParams(
+    val level: ComposerAlertLevel,
+    val avatar: AvatarData? = null,
+    val showIcon: Boolean = false,
+)
+
+internal class ComposerAlertMoleculeParamsProvider : PreviewParameterProvider<ComposerAlertMoleculeParams> {
+    private val allLevels = sequenceOf(
+        ComposerAlertLevel.Default,
+        ComposerAlertLevel.Info,
+        ComposerAlertLevel.Critical
+    )
+
+    override val values: Sequence<ComposerAlertMoleculeParams>
+        get() = allLevels.flatMap { level ->
+            sequenceOf(
+                ComposerAlertMoleculeParams(level = level),
+                ComposerAlertMoleculeParams(level = level, avatar = anAvatarData(size = AvatarSize.ComposerAlert)),
+                ComposerAlertMoleculeParams(level = level, showIcon = true),
+            )
+        }
+}

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d11d39de74eec2a2bbae24932051d3601334bd76c0dd130c344ee0da5dcf9343
+oid sha256:53fbd6f92429d3b896337a6fe8ce42b6236e2b254baab6d49fee8349e8849082
-size 19987
+size 17551

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_2_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:244b946fd3cf520ced76297ab66cae6ce0588b23082dbeedfc98df954d09d669
+size 19657

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_3_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5f6d00c045200e5f98d31b06afd5517ee2da41080281c6d8601ea0169a8b32f1
+size 17187

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_4_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ee64a1ca25439b8dec91e873238f52d62fcd4683c7d4d619b8a053fa0b6040ab
+size 19185

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_5_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dfece8ca4d27aa8bb0a96711f4492a7661dd9c1a00a483f120c7fd25a2abd524
+size 19146

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_6_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:413049effec9e4dc82d8cac1f1e81ee82c27b557110810adda2bbfe4ce2fcd5e
+size 17062

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_7_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d11d39de74eec2a2bbae24932051d3601334bd76c0dd130c344ee0da5dcf9343
+size 19987

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Day_8_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:04ce1ddb3d55cc50c81d45b0609e407cb06e66135435b0ab93f4276f84be2d5a
+size 19785

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dafd34b746c706efdd85810bc2545ff03eb0b62fd098d0ab7d770dfd8e553888
+oid sha256:34eb7dce40c21e9def0982f82645cbc2e1ae585a56033043bae7ef25a883ac40
-size 22448
+size 20951

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_2_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0d94cb49717cb7d2428f611160d3e170d7eac72352d9cdaa9c697e58fdc76b9d
+size 22963

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_3_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e410c37f7044dd47d56f965c1c65294d639c2c7d614e67acaaa90df4121f6e48
+size 20253

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_4_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a03040b73e680faf99faa8c4cf92d0ba64353346e3c80a00934e0986bbf570ac
+size 22509

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_5_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b080c7768f8f954afad03d5c334207692fcf1f4e8af7d41fe0d2fced384fe9b9
+size 22130

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_6_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:57228a1501e9325aadba0e1fe177039c899a13922a8df2bfb4f0b19670908259
+size 19485

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_7_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dafd34b746c706efdd85810bc2545ff03eb0b62fd098d0ab7d770dfd8e553888
+size 22448

tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.molecules_ComposerAlertMolecule_Night_8_en.png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ed4058d71aefa09c5d804aabb8a337ece373146672a74aa1cd27d7539a02c556
+size 21995