Merge pull request #1726 from vector-im/feature/bma/improveDialogApi

Improve dialog api

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ErrorDialog.kt

@@ -32,17 +32,17 @@ import io.element.android.libraries.ui.strings.CommonStrings
 @Composable
 fun ErrorDialog(
     content: String,
+    onDismiss: () -> Unit,
     modifier: Modifier = Modifier,
     title: String = ErrorDialogDefaults.title,
     submitText: String = ErrorDialogDefaults.submitText,
-    onDismiss: () -> Unit = {},
 ) {
     AlertDialog(modifier = modifier, onDismissRequest = onDismiss) {
         ErrorDialogContent(
             title = title,
             content = content,
             submitText = submitText,
-            onSubmitText = onDismiss,
+            onSubmitClicked = onDismiss,
         )
     }
 }
@@ -50,17 +50,17 @@ fun ErrorDialog(
 @Composable
 private fun ErrorDialogContent(
     content: String,
+    onSubmitClicked: () -> Unit,
     modifier: Modifier = Modifier,
     title: String = ErrorDialogDefaults.title,
     submitText: String = ErrorDialogDefaults.submitText,
-    onSubmitText: () -> Unit = {},
 ) {
     SimpleAlertDialogContent(
         modifier = modifier,
         title = title,
         content = content,
-        cancelText = submitText,
+        submitText = submitText,
-        onCancelClicked = onSubmitText,
+        onSubmitClicked = onSubmitClicked,
     )
 }
 
@@ -76,6 +76,7 @@ internal fun ErrorDialogPreview() {
         DialogPreview {
             ErrorDialogContent(
                 content = "Content",
+                onSubmitClicked = {},
             )
         }
     }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/ListDialog.kt

@@ -38,8 +38,8 @@ import io.element.android.libraries.ui.strings.CommonStrings
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun ListDialog(
-    onDismissRequest: () -> Unit,
     onSubmit: () -> Unit,
+    onDismissRequest: () -> Unit,
     modifier: Modifier = Modifier,
     title: String? = null,
     subtitle: String? = null,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/dialogs/SingleSelectionDialog.kt

@@ -77,8 +77,8 @@ fun SingleSelectionDialog(
 private fun SingleSelectionDialogContent(
     options: ImmutableList<ListOption>,
     onOptionSelected: (Int) -> Unit,
-    onDismissRequest: () -> Unit,
     dismissButtonTitle: String,
+    onDismissRequest: () -> Unit,
     modifier: Modifier = Modifier,
     title: String? = null,
     initialSelection: Int? = null,
@@ -88,8 +88,8 @@ private fun SingleSelectionDialogContent(
         title = title,
         subtitle = subtitle,
         modifier = modifier,
-        cancelText = dismissButtonTitle,
+        submitText = dismissButtonTitle,
-        onCancelClicked = onDismissRequest,
+        onSubmitClicked = onDismissRequest,
         applyPaddingToContents = false,
     ) {
         LazyColumn {

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/AlertDialogContent.kt

@@ -53,51 +53,51 @@ import kotlin.math.max
 @Composable
 internal fun SimpleAlertDialogContent(
     content: String,
-    cancelText: String,
+    submitText: String,
-    onCancelClicked: () -> Unit,
+    onSubmitClicked: () -> Unit,
     modifier: Modifier = Modifier,
     title: String? = null,
     subtitle: @Composable (() -> Unit)? = null,
-    submitText: String? = null,
     destructiveSubmit: Boolean = false,
-    onSubmitClicked: () -> Unit = {},
+    cancelText: String? = null,
+    onCancelClicked: () -> Unit = {},
     thirdButtonText: String? = null,
     onThirdButtonClicked: () -> Unit = {},
     applyPaddingToContents: Boolean = true,
     icon: @Composable (() -> Unit)? = null,
 ) {
     SimpleAlertDialogContent(
+        modifier = modifier,
+        icon = icon,
+        title = title,
+        subtitle = subtitle,
         content = {
             Text(
                 text = content,
                 style = ElementTheme.materialTypography.bodyMedium,
             )
         },
-        cancelText = cancelText,
-        onCancelClicked = onCancelClicked,
-        modifier = modifier,
-        title = title,
-        subtitle = subtitle,
         submitText = submitText,
         destructiveSubmit = destructiveSubmit,
         onSubmitClicked = onSubmitClicked,
+        cancelText = cancelText,
+        onCancelClicked = onCancelClicked,
         thirdButtonText = thirdButtonText,
         onThirdButtonClicked = onThirdButtonClicked,
-        icon = icon,
         applyPaddingToContents = applyPaddingToContents,
     )
 }
 
 @Composable
 internal fun SimpleAlertDialogContent(
-    cancelText: String,
+    submitText: String,
-    onCancelClicked: () -> Unit,
+    onSubmitClicked: () -> Unit,
     modifier: Modifier = Modifier,
     title: String? = null,
     subtitle: @Composable (() -> Unit)? = null,
-    submitText: String? = null,
     destructiveSubmit: Boolean = false,
-    onSubmitClicked: () -> Unit = {},
+    cancelText: String? = null,
+    onCancelClicked: () -> Unit = {},
     thirdButtonText: String? = null,
     onThirdButtonClicked: () -> Unit = {},
     applyPaddingToContents: Boolean = true,
@@ -121,15 +121,13 @@ internal fun SimpleAlertDialogContent(
                         onClick = onThirdButtonClicked,
                     )
                 }
-                TextButton(
+                if (cancelText != null) {
-                    modifier = Modifier.testTag(
+                    TextButton(
-                        if (submitText == null) TestTags.dialogPositive else TestTags.dialogNegative
+                        modifier = Modifier.testTag(TestTags.dialogNegative),
-                    ),
+                        text = cancelText,
-                    text = cancelText,
+                        size = ButtonSize.Medium,
-                    size = ButtonSize.Medium,
+                        onClick = onCancelClicked,
-                    onClick = onCancelClicked,
+                    )
-                )
-                if (submitText != null) {
                     Button(
                         modifier = Modifier.testTag(TestTags.dialogPositive),
                         text = submitText,
@@ -138,6 +136,15 @@ internal fun SimpleAlertDialogContent(
                         onClick = onSubmitClicked,
                         destructive = destructiveSubmit,
                     )
+                } else {
+                    TextButton(
+                        modifier = Modifier.testTag(TestTags.dialogPositive),
+                        text = submitText,
+                        enabled = enabled,
+                        size = ButtonSize.Medium,
+                        onClick = onSubmitClicked,
+                        destructive = destructiveSubmit,
+                    )
                 }
             }
         },
@@ -438,8 +445,8 @@ internal fun DialogWithTitleIconAndOkButtonPreview() {
                 },
                 title = "Dialog Title",
                 content = "A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made. Learn more",
-                cancelText = "OK",
+                submitText = "OK",
-                onCancelClicked = {},
+                onSubmitClicked = {},
             )
         }
     }
@@ -454,8 +461,8 @@ internal fun DialogWithTitleAndOkButtonPreview() {
             SimpleAlertDialogContent(
                 title = "Dialog Title",
                 content = "A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made. Learn more",
-                cancelText = "OK",
+                submitText = "OK",
-                onCancelClicked = {},
+                onSubmitClicked = {},
             )
         }
     }
@@ -469,8 +476,8 @@ internal fun DialogWithOnlyMessageAndOkButtonPreview() {
         DialogPreview {
             SimpleAlertDialogContent(
                 content = "A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made. Learn more",
-                cancelText = "OK",
+                submitText = "OK",
-                onCancelClicked = {},
+                onSubmitClicked = {},
             )
         }
     }
@@ -478,7 +485,6 @@ internal fun DialogWithOnlyMessageAndOkButtonPreview() {
 
 @Preview(group = PreviewGroup.Dialogs, name = "Dialog with destructive button")
 @Composable
-@Suppress("MaxLineLength")
 internal fun DialogWithDestructiveButtonPreview() {
     ElementThemedPreview(showBackground = false) {
         DialogPreview {
@@ -488,7 +494,24 @@ internal fun DialogWithDestructiveButtonPreview() {
                 cancelText = "Cancel",
                 submitText = "Delete",
                 destructiveSubmit = true,
-                onCancelClicked = {},
+                onSubmitClicked = {},
+            )
+        }
+    }
+}
+
+@Preview(group = PreviewGroup.Dialogs, name = "Dialog with third button")
+@Composable
+internal fun DialogWithThirdButtonPreview() {
+    ElementThemedPreview(showBackground = false) {
+        DialogPreview {
+            SimpleAlertDialogContent(
+                title = "Dialog Title",
+                content = "A dialog with a third button",
+                cancelText = "Cancel",
+                submitText = "Delete",
+                thirdButtonText = "Other",
+                onSubmitClicked = {},
             )
         }
     }

tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.theme.components_null_Dialogs_Dialogwiththirdbutton_0_null,NEXUS_5,1.0,en].png

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e465788d3307cc42d3f1c322d926e9088994c6b7a5cd338a74dd95a8dfe2977a
+size 31190