From 365b927bbf00afe0c001ed5dc6a15e86cf6e3365 Mon Sep 17 00:00:00 2001
From: Luis Cortes <lac07h@gmail.com>
Date: Thu, 21 Nov 2024 15:41:16 -0500
Subject: [PATCH] Fix inconsistency in margin application between
 `ComposeUiBox` and `ViewBox` (#2478)

Relates to #2367

In compose ui, modifier order matters and applying padding before a background prevents the background from filling the box.
---
 CHANGELOG.md                                                | 2 +-
 .../app/cash/redwood/layout/composeui/ComposeUiBox.kt       | 6 +++---
 ...mposeUiBoxTest_RTL_testBoxMeasurementIncludesMargins.png | 4 ++--
 ...od.layout.composeui_ComposeUiBoxTest_RTL_testMargins.png | 4 ++--
 ...i_ComposeUiBoxTest_testBoxMeasurementIncludesMargins.png | 4 ++--
 ...edwood.layout.composeui_ComposeUiBoxTest_testMargins.png | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 87a62456db..9b6451b6e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,7 @@ Changed:
 - Nothing yet!
 
 Fixed:
-- Nothing yet!
+- Fix inconsistency in margin application between `ComposeUiBox` and `ViewBox`.
 
 
 ## [0.16.0] - 2024-11-19
diff --git a/redwood-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiBox.kt b/redwood-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiBox.kt
index d8a84f903f..1bb3e8b3a6 100644
--- a/redwood-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiBox.kt
+++ b/redwood-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiBox.kt
@@ -150,6 +150,9 @@ internal class ComposeUiBox(
     } else {
       modifier.wrapContentHeight(Alignment.Top, unbounded = true)
     }
+    if (backgroundColor != 0) {
+      modifier = modifier.background(Color(backgroundColor))
+    }
     modifier = margin.let { margin ->
       modifier.padding(
         start = margin.start.toDp(),
@@ -158,9 +161,6 @@ internal class ComposeUiBox(
         bottom = margin.bottom.toDp(),
       )
     }
-    if (backgroundColor != 0) {
-      modifier = modifier.background(Color(backgroundColor))
-    }
     return modifier
   }
 
diff --git a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testBoxMeasurementIncludesMargins.png b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testBoxMeasurementIncludesMargins.png
index 36572dfc12..17317ab0b2 100644
--- a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testBoxMeasurementIncludesMargins.png
+++ b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testBoxMeasurementIncludesMargins.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d3cd5ccd11f1c0674eea8877235763363168c7088205b30875a9ee3ed7e2953f
-size 8422
+oid sha256:499ec2788418e8bc5f6fccdcc7ffb8cfebe7fce08b0d826b0144dc2eaa80496a
+size 8942
diff --git a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testMargins.png b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testMargins.png
index 8f746bb780..d660db61d2 100644
--- a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testMargins.png
+++ b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testMargins.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e1b59754c88b76382df02dd6566d3f39b0c82b4dcc65cd1602dd3cab9ba9d717
-size 6760
+oid sha256:4c1ae1918ca230dbeab5ffbb030247a01112d5a6993a9fb6689700fe4dbcb95b
+size 4411
diff --git a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testBoxMeasurementIncludesMargins.png b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testBoxMeasurementIncludesMargins.png
index cb153c2c8a..d4898c0540 100644
--- a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testBoxMeasurementIncludesMargins.png
+++ b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testBoxMeasurementIncludesMargins.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d4e4c93fbb3daedb79fc97501c6de6922657ffdc4d032ec20a949ade65fdd441
-size 8332
+oid sha256:d5a54043b9cb8b33e43eb868b04cf64a60bb7c8e07f56cc6eb7c96b0fa08d94e
+size 8816
diff --git a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testMargins.png b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testMargins.png
index bd97b779e0..dd54f46832 100644
--- a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testMargins.png
+++ b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testMargins.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:27aed805b3101f030b03b38db09791363cfa43cb7a42a998755850867317873d
-size 6994
+oid sha256:680a10e2aa34227d91e7116a75fbaf6f592fd78e946117c1a85a9479203484c1
+size 4123