From ac55f60eb93933a5482be87e53187be3e25269da Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Wed, 3 Apr 2024 07:50:26 +0000
Subject: [PATCH] Bug 1885580 - Add a MenuGroup component for the menu redesign
 r=android-reviewers,007

Source: https://www.figma.com/file/RFz9fYtotQCQuinwcZujZt/Menu-Redesign?type=design&node-id=10107-73271&mode=dev

Differential Revision: https://phabricator.services.mozilla.com/D206252
---
 .../fenix/components/menu/compose/MenuGroup.kt     | 75 ++++++++++++++++++++++
 .../main/java/org/mozilla/fenix/compose/Divider.kt |  5 +-
 2 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuGroup.kt

diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuGroup.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuGroup.kt
new file mode 100644
index 000000000000..d46532f2f3be
--- /dev/null
+++ b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/MenuGroup.kt
@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.components.menu.compose
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import org.mozilla.fenix.R
+import org.mozilla.fenix.compose.Divider
+import org.mozilla.fenix.compose.annotation.LightDarkPreview
+import org.mozilla.fenix.compose.list.IconListItem
+import org.mozilla.fenix.theme.FirefoxTheme
+
+private val ROUNDED_CORNER_SHAPE = RoundedCornerShape(12.dp)
+
+/**
+ * A menu group container.
+ *
+ * @param content The children composable to be laid out.
+ */
+@Composable
+internal fun MenuGroup(content: @Composable () -> Unit) {
+    Column(
+        modifier = Modifier
+            .background(
+                color = FirefoxTheme.colors.layer2,
+                shape = ROUNDED_CORNER_SHAPE,
+            )
+            .border(
+                border = BorderStroke(
+                    width = 0.5.dp,
+                    color = FirefoxTheme.colors.borderPrimary,
+                ),
+                shape = ROUNDED_CORNER_SHAPE,
+            ),
+    ) {
+        content()
+    }
+}
+
+@LightDarkPreview
+@Composable
+private fun MenuGroupPreview() {
+    FirefoxTheme {
+        Column(
+            modifier = Modifier
+                .background(color = FirefoxTheme.colors.layer3)
+                .padding(16.dp),
+        ) {
+            MenuGroup {
+                IconListItem(
+                    label = stringResource(id = R.string.browser_menu_add_to_homescreen),
+                    beforeIconPainter = painterResource(id = R.drawable.mozac_ic_plus_24),
+                )
+
+                Divider(color = FirefoxTheme.colors.borderSecondary)
+
+                IconListItem(
+                    label = stringResource(id = R.string.browser_menu_add_to_homescreen),
+                    beforeIconPainter = painterResource(id = R.drawable.mozac_ic_plus_24),
+                )
+            }
+        }
+    }
+}
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/Divider.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/Divider.kt
index 54edc84d9bfb..3fcf9902ca85 100644
--- a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/Divider.kt
+++ b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/compose/Divider.kt
@@ -15,6 +15,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import org.mozilla.fenix.compose.annotation.LightDarkPreview
 import org.mozilla.fenix.theme.FirefoxTheme
@@ -23,14 +24,16 @@ import org.mozilla.fenix.theme.FirefoxTheme
  * Generic divider.
  *
  * @param modifier [Modifier] used to be applied to the layout of the divider.
+ * @param color [Color] of the divider line.
  */
 @Composable
 fun Divider(
     modifier: Modifier = Modifier,
+    color: Color = FirefoxTheme.colors.borderPrimary,
 ) {
     androidx.compose.material.Divider(
         modifier = modifier,
-        color = FirefoxTheme.colors.borderPrimary,
+        color = color,
     )
 }
 
-- 
2.11.4.GIT