Compose AlertDialog with usePlatformDefaultWidth = false is rendered cropped

[marosseleng]

Description Rendering a @Composable containing AlertDialog with DialogProperties.usePlatformDefaultWidth = false results in dialog to be cropped if it is wider than the platform default width. I found that property to be a culprit, while adding screenshot tests for my library (draft PR). Screenshots of TimePickerDialog look fine, however in DatePickerDialog screenshots, the dialog's width is always cropped. The only difference in dialog's configuration is DialogProperties.usePlatformDefaultWidth = false for the date picker.

Steps to Reproduce Use the following composable:

    MaterialTheme {
        AlertDialog(
            onDismissRequest = {},
            text = {
                Row {
                    Box(modifier = Modifier
                        .size(width = 40.dp, height = 80.dp)
                        .background(Color.Green))
                    Box(modifier = Modifier
                        .size(width = 40.dp, height = 80.dp)
                        .background(Color.Red))
                    Box(modifier = Modifier
                        .size(width = 40.dp, height = 80.dp)
                        .background(Color.Black))
                    Box(modifier = Modifier
                        .size(width = 40.dp, height = 80.dp)
                        .background(Color.Blue))
                    Box(modifier = Modifier
                        .size(width = 40.dp, height = 80.dp)
                        .background(Color.Cyan))
                    Box(modifier = Modifier
                        .size(width = 40.dp, height = 80.dp)
                        .background(Color.Gray))
                    Box(modifier = Modifier
                        .size(width = 40.dp, height = 80.dp)
                        .background(Color.Magenta))
                }
            },
            confirmButton = {},
            properties = DialogProperties(usePlatformDefaultWidth = false)
        )
    }

with Paparazzi config:

    // Paparazzi config
    @get: Rule
    public val rule: Paparazzi = Paparazzi(
        deviceConfig = DeviceConfig.PIXEL_6_PRO.copy(
            softButtons = false,
        ),
        maxPercentDifference = 0.0,
        showSystemUi = false,
    )

Snapshot of the above called in paparazzi.snapshot {} (dialog's width is cropped) - First screenshot

When we change usePlatformDefaultWidth to true, the paparazzi.snapshot{} crops the content instead (consistent with the "real" behavior of usePlatformDefaultWidth = true, which is default) - Second screenshot

Expected behavior I would expect the dialog would stretch. Screenshot of running @Preview @Composable of the above - third screenshot

Additional information:

• Paparazzi Version: 1.2.0-SNAPSHOT
• OS: MacOS Ventura 13.0.1
• Compile SDK: 33
• Gradle Version: 7.6
• Android Gradle Plugin Version: 7.3.1
• Android Studio: Flamingo | 2022.2.1 Canary 11, Build #AI-222.4459.24.2221.9445173

Screenshots Paparazzi-usePlatformDefaultWidth=false Paparazzi-usePlatformDefaultWidth=true Emulator preview (Pixel 6 Pro)

Thanks for any inpu!

[dniHze]

Can you verify that AS preview is generated properly for this compostable? It might be not supported properly by layoutlib.

[marosseleng]

Sure, at least on Flamingo it seems to behave correctly. But I'm not sure whether preview in AS knows about the desired device's size.

[jrodbx]

@marosseleng Can you try/confirm on Electric Eel? That's the version of layoutlib backing version 1.2.0.

[marosseleng]

@jrodbx It, indeed, seems that the problem is with layoutlib, as the same problem happens on Electric Eel (2022.1.1 #AI-221.6008.13.2211.9477386).

[jrodbx]

Confirmed as fixed in Flamingo

[alashow]

@jrodbx It was either never fixed or it's a regression: I can still observe this issue on Paparazzi 1.3.1 and also in Android Studio Giraffe (2023.3.1, #AI-223.8836.35.2231.10406996)

[efemoney]

Still an issue with latest Paparazzi 1.3.4 (Iguana layout lib).

I'm using Jellybug (canary) and I am seeing that normal preview does NOT have this problematic behavior. Maybe its actually fixed now.

[TWiStErRob]

@efemoney Jellyfish/Ladybug?

[efemoney]

Haha, Ladybug. Sorry, slow day 😅

[geoff-powell]

Update here, this issue is unfortunately still present with AS Koala (LayoutLib 14.0.11) and AS Ladybug (LayoutLib 15.0.4)

Ladybug Feature Drop [Left] Ladybug Patch 1 [Right]