Bug 1828698 - Refactor `DropdownMenu` into a use case Composable

app/src/main/java/org/mozilla/fenix/compose/Menu.kt

@@ -5,7 +5,9 @@
 package org.mozilla.fenix.compose
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.DropdownMenuItem
@@ -13,6 +15,10 @@ import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -21,21 +27,24 @@ import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.dp
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
+import org.mozilla.fenix.compose.button.PrimaryButton
 import org.mozilla.fenix.theme.FirefoxTheme
 
 /**
- * Popup action dropdown menu.
+ * Root popup action dropdown menu.
  *
  * @param menuItems List of items to be displayed in the menu.
  * @param showMenu Whether or not the menu is currently displayed to the user.
+ * @param cornerShape Shape to apply to the corners of the dropdown.
  * @param onDismissRequest Invoked when user dismisses the menu or on orientation changes.
  * @param modifier Modifier to be applied to the menu.
  * @param offset Offset to be added to the position of the menu.
  */
 @Composable
-fun DropdownMenu(
+private fun Menu(
     menuItems: List<MenuItem>,
     showMenu: Boolean,
+    cornerShape: RoundedCornerShape,
     onDismissRequest: () -> Unit,
     modifier: Modifier = Modifier,
     offset: DpOffset = DpOffset.Zero,
@@ -44,10 +53,10 @@ fun DropdownMenu(
         onDispose { onDismissRequest() }
     }
 
-    MaterialTheme(shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(2.dp))) {
+    MaterialTheme(shapes = MaterialTheme.shapes.copy(medium = cornerShape)) {
         DropdownMenu(
             expanded = showMenu && menuItems.isNotEmpty(),
-            onDismissRequest = { onDismissRequest() },
+            onDismissRequest = onDismissRequest,
             offset = offset,
             modifier = Modifier
                 .background(color = FirefoxTheme.colors.layer2)
@@ -76,6 +85,33 @@ fun DropdownMenu(
     }
 }
 
+/**
+ * Dropdown menu for presenting context-specific actions.
+ *
+ * @param menuItems List of items to be displayed in the menu.
+ * @param showMenu Whether or not the menu is currently displayed to the user.
+ * @param onDismissRequest Invoked when user dismisses the menu or on orientation changes.
+ * @param modifier Modifier to be applied to the menu.
+ * @param offset Offset to be added to the position of the menu.
+ */
+@Composable
+fun ContextualMenu(
+    menuItems: List<MenuItem>,
+    showMenu: Boolean,
+    onDismissRequest: () -> Unit,
+    modifier: Modifier = Modifier,
+    offset: DpOffset = DpOffset.Zero,
+) {
+    Menu(
+        menuItems = menuItems,
+        showMenu = showMenu,
+        cornerShape = RoundedCornerShape(size = 5.dp),
+        onDismissRequest = onDismissRequest,
+        modifier = modifier,
+        offset = offset,
+    )
+}
+
 /**
  * Represents a text item from the dropdown menu.
  *
@@ -93,16 +129,23 @@ data class MenuItem(
 
 @LightDarkPreview
 @Composable
-private fun DropdownMenuPreview() {
+private fun ContextualMenuPreview() {
+    var showMenu by remember { mutableStateOf(false) }
     FirefoxTheme {
-        DropdownMenu(
-            listOf(
-                MenuItem("Rename") {},
-                MenuItem("Share") {},
-                MenuItem("Remove", FirefoxTheme.colors.textWarning) {},
-            ),
-            true,
-            {},
-        )
+        Box(modifier = Modifier.size(400.dp)) {
+            PrimaryButton(text = "Show menu") {
+                showMenu = true
+            }
+
+            ContextualMenu(
+                menuItems = listOf(
+                    MenuItem("Rename") {},
+                    MenuItem("Share") {},
+                    MenuItem("Remove") {},
+                ),
+                showMenu = showMenu,
+                onDismissRequest = { showMenu = false },
+            )
+        }
     }
 }

app/src/main/java/org/mozilla/fenix/home/collections/Collection.kt

@@ -38,7 +38,7 @@ import mozilla.components.feature.tab.collections.TabCollection
 import org.mozilla.fenix.R
 import org.mozilla.fenix.R.drawable
 import org.mozilla.fenix.R.string
-import org.mozilla.fenix.compose.DropdownMenu
+import org.mozilla.fenix.compose.ContextualMenu
 import org.mozilla.fenix.compose.MenuItem
 import org.mozilla.fenix.compose.list.ExpandableListHeader
 import org.mozilla.fenix.ext.getIconColor
@@ -141,7 +141,7 @@ fun Collection(
                                 tint = FirefoxTheme.colors.iconPrimary,
                             )
 
-                            DropdownMenu(
+                            ContextualMenu(
                                 showMenu = isMenuExpanded,
                                 menuItems = menuItems,
                                 onDismissRequest = { isMenuExpanded = false },

app/src/main/java/org/mozilla/fenix/home/recentbookmarks/view/RecentBookmarks.kt

@@ -45,7 +45,7 @@ import mozilla.components.browser.icons.compose.Placeholder
 import mozilla.components.browser.icons.compose.WithIcon
 import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.components.components
-import org.mozilla.fenix.compose.DropdownMenu
+import org.mozilla.fenix.compose.ContextualMenu
 import org.mozilla.fenix.compose.Image
 import org.mozilla.fenix.compose.MenuItem
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
@@ -150,7 +150,7 @@ private fun RecentBookmarkItem(
                 style = FirefoxTheme.typography.caption,
             )
 
-            DropdownMenu(
+            ContextualMenu(
                 showMenu = isMenuExpanded,
                 onDismissRequest = { isMenuExpanded = false },
                 menuItems = menuItems.map { item -> MenuItem(item.title) { item.onClick(bookmark) } },

app/src/main/java/org/mozilla/fenix/home/recentsyncedtabs/view/RecentSyncedTab.kt

@@ -42,7 +42,7 @@ import androidx.compose.ui.unit.sp
 import mozilla.components.concept.sync.DeviceType
 import mozilla.components.support.ktx.kotlin.trimmed
 import org.mozilla.fenix.R
-import org.mozilla.fenix.compose.DropdownMenu
+import org.mozilla.fenix.compose.ContextualMenu
 import org.mozilla.fenix.compose.Image
 import org.mozilla.fenix.compose.MenuItem
 import org.mozilla.fenix.compose.ThumbnailCard
@@ -182,7 +182,7 @@ fun RecentSyncedTab(
         }
     }
 
-    DropdownMenu(
+    ContextualMenu(
         showMenu = isDropdownExpanded && tab != null,
         onDismissRequest = { isDropdownExpanded = false },
         menuItems = listOf(

app/src/main/java/org/mozilla/fenix/home/recenttabs/view/RecentTabs.kt

@@ -53,7 +53,7 @@ import mozilla.components.browser.state.state.TabSessionState
 import mozilla.components.support.ktx.kotlin.trimmed
 import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.components.components
-import org.mozilla.fenix.compose.DropdownMenu
+import org.mozilla.fenix.compose.ContextualMenu
 import org.mozilla.fenix.compose.Image
 import org.mozilla.fenix.compose.MenuItem
 import org.mozilla.fenix.compose.ThumbnailCard
@@ -191,7 +191,7 @@ private fun RecentTabItem(
                 }
             }
 
-            DropdownMenu(
+            ContextualMenu(
                 showMenu = isMenuExpanded,
                 onDismissRequest = { isMenuExpanded = false },
                 menuItems = menuItems.map { item -> MenuItem(item.title) { item.onClick(tab) } },

app/src/main/java/org/mozilla/fenix/home/recentvisits/view/RecentlyVisited.kt

@@ -46,8 +46,8 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import mozilla.components.support.ktx.kotlin.trimmed
 import org.mozilla.fenix.R
+import org.mozilla.fenix.compose.ContextualMenu
 import org.mozilla.fenix.compose.Divider
-import org.mozilla.fenix.compose.DropdownMenu
 import org.mozilla.fenix.compose.EagerFlingBehavior
 import org.mozilla.fenix.compose.Favicon
 import org.mozilla.fenix.compose.MenuItem
@@ -202,7 +202,7 @@ private fun RecentlyVisitedHistoryGroup(
             }
         }
 
-        DropdownMenu(
+        ContextualMenu(
             showMenu = isMenuExpanded,
             onDismissRequest = { isMenuExpanded = false },
             menuItems = menuItems.map { MenuItem(it.title) { it.onClick(recentVisit) } },
@@ -271,7 +271,7 @@ private fun RecentlyVisitedHistoryHighlight(
             }
         }
 
-        DropdownMenu(
+        ContextualMenu(
             showMenu = isMenuExpanded,
             onDismissRequest = { isMenuExpanded = false },
             menuItems = menuItems.map { item -> MenuItem(item.title) { item.onClick(recentVisit) } },

app/src/main/java/org/mozilla/fenix/tabstray/TabsTrayBanner.kt

@@ -48,7 +48,7 @@ import mozilla.components.browser.state.state.TabSessionState
 import mozilla.components.lib.state.ext.observeAsComposableState
 import mozilla.components.ui.tabcounter.TabCounter
 import org.mozilla.fenix.R
-import org.mozilla.fenix.compose.DropdownMenu
+import org.mozilla.fenix.compose.ContextualMenu
 import org.mozilla.fenix.compose.MenuItem
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
 import org.mozilla.fenix.theme.FirefoxTheme
@@ -226,7 +226,7 @@ private fun SingleSelectBanner(
                     .align(Alignment.CenterVertically)
                     .testTag(TabsTrayTestTag.threeDotButton),
             ) {
-                DropdownMenu(
+                ContextualMenu(
                     menuItems = generateSingleSelectBannerMenuItems(
                         selectedPage,
                         normalTabCount,
@@ -457,7 +457,7 @@ private fun MultiSelectBanner(
                 tint = FirefoxTheme.colors.iconOnColor,
             )
 
-            DropdownMenu(
+            ContextualMenu(
                 menuItems = menuItems,
                 showMenu = showMenu,
                 offset = DpOffset(x = 0.dp, y = -ICON_SIZE),