For #27459 - Add divider composable (#27544)

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

@@ -0,0 +1,108 @@
+/* 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.compose
+
+import android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import org.mozilla.fenix.theme.FirefoxTheme
+
+/**
+ * Generic divider.
+ *
+ * @param modifier [Modifier] used to be applied to the layout of the divider.
+ */
+@Composable
+fun Divider(
+    modifier: Modifier = Modifier,
+) {
+    androidx.compose.material.Divider(
+        modifier = modifier,
+        color = FirefoxTheme.colors.borderPrimary,
+    )
+}
+
+/**
+ * An example of a vertical divider.
+ */
+@Composable
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+private fun VerticalDividerPreview() {
+    FirefoxTheme {
+        Box(
+            Modifier
+                .background(FirefoxTheme.colors.layer1)
+                .height(75.dp),
+        ) {
+            Row {
+                Text(
+                    text = "Before the line",
+                    modifier = Modifier.padding(end = 10.dp),
+                )
+
+                Divider(
+                    modifier = Modifier
+                        .fillMaxHeight()
+                        .width(0.5.dp)
+                        .padding(vertical = 10.dp),
+                )
+
+                Text(
+                    text = "After the line",
+                    modifier = Modifier.padding(start = 10.dp),
+                )
+            }
+        }
+    }
+}
+
+/**
+ * An example of divider usage in a list menu.
+ */
+@Composable
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+private fun HorizontalDividerPreview() {
+    FirefoxTheme {
+        Box(
+            Modifier
+                .background(FirefoxTheme.colors.layer1)
+                .width(100.dp)
+                .height(175.dp),
+        ) {
+            Column(Modifier.padding(start = 4.dp)) {
+                Text(text = "New")
+
+                Text(text = "Open")
+
+                Text(text = "Open Recent")
+
+                Divider(modifier = Modifier.padding(vertical = 10.dp, horizontal = 24.dp))
+
+                Text(text = "Close")
+
+                Text(text = "Save")
+
+                Text(text = "Save as")
+
+                Text(text = "Rename")
+
+                Divider(modifier = Modifier.padding(vertical = 10.dp, horizontal = 24.dp))
+            }
+        }
+    }
+}

app/src/main/java/org/mozilla/fenix/compose/tabstray/TabGridItem.kt

@@ -25,7 +25,6 @@ import androidx.compose.foundation.layout.wrapContentWidth
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
-import androidx.compose.material.Divider
 import androidx.compose.material.Icon
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -46,6 +45,7 @@ import androidx.core.text.BidiFormatter
 import mozilla.components.browser.state.state.TabSessionState
 import mozilla.components.browser.state.state.createTab
 import org.mozilla.fenix.R
+import org.mozilla.fenix.compose.Divider
 import org.mozilla.fenix.compose.Favicon
 import org.mozilla.fenix.compose.HorizontalFadingEdgeBox
 import org.mozilla.fenix.compose.ThumbnailCard
@@ -159,10 +159,7 @@ fun TabGridItem(
                     )
                 }
 
-                Divider(
-                    color = FirefoxTheme.colors.borderPrimary,
-                    thickness = 1.dp,
-                )
+                Divider()
 
                 Thumbnail(
                     tab = tab,

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

@@ -27,7 +27,6 @@ import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
-import androidx.compose.material.Divider
 import androidx.compose.material.DropdownMenu
 import androidx.compose.material.DropdownMenuItem
 import androidx.compose.material.Text
@@ -49,6 +48,7 @@ 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.Divider
 import org.mozilla.fenix.compose.EagerFlingBehavior
 import org.mozilla.fenix.compose.Favicon
 import org.mozilla.fenix.home.recentvisits.RecentlyVisitedItem
@@ -188,7 +188,7 @@ private fun RecentlyVisitedHistoryGroup(
             )
 
             if (showDividerLine) {
-                RecentlyVisitedDivider()
+                Divider()
             }
         }
 
@@ -248,7 +248,7 @@ private fun RecentlyVisitedHistoryHighlight(
             )
 
             if (showDividerLine) {
-                RecentlyVisitedDivider(modifier = Modifier.align(Alignment.BottomCenter))
+                Divider(modifier = Modifier.align(Alignment.BottomCenter))
             }
         }
 
@@ -359,22 +359,6 @@ private fun RecentlyVisitedMenu(
     }
 }
 
-/**
- * A recent item divider.
- *
- * @param modifier [Modifier] allowing to perfectly place this.
- */
-@Composable
-private fun RecentlyVisitedDivider(
-    modifier: Modifier = Modifier,
-) {
-    Divider(
-        modifier = modifier,
-        color = FirefoxTheme.colors.borderPrimary,
-        thickness = 0.5.dp,
-    )
-}
-
 /**
  * Get the indexes in list of all items which have more than half showing.
  */

app/src/main/java/org/mozilla/fenix/tabstray/syncedtabs/SyncedTabs.kt

@@ -21,7 +21,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material.Divider
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -35,6 +34,7 @@ import androidx.compose.ui.unit.sp
 import mozilla.components.browser.storage.sync.TabEntry
 import mozilla.components.feature.syncedtabs.view.SyncedTabsView
 import org.mozilla.fenix.R
+import org.mozilla.fenix.compose.Divider
 import org.mozilla.fenix.compose.button.PrimaryButton
 import org.mozilla.fenix.compose.ext.dashedBorder
 import org.mozilla.fenix.compose.list.ExpandableListHeader
@@ -170,7 +170,7 @@ fun SyncedTabsSectionHeader(
             onClick = onClick,
         )
 
-        Divider(color = FirefoxTheme.colors.borderPrimary)
+        Divider()
     }
 }