Update Confirmation layout (google#2327)

ssancho14 · Aug 1, 2024 · 1ae64ea · 1ae64ea
1 parent 04ed275
commit 1ae64ea
Show file tree

Hide file tree

Showing 33 changed files with 57 additions and 49 deletions.
diff --git a/...ose-material/src/main/java/com/google/android/horologist/compose/material/Confirmation.kt b/...ose-material/src/main/java/com/google/android/horologist/compose/material/Confirmation.kt
@@ -24,6 +24,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalAccessibilityManager
@@ -61,7 +62,7 @@ public fun Confirmation(
     durationMillis: Long = DialogDefaults.ShortDurationMillis,
     columnState: ScalingLazyColumnState = rememberColumnState(
         ScalingLazyColumnDefaults.responsive(
-            verticalArrangement = DialogDefaults.ConfirmationVerticalArrangement,
+            verticalArrangement = confirmationVerticalArrangement(),
             additionalPaddingAtBottom = 0.dp,
         ),
     ),
@@ -105,7 +106,7 @@ public fun ConfirmationContent(
     title: String? = null,
     columnState: ScalingLazyColumnState = rememberColumnState(
         ScalingLazyColumnDefaults.responsive(
-            verticalArrangement = DialogDefaults.ConfirmationVerticalArrangement,
+            verticalArrangement = confirmationVerticalArrangement(),
             additionalPaddingAtBottom = 0.dp,
         ),
     ),
@@ -147,7 +148,7 @@ public fun Confirmation(
     backgroundColor: Color = MaterialTheme.colors.background,
     contentColor: Color = contentColorFor(backgroundColor),
     iconColor: Color = contentColor,
-    verticalArrangement: Arrangement.Vertical = DialogDefaults.ConfirmationVerticalArrangement,
+    verticalArrangement: Arrangement.Vertical = confirmationVerticalArrangement(),
     contentPadding: PaddingValues = DialogDefaults.ContentPadding,
     content: @Composable ColumnScope.() -> Unit,
 ) {
@@ -172,3 +173,10 @@ public fun Confirmation(
         content = content,
     )
 }
+
+private fun confirmationVerticalArrangement() = Arrangement.spacedBy(
+    // NB an additional 4dp bottom padding is added after the icon
+    // in ResponsiveDialogContent to make the 8dp in the UX spec.
+    space = 4.dp,
+    alignment = Alignment.CenterVertically,
+)
diff --git a/sample/src/test/audit/Confirmations_iconand1line_pixel_watch.png b/sample/src/test/audit/Confirmations_iconand1line_pixel_watch.png
diff --git a/sample/src/test/audit/Confirmations_iconand1line_pixel_watch_large_font.png b/sample/src/test/audit/Confirmations_iconand1line_pixel_watch_large_font.png
diff --git a/sample/src/test/audit/Confirmations_iconand3line_device204.png b/sample/src/test/audit/Confirmations_iconand3line_device204.png
diff --git a/sample/src/test/audit/Confirmations_iconand3line_device228.png b/sample/src/test/audit/Confirmations_iconand3line_device228.png
diff --git a/sample/src/test/audit/Confirmations_iconand3line_device240.png b/sample/src/test/audit/Confirmations_iconand3line_device240.png
diff --git a/sample/src/test/audit/Confirmations_iconand3line_galaxy_watch_6_small_font.png b/sample/src/test/audit/Confirmations_iconand3line_galaxy_watch_6_small_font.png
diff --git a/sample/src/test/audit/Confirmations_iconand3line_pixel_watch.png b/sample/src/test/audit/Confirmations_iconand3line_pixel_watch.png
diff --git a/sample/src/test/audit/Confirmations_iconand3line_pixel_watch_large_font.png b/sample/src/test/audit/Confirmations_iconand3line_pixel_watch_large_font.png
diff --git a/...ts/NonScrollableConfirmationTest_confirmationContentWithIcon_galaxy_watch_5.png b/...ts/NonScrollableConfirmationTest_confirmationContentWithIcon_galaxy_watch_5.png
diff --git a/...ts/NonScrollableConfirmationTest_confirmationContentWithIcon_galaxy_watch_6.png b/...ts/NonScrollableConfirmationTest_confirmationContentWithIcon_galaxy_watch_6.png
diff --git a/...lableConfirmationTest_confirmationContentWithIcon_galaxy_watch_6_small_font.png b/...lableConfirmationTest_confirmationContentWithIcon_galaxy_watch_6_small_font.png
diff --git a/...shots/NonScrollableConfirmationTest_confirmationContentWithIcon_large_round.png b/...shots/NonScrollableConfirmationTest_confirmationContentWithIcon_large_round.png
diff --git a/...shots/NonScrollableConfirmationTest_confirmationContentWithIcon_pixel_watch.png b/...shots/NonScrollableConfirmationTest_confirmationContentWithIcon_pixel_watch.png
diff --git a/...rollableConfirmationTest_confirmationContentWithIcon_pixel_watch_large_font.png b/...rollableConfirmationTest_confirmationContentWithIcon_pixel_watch_large_font.png
diff --git a/...shots/NonScrollableConfirmationTest_confirmationContentWithIcon_small_round.png b/...shots/NonScrollableConfirmationTest_confirmationContentWithIcon_small_round.png
diff --git a/...ts/NonScrollableConfirmationTest_confirmationContentWithIcon_ticwatch_pro_5.png b/...ts/NonScrollableConfirmationTest_confirmationContentWithIcon_ticwatch_pro_5.png
diff --git a/...logist.screensizes_DialogTest_alarmConfirmationScreen[0]_mobvoiticwatchpro5.png b/...logist.screensizes_DialogTest_alarmConfirmationScreen[0]_mobvoiticwatchpro5.png
diff --git a/...ogist.screensizes_DialogTest_alarmConfirmationScreen[1]_samsunggalaxywatch5.png b/...ogist.screensizes_DialogTest_alarmConfirmationScreen[1]_samsunggalaxywatch5.png
diff --git a/....screensizes_DialogTest_alarmConfirmationScreen[2]_samsunggalaxywatch6large.png b/....screensizes_DialogTest_alarmConfirmationScreen[2]_samsunggalaxywatch6large.png
diff --git a/...rologist.screensizes_DialogTest_alarmConfirmationScreen[3]_googlepixelwatch.png b/...rologist.screensizes_DialogTest_alarmConfirmationScreen[3]_googlepixelwatch.png
diff --git a/...ologist.screensizes_DialogTest_alarmConfirmationScreen[4]_genericsmallround.png b/...ologist.screensizes_DialogTest_alarmConfirmationScreen[4]_genericsmallround.png
diff --git a/...ologist.screensizes_DialogTest_alarmConfirmationScreen[5]_genericlargeround.png b/...ologist.screensizes_DialogTest_alarmConfirmationScreen[5]_genericlargeround.png
diff --git a/...ogist.screensizes_DialogTest_alarmConfirmationScreen[6]_smalldevicebigfonts.png b/...ogist.screensizes_DialogTest_alarmConfirmationScreen[6]_smalldevicebigfonts.png
diff --git a/...ist.screensizes_DialogTest_alarmConfirmationScreen[7]_largedevicesmallfonts.png b/...ist.screensizes_DialogTest_alarmConfirmationScreen[7]_largedevicesmallfonts.png
diff --git a/...st.screensizes_DialogTest_multiLineConfirmationScreen[0]_mobvoiticwatchpro5.png b/...st.screensizes_DialogTest_multiLineConfirmationScreen[0]_mobvoiticwatchpro5.png
diff --git a/...t.screensizes_DialogTest_multiLineConfirmationScreen[1]_samsunggalaxywatch5.png b/...t.screensizes_DialogTest_multiLineConfirmationScreen[1]_samsunggalaxywatch5.png
diff --git a/...eensizes_DialogTest_multiLineConfirmationScreen[2]_samsunggalaxywatch6large.png b/...eensizes_DialogTest_multiLineConfirmationScreen[2]_samsunggalaxywatch6large.png
diff --git a/...gist.screensizes_DialogTest_multiLineConfirmationScreen[3]_googlepixelwatch.png b/...gist.screensizes_DialogTest_multiLineConfirmationScreen[3]_googlepixelwatch.png
diff --git a/...ist.screensizes_DialogTest_multiLineConfirmationScreen[4]_genericsmallround.png b/...ist.screensizes_DialogTest_multiLineConfirmationScreen[4]_genericsmallround.png
diff --git a/...ist.screensizes_DialogTest_multiLineConfirmationScreen[5]_genericlargeround.png b/...ist.screensizes_DialogTest_multiLineConfirmationScreen[5]_genericlargeround.png
diff --git a/...t.screensizes_DialogTest_multiLineConfirmationScreen[6]_smalldevicebigfonts.png b/...t.screensizes_DialogTest_multiLineConfirmationScreen[6]_smalldevicebigfonts.png
diff --git a/...screensizes_DialogTest_multiLineConfirmationScreen[7]_largedevicesmallfonts.png b/...screensizes_DialogTest_multiLineConfirmationScreen[7]_largedevicesmallfonts.png