[Compound] Implement DropdownMenu customisations. (#1050)

* Compound: implement `DropdownMenu` customisations.

* Update screenshots

* Add changelog

* Address review comments

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

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

@@ -26,7 +26,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.PopupProperties
 import io.element.android.libraries.theme.ElementTheme
 
-private val minMenuWidth = 200.dp
+// Figma designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=1032%3A44063&mode=design&t=rsNegTbEVLYAXL76-1
 
 @Composable
 fun DropdownMenu(
@@ -38,19 +38,17 @@ fun DropdownMenu(
     properties: PopupProperties = PopupProperties(focusable = true),
     content: @Composable ColumnScope.() -> Unit
 ) {
-    val bgColor = if (ElementTheme.isLightTheme) {
-        ElementTheme.materialColors.background
-    } else {
-        ElementTheme.colors.bgSubtlePrimary
-    }
+    // 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 = bgColor)
+            .background(color = ElementTheme.colors.bgCanvasDefault)
             .widthIn(min = minMenuWidth),
         offset = offset,
         properties = properties,
         content = content
     )
 }
+
+private val minMenuWidth = 200.dp

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

@@ -17,20 +17,26 @@
 package io.element.android.libraries.designsystem.theme.components
 
 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowRight
 import androidx.compose.material.icons.filled.BugReport
-import androidx.compose.material.icons.filled.Share
+import androidx.compose.material3.LocalTextStyle
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.MenuDefaults
-import androidx.compose.material3.MenuItemColors
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
 import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.theme.ElementTheme
 
+// Figma designs: https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?type=design&node-id=1032%3A44063&mode=design&t=rsNegTbEVLYAXL76-1
+
 @Composable
 fun DropdownMenuItem(
     text: @Composable () -> Unit,
@@ -39,34 +45,37 @@ fun DropdownMenuItem(
     leadingIcon: @Composable (() -> Unit)? = null,
     trailingIcon: @Composable (() -> Unit)? = null,
     enabled: Boolean = true,
-    colors: MenuItemColors = MenuDefaults.itemColors(),
-    contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
 ) {
     androidx.compose.material3.DropdownMenuItem(
-        text = text,
+        text = {
+            CompositionLocalProvider(LocalTextStyle provides MaterialTheme.typography.bodyLarge) {
+                text()
+            }
+        },
         onClick = onClick,
         modifier = modifier,
         leadingIcon = leadingIcon,
         trailingIcon = trailingIcon,
         enabled = enabled,
-        colors = colors,
-        contentPadding = contentPadding,
+        colors = DropDownMenuItemDefaults.colors(),
+        contentPadding = DropDownMenuItemDefaults.contentPadding,
         interactionSource = interactionSource
     )
 }
 
-@Composable
-fun DropdownMenuItemText(
-    text: String,
-    modifier: Modifier = Modifier,
-) {
-    Text(
-        text = text,
-        color = ElementTheme.materialColors.primary,
-        style = ElementTheme.typography.fontBodyLgRegular,
-        modifier = modifier,
+internal object DropDownMenuItemDefaults {
+    @Composable
+    fun colors() = MenuDefaults.itemColors(
+        textColor = ElementTheme.colors.textPrimary,
+        leadingIconColor = ElementTheme.colors.iconPrimary,
+        trailingIconColor = ElementTheme.colors.iconSecondary,
+        disabledTextColor = ElementTheme.colors.textDisabled,
+        disabledLeadingIconColor = ElementTheme.colors.iconDisabled,
+        disabledTrailingIconColor = ElementTheme.colors.iconDisabled,
     )
+
+    val contentPadding = PaddingValues(all = 12.dp)
 }
 
 @Preview(group = PreviewGroup.Menus)
@@ -75,10 +84,36 @@ internal fun DropdownMenuItemPreview() = ElementThemedPreview { ContentToPreview
 
 @Composable
 private fun ContentToPreview() {
-    DropdownMenuItem(
-        text = { DropdownMenuItemText(text = "Item") },
-        onClick = {},
-        leadingIcon = { Icon(Icons.Default.BugReport, contentDescription = null) },
-        trailingIcon = { Icon(Icons.Default.Share, contentDescription = null) },
-    )
+    Column {
+        DropdownMenuItem(
+            text = { Text(text = "Item") },
+            onClick = {},
+            trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
+        )
+        Divider()
+        DropdownMenuItem(
+            text = { Text(text = "Item") },
+            onClick = {},
+            leadingIcon = { Icon(Icons.Default.BugReport, contentDescription = null) },
+        )
+        DropdownMenuItem(
+            text = { Text(text = "Item") },
+            onClick = {},
+            leadingIcon = { Icon(Icons.Default.BugReport, contentDescription = null) },
+            trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
+        )
+        DropdownMenuItem(
+            text = { Text(text = "Item") },
+            onClick = {},
+            enabled = false,
+            leadingIcon = { Icon(Icons.Default.BugReport, contentDescription = null) },
+            trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
+        )
+        Divider()
+        DropdownMenuItem(
+            text = { Text(text = "Multiline\nItem") },
+            onClick = {},
+            trailingIcon = { Icon(Icons.Default.ArrowRight, contentDescription = null) },
+        )
+    }
 }

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

@@ -30,8 +30,8 @@ import io.element.android.libraries.designsystem.preview.PreviewGroup
 import io.element.android.libraries.designsystem.theme.components.Button
 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.DropdownMenuItemText
 import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.Text
 
 @Preview(group = PreviewGroup.Menus)
 @Composable
@@ -57,7 +57,7 @@ internal fun MenuPreview() {
                     null
                 }
                 DropdownMenuItem(
-                    text = { DropdownMenuItemText(text = "Item $i") },
+                    text = { Text(text = "Item $i") },
                     onClick = { isExpanded = false },
                     leadingIcon = leadingIcon,
                     trailingIcon = trailingIcon,