fix: Make the tabs have a min height (#734)

adevinta · Sep 20, 2023 · 0507879 · 0507879
1 parent e0b5d5a
commit 0507879
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 11 deletions.
diff --git a/spark/src/main/kotlin/com/adevinta/spark/SparkTheme.kt b/spark/src/main/kotlin/com/adevinta/spark/SparkTheme.kt
@@ -80,8 +80,10 @@ import com.adevinta.spark.tools.preview.ThemeVariant
  * @param typography A set of text styles to be used as this hierarchy's typography system.
  * @param shapes A set of corner shapes to be used as this hierarchy's shape system.
  * @param fontFamily the font family to be applied on [typography].
- * @param useSparkTokensHighlighter flag that use for typography, colors and shapes exaggerated values to find which part of a screen is themed or not.
- * @param useSparkComponentsHighlighter flag to highlight the spark components with an overlay to recognize which component is from spark or not.
+ * @param useSparkTokensHighlighter flag that use for typography, colors and shapes exaggerated values to find
+ * which part of a screen is themed or not.
+ * @param useSparkComponentsHighlighter flag to highlight the spark components with an overlay to recognize
+ * which component is from spark or not.
  * @param useLegacyStyle enabling this will makes the components use the visual from the previous DS of LBC.
  */
 @Composable
@@ -261,7 +263,7 @@ internal val LocalHighlightToken = staticCompositionLocalOf { false }
 internal val LocalHighlightComponents = staticCompositionLocalOf { false }
 
 /**
- * CompositionLocal that makes the components use the legacy style from the previous DS to make it easier for the Adevinta Platform teams
- * to migrate their screens to spark.
+ * CompositionLocal that makes the components use the legacy style from the previous DS to make it easier for the
+ * Adevinta Platform teams to migrate their screens to spark.
  */
 internal val LocalLegacyStyle = staticCompositionLocalOf { false }
diff --git a/spark/src/main/kotlin/com/adevinta/spark/components/card/Card.kt b/spark/src/main/kotlin/com/adevinta/spark/components/card/Card.kt
@@ -30,6 +30,7 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
@@ -44,14 +45,15 @@ import com.adevinta.spark.tools.preview.ThemeVariant
 @Composable
 internal fun SparkCard(
     modifier: Modifier = Modifier,
+    shape: Shape = SparkTheme.shapes.medium,
     colors: CardColors = CardDefaults.cardColors(),
     elevation: CardElevation = CardDefaults.cardElevation(),
     border: BorderStroke? = null,
     content: @Composable ColumnScope.() -> Unit,
 ) {
     Surface(
         modifier = modifier,
-        shape = SparkTheme.shapes.medium,
+        shape = shape,
         color = colors.containerColor(enabled = true).value,
         contentColor = colors.contentColor(enabled = true).value,
         elevation = elevation.tonalElevation(enabled = true, interactionSource = null).value,
@@ -66,6 +68,7 @@ internal fun SparkCard(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    shape: Shape = SparkTheme.shapes.medium,
     colors: CardColors = CardDefaults.cardColors(),
     elevation: CardElevation = CardDefaults.cardElevation(),
     border: BorderStroke? = null,
@@ -76,7 +79,7 @@ internal fun SparkCard(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
-        shape = SparkTheme.shapes.medium,
+        shape = shape,
         color = colors.containerColor(enabled).value,
         contentColor = colors.contentColor(enabled).value,
         elevation = elevation.tonalElevation(enabled, interactionSource).value,
@@ -108,12 +111,14 @@ internal fun SparkCard(
 @Composable
 public fun Card(
     modifier: Modifier = Modifier,
+    shape: Shape = SparkTheme.shapes.medium,
     colors: CardColors = CardDefaults.cardColors(),
     border: BorderStroke? = null,
     content: @Composable ColumnScope.() -> Unit,
 ) {
     SparkCard(
         modifier = modifier,
+        shape = shape,
         colors = colors,
         border = border,
         content = content,
@@ -147,6 +152,7 @@ public fun Card(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    shape: Shape = SparkTheme.shapes.medium,
     colors: CardColors = CardDefaults.cardColors(),
     border: BorderStroke? = null,
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
@@ -156,6 +162,7 @@ public fun Card(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
+        shape = shape,
         colors = colors,
         border = border,
         interactionSource = interactionSource,
@@ -183,12 +190,14 @@ public fun Card(
 @Composable
 public fun OutlinedCard(
     modifier: Modifier = Modifier,
+    shape: Shape = SparkTheme.shapes.medium,
     colors: CardColors = CardDefaults.outlinedCardColors(),
     border: BorderStroke = CardDefaults.outlinedCardBorder(),
     content: @Composable ColumnScope.() -> Unit,
 ) {
     SparkCard(
         modifier = modifier,
+        shape = shape,
         colors = colors,
         elevation = CardDefaults.outlinedCardElevation(),
         border = border,
@@ -224,6 +233,7 @@ public fun OutlinedCard(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    shape: Shape = SparkTheme.shapes.medium,
     colors: CardColors = CardDefaults.outlinedCardColors(),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable ColumnScope.() -> Unit,
@@ -232,6 +242,7 @@ public fun OutlinedCard(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
+        shape = shape,
         colors = colors,
         elevation = CardDefaults.outlinedCardElevation(),
         interactionSource = interactionSource,
@@ -259,11 +270,13 @@ public fun OutlinedCard(
 @Composable
 public fun ElevatedCard(
     modifier: Modifier = Modifier,
+    shape: Shape = SparkTheme.shapes.medium,
     colors: CardColors = CardDefaults.elevatedCardColors(),
     content: @Composable ColumnScope.() -> Unit,
 ) {
     SparkCard(
         modifier = modifier,
+        shape = shape,
         colors = colors,
         elevation = CardDefaults.elevatedCardElevation(),
         content = content,
@@ -300,6 +313,7 @@ public fun ElevatedCard(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     enabled: Boolean = true,
+    shape: Shape = SparkTheme.shapes.medium,
     colors: CardColors = CardDefaults.elevatedCardColors(),
     interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
     content: @Composable ColumnScope.() -> Unit,
@@ -308,6 +322,7 @@ public fun ElevatedCard(
         onClick = onClick,
         modifier = modifier,
         enabled = enabled,
+        shape = shape,
         colors = colors,
         elevation = CardDefaults.elevatedCardElevation(),
         interactionSource = interactionSource,

diff --git a/spark/src/main/kotlin/com/adevinta/spark/components/tab/Tab.kt b/spark/src/main/kotlin/com/adevinta/spark/components/tab/Tab.kt
@@ -293,7 +293,7 @@ public fun Tab(
     MaterialTab(
         selected = selected,
         onClick = onClick,
-        modifier = modifier,
+        modifier = modifier.heightIn(min = 48.dp),
         enabled = enabled,
         selectedContentColor = LocalContentColor.current,
         unselectedContentColor = LocalContentColor.current,

diff --git a/spark/src/main/kotlin/com/adevinta/spark/components/tab/TabRow.kt b/spark/src/main/kotlin/com/adevinta/spark/components/tab/TabRow.kt
@@ -23,18 +23,25 @@ package com.adevinta.spark.components.tab
 
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.ScrollableTabRow
-import androidx.compose.material3.Tab
 import androidx.compose.material3.TabPosition
-import androidx.compose.material3.TabRow
 import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.adevinta.spark.ExperimentalSparkApi
+import com.adevinta.spark.PreviewTheme
 import com.adevinta.spark.components.divider.Divider
-import com.adevinta.spark.components.divider.SparkDivider
+import com.adevinta.spark.components.text.Text
+import com.adevinta.spark.tools.preview.ThemeProvider
+import com.adevinta.spark.tools.preview.ThemeVariant
 import androidx.compose.material3.ScrollableTabRow as MaterialScrollableTabRow
 import androidx.compose.material3.TabRow as MaterialTabRow
 
@@ -50,7 +57,7 @@ internal fun SparkTabRow(
             Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex]),
         )
     },
-    divider: @Composable () -> Unit = @Composable { SparkDivider() },
+    divider: @Composable () -> Unit = @Composable { Divider() },
     tabs: @Composable () -> Unit,
 ) {
     MaterialTabRow(
@@ -174,3 +181,33 @@ public fun ScrollableTabRow(
  * The default padding from the starting edge before a tab in a [ScrollableTabRow].
  */
 internal val ScrollableTabRowPadding = 52.dp
+
+@Suppress("DEPRECATION")
+@Preview(
+    group = "Tabs",
+    name = "TabRow",
+)
+@Composable
+private fun TabRowPreview(
+    @PreviewParameter(ThemeProvider::class) theme: ThemeVariant,
+) {
+    val tabs = mutableListOf("Home", "Search", "Messaging", "Account")
+    var selectedIndex by remember { mutableIntStateOf(0) }
+    PreviewTheme(theme) {
+        TabRow(
+            selectedTabIndex = 0,
+            tabs = {
+                tabs.forEachIndexed { index, title ->
+                    Tab(
+                        selected = selectedIndex == index,
+                        onClick = { selectedIndex = index },
+                        enabled = true,
+                        content = {
+                            Text(title)
+                        },
+                    )
+                }
+            },
+        )
+    }
+}