Merge pull request #4004 from element-hq/feature/bma/customAlertSolid

Add destructive param to BigIcon.Style.Default to be able to render icons with red tint

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

@@ -10,9 +10,12 @@ package io.element.android.libraries.designsystem.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.CatchingPokemon
@@ -48,8 +51,13 @@ object BigIcon {
          *
          * @param vectorIcon the [ImageVector] to display
          * @param contentDescription the content description of the icon, if any. It defaults to `null`
+         * @param useCriticalTint whether the icon and background should be rendered using critical tint
          */
-        data class Default(val vectorIcon: ImageVector, val contentDescription: String? = null) : Style
+        data class Default(
+            val vectorIcon: ImageVector,
+            val contentDescription: String? = null,
+            val useCriticalTint: Boolean = false,
+        ) : Style
 
         /**
          * An alert style with a transparent background.
@@ -84,25 +92,40 @@ object BigIcon {
         modifier: Modifier = Modifier,
     ) {
         val backgroundColor = when (style) {
-            is Style.Default -> ElementTheme.colors.bgSubtleSecondary
+            is Style.Default -> if (style.useCriticalTint) {
-            Style.Alert, Style.Success -> Color.Transparent
+                ElementTheme.colors.bgCriticalSubtle
+            } else {
+                ElementTheme.colors.bgSubtleSecondary
+            }
+            Style.Alert,
+            Style.Success -> Color.Transparent
             Style.AlertSolid -> ElementTheme.colors.bgCriticalSubtle
             Style.SuccessSolid -> ElementTheme.colors.bgSuccessSubtle
         }
         val icon = when (style) {
             is Style.Default -> style.vectorIcon
-            Style.Alert, Style.AlertSolid -> CompoundIcons.Error()
+            Style.Alert,
-            Style.Success, Style.SuccessSolid -> CompoundIcons.CheckCircleSolid()
+            Style.AlertSolid -> CompoundIcons.Error()
+            Style.Success,
+            Style.SuccessSolid -> CompoundIcons.CheckCircleSolid()
         }
         val contentDescription = when (style) {
             is Style.Default -> style.contentDescription
-            Style.Alert, Style.AlertSolid -> stringResource(CommonStrings.common_error)
+            Style.Alert,
-            Style.Success, Style.SuccessSolid -> stringResource(CommonStrings.common_success)
+            Style.AlertSolid -> stringResource(CommonStrings.common_error)
+            Style.Success,
+            Style.SuccessSolid -> stringResource(CommonStrings.common_success)
         }
         val iconTint = when (style) {
-            is Style.Default -> ElementTheme.colors.iconSecondary
+            is Style.Default -> if (style.useCriticalTint) {
-            Style.Alert, Style.AlertSolid -> ElementTheme.colors.iconCriticalPrimary
+                ElementTheme.colors.iconCriticalPrimary
-            Style.Success, Style.SuccessSolid -> ElementTheme.colors.iconSuccessPrimary
+            } else {
+                ElementTheme.colors.iconSecondary
+            }
+            Style.Alert,
+            Style.AlertSolid -> ElementTheme.colors.iconCriticalPrimary
+            Style.Success,
+            Style.SuccessSolid -> ElementTheme.colors.iconSuccessPrimary
         }
         Box(
             modifier = modifier
@@ -123,11 +146,19 @@ object BigIcon {
 
 @PreviewsDayNight
 @Composable
-internal fun BigIconPreview() {
+internal fun BigIconPreview() = ElementPreview {
-    ElementPreview {
+    LazyVerticalGrid(
-        Row(horizontalArrangement = Arrangement.spacedBy(10.dp), modifier = Modifier.padding(10.dp)) {
+        modifier = Modifier
-            val provider = BigIconStyleProvider()
+            .fillMaxSize()
-            for (style in provider.values) {
+            .padding(10.dp),
+        columns = GridCells.Adaptive(minSize = 64.dp),
+        horizontalArrangement = Arrangement.spacedBy(10.dp),
+        verticalArrangement = Arrangement.spacedBy(10.dp),
+    ) {
+        items(BigIconStyleProvider().values.toList()) { style ->
+            Box(
+                contentAlignment = Alignment.Center
+            ) {
                 BigIcon(style = style)
             }
         }
@@ -140,6 +171,7 @@ internal class BigIconStyleProvider : PreviewParameterProvider<BigIcon.Style> {
             BigIcon.Style.Default(Icons.Filled.CatchingPokemon),
             BigIcon.Style.Alert,
             BigIcon.Style.AlertSolid,
+            BigIcon.Style.Default(Icons.Filled.CatchingPokemon, useCriticalTint = true),
             BigIcon.Style.Success,
             BigIcon.Style.SuccessSolid
         )

tests/uitests/src/test/snapshots/images/libraries.designsystem.components_BigIcon_Day_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ee6ae9f6af47e39480ec9e78d37da7d2f7174cba71c5274bb6314a2dc346b1ab
+oid sha256:6bed157ced6cb695c6c92f15bc8b31b124fb943f86db580c9ab2db33d423b731
-size 10691
+size 12408

tests/uitests/src/test/snapshots/images/libraries.designsystem.components_BigIcon_Night_0_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e0ee879f0cb6b6d42aa0706c1d2ce763211d95768e0111f03e79eaa923515534
+oid sha256:211c37c03a828d65c2d28622ebb7eee49d39941f80aca809698561c55ae12135
-size 10615
+size 12521

tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b0ae9f53b675f2f754f7cb3ebf3fbe45ae7eae0c63bc8628425e0bf21ff95bcb
+oid sha256:315e1d831a1e3082a9d4ea749b76b374b0f8018c6d5c11b1f48ed34db3b3a1c5
-size 12485
+size 13279

tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7a9d956826399b4a700a4f5d05eed66412f76f59a21a0995a85c69b3c528803a
+oid sha256:b0ae9f53b675f2f754f7cb3ebf3fbe45ae7eae0c63bc8628425e0bf21ff95bcb
-size 13124
+size 12485

tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_5_en.png

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

tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_3_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8debba5d7b2f5866dafbb553732d5f99e3ecade1e3da873abdf2a82856f6b835
+oid sha256:da1945462f70133c47e33eaaa9dfc3d64033c6a83d4d50b03776adcc7a7f77e0
-size 12249
+size 13334

tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_4_en.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fe20c0a4b18c1844df6d962e147a5e939cf0cba70657a67f3286c013942dd010
+oid sha256:8debba5d7b2f5866dafbb553732d5f99e3ecade1e3da873abdf2a82856f6b835
-size 13068
+size 12249

tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_5_en.png

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