From 063cbc4aab699ea8ba0678397409486b8e13d9eb Mon Sep 17 00:00:00 2001 From: ssancho14 <50666481+ssancho14@users.noreply.github.com> Date: Wed, 24 Jan 2024 19:24:45 +0000 Subject: [PATCH] Updates to ResponsiveDialogContent (#2004) * Updates to ResponsiveDialogContent * Added a message parameter to ResponsiveDialogContent, to simplify the most common use-case. * Removed SidePaddingExtraPct * Updated tests. * Other Minor API changes. --- compose-material/api/current.api | 6 +- .../compose/material/AlertDialogPreview.kt | 4 +- .../compose/material/AlertDialog.kt | 34 +++++----- .../compose/material/ResponsiveDialog.kt | 66 ++++++++----------- .../horologist/screensizes/DialogTest.kt | 2 +- ...gTest_screenshot[0]_mobvoiticwatchpro5.png | 4 +- ...screenshot[2]_samsunggalaxywatch6large.png | 4 +- ...ogTest_screenshot[5]_genericlargeround.png | 4 +- ...Test_screenshot[6]_smalldevicebigfonts.png | 4 +- ...st_screenshot[7]_largedevicesmallfonts.png | 4 +- 10 files changed, 60 insertions(+), 72 deletions(-) diff --git a/compose-material/api/current.api b/compose-material/api/current.api index 9628d7e29d..299f23c2eb 100644 --- a/compose-material/api/current.api +++ b/compose-material/api/current.api @@ -2,8 +2,8 @@ package com.google.android.horologist.compose.material { public final class AlertDialogKt { - method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void AlertContent(String body, kotlin.jvm.functions.Function0<kotlin.Unit>? onCancelButtonClick, kotlin.jvm.functions.Function0<kotlin.Unit>? onOKButtonClick, optional String title, optional String okButtonContentDescription, optional String cancelButtonContentDescription, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState columnState, optional boolean showPositionIndicator); - method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void AlertDialog(String message, kotlin.jvm.functions.Function0<kotlin.Unit> onCancelButtonClick, kotlin.jvm.functions.Function0<kotlin.Unit> onOKButtonClick, boolean showDialog, optional androidx.compose.ui.Modifier modifier, optional String title, optional String okButtonContentDescription, optional String cancelButtonContentDescription, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState columnState); + method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void AlertContent(String message, kotlin.jvm.functions.Function0<kotlin.Unit>? onCancelButtonClick, kotlin.jvm.functions.Function0<kotlin.Unit>? onOKButtonClick, optional String? title, optional String okButtonContentDescription, optional String cancelButtonContentDescription, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState columnState, optional boolean showPositionIndicator); + method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void AlertDialog(String message, kotlin.jvm.functions.Function0<kotlin.Unit> onCancelButtonClick, kotlin.jvm.functions.Function0<kotlin.Unit> onOKButtonClick, boolean showDialog, optional androidx.compose.ui.Modifier modifier, optional String? title, optional String okButtonContentDescription, optional String cancelButtonContentDescription, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState columnState); } public final class ButtonKt { @@ -86,7 +86,7 @@ package com.google.android.horologist.compose.material { } public final class ResponsiveDialogKt { - method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void ResponsiveDialogContent(optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function0<kotlin.Unit>? icon, optional kotlin.jvm.functions.Function0<kotlin.Unit>? title, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onOkButtonClick, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onCancelButtonClick, optional String okButtonContentDescription, optional String cancelButtonContentDescription, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState state, optional boolean showPositionIndicator, optional kotlin.jvm.functions.Function1<? super androidx.wear.compose.foundation.lazy.ScalingLazyListScope,kotlin.Unit>? content); + method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void ResponsiveDialogContent(optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function0<kotlin.Unit>? icon, optional kotlin.jvm.functions.Function0<kotlin.Unit>? title, optional kotlin.jvm.functions.Function0<kotlin.Unit>? message, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onOkButtonClick, optional kotlin.jvm.functions.Function0<kotlin.Unit>? onCancelButtonClick, optional String okButtonContentDescription, optional String cancelButtonContentDescription, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState state, optional boolean showPositionIndicator, optional kotlin.jvm.functions.Function1<? super androidx.wear.compose.foundation.lazy.ScalingLazyListScope,kotlin.Unit>? content); } public final class SplitToggleChipKt { diff --git a/compose-material/src/debug/java/com/google/android/horologist/compose/material/AlertDialogPreview.kt b/compose-material/src/debug/java/com/google/android/horologist/compose/material/AlertDialogPreview.kt index a44f9ba8ec..10d1df4049 100644 --- a/compose-material/src/debug/java/com/google/android/horologist/compose/material/AlertDialogPreview.kt +++ b/compose-material/src/debug/java/com/google/android/horologist/compose/material/AlertDialogPreview.kt @@ -24,7 +24,7 @@ import androidx.wear.compose.ui.tooling.preview.WearPreviewDevices fun AlertDialogPreview() { AlertContent( title = "Title", - body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", onCancelButtonClick = { }, onOKButtonClick = { }, okButtonContentDescription = "Ok", @@ -37,7 +37,7 @@ fun AlertDialogPreview() { fun AlertDialogWithLongBodyPreview() { AlertContent( title = "Title", - body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " + + message = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " + "incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud " + "exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute " + "irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla " + diff --git a/compose-material/src/main/java/com/google/android/horologist/compose/material/AlertDialog.kt b/compose-material/src/main/java/com/google/android/horologist/compose/material/AlertDialog.kt index 3d91537c83..9dacf04576 100644 --- a/compose-material/src/main/java/com/google/android/horologist/compose/material/AlertDialog.kt +++ b/compose-material/src/main/java/com/google/android/horologist/compose/material/AlertDialog.kt @@ -42,7 +42,7 @@ public fun AlertDialog( onOKButtonClick: () -> Unit, showDialog: Boolean, modifier: Modifier = Modifier, - title: String = "", + title: String? = null, okButtonContentDescription: String = stringResource(android.R.string.ok), cancelButtonContentDescription: String = stringResource(android.R.string.cancel), columnState: ScalingLazyColumnState = rememberColumnState( @@ -57,7 +57,7 @@ public fun AlertDialog( ) { AlertContent( title = title, - body = message, + message = message, onCancelButtonClick = onCancelButtonClick, onOKButtonClick = onOKButtonClick, okButtonContentDescription = okButtonContentDescription, @@ -71,10 +71,10 @@ public fun AlertDialog( @ExperimentalHorologistApi @Composable public fun AlertContent( - body: String, + message: String, onCancelButtonClick: (() -> Unit)?, onOKButtonClick: (() -> Unit)?, - title: String = "", + title: String? = null, okButtonContentDescription: String = stringResource(android.R.string.ok), cancelButtonContentDescription: String = stringResource(android.R.string.cancel), columnState: ScalingLazyColumnState = rememberColumnState( @@ -83,13 +83,22 @@ public fun AlertContent( showPositionIndicator: Boolean = true, ) { ResponsiveDialogContent( - title = { + title = title?.let { + { + Text( + text = it, + color = MaterialTheme.colors.onBackground, + textAlign = TextAlign.Center, + maxLines = 3, + ) + } + }, + message = { Text( - text = title, + text = message, color = MaterialTheme.colors.onBackground, textAlign = TextAlign.Center, maxLines = 3, - style = MaterialTheme.typography.title3, ) }, onOkButtonClick = onOKButtonClick, @@ -98,14 +107,5 @@ public fun AlertContent( cancelButtonContentDescription = cancelButtonContentDescription, state = columnState, showPositionIndicator = showPositionIndicator, - ) { - item { - Text( - text = body, - color = MaterialTheme.colors.onBackground, - textAlign = TextAlign.Center, - style = MaterialTheme.typography.body2, - ) - } - } + ) } diff --git a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt index 14e7e9e9cb..93a1ca8ec0 100644 --- a/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt +++ b/compose-material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt @@ -52,6 +52,7 @@ public fun ResponsiveDialogContent( modifier: Modifier = Modifier, icon: @Composable (() -> Unit)? = null, title: @Composable (() -> Unit)? = null, + message: @Composable (() -> Unit)? = null, onOkButtonClick: (() -> Unit)? = null, onCancelButtonClick: (() -> Unit)? = null, okButtonContentDescription: String = stringResource(R.string.ok), @@ -87,20 +88,34 @@ public fun ResponsiveDialogContent( CompositionLocalProvider( LocalTextStyle provides MaterialTheme.typography.title3, ) { - SidePaddingExtraPct( - 8.84f, - Modifier.padding(bottom = 8.dp), // 12.dp bellow icon + // Compute the actual padding needed to get an extra 8.84%, + // inside of the global 5.2% padding + val extraPadding = 8.84f / (100f - 2f * 5.2f) + Box( + Modifier + .fillMaxWidth(1f - 2f * extraPadding) + .padding(bottom = 8.dp), // 12.dp below icon ) { it() } } } } - content?.let { - if (icon == null && title == null) { - // Ensure the content is visible when there is nothing above it. - item { - Spacer(Modifier.height(20.dp)) - } + if (icon == null && title == null) { + // Ensure the content is visible when there is nothing above it. + item { + Spacer(Modifier.height(20.dp)) + } + } + message?.let { + item { + // Compute the actual padding needed to get an extra 4.16%, + // inside of the global 5.2% padding + val extraPadding = 4.16f / (100f - 2f * 5.2f) + Box( + Modifier.fillMaxWidth(1f - 2f * extraPadding), + ) { it() } } + } + content?.let { it() } if (onOkButtonClick != null || onCancelButtonClick != null) { @@ -108,7 +123,9 @@ public fun ResponsiveDialogContent( Row( Modifier .fillMaxWidth() - .padding(top = if (content != null) 12.dp else 0.dp), + .padding( + top = if (content != null || message != null) 12.dp else 0.dp, + ), horizontalArrangement = spacedBy( 4.dp, Alignment.CenterHorizontally, @@ -137,32 +154,3 @@ public fun ResponsiveDialogContent( } } } - -/** - * Surrounds a composable with padding at the start and end, expressed as a percentage of the - * available width. - * - * @param paddingPct how much padding to add to each side, expressed as a percentage. - * @param basePaddingPct how much padding has already being applied (expressed as a percentage). - * This is used to simplify calculations when multiple nested padding need to be applied. - * @param content the content to show inside the padding. - */ -@ExperimentalHorologistApi -@Composable -internal fun SidePaddingExtraPct( - paddingPct: Float, - modifier: Modifier = Modifier, - basePaddingPct: Float = 5.2f, - content: @Composable () -> Unit, -) { - val extraPadding = paddingPct / (100f - 2 * basePaddingPct) - Row( - modifier.fillMaxWidth(), - ) { - Spacer(Modifier.weight(extraPadding)) - Box(Modifier.weight(1f - 2 * extraPadding)) { - content() - } - Spacer(Modifier.weight(extraPadding)) - } -} diff --git a/sample/src/test/kotlin/com/google/android/horologist/screensizes/DialogTest.kt b/sample/src/test/kotlin/com/google/android/horologist/screensizes/DialogTest.kt index fbba882fe8..0f39ed1d43 100644 --- a/sample/src/test/kotlin/com/google/android/horologist/screensizes/DialogTest.kt +++ b/sample/src/test/kotlin/com/google/android/horologist/screensizes/DialogTest.kt @@ -49,7 +49,7 @@ class DialogTest(device: Device) : ScreenSizeTest( title = "Phone app is required", onCancelButtonClick = {}, onOKButtonClick = {}, - body = "Tap the button below to install it on your phone.", + message = "Tap the button below to install it on your phone.", ) } diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png index c1746d180e..60cb6cfc17 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7c871364b500312d041ebaf12d2c4ef28aa0155e401b48c54ea8ed8815af7331 -size 28878 +oid sha256:e779533a70080d58f61e54c02efb9c21a229496b86d768c2466cca9ad6e57981 +size 29475 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png index 507224be3f..c06e8e96c4 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d4d2544056efcb94403d9250a7e131c575c189cc4b625ccf73a9c09c924da501 -size 30788 +oid sha256:ed9e96314a8828cea62f62d2a74c743b8b761b69dd287b1e511f3df2e960a2ed +size 31329 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png index 67e08086ba..3eea67a016 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a3e84765b92b9350795741c9a64178fb8ca872d2b0206dbc324288b21112909b -size 28568 +oid sha256:0882c441595494a4adf2bcf5d68695ed79cd99a1cf122ebf140df2a9b1056dd7 +size 28947 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[6]_smalldevicebigfonts.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[6]_smalldevicebigfonts.png index c247a249cf..d7efac10ac 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[6]_smalldevicebigfonts.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[6]_smalldevicebigfonts.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3bedf514b10f324c7ab176f76f1915fb59d98dd1c6f53060ce432c68c20f445f -size 27158 +oid sha256:097ae3ceabee31d8bcf237ca1a3e8fa335510719b0cbf07b5d56ceb37afddc78 +size 27784 diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png index da03c2e469..1e46d5d9d5 100644 --- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png +++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:224de957846fa1bca99d5a2b612c0ca45f89ca349423f763d0585895e300b386 -size 28395 +oid sha256:618b6e9a916325c1f9a4128a3dde301a76233266115e762b0a73a089cb5e18c8 +size 28680