design: PreferenceDropdown now uses DropdownMenu

This commit is contained in:
ganfra 2025-11-05 10:21:09 +01:00
parent fb1e83fdf9
commit 849dfa4a5e

View file

@ -10,14 +10,10 @@
package io.element.android.libraries.designsystem.components.preferences package io.element.android.libraries.designsystem.components.preferences
import androidx.annotation.DrawableRes import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExposedDropdownMenuBox
import androidx.compose.material3.ExposedDropdownMenuDefaults
import androidx.compose.material3.MenuAnchorType import androidx.compose.material3.MenuAnchorType
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
@ -35,6 +31,7 @@ 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.components.preferences.components.preferenceIcon
import io.element.android.libraries.designsystem.preview.ElementThemedPreview import io.element.android.libraries.designsystem.preview.ElementThemedPreview
import io.element.android.libraries.designsystem.preview.PreviewGroup 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.DropdownMenuItem
import io.element.android.libraries.designsystem.theme.components.Icon 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.ListItem
@ -118,27 +115,25 @@ private fun <T : DropdownOption> DropdownTrailingContent(
onSelectOption: (T) -> Unit, onSelectOption: (T) -> Unit,
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
ExposedDropdownMenuBox( Row(
expanded = expanded,
onExpandedChange = onExpandedChange,
modifier = modifier, modifier = modifier,
verticalAlignment = Alignment.CenterVertically,
) { ) {
Row( Text(
modifier = Modifier.menuAnchor(MenuAnchorType.PrimaryNotEditable), text = selectedOption?.getText().orEmpty(),
verticalAlignment = Alignment.CenterVertically, maxLines = 1,
) { style = ElementTheme.typography.fontBodyMdRegular,
Text( color = ElementTheme.colors.textSecondary,
text = selectedOption?.getText().orEmpty(), )
maxLines = 1, Icon(
style = ElementTheme.typography.fontBodyMdRegular, imageVector = CompoundIcons.ChevronDown(),
color = ElementTheme.colors.textSecondary, contentDescription = null,
) tint = ElementTheme.colors.iconSecondary,
ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) )
} DropdownMenu(
ExposedDropdownMenu(
expanded = expanded, expanded = expanded,
minWidth = 0.dp,
onDismissRequest = { onExpandedChange(false) }, onDismissRequest = { onExpandedChange(false) },
matchTextFieldWidth = false,
) { ) {
options.forEach { option -> options.forEach { option ->
DropdownMenuItem( DropdownMenuItem(
@ -149,11 +144,11 @@ private fun <T : DropdownOption> DropdownTrailingContent(
) )
}, },
trailingIcon = { trailingIcon = {
if(option == selectedOption){ if (option == selectedOption) {
Icon( Icon(
imageVector = CompoundIcons.Check(), imageVector = CompoundIcons.Check(),
contentDescription = null, contentDescription = null,
tint = ElementTheme.colors.iconSuccessPrimary, tint = ElementTheme.colors.iconAccentPrimary,
) )
} }
}, },