diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/BigIcon.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/BigIcon.kt index 5b22b534f43..b0497620aa7 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/BigIcon.kt +++ b/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 - Style.Alert, Style.Success -> Color.Transparent + is Style.Default -> if (style.useCriticalTint) { + 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.Success, Style.SuccessSolid -> CompoundIcons.CheckCircleSolid() + Style.Alert, + 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.Success, Style.SuccessSolid -> stringResource(CommonStrings.common_success) + Style.Alert, + Style.AlertSolid -> stringResource(CommonStrings.common_error) + Style.Success, + Style.SuccessSolid -> stringResource(CommonStrings.common_success) } val iconTint = when (style) { - is Style.Default -> ElementTheme.colors.iconSecondary - Style.Alert, Style.AlertSolid -> ElementTheme.colors.iconCriticalPrimary - Style.Success, Style.SuccessSolid -> ElementTheme.colors.iconSuccessPrimary + is Style.Default -> if (style.useCriticalTint) { + ElementTheme.colors.iconCriticalPrimary + } 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() { - ElementPreview { - Row(horizontalArrangement = Arrangement.spacedBy(10.dp), modifier = Modifier.padding(10.dp)) { - val provider = BigIconStyleProvider() - for (style in provider.values) { +internal fun BigIconPreview() = ElementPreview { + LazyVerticalGrid( + modifier = Modifier + .fillMaxSize() + .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.Default(Icons.Filled.CatchingPokemon), BigIcon.Style.Alert, BigIcon.Style.AlertSolid, + BigIcon.Style.Default(Icons.Filled.CatchingPokemon, useCriticalTint = true), BigIcon.Style.Success, BigIcon.Style.SuccessSolid ) diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_BigIcon_Day_0_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_BigIcon_Day_0_en.png index 261e330a8fa..0d92b4ca6dd 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_BigIcon_Day_0_en.png +++ b/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 -size 10691 +oid sha256:6bed157ced6cb695c6c92f15bc8b31b124fb943f86db580c9ab2db33d423b731 +size 12408 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_BigIcon_Night_0_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_BigIcon_Night_0_en.png index c057b5283e2..36f2db136ed 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_BigIcon_Night_0_en.png +++ b/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 -size 10615 +oid sha256:211c37c03a828d65c2d28622ebb7eee49d39941f80aca809698561c55ae12135 +size 12521 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_3_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_3_en.png index d51d5098231..951f776d62a 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_3_en.png +++ b/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 -size 12485 +oid sha256:315e1d831a1e3082a9d4ea749b76b374b0f8018c6d5c11b1f48ed34db3b3a1c5 +size 13279 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_4_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_4_en.png index b7c3ab2d68c..d51d5098231 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_4_en.png +++ b/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 -size 13124 +oid sha256:b0ae9f53b675f2f754f7cb3ebf3fbe45ae7eae0c63bc8628425e0bf21ff95bcb +size 12485 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_5_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_5_en.png new file mode 100644 index 00000000000..b7c3ab2d68c --- /dev/null +++ b/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 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_3_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_3_en.png index 316ef83354e..5a1526f50b5 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_3_en.png +++ b/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 -size 12249 +oid sha256:da1945462f70133c47e33eaaa9dfc3d64033c6a83d4d50b03776adcc7a7f77e0 +size 13334 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_4_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_4_en.png index 0f1ab6cc74d..316ef83354e 100644 --- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_4_en.png +++ b/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 -size 13068 +oid sha256:8debba5d7b2f5866dafbb553732d5f99e3ecade1e3da873abdf2a82856f6b835 +size 12249 diff --git a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_5_en.png b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_5_en.png new file mode 100644 index 00000000000..0f1ab6cc74d --- /dev/null +++ b/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