Expect androidx.compose.material.AlertDialog in common (#708)

* Expect AlertDialog in common * Remove experimental desktop-only AlertDialog * Update DesktopAlertDialogTest * Configure skikoMain * Add AlertDialogWindow instead of UndecoratedWindowAlertDialogProvider * Update comment * Update button size in run3 app * Revert AlertDialogWindow
JetBrains · Aug 10, 2023 · 0bb1c8e · 0bb1c8e
1 parent fb81567
commit 0bb1c8e
Show file tree

Hide file tree

Showing 7 changed files with 269 additions and 461 deletions.
diff --git a/...mples/src/jvmMain/kotlin/androidx/compose/desktop/examples/popupexample/AppContent.jvm.kt b/...mples/src/jvmMain/kotlin/androidx/compose/desktop/examples/popupexample/AppContent.jvm.kt
@@ -56,6 +56,7 @@ import androidx.compose.ui.awt.SwingPanel
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.IntSize
@@ -102,23 +103,23 @@ fun WindowScope.Content(
                 Row {
                     Button(
                         color = Color(210, 210, 210),
-                        size = IntSize(16, 16),
+                        modifier = Modifier.size(16.dp, 16.dp),
                         onClick = {
                             windowState.placement = WindowPlacement.Fullscreen
                         }
                     )
                     Spacer(modifier = Modifier.width(3.dp))
                     Button(
                         color = Color(232, 182, 109),
-                        size = IntSize(16, 16),
+                        modifier = Modifier.size(16.dp, 16.dp),
                         onClick = {
                             windowState.isMinimized = true
                         }
                     )
                     Spacer(modifier = Modifier.width(3.dp))
                     Button(
                         color = Color(150, 232, 150),
-                        size = IntSize(16, 16),
+                        modifier = Modifier.size(16.dp, 16.dp),
                         onClick = {
                             windowState.placement = WindowPlacement.Maximized
                         }
@@ -127,12 +128,12 @@ fun WindowScope.Content(
                     Button(
                         onClick = AppState::closeMainWindow,
                         color = Color(232, 100, 100),
-                        size = IntSize(16, 16)
+                        modifier = Modifier.size(16.dp, 16.dp),
                     )
                 }
             }
             Row {
-                Column(modifier = Modifier.padding(start = 30.dp, top = 50.dp)) {
+                Column(modifier = Modifier.padding(start = 30.dp, top = 30.dp)) {
                     Button("Show Popup", { AppState.popupState.value = true }, Color(232, 182, 109))
                     Spacer(modifier = Modifier.height(30.dp))
                     Button("Open dialog", { dialogState.value = true })
@@ -358,9 +359,9 @@ fun DialogContent(modifier: Modifier = Modifier, amount: MutableState<Int>, onCl
             TextBox(text = "Increment amount?")
             Spacer(modifier = Modifier.height(30.dp))
             Row {
-                Button(text = "Yes", onClick = { amount.value++ }, size = IntSize(100, 35))
+                Button(text = "Yes", onClick = { amount.value++ }, modifier = Modifier.width(100.dp))
                 Spacer(modifier = Modifier.width(30.dp))
-                Button(text = "Close", onClick = { onClose.invoke() }, size = IntSize(100, 35))
+                Button(text = "Close", onClick = { onClose.invoke() }, modifier = Modifier.width(100.dp))
             }
         }
     }
@@ -379,7 +380,7 @@ fun Button(
     text: String = "",
     onClick: () -> Unit = {},
     color: Color = Color(10, 162, 232),
-    size: IntSize = IntSize(200, 35)
+    modifier: Modifier = Modifier.width(200.dp)
 ) {
     @OptIn(ExperimentalFoundationApi::class)
     TooltipArea(
@@ -397,8 +398,7 @@ fun Button(
             colors = ButtonDefaults.buttonColors(
                 backgroundColor = color
             ),
-            modifier = Modifier
-                .size(size.width.dp, size.height.dp)
+            modifier = modifier
         ) {
             Text(text = text)
         }

diff --git a/compose/material/material/build.gradle b/compose/material/material/build.gradle
@@ -113,12 +113,16 @@ if(AndroidXComposePlugin.isMultiplatformEnabled(project)) {
                 implementation("androidx.lifecycle:lifecycle-runtime:2.6.0")
                 implementation("androidx.lifecycle:lifecycle-viewmodel:2.6.0")
             }
+            skikoMain {
+                dependsOn(commonMain)
+            }
 
             desktopMain.dependencies {
                 implementation(libs.kotlinStdlib)
             }
 
-            jsNativeMain.dependsOn(commonMain)
+            desktopMain.dependsOn(skikoMain)
+            jsNativeMain.dependsOn(skikoMain)
             nativeMain.dependsOn(jsNativeMain)
             jsWasmMain.dependsOn(jsNativeMain)
 

diff --git a/...l/material/src/androidMain/kotlin/androidx/compose/material/AndroidAlertDialog.android.kt b/...l/material/src/androidMain/kotlin/androidx/compose/material/AndroidAlertDialog.android.kt
@@ -61,17 +61,17 @@ import androidx.compose.ui.window.DialogProperties
  * @param properties Typically platform specific properties to further configure the dialog.
  */
 @Composable
-fun AlertDialog(
+actual fun AlertDialog(
     onDismissRequest: () -> Unit,
     confirmButton: @Composable () -> Unit,
-    modifier: Modifier = Modifier,
-    dismissButton: @Composable (() -> Unit)? = null,
-    title: @Composable (() -> Unit)? = null,
-    text: @Composable (() -> Unit)? = null,
-    shape: Shape = MaterialTheme.shapes.medium,
-    backgroundColor: Color = MaterialTheme.colors.surface,
-    contentColor: Color = contentColorFor(backgroundColor),
-    properties: DialogProperties = DialogProperties()
+    modifier: Modifier,
+    dismissButton: @Composable (() -> Unit)?,
+    title: @Composable (() -> Unit)?,
+    text: @Composable (() -> Unit)?,
+    shape: Shape,
+    backgroundColor: Color,
+    contentColor: Color,
+    properties: DialogProperties
 ) {
     AlertDialog(
         onDismissRequest = onDismissRequest,
@@ -123,16 +123,16 @@ fun AlertDialog(
  * @param properties Typically platform specific properties to further configure the dialog.
  */
 @Composable
-fun AlertDialog(
+actual fun AlertDialog(
     onDismissRequest: () -> Unit,
     buttons: @Composable () -> Unit,
-    modifier: Modifier = Modifier,
-    title: (@Composable () -> Unit)? = null,
-    text: @Composable (() -> Unit)? = null,
-    shape: Shape = MaterialTheme.shapes.medium,
-    backgroundColor: Color = MaterialTheme.colors.surface,
-    contentColor: Color = contentColorFor(backgroundColor),
-    properties: DialogProperties = DialogProperties()
+    modifier: Modifier,
+    title: (@Composable () -> Unit)?,
+    text: @Composable (() -> Unit)?,
+    shape: Shape,
+    backgroundColor: Color,
+    contentColor: Color,
+    properties: DialogProperties
 ) {
     Dialog(
         onDismissRequest = onDismissRequest,

diff --git a/compose/material/material/src/commonMain/kotlin/androidx/compose/material/AlertDialog.kt b/compose/material/material/src/commonMain/kotlin/androidx/compose/material/AlertDialog.kt
@@ -38,8 +38,94 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import androidx.compose.ui.util.fastForEachIndexed
+import androidx.compose.ui.window.DialogProperties
 import kotlin.math.max
 
+/**
+ * <a href="https://material.io/components/dialogs#alert-dialog" class="external" target="_blank">Material Design alert dialog</a>.
+ *
+ * Alert dialogs interrupt users with urgent information, details, or actions.
+ *
+ * ![Dialogs image](https://developer.android.com/images/reference/androidx/compose/material/dialogs.png)
+ *
+ * The dialog will position its buttons based on the available space. By default it will try to
+ * place them horizontally next to each other and fallback to horizontal placement if not enough
+ * space is available. There is also another version of this composable that has a slot for buttons
+ * to provide custom buttons layout.
+ *
+ * Sample of dialog:
+ * @sample androidx.compose.material.samples.AlertDialogSample
+ *
+ * @param onDismissRequest Executes when the user tries to dismiss the Dialog by clicking outside
+ * or pressing the back button. This is not called when the dismiss button is clicked.
+ * @param confirmButton A button which is meant to confirm a proposed action, thus resolving
+ * what triggered the dialog. The dialog does not set up any events for this button so they need
+ * to be set up by the caller.
+ * @param modifier Modifier to be applied to the layout of the dialog.
+ * @param dismissButton A button which is meant to dismiss the dialog. The dialog does not set up
+ * any events for this button so they need to be set up by the caller.
+ * @param title The title of the Dialog which should specify the purpose of the Dialog. The title
+ * is not mandatory, because there may be sufficient information inside the [text]. Provided text
+ * style will be [Typography.subtitle1].
+ * @param text The text which presents the details regarding the Dialog's purpose. Provided text
+ * style will be [Typography.body2].
+ * @param shape Defines the Dialog's shape
+ * @param backgroundColor The background color of the dialog.
+ * @param contentColor The preferred content color provided by this dialog to its children.
+ * @param properties Typically platform specific properties to further configure the dialog.
+ */
+@Composable
+expect fun AlertDialog(
+    onDismissRequest: () -> Unit,
+    confirmButton: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    dismissButton: @Composable (() -> Unit)? = null,
+    title: @Composable (() -> Unit)? = null,
+    text: @Composable (() -> Unit)? = null,
+    shape: Shape = MaterialTheme.shapes.medium,
+    backgroundColor: Color = MaterialTheme.colors.surface,
+    contentColor: Color = contentColorFor(backgroundColor),
+    properties: DialogProperties = DialogProperties()
+)
+
+/**
+ * <a href="https://material.io/components/dialogs#alert-dialog" class="external" target="_blank">Material Design alert dialog</a>.
+ *
+ * Alert dialogs interrupt users with urgent information, details, or actions.
+ *
+ * ![Dialogs image](https://developer.android.com/images/reference/androidx/compose/material/dialogs.png)
+ *
+ * This function can be used to fully customize the button area, e.g. with:
+ *
+ * @sample androidx.compose.material.samples.CustomAlertDialogSample
+ *
+ * @param onDismissRequest Executes when the user tries to dismiss the Dialog by clicking outside
+ * or pressing the back button. This is not called when the dismiss button is clicked.
+ * @param buttons Function that emits the layout with the buttons.
+ * @param modifier Modifier to be applied to the layout of the dialog.
+ * @param title The title of the Dialog which should specify the purpose of the Dialog. The title
+ * is not mandatory, because there may be sufficient information inside the [text]. Provided text
+ * style will be [Typography.subtitle1].
+ * @param text The text which presents the details regarding the Dialog's purpose. Provided text
+ * style will be [Typography.body2].
+ * @param shape Defines the Dialog's shape.
+ * @param backgroundColor The background color of the dialog.
+ * @param contentColor The preferred content color provided by this dialog to its children.
+ * @param properties Typically platform specific properties to further configure the dialog.
+ */
+@Composable
+expect fun AlertDialog(
+    onDismissRequest: () -> Unit,
+    buttons: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    title: (@Composable () -> Unit)? = null,
+    text: @Composable (() -> Unit)? = null,
+    shape: Shape = MaterialTheme.shapes.medium,
+    backgroundColor: Color = MaterialTheme.colors.surface,
+    contentColor: Color = contentColorFor(backgroundColor),
+    properties: DialogProperties = DialogProperties()
+)
+
 @Composable
 internal fun AlertDialogContent(
     buttons: @Composable () -> Unit,