Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

102
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ListItem.kt
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,
)