Responsive text padding (#2074)

--------- Co-authored-by: yschimke <yschimke@users.noreply.github.com>
google · Feb 28, 2024 · 24ea0a4 · 24ea0a4
1 parent 105147c
commit 24ea0a4
Show file tree

Hide file tree

Showing 27 changed files with 73 additions and 53 deletions.
diff --git a/compose-layout/api/current.api b/compose-layout/api/current.api
@@ -62,6 +62,7 @@ package com.google.android.horologist.compose.layout {
 
   public final class ScalingLazyColumnDefaults {
     method @com.google.android.horologist.annotations.ExperimentalHorologistApi public com.google.android.horologist.compose.layout.ScalingLazyColumnState.Factory belowTimeText(optional com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode rotaryMode, optional boolean firstItemIsFullWidth, optional androidx.compose.foundation.layout.Arrangement.Vertical verticalArrangement, optional androidx.compose.ui.Alignment.Horizontal horizontalAlignment, optional androidx.compose.foundation.layout.PaddingValues contentPadding, optional float topPaddingDp);
+    method @androidx.compose.runtime.Composable public androidx.compose.ui.Modifier listTextPadding(androidx.compose.ui.Modifier);
     method @androidx.compose.runtime.Composable public kotlin.jvm.functions.Function0<androidx.compose.foundation.layout.PaddingValues> padding(optional com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.ItemType first, optional com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.ItemType last, optional float horizontalPercent);
     method @com.google.android.horologist.annotations.ExperimentalHorologistApi public com.google.android.horologist.compose.layout.ScalingLazyColumnState.Factory responsive(optional boolean firstItemIsFullWidth, optional float additionalPaddingAtBottom, optional androidx.compose.foundation.layout.Arrangement.Vertical verticalArrangement, optional float horizontalPaddingPercent, optional com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode? rotaryMode, optional boolean hapticsEnabled, optional boolean reverseLayout, optional boolean userScrollEnabled);
     method @com.google.android.horologist.annotations.ExperimentalHorologistApi public com.google.android.horologist.compose.layout.ScalingLazyColumnState.Factory scalingLazyColumnDefaults(optional com.google.android.horologist.compose.layout.ScalingLazyColumnState.RotaryMode rotaryMode, optional int initialCenterIndex, optional int initialCenterOffset, optional androidx.compose.foundation.layout.Arrangement.Vertical verticalArrangement, optional androidx.compose.ui.Alignment.Horizontal horizontalAlignment, optional androidx.compose.foundation.layout.PaddingValues contentPadding, optional androidx.wear.compose.foundation.lazy.AutoCenteringParams? autoCentering, optional int anchorType, optional boolean hapticsEnabled, optional boolean reverseLayout);

diff --git a/...t/src/main/java/com/google/android/horologist/compose/layout/ScalingLazyColumnDefaults.kt b/...t/src/main/java/com/google/android/horologist/compose/layout/ScalingLazyColumnDefaults.kt
@@ -20,9 +20,11 @@ package com.google.android.horologist.compose.layout
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.Dp
@@ -264,10 +266,18 @@ public object ScalingLazyColumnDefaults {
     internal val Padding21Pct = 0.2188f
     internal val Padding31Pct = 0.3646f
 
-    enum class ItemType(val topPaddingDp: Float, val bottomPaddingDp: Float, val paddingCorrection: Dp = 0.dp) {
+    enum class ItemType(
+        val topPaddingDp: Float,
+        val bottomPaddingDp: Float,
+        val paddingCorrection: Dp = 0.dp,
+    ) {
         Card(Padding21Pct, Padding31Pct),
         Chip(Padding21Pct, Padding31Pct),
-        CompactChip(topPaddingDp = Padding12Pct, bottomPaddingDp = Padding20Pct, paddingCorrection = (-8).dp),
+        CompactChip(
+            topPaddingDp = Padding12Pct,
+            bottomPaddingDp = Padding20Pct,
+            paddingCorrection = (-8).dp,
+        ),
         Icon(Padding12Pct, Padding21Pct),
         MultiButton(Padding21Pct, Padding20Pct),
         SingleButton(Padding12Pct, Padding20Pct),
@@ -292,4 +302,7 @@ public object ScalingLazyColumnDefaults {
             )
         }
     }
+
+    @Composable
+    fun Modifier.listTextPadding() = this.padding(horizontal = 0.052f * LocalConfiguration.current.screenWidthDp.dp)
 }
diff --git a/sample/src/main/java/com/google/android/horologist/spec/UiComponents.kt b/sample/src/main/java/com/google/android/horologist/spec/UiComponents.kt
@@ -25,9 +25,11 @@ import androidx.compose.material.icons.filled.Schedule
 import androidx.compose.material.icons.outlined.Badge
 import androidx.compose.material.icons.outlined.Cloud
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.wear.compose.foundation.lazy.ScalingLazyListScope
 import androidx.wear.compose.material.AppCard
 import androidx.wear.compose.material.Text
+import com.google.android.horologist.compose.layout.ScalingLazyColumnDefaults.listTextPadding
 import com.google.android.horologist.compose.material.Button
 import com.google.android.horologist.compose.material.Chip
 import com.google.android.horologist.compose.material.CompactChip
@@ -56,13 +58,17 @@ val text = "We posted a payment for your credit card ending in 5555. " +
 fun WarningText() {
     Text(
         text,
+        modifier = Modifier.listTextPadding(),
     )
 }
 
 fun ScalingLazyListScope.warningTextItems() {
-    text.split(". ").forEach {
-        item {
-            Text("$it.")
+    text.split(".").forEach {
+        val textLine = it.trim()
+        if (textLine.isNotBlank()) {
+            item {
+                Text(textLine, modifier = Modifier.listTextPadding())
+            }
         }
     }
 }

diff --git a/...st.spec_ScalingLazyColumnExamplesTest_bottomOtherText[0]_mobvoiticwatchpro5.png b/...st.spec_ScalingLazyColumnExamplesTest_bottomOtherText[0]_mobvoiticwatchpro5.png
diff --git a/...t.spec_ScalingLazyColumnExamplesTest_bottomOtherText[1]_samsunggalaxywatch5.png b/...t.spec_ScalingLazyColumnExamplesTest_bottomOtherText[1]_samsunggalaxywatch5.png
diff --git a/...c_ScalingLazyColumnExamplesTest_bottomOtherText[2]_samsunggalaxywatch6large.png b/...c_ScalingLazyColumnExamplesTest_bottomOtherText[2]_samsunggalaxywatch6large.png
diff --git a/...gist.spec_ScalingLazyColumnExamplesTest_bottomOtherText[3]_googlepixelwatch.png b/...gist.spec_ScalingLazyColumnExamplesTest_bottomOtherText[3]_googlepixelwatch.png
diff --git a/...ist.spec_ScalingLazyColumnExamplesTest_bottomOtherText[4]_genericsmallround.png b/...ist.spec_ScalingLazyColumnExamplesTest_bottomOtherText[4]_genericsmallround.png
diff --git a/...ist.spec_ScalingLazyColumnExamplesTest_bottomOtherText[5]_genericlargeround.png b/...ist.spec_ScalingLazyColumnExamplesTest_bottomOtherText[5]_genericlargeround.png
diff --git a/...t.spec_ScalingLazyColumnExamplesTest_bottomOtherText[6]_smalldevicebigfonts.png b/...t.spec_ScalingLazyColumnExamplesTest_bottomOtherText[6]_smalldevicebigfonts.png
diff --git a/...spec_ScalingLazyColumnExamplesTest_bottomOtherText[7]_largedevicesmallfonts.png b/...spec_ScalingLazyColumnExamplesTest_bottomOtherText[7]_largedevicesmallfonts.png
diff --git a/...orologist.spec_ScalingLazyColumnExamplesTest_sideText[0]_mobvoiticwatchpro5.png b/...orologist.spec_ScalingLazyColumnExamplesTest_sideText[0]_mobvoiticwatchpro5.png
diff --git a/...rologist.spec_ScalingLazyColumnExamplesTest_sideText[1]_samsunggalaxywatch5.png b/...rologist.spec_ScalingLazyColumnExamplesTest_sideText[1]_samsunggalaxywatch5.png
diff --git a/...ist.spec_ScalingLazyColumnExamplesTest_sideText[2]_samsunggalaxywatch6large.png b/...ist.spec_ScalingLazyColumnExamplesTest_sideText[2]_samsunggalaxywatch6large.png
diff --git a/....horologist.spec_ScalingLazyColumnExamplesTest_sideText[3]_googlepixelwatch.png b/....horologist.spec_ScalingLazyColumnExamplesTest_sideText[3]_googlepixelwatch.png
diff --git a/...horologist.spec_ScalingLazyColumnExamplesTest_sideText[4]_genericsmallround.png b/...horologist.spec_ScalingLazyColumnExamplesTest_sideText[4]_genericsmallround.png
diff --git a/...horologist.spec_ScalingLazyColumnExamplesTest_sideText[5]_genericlargeround.png b/...horologist.spec_ScalingLazyColumnExamplesTest_sideText[5]_genericlargeround.png
diff --git a/...rologist.spec_ScalingLazyColumnExamplesTest_sideText[6]_smalldevicebigfonts.png b/...rologist.spec_ScalingLazyColumnExamplesTest_sideText[6]_smalldevicebigfonts.png
diff --git a/...logist.spec_ScalingLazyColumnExamplesTest_sideText[7]_largedevicesmallfonts.png b/...logist.spec_ScalingLazyColumnExamplesTest_sideText[7]_largedevicesmallfonts.png
diff --git a/...ist.spec_ScalingLazyColumnExamplesTest_titleOtherText[0]_mobvoiticwatchpro5.png b/...ist.spec_ScalingLazyColumnExamplesTest_titleOtherText[0]_mobvoiticwatchpro5.png
diff --git a/...st.spec_ScalingLazyColumnExamplesTest_titleOtherText[1]_samsunggalaxywatch5.png b/...st.spec_ScalingLazyColumnExamplesTest_titleOtherText[1]_samsunggalaxywatch5.png
diff --git a/...ec_ScalingLazyColumnExamplesTest_titleOtherText[2]_samsunggalaxywatch6large.png b/...ec_ScalingLazyColumnExamplesTest_titleOtherText[2]_samsunggalaxywatch6large.png
diff --git a/...ogist.spec_ScalingLazyColumnExamplesTest_titleOtherText[3]_googlepixelwatch.png b/...ogist.spec_ScalingLazyColumnExamplesTest_titleOtherText[3]_googlepixelwatch.png
diff --git a/...gist.spec_ScalingLazyColumnExamplesTest_titleOtherText[4]_genericsmallround.png b/...gist.spec_ScalingLazyColumnExamplesTest_titleOtherText[4]_genericsmallround.png
diff --git a/...gist.spec_ScalingLazyColumnExamplesTest_titleOtherText[5]_genericlargeround.png b/...gist.spec_ScalingLazyColumnExamplesTest_titleOtherText[5]_genericlargeround.png
diff --git a/...st.spec_ScalingLazyColumnExamplesTest_titleOtherText[6]_smalldevicebigfonts.png b/...st.spec_ScalingLazyColumnExamplesTest_titleOtherText[6]_smalldevicebigfonts.png
diff --git a/....spec_ScalingLazyColumnExamplesTest_titleOtherText[7]_largedevicesmallfonts.png b/....spec_ScalingLazyColumnExamplesTest_titleOtherText[7]_largedevicesmallfonts.png