Fix inconsistency in margin application between ComposeUiBox and `V…

…iewBox` (#2478) Relates to #2367 In compose ui, modifier order matters and applying padding before a background prevents the background from filling the box.
cashapp · Nov 21, 2024 · 365b927 · 365b927
1 parent d496ac0
commit 365b927
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 12 deletions.
diff --git 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/...-layout-composeui/src/commonMain/kotlin/app/cash/redwood/layout/composeui/ComposeUiBox.kt b/...-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/...ood.layout.composeui_ComposeUiBoxTest_RTL_testBoxMeasurementIncludesMargins.png b/...ood.layout.composeui_ComposeUiBoxTest_RTL_testBoxMeasurementIncludesMargins.png
diff --git a/...s/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testMargins.png b/...s/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_RTL_testMargins.png
diff --git a/...redwood.layout.composeui_ComposeUiBoxTest_testBoxMeasurementIncludesMargins.png b/...redwood.layout.composeui_ComposeUiBoxTest_testBoxMeasurementIncludesMargins.png
diff --git a/...shots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testMargins.png b/...shots/images/app.cash.redwood.layout.composeui_ComposeUiBoxTest_testMargins.png