From 3cc1f467958d1574f2ccdb90d4810e6ad149f2e3 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 6 Dec 2024 11:58:52 +0100 Subject: [PATCH 1/5] Add destructive param to BigIcon.Style.Default to be able to render icons with red tint. --- .../designsystem/components/BigIcon.kt | 40 ++++++++++++++----- 1 file changed, 30 insertions(+), 10 deletions(-) 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 5b22b534f4..47230b35ae 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 @@ -49,7 +49,11 @@ object BigIcon { * @param vectorIcon the [ImageVector] to display * @param contentDescription the content description of the icon, if any. It defaults to `null` */ - data class Default(val vectorIcon: ImageVector, val contentDescription: String? = null) : Style + data class Default( + val vectorIcon: ImageVector, + val contentDescription: String? = null, + val destructive: Boolean = false, + ) : Style /** * An alert style with a transparent background. @@ -84,25 +88,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.destructive) { + 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.destructive) { + ElementTheme.colors.iconCriticalPrimary + } else { + ElementTheme.colors.iconSecondary + } + Style.Alert, + Style.AlertSolid -> ElementTheme.colors.iconCriticalPrimary + Style.Success, + Style.SuccessSolid -> ElementTheme.colors.iconSuccessPrimary } Box( modifier = modifier @@ -140,6 +159,7 @@ internal class BigIconStyleProvider : PreviewParameterProvider { BigIcon.Style.Default(Icons.Filled.CatchingPokemon), BigIcon.Style.Alert, BigIcon.Style.AlertSolid, + BigIcon.Style.Default(Icons.Filled.CatchingPokemon, destructive = true), BigIcon.Style.Success, BigIcon.Style.SuccessSolid ) From 6c7d5c061d53d6f5055c85a68b0430c3a987e526 Mon Sep 17 00:00:00 2001 From: ElementBot Date: Fri, 6 Dec 2024 11:14:02 +0000 Subject: [PATCH 2/5] Update screenshots --- .../libraries.designsystem.components_BigIcon_Day_0_en.png | 4 ++-- .../libraries.designsystem.components_BigIcon_Night_0_en.png | 4 ++-- ...designsystem.components_PageTitleWithIconFull_Day_3_en.png | 4 ++-- ...designsystem.components_PageTitleWithIconFull_Day_4_en.png | 4 ++-- ...designsystem.components_PageTitleWithIconFull_Day_5_en.png | 3 +++ ...signsystem.components_PageTitleWithIconFull_Night_3_en.png | 4 ++-- ...signsystem.components_PageTitleWithIconFull_Night_4_en.png | 4 ++-- ...signsystem.components_PageTitleWithIconFull_Night_5_en.png | 3 +++ 8 files changed, 18 insertions(+), 12 deletions(-) create mode 100644 tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Day_5_en.png create mode 100644 tests/uitests/src/test/snapshots/images/libraries.designsystem.components_PageTitleWithIconFull_Night_5_en.png 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 261e330a8f..6fbfd7ed82 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:560f267082af4e27cc5d36cb4265f67adbc0d6010827c7ad07ac50fae9cfdf68 +size 10640 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 c057b5283e..9c13143905 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:f18608dd1a83235c28f17c4ed66ebbb35f9692c400e5f0b7a284d33d57199e2f +size 10892 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 d51d509823..951f776d62 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 b7c3ab2d68..d51d509823 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 0000000000..b7c3ab2d68 --- /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 316ef83354..5a1526f50b 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 0f1ab6cc74..316ef83354 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 0000000000..0f1ab6cc74 --- /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 From c80037d7b68c1ffa2f41647b3f0bea26d1eba922 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 6 Dec 2024 13:22:56 +0100 Subject: [PATCH 3/5] Fix BigIcon preview. --- .../designsystem/components/BigIcon.kt | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) 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 47230b35ae..468c1c903d 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 @@ -142,11 +145,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) } } From eb420499eafad354cceb8f2a0941dcc8b839be0b Mon Sep 17 00:00:00 2001 From: ElementBot Date: Fri, 6 Dec 2024 12:34:45 +0000 Subject: [PATCH 4/5] Update screenshots --- .../libraries.designsystem.components_BigIcon_Day_0_en.png | 4 ++-- .../libraries.designsystem.components_BigIcon_Night_0_en.png | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) 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 6fbfd7ed82..0d92b4ca6d 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:560f267082af4e27cc5d36cb4265f67adbc0d6010827c7ad07ac50fae9cfdf68 -size 10640 +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 9c13143905..36f2db136e 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:f18608dd1a83235c28f17c4ed66ebbb35f9692c400e5f0b7a284d33d57199e2f -size 10892 +oid sha256:211c37c03a828d65c2d28622ebb7eee49d39941f80aca809698561c55ae12135 +size 12521 From 25182952719ae8796c482cc3cdc9f7448cff5f4c Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 6 Dec 2024 13:59:31 +0100 Subject: [PATCH 5/5] Update doc and rename param. --- .../android/libraries/designsystem/components/BigIcon.kt | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) 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 468c1c903d..b0497620aa 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 @@ -51,11 +51,12 @@ 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, - val destructive: Boolean = false, + val useCriticalTint: Boolean = false, ) : Style /** @@ -91,7 +92,7 @@ object BigIcon { modifier: Modifier = Modifier, ) { val backgroundColor = when (style) { - is Style.Default -> if (style.destructive) { + is Style.Default -> if (style.useCriticalTint) { ElementTheme.colors.bgCriticalSubtle } else { ElementTheme.colors.bgSubtleSecondary @@ -116,7 +117,7 @@ object BigIcon { Style.SuccessSolid -> stringResource(CommonStrings.common_success) } val iconTint = when (style) { - is Style.Default -> if (style.destructive) { + is Style.Default -> if (style.useCriticalTint) { ElementTheme.colors.iconCriticalPrimary } else { ElementTheme.colors.iconSecondary @@ -170,7 +171,7 @@ internal class BigIconStyleProvider : PreviewParameterProvider { BigIcon.Style.Default(Icons.Filled.CatchingPokemon), BigIcon.Style.Alert, BigIcon.Style.AlertSolid, - BigIcon.Style.Default(Icons.Filled.CatchingPokemon, destructive = true), + BigIcon.Style.Default(Icons.Filled.CatchingPokemon, useCriticalTint = true), BigIcon.Style.Success, BigIcon.Style.SuccessSolid )