Merge "Update text only tabs to match latest material.io spec. Currently they are baseline aligned, they should be vertically center aligned." into androidx-main

Author: wcshi

compose/material/material/src/androidAndroidTest/kotlin/androidx/compose/material/TabTest.kt

@@ -290,7 +290,7 @@ class TabTest {
     }
 
     @Test
-    fun singleLineTab_textBaseline() {
+    fun singleLineTab_textPosition() {
         rule.setMaterialContent {
             var state by remember { mutableStateOf(0) }
             val titles = listOf("TAB")
@@ -313,19 +313,11 @@ class TabTest {
             }
         }
 
-        val expectedBaseline = 18.dp
-        val indicatorHeight = 2.dp
-        val expectedBaselineDistance = expectedBaseline + indicatorHeight
-
         val tabRowBounds = rule.onNodeWithTag("tabRow").getUnclippedBoundsInRoot()
         val textBounds =
             rule.onNodeWithTag("text", useUnmergedTree = true).getUnclippedBoundsInRoot()
-        val textBaselinePos =
-            rule.onNodeWithTag("text", useUnmergedTree = true).getLastBaselinePosition()
-
-        val baselinePositionY = textBounds.top + textBaselinePos
-        val expectedPositionY = tabRowBounds.height - expectedBaselineDistance
-        baselinePositionY.assertIsEqualTo(expectedPositionY, "baseline y-position")
+        val expectedPositionY = (tabRowBounds.height - textBounds.height) / 2
+        textBounds.top.assertIsEqualTo(expectedPositionY, "text bounds top y-position")
     }
 
     @Test
@@ -369,7 +361,7 @@ class TabTest {
     }
 
     @Test
-    fun twoLineTab_textBaseline() {
+    fun twoLineTab_textPosition() {
         rule.setMaterialContent {
             var state by remember { mutableStateOf(0) }
             val titles = listOf("Two line \n text")
@@ -392,20 +384,12 @@ class TabTest {
             }
         }
 
-        val expectedBaseline = 10.dp
-        val indicatorHeight = 2.dp
-
         val tabRowBounds = rule.onNodeWithTag("tabRow").getUnclippedBoundsInRoot()
         val textBounds =
             rule.onNodeWithTag("text", useUnmergedTree = true).getUnclippedBoundsInRoot()
-        val textBaselinePos =
-            rule.onNodeWithTag("text", useUnmergedTree = true).getLastBaselinePosition()
 
-        val expectedBaselineDistance = expectedBaseline + indicatorHeight
-
-        val baselinePositionY = textBounds.top + textBaselinePos
-        val expectedPositionY = (tabRowBounds.height - expectedBaselineDistance)
-        baselinePositionY.assertIsEqualTo(expectedPositionY, "baseline y-position")
+        val expectedPositionY = (tabRowBounds.height - textBounds.height) / 2
+        textBounds.top.assertIsEqualTo(expectedPositionY, "text bounds top y-position")
     }
 
     @OptIn(ExperimentalMaterialApi::class)

compose/material/material/src/commonMain/kotlin/androidx/compose/material/Tab.kt

@@ -349,55 +349,25 @@ private fun TabBaselineLayout(
                     firstBaseline = firstBaseline!!,
                     lastBaseline = lastBaseline!!
                 )
-                textPlaceable != null -> placeText(
-                    density = this@Layout,
-                    textPlaceable = textPlaceable,
-                    tabHeight = tabHeight,
-                    firstBaseline = firstBaseline!!,
-                    lastBaseline = lastBaseline!!
-                )
-                iconPlaceable != null -> placeIcon(iconPlaceable, tabHeight)
-                else -> {}
+                textPlaceable != null -> placeTextOrIcon(textPlaceable, tabHeight)
+                iconPlaceable != null -> placeTextOrIcon(iconPlaceable, tabHeight)
+                else -> {
+                }
             }
         }
     }
 }
 
 /**
- * Places the provided [iconPlaceable] in the vertical center of the provided [tabHeight].
+ * Places the provided [textOrIconPlaceable] in the vertical center of the provided
+ * [tabHeight].
  */
-private fun Placeable.PlacementScope.placeIcon(
-    iconPlaceable: Placeable,
+private fun Placeable.PlacementScope.placeTextOrIcon(
+    textOrIconPlaceable: Placeable,
     tabHeight: Int
 ) {
-    val iconY = (tabHeight - iconPlaceable.height) / 2
-    iconPlaceable.placeRelative(0, iconY)
-}
-
-/**
- * Places the provided [textPlaceable] offset from the bottom of the tab using the correct
- * baseline offset.
- */
-private fun Placeable.PlacementScope.placeText(
-    density: Density,
-    textPlaceable: Placeable,
-    tabHeight: Int,
-    firstBaseline: Int,
-    lastBaseline: Int
-) {
-    val baselineOffset = if (firstBaseline == lastBaseline) {
-        SingleLineTextBaseline
-    } else {
-        DoubleLineTextBaseline
-    }
-
-    // Total offset between the last text baseline and the bottom of the Tab layout
-    val totalOffset = with(density) {
-        baselineOffset.roundToPx() + TabRowDefaults.IndicatorHeight.roundToPx()
-    }
-
-    val textPlaceableY = tabHeight - lastBaseline - totalOffset
-    textPlaceable.placeRelative(0, textPlaceableY)
+    val contentY = (tabHeight - textOrIconPlaceable.height) / 2
+    textOrIconPlaceable.placeRelative(0, contentY)
 }
 
 /**
@@ -452,14 +422,10 @@ private const val TabFadeOutAnimationDuration = 100
 // The horizontal padding on the left and right of text
 private val HorizontalTextPadding = 16.dp
 
-// Distance from the top of the indicator to the text baseline when there is one line of text
-private val SingleLineTextBaseline = 18.dp
 // Distance from the top of the indicator to the text baseline when there is one line of text and an
 // icon
 private val SingleLineTextBaselineWithIcon = 14.dp
 // Distance from the top of the indicator to the last text baseline when there are two lines of text
-private val DoubleLineTextBaseline = 10.dp
-// Distance from the top of the indicator to the last text baseline when there are two lines of text
 // and an icon
 private val DoubleLineTextBaselineWithIcon = 6.dp
 // Distance from the first text baseline to the bottom of the icon in a combined tab