Merge branch 'develop' into kaylendog/history-sharing/alert

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

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.libraries.designsystem.components.dialogs
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.ui.strings.CommonStrings
+
+@Composable
+fun SaveChangesDialog(
+    onSubmitClick: () -> Unit,
+    onDismiss: () -> Unit,
+    modifier: Modifier = Modifier,
+    title: String = stringResource(CommonStrings.dialog_unsaved_changes_title),
+    content: String = stringResource(CommonStrings.dialog_unsaved_changes_description_android),
+) = ConfirmationDialog(
+    modifier = modifier,
+    title = title,
+    content = content,
+    onSubmitClick = onSubmitClick,
+    onDismiss = onDismiss,
+)
+
+@PreviewsDayNight
+@Composable
+internal fun SaveChangesDialogPreview() = ElementPreview {
+    SaveChangesDialog(
+        onSubmitClick = {},
+        onDismiss = {}
+    )
+}

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/preferences/PreferenceDropdown.kt

@@ -10,13 +10,12 @@
 package io.element.android.libraries.designsystem.components.preferences
 
 import androidx.annotation.DrawableRes
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.ExposedDropdownMenuBox
-import androidx.compose.material3.ExposedDropdownMenuDefaults
-import androidx.compose.material3.MenuAnchorType
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -25,14 +24,19 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.components.preferences.components.preferenceIcon
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
+import io.element.android.libraries.designsystem.theme.components.DropdownMenu
 import io.element.android.libraries.designsystem.theme.components.DropdownMenuItem
+import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.ListItem
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.toEnabledColor
@@ -87,6 +91,7 @@ fun <T : DropdownOption> PreferenceDropdown(
                     onSelectOption = onSelectOption,
                     expanded = isDropdownExpanded,
                     onExpandedChange = { isDropdownExpanded = it },
+                    modifier = Modifier.fillMaxSize(0.3f)
                 )
             }
         ),
@@ -114,27 +119,29 @@ private fun <T : DropdownOption> DropdownTrailingContent(
     onSelectOption: (T) -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    ExposedDropdownMenuBox(
-        expanded = expanded,
-        onExpandedChange = onExpandedChange,
+    Row(
         modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.End,
     ) {
-        Row(
-            modifier = Modifier.menuAnchor(MenuAnchorType.PrimaryNotEditable),
-            verticalAlignment = Alignment.CenterVertically,
-        ) {
-            Text(
-                text = selectedOption?.getText().orEmpty(),
-                maxLines = 1,
-                style = ElementTheme.typography.fontBodyMdRegular,
-                color = ElementTheme.colors.textSecondary,
-            )
-            ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
-        }
-        ExposedDropdownMenu(
+        Text(
+            text = selectedOption?.getText().orEmpty(),
+            maxLines = 1,
+            style = ElementTheme.typography.fontBodyMdRegular,
+            color = ElementTheme.colors.textSecondary,
+            overflow = TextOverflow.Ellipsis,
+            textAlign = TextAlign.End,
+            modifier = Modifier.weight(1f),
+        )
+        Icon(
+            imageVector = CompoundIcons.ChevronDown(),
+            contentDescription = null,
+            tint = ElementTheme.colors.iconSecondary,
+        )
+        DropdownMenu(
             expanded = expanded,
+            minWidth = 0.dp,
             onDismissRequest = { onExpandedChange(false) },
-            matchTextFieldWidth = false,
         ) {
             options.forEach { option ->
                 DropdownMenuItem(
@@ -144,6 +151,15 @@ private fun <T : DropdownOption> DropdownTrailingContent(
                             style = ElementTheme.typography.fontBodyMdRegular
                         )
                     },
+                    trailingIcon = {
+                        if (option == selectedOption) {
+                            Icon(
+                                imageVector = CompoundIcons.Check(),
+                                contentDescription = null,
+                                tint = ElementTheme.colors.iconAccentPrimary,
+                            )
+                        }
+                    },
                     onClick = {
                         onSelectOption(option)
                         onExpandedChange(false)

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

@@ -10,8 +10,10 @@ package io.element.android.libraries.designsystem.theme.components
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.PopupProperties
@@ -24,22 +26,24 @@ fun DropdownMenu(
     expanded: Boolean,
     onDismissRequest: () -> Unit,
     modifier: Modifier = Modifier,
-    // By default add a 16.dp offset to the menu
-    offset: DpOffset = DpOffset(x = 16.dp, y = 0.dp),
+    offset: DpOffset = DpOffset(x = 0.dp, y = 0.dp),
     properties: PopupProperties = PopupProperties(focusable = true),
+    minWidth: Dp = DropdownMenuDefaults.minWidth,
     content: @Composable ColumnScope.() -> Unit
 ) {
-    // Note: the internal shape corner radius should be 8dp, but there is a 4p value hardcoded in the internal Surface component
     androidx.compose.material3.DropdownMenu(
         expanded = expanded,
         onDismissRequest = onDismissRequest,
         modifier = modifier
-            .background(color = ElementTheme.colors.bgCanvasDefault)
-            .widthIn(min = minMenuWidth),
+            .background(color = ElementTheme.colors.bgCanvasDefaultLevel1)
+            .widthIn(min = minWidth),
+        shape = RoundedCornerShape(8.dp),
         offset = offset,
         properties = properties,
         content = content
     )
 }
 
-private val minMenuWidth = 200.dp
+object DropdownMenuDefaults {
+    val minWidth = 200.dp
+}