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) {
-                            ElementTheme.colors.textCriticalPrimary
-                        } else {
-                            ElementTheme.colors.textPrimary
-                        },
+                        color = textColor,
                         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),
+            )
+        }
+}