Jetpack Compose version: 1.6.0-alpha07
Jetpack Compose material3 version: 1.2.0-alpha09
Jetpack Compose component used: ListItem
Android Studio Build: Android Studio Iguana | 2023.2.1 Canary 7
Kotlin version: 1.9.10

I was trying to use the ListItem composable from material3 and noticed a couple of issues with trailingContent leaving more space than expected at the end.

First issue

After checking the specs, I believe that ListItemEndPadding is set to the wrong value. It should be 16.dp not 24.dp.

Second issue

If, for example, I try to recreate the "One-line lists" and use a CheckBox in the trailing content lambda, ListItem will add a 16.dp** padding to the end. Unfortunately, a clickable CheckBox uses minimumInteractiveComponentSize(), and the reserved space will increase from 24.dp (CheckBox size) to 48.dp, adding 12.dp to the already existing 16.dp from ListItem.

Right now I think it's not possible to recreate the examples from the specs that have a "Secondary Action area" like a CheckBox, IconButton, or anything small with a minimum touch target size added. Text "100+" examples are different since they don't need to be clickable.

** Assuming First issue is fixed at some point and the end padding applied is 16.dp and not 24.dp.

Steps to reproduce

Run a composable with this content:

// Result with markers in the "output_with_8dp_markers.png" file attached
Column {
    ListItem(
        headlineContent = { Text(text = "Text") },
        trailingContent = { Text(text = "100+") },
    )
    HorizontalDivider()
    ListItem(
        headlineContent = { Text(text = "Checkbox") },
        trailingContent = { Checkbox(checked = true, onCheckedChange = { }) },
    )
    HorizontalDivider()
    ListItem(
        headlineContent = { Text(text = "Checkbox (null onChange)") },
        trailingContent = { Checkbox(checked = true, onCheckedChange = null) },
    )
    HorizontalDivider()
    ListItem(
        headlineContent = { Text(text = "Icon") },
        trailingContent = {
            IconButton(onClick = {}) {
                Icon(Icons.AutoMirrored.Default.Send, contentDescription = "Send this")
            }
        },
    )
}

Instead of 16.dp, we get:

The "Text" example leaves 24.dp between the "100+" and the end.
The "Checkbox" example leaves 36.dp.
The "Checkbox [null onChange]" example (if we don't want to use the Checkbox as a "Secondary Action") leaves 24.dp.
The "Icon" example leaves 36.dp.

Apologies if this is working as expected. All the ListItem examples use Text as the trailingContent and I think an example with CheckBox/IconButton could be very helpful, because I don't see what the correct approach is when using other types of content. Thank you.

Issue 305342674

Mentioned issues (1)

Links (3)

Issue metadata