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.
google · Jan 24, 2024 · 063cbc4 · 063cbc4
1 parent ca3afe0
commit 063cbc4
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 72 deletions.
diff --git 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/...erial/src/debug/java/com/google/android/horologist/compose/material/AlertDialogPreview.kt b/...erial/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
@@ -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/...material/src/main/java/com/google/android/horologist/compose/material/ResponsiveDialog.kt b/...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,28 +88,44 @@ 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) {
                     item {
                         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
@@ -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/....android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png b/....android.horologist.screensizes_DialogTest_screenshot[0]_mobvoiticwatchpro5.png
diff --git a/...id.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png b/...id.horologist.screensizes_DialogTest_screenshot[2]_samsunggalaxywatch6large.png
diff --git a/...e.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png b/...e.android.horologist.screensizes_DialogTest_screenshot[5]_genericlargeround.png
diff --git a/...android.horologist.screensizes_DialogTest_screenshot[6]_smalldevicebigfonts.png b/...android.horologist.screensizes_DialogTest_screenshot[6]_smalldevicebigfonts.png
diff --git a/...droid.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png b/...droid.horologist.screensizes_DialogTest_screenshot[7]_largedevicesmallfonts.png