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