Merge pull request #3706 from element-hq/bma/listItemFixes

UI: fix list item colors
This commit is contained in:
Benoit Marty 2024-10-21 11:14:11 +02:00 committed by GitHub
commit 5b32fd8de0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
49 changed files with 180 additions and 100 deletions

View file

@ -8,6 +8,7 @@
package io.element.android.libraries.designsystem.theme.components
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.ListItemColors
import androidx.compose.material3.ListItemDefaults
import androidx.compose.material3.LocalContentColor
@ -102,6 +103,7 @@ fun ListItem(
) {
// We cannot just pass the disabled colors, they must be set manually: https://issuetracker.google.com/issues/280480132
val headlineColor = if (enabled) colors.headlineColor else colors.disabledHeadlineColor
val supportingColor = if (enabled) colors.supportingTextColor else colors.disabledHeadlineColor.copy(alpha = 0.80f)
val leadingContentColor = if (enabled) colors.leadingIconColor else colors.disabledLeadingIconColor
val trailingContentColor = if (enabled) colors.trailingIconColor else colors.disabledTrailingIconColor
@ -117,6 +119,7 @@ fun ListItem(
{
CompositionLocalProvider(
LocalTextStyle provides ElementTheme.materialTypography.bodyMedium,
LocalContentColor provides supportingColor,
) {
content()
}
@ -376,33 +379,91 @@ internal fun ListItemPrimaryActionWithIconPreview() = PreviewItems.OneLineListIt
// endregion
// region: Error state
@Preview(name = "List item - Error", group = PreviewGroup.ListItems)
@Preview(name = "List item (2 lines) - Simple - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemErrorPreview() = PreviewItems.OneLineListItemPreview(style = ListItemStyle.Destructive)
@Preview(name = "List item - Error & Icon", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemErrorWithIconPreview() = PreviewItems.OneLineListItemPreview(
style = ListItemStyle.Destructive,
leadingContent = PreviewItems.icon(),
internal fun ListItemTwoLinesSimpleErrorPreview() = PreviewItems.TwoLinesListItemPreview(
style = ListItemStyle.Destructive
)
// endregion
// region: Disabled state
@Preview(name = "List item - Disabled", group = PreviewGroup.ListItems)
@Preview(name = "List item (2 lines) - Trailing Checkbox - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemDisabledPreview() = PreviewItems.OneLineListItemPreview(enabled = false)
internal fun ListItemTwoLinesTrailingCheckBoxErrorPreview() = PreviewItems.TwoLinesListItemPreview(
trailingContent = PreviewItems.checkbox(),
style = ListItemStyle.Destructive,
)
@Preview(name = "List item - Disabled & Icon", group = PreviewGroup.ListItems)
@Preview(name = "List item (2 lines) - Trailing RadioButton - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemDisabledWithIconPreview() = PreviewItems.OneLineListItemPreview(
enabled = false,
internal fun ListItemTwoLinesTrailingRadioButtonErrorPreview() = PreviewItems.TwoLinesListItemPreview(
trailingContent = PreviewItems.radioButton(),
style = ListItemStyle.Destructive,
)
@Preview(name = "List item (2 lines) - Trailing Switch - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemTwoLinesTrailingSwitchErrorPreview() = PreviewItems.TwoLinesListItemPreview(
trailingContent = PreviewItems.switch(),
style = ListItemStyle.Destructive,
)
@Preview(name = "List item (2 lines) - Trailing Icon - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemTwoLinesTrailingIconErrorPreview() = PreviewItems.TwoLinesListItemPreview(
trailingContent = PreviewItems.icon(),
style = ListItemStyle.Destructive,
)
// region: Leading Checkbox
@Preview(name = "List item (2 lines) - Leading Checkbox - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemTwoLinesLeadingCheckboxErrorPreview() = PreviewItems.TwoLinesListItemPreview(
leadingContent = PreviewItems.checkbox(),
style = ListItemStyle.Destructive,
)
@Preview(name = "List item (2 lines) - Leading RadioButton - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemTwoLinesLeadingRadioButtonErrorPreview() = PreviewItems.TwoLinesListItemPreview(
leadingContent = PreviewItems.radioButton(),
style = ListItemStyle.Destructive,
)
@Preview(name = "List item (2 lines) - Leading Switch - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemTwoLinesLeadingSwitchErrorPreview() = PreviewItems.TwoLinesListItemPreview(
leadingContent = PreviewItems.switch(),
style = ListItemStyle.Destructive,
)
@Preview(name = "List item (2 lines) - Leading Icon - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemTwoLinesLeadingIconErrorPreview() = PreviewItems.TwoLinesListItemPreview(
leadingContent = PreviewItems.icon(),
style = ListItemStyle.Destructive,
)
@Preview(name = "List item (2 lines) - Both Icons - Error", group = PreviewGroup.ListItems)
@Composable
internal fun ListItemTwoLinesBothIconsErrorPreview() = PreviewItems.TwoLinesListItemPreview(
leadingContent = PreviewItems.icon(),
trailingContent = PreviewItems.icon(),
style = ListItemStyle.Destructive,
)
// endregion
@Suppress("ModifierMissing")
private object PreviewItems {
@Composable
private fun EnabledDisabledElementThemedPreview(
content: @Composable (Boolean) -> Unit,
) = ElementThemedPreview {
Column {
sequenceOf(true, false).forEach {
content(it)
}
}
}
@Composable
fun ThreeLinesListItemPreview(
modifier: Modifier = Modifier,
@ -410,12 +471,13 @@ private object PreviewItems {
leadingContent: ListItemContent? = null,
trailingContent: ListItemContent? = null,
) {
ElementThemedPreview {
EnabledDisabledElementThemedPreview {
ListItem(
headlineContent = headline(),
supportingContent = text(),
leadingContent = leadingContent,
trailingContent = trailingContent,
enabled = it,
style = style,
modifier = modifier,
)
@ -429,12 +491,13 @@ private object PreviewItems {
leadingContent: ListItemContent? = null,
trailingContent: ListItemContent? = null,
) {
ElementThemedPreview {
EnabledDisabledElementThemedPreview {
ListItem(
headlineContent = headline(),
supportingContent = textSingleLine(),
leadingContent = leadingContent,
trailingContent = trailingContent,
enabled = it,
style = style,
modifier = modifier,
)
@ -447,14 +510,13 @@ private object PreviewItems {
style: ListItemStyle = ListItemStyle.Default,
leadingContent: ListItemContent? = null,
trailingContent: ListItemContent? = null,
enabled: Boolean = true,
) {
ElementThemedPreview {
EnabledDisabledElementThemedPreview {
ListItem(
headlineContent = headline(),
leadingContent = leadingContent,
trailingContent = trailingContent,
enabled = enabled,
enabled = it,
style = style,
modifier = modifier,
)

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a6a792161530746c31b165898988b15ec9c8a982135b3cbbdbbd412a91a781d1
size 65829
oid sha256:f6fd4487ae63d2116b70a31b5ee8d18135cf735f6257134afd6572b0dbe1ac5b
size 63216

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:ce0c8fccb44d193364f9f3535a5e27c75acbb267936a305578bd46c69f257fd6
size 64790
oid sha256:23f505a91ebe3438f52c65f53362fc2d5cca57a8959e5459722217541ec24fc9
size 62030

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f91144e2ea2cf30dfa778b5c26b30d09ef741597dabd67ed892fee82f3c00b90
size 36897
oid sha256:4d1428315ff345ab13a8bcaec56748cf010680c6fc2fbf2d756a22cdbd9a2a5a
size 36421

View file

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

View file

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

View file

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

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f08ca444b6d9641feaf7f1c2c2f6a093bd911b477d8b8ecdd45e1a72779d49c4
size 8662
oid sha256:109343e4cc1001db3f6bdbd7574e7ff7658d7be22637ebdb18fad2675a19f02c
size 13413

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3e39dbaa909f0881c731bfe511525a103958d709cd00957979a61bd83df6fee2
size 10396
oid sha256:994c387ed14b17e4aecca6d357876733c3d956b210b7c451db8197b627c56112
size 16573

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c9116c003649c3bfb0c9fbbd4a463683ac97eea6049120fbf6e4f50ebd8fdf51
size 7384
oid sha256:931481a1fb63f4dc01f5ec120b655d6acf3b03a6feece8a8fbe0daeaebcb61cc
size 10678

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e8ca8f5fb66abdad4b8bb14324d71ae0df6a322c06d9a56dcc2d0b6cd1e7e135
size 8826
oid sha256:8157da65ee527b1daa34f8ef10de9c8e0bd9fd4c3a12a500a2309c43634c6f29
size 13555

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f44f3fbdb4e024eadf076f402da7c47f62cf9814e73b01e163a7474a57f5fd65
size 8751
oid sha256:ef70bc4aaafa730bac6584014bc4fa6291fd5290711497bef6334e969e6959b4
size 13250

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:bf7462533c01931b25769e6d28e94dcb8bb4297bcb8ddb81429c73447924c07c
size 11059
oid sha256:7a51471db6045dd3d7456a016752a963cdbe76e82b30507a9c2de366a2df85b6
size 17920

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0418fccb12b87a8b396390fe7205b6214bdc28690d68aa93fff3c31113f91a6e
size 6958
oid sha256:ee9ecf230884476b4d59d7a7ae7a85b234592bb0b5df490350e30b79162ed2ef
size 9881

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9f6459e5a21ccea176dfc53632f7703c2ac5e8a6c3cd2b26de4a4b377c5d449e
size 7348
oid sha256:7e36b943b5ab7ff1750d63b6ec856d341a04e249c48698d6fb606dce1cdae50c
size 10606

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5b318fa6f51a3bc8cf9460e680cddd806a89815a16ee75ce50d59228b02b3aa0
size 8742
oid sha256:52e6de1b25d89d02fa65a8ff6ca2ecec3697c5c2b3375f83dc10d021970cc5cc
size 13399

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:424c4e10d4842c0e718ad7161e25c4ed1b9b018419e2159211c966b295b7874e
size 8730
oid sha256:58f68cea7244703ee8e22a5f3ff33ec6d0959c2d695ef7a460cc675637025228
size 13234

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:9c1d8d8c54ca27ad46f758d2f26f95a9b01a4a501cd90b96ef785417fa87c4f9
size 10871
oid sha256:7d758f973f7ad590f946143483eada04cfa8c6251e0dac7bef23ec1aaa01e16a
size 17604

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:359db7616a41fa0dfd65748a1c802860a368395cd048dc1eb7fa1c2b5a19a4cb
size 26974
oid sha256:a14b583319cce4c2488148f24b2c383480d09bd38930d13a7f1e80fa28dfd246
size 47313

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:98af40e94a5c855edd5168b94769bdc8772d323d8140605c650939c1fdf688d5
size 24455
oid sha256:c9013763c103b76796b2aaedf8fd4f470ca4372ecca8d115b59ff5f00b08f4f3
size 41697

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d81d9c42df9ab328f38bd7231e059ade9e02845136f1e958b9eae70512679f23
size 25594
oid sha256:4b424c57dfb95bd4d2befe0e1b569bf417920a10afd7bd5bba6f5d544ae20876
size 44500

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:d7242fcc23945e9ef2823af7f3e5285cfe9bc3e1f66d7c25eba9c5dcea143382
size 25454
oid sha256:d7561472314ea7f56f80086897d2547e840c04425e317d62f3acb2a7959ba44e
size 44022

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:2019aa371b2b51edfe58723b8cfbd95785f26328b41811edf46cc0273b0a1b21
size 27353
oid sha256:770d9f5e245faf42a4c4b4b7471d2026f03a831b14c2f1da547a1616b3fad4c8
size 48555

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:22d4bda8e95d967246bdb7a6ee3e2412e042e0bcb15ad77569c9858483d4676f
size 24220
oid sha256:7e2070acdf0cf63572e3422334849c53aaaa0ee5f916ee6c1455bd8754d953f1
size 41193

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:1de37975b3c0700a41bfcabf228f68a3b85d175f5555029bc97255cc50ba1d08
size 24660
oid sha256:3caa1ea352417833395592c2d35b0c176ee991748796850b26fefb4c22dcd6da
size 42048

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:3911c1eb90124b77ee556ee246f6c16603a97295b5286e8116ffe1619870f0f7
size 25737
oid sha256:39d787d556d73b53e91118aff0259f52e1d0bd9a67294a7773e3ce0ca42ed687
size 44758

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:b129dc5b70bed0bbe4cf670a6cceb699bd51b4a0c6a8e1361542a219ddc7549a
size 25629
oid sha256:b8d7dff8473263b10d5e717d4f0de8f0ab7f0ff9678d599823895ef3c28b8e5a
size 44285

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:a21c63cddc162efa53525b32429929efa0d6b021e34c2dde7cfa64af9bc9bfd5
size 27443
oid sha256:d8c360c163f5efd86b8140d427acfc19ae2e04aa431855fb3c0157d1e7405e0e
size 48402

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:c08a022c9822c5856f8c91d83a2289c81de9442a46177534c9ddcf1146e0bfd0
size 20207
oid sha256:af7b60236fa5b56d4d0267c19f2702f2f11c6a3463ac39a086b2ce3349e65290
size 33968

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:f5b602c8e44cbde2e7e568e5d06dafe89e0b50921d12c764864dde449e395268
size 17813
oid sha256:e273356ac0c1c3ba1033f31bfb04d33c82457467f680011804f6ba9b027bf620
size 29523

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:0b71c5e8fdebd9ce2d606d40863142e7c19c4b2c29ee7dc32b2dab240bbcfed7
size 20027
oid sha256:e0671c62081c3151696ed9275f76c63b536d852d47b09016655653e7f3278266
size 33773

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:251bcfc7729cdb06918d0062f8c4bdc84a9f62507336aebf29342cdf173917dd
size 19103
oid sha256:d21d8a2fa0ae1fee321079cc0cd752c24a2e4396cf512a8ad7164b63477b4de9
size 32024

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:22643895cf09fb06fdff7fa81489641176f371a7b6e292665d40b673fde9779f
size 21388
oid sha256:ac3bddd449949f6f6e3b606f877eff1d7398637cabbf848f7be7a3f0277a7560
size 36307

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:39915e0cd6aa644305d5dc5780d8b1b36918c7dbcc6dd1e27f1113ddeb86a3eb
size 19866
oid sha256:38723cd278edd2a2167819dfa23cba2035936ce569bee854fb4f4cec1505b8cb
size 33491

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:dc1dc99e48c8dab1a8a547d862c99b7d3ae5859a4cecce2b0d00b036b23cd11d
size 17949
oid sha256:b8ae9d48a57cd796bbb2a8d962b1094d42e07b0726232958fd45575dce5d6e42
size 29830

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:7f4bb6e07d6ad6d5a6cec469ffd6a82a176ace3147c630c40bb7f84f655c990c
size 20187
oid sha256:7669ba797d31ba6a05da97afd39b408cae4bd297d026f7163ddfa77c98d9e776
size 34073

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6a7fb52dd4cfce70f922c29fc8a9f9833880a5caabd566c3a9325dcd3a79eb36
size 19174
oid sha256:428e23a4e8074a009345b262b4b1652a4c98216353a78603f141251d6c182d43
size 32183

View file

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

View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:23bc16e2c6a295ff86fb7f7d42c436aaec2b16a644b5dada0e4d95fae9cc5309
size 21356
oid sha256:0d5b6118b7717c32293fa68e42468025422e931b12a2b06be6451ac2304a16e0
size 36301