diff --git a/redwood-layout-composeui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiFlexContainerTest.kt b/redwood-layout-composeui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiFlexContainerTest.kt index df676ad9d..6d6bb2a2d 100644 --- a/redwood-layout-composeui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiFlexContainerTest.kt +++ b/redwood-layout-composeui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiFlexContainerTest.kt @@ -24,6 +24,7 @@ import app.cash.paparazzi.Paparazzi import app.cash.redwood.layout.AbstractFlexContainerTest import app.cash.redwood.layout.TestFlexContainer import app.cash.redwood.layout.widget.FlexContainer +import app.cash.redwood.layout.widget.Spacer import app.cash.redwood.snapshot.testing.ComposeSnapshotter import app.cash.redwood.snapshot.testing.ComposeUiTestWidgetFactory import app.cash.redwood.ui.Px @@ -62,6 +63,11 @@ class ComposeUiFlexContainerTest( override fun column() = flexContainer(FlexDirection.Column) + override fun spacer(backgroundColor: Int): Spacer<@Composable () -> Unit> { + // TODO: honor backgroundColor. + return ComposeUiRedwoodLayoutWidgetFactory().Spacer() + } + override fun snapshotter(widget: @Composable () -> Unit) = ComposeSnapshotter(paparazzi, widget) class ComposeTestFlexContainer private constructor( diff --git a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png new file mode 100644 index 000000000..e95f8fd1f --- /dev/null +++ b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4265096c30d46578c9f8b991878000131cf1d7ea58f67068391e77984200bf0a +size 3906 diff --git a/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png new file mode 100644 index 000000000..e95f8fd1f --- /dev/null +++ b/redwood-layout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4265096c30d46578c9f8b991878000131cf1d7ea58f67068391e77984200bf0a +size 3906 diff --git a/redwood-layout-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/AbstractFlexContainerTest.kt b/redwood-layout-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/AbstractFlexContainerTest.kt index 1ac4a93e7..02b7a15d3 100644 --- a/redwood-layout-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/AbstractFlexContainerTest.kt +++ b/redwood-layout-shared-test/src/commonMain/kotlin/app/cash/redwood/layout/AbstractFlexContainerTest.kt @@ -22,6 +22,7 @@ import app.cash.redwood.layout.api.MainAxisAlignment import app.cash.redwood.layout.api.Overflow import app.cash.redwood.layout.widget.Column import app.cash.redwood.layout.widget.Row +import app.cash.redwood.layout.widget.Spacer import app.cash.redwood.snapshot.testing.Blue import app.cash.redwood.snapshot.testing.Green import app.cash.redwood.snapshot.testing.Red @@ -53,6 +54,10 @@ abstract class AbstractFlexContainerTest { /** Returns a non-lazy flex container column, even if the test is for a LazyList. */ abstract fun column(): Column + abstract fun spacer( + backgroundColor: Int = argb(17, 0, 0, 0), + ): Spacer + abstract fun snapshotter(widget: T): Snapshotter @Test fun testEmptyLayout_Column() { @@ -829,6 +834,43 @@ abstract class AbstractFlexContainerTest { snapshotter(fullWidthParent.value).snapshot() } + + /** + * We were incorrectly collapsing the dimensions of the widget. + * https://github.com/cashapp/redwood/issues/2018 + */ + @Test fun testWidgetWithFlexModifierNestedInRowAndColumn() { + val root = flexContainer(FlexDirection.Column).apply { + width(Constraint.Fill) + height(Constraint.Fill) + margin(Margin(top = 24.dp)) + modifier = Modifier + } + + val rootChild0 = row().apply { + width(Constraint.Fill) + horizontalAlignment(MainAxisAlignment.Center) + root.children.insert(0, this) + } + + val rootChild0Child0 = column().apply { + width(Constraint.Fill) + height(Constraint.Fill) + horizontalAlignment(CrossAxisAlignment.Stretch) + modifier = Modifier + .then(MarginImpl(Margin(start = 24.dp, end = 24.dp))) + .then(FlexImpl(1.0)) + rootChild0.children.insert(0, this) + } + + val rootChild0Child0Child0 = spacer().apply { + width(48.dp) + height(48.dp) + rootChild0Child0.children.insert(0, this) + } + + snapshotter(root.value).snapshot() + } } interface TestFlexContainer : diff --git a/redwood-layout-uiview/RedwoodLayoutUIViewTests/__Snapshots__/UIViewFlexContainerTestHost/testWidgetWithFlexModifierNestedInRowAndColumn.1.png b/redwood-layout-uiview/RedwoodLayoutUIViewTests/__Snapshots__/UIViewFlexContainerTestHost/testWidgetWithFlexModifierNestedInRowAndColumn.1.png new file mode 100644 index 000000000..1312d19dd --- /dev/null +++ b/redwood-layout-uiview/RedwoodLayoutUIViewTests/__Snapshots__/UIViewFlexContainerTestHost/testWidgetWithFlexModifierNestedInRowAndColumn.1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:935125d0e6af227eedf349e9b908618ebfd5bd1f35893e383e69bba1ed548e29 +size 65804 diff --git a/redwood-layout-uiview/src/commonTest/kotlin/app/cash/redwood/layout/uiview/UIViewFlexContainerTest.kt b/redwood-layout-uiview/src/commonTest/kotlin/app/cash/redwood/layout/uiview/UIViewFlexContainerTest.kt index 53f51ec32..a151d0916 100644 --- a/redwood-layout-uiview/src/commonTest/kotlin/app/cash/redwood/layout/uiview/UIViewFlexContainerTest.kt +++ b/redwood-layout-uiview/src/commonTest/kotlin/app/cash/redwood/layout/uiview/UIViewFlexContainerTest.kt @@ -21,6 +21,7 @@ import app.cash.redwood.layout.TestFlexContainer import app.cash.redwood.layout.api.Constraint import app.cash.redwood.layout.api.CrossAxisAlignment import app.cash.redwood.layout.widget.FlexContainer +import app.cash.redwood.layout.widget.Spacer import app.cash.redwood.snapshot.testing.UIViewSnapshotCallback import app.cash.redwood.snapshot.testing.UIViewSnapshotter import app.cash.redwood.snapshot.testing.UIViewTestWidgetFactory @@ -68,6 +69,13 @@ class UIViewFlexContainerTest( override fun column() = flexContainer(FlexDirection.Column) + override fun spacer(backgroundColor: Int): Spacer { + return UIViewRedwoodLayoutWidgetFactory().Spacer() + .apply { + value.backgroundColor = backgroundColor.toUIColor() + } + } + class UIViewTestFlexContainer internal constructor( private val delegate: UIViewFlexContainer, ) : TestFlexContainer, diff --git a/redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/YogaLayout.kt b/redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/YogaLayout.kt index 930c433ae..8eecd13b5 100644 --- a/redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/YogaLayout.kt +++ b/redwood-layout-view/src/main/kotlin/app/cash/redwood/layout/view/YogaLayout.kt @@ -73,11 +73,13 @@ internal class YogaLayout(context: Context) : ViewGroup(context) { calculateLayout( requestedWidth = when { widthMode == MeasureSpec.EXACTLY -> widthSize.toFloat() + widthMode == MeasureSpec.UNSPECIFIED -> Size.UNDEFINED widthConstraint == Constraint.Fill -> widthSize.toFloat() else -> Size.UNDEFINED }, requestedHeight = when { heightMode == MeasureSpec.EXACTLY -> heightSize.toFloat() + heightMode == MeasureSpec.UNSPECIFIED -> Size.UNDEFINED heightConstraint == Constraint.Fill -> heightSize.toFloat() else -> Size.UNDEFINED }, diff --git a/redwood-layout-view/src/test/kotlin/app/cash/redwood/layout/view/ViewFlexContainerTest.kt b/redwood-layout-view/src/test/kotlin/app/cash/redwood/layout/view/ViewFlexContainerTest.kt index 050caa17e..cf867476b 100644 --- a/redwood-layout-view/src/test/kotlin/app/cash/redwood/layout/view/ViewFlexContainerTest.kt +++ b/redwood-layout-view/src/test/kotlin/app/cash/redwood/layout/view/ViewFlexContainerTest.kt @@ -21,6 +21,7 @@ import app.cash.paparazzi.Paparazzi import app.cash.redwood.layout.AbstractFlexContainerTest import app.cash.redwood.layout.TestFlexContainer import app.cash.redwood.layout.widget.FlexContainer +import app.cash.redwood.layout.widget.Spacer import app.cash.redwood.snapshot.testing.ViewSnapshotter import app.cash.redwood.snapshot.testing.ViewTestWidgetFactory import app.cash.redwood.ui.Px @@ -63,6 +64,13 @@ class ViewFlexContainerTest( override fun column() = flexContainer(FlexDirection.Column) + override fun spacer(backgroundColor: Int): Spacer { + return ViewSpacer(paparazzi.context) + .apply { + setBackgroundColor(backgroundColor) + } + } + override fun snapshotter(widget: View) = ViewSnapshotter(paparazzi, widget) class ViewTestFlexContainer internal constructor( diff --git a/redwood-layout-view/src/test/snapshots/images/app.cash.redwood.layout.view_ViewFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png b/redwood-layout-view/src/test/snapshots/images/app.cash.redwood.layout.view_ViewFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png new file mode 100644 index 000000000..f92dbb877 --- /dev/null +++ b/redwood-layout-view/src/test/snapshots/images/app.cash.redwood.layout.view_ViewFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:aeff5cb1d11342d549ee6418a60809736bc4b321d573f55a67469bbb064d7e1c +size 3909 diff --git a/redwood-layout-view/src/test/snapshots/images/app.cash.redwood.layout.view_ViewFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png b/redwood-layout-view/src/test/snapshots/images/app.cash.redwood.layout.view_ViewFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png new file mode 100644 index 000000000..f92dbb877 --- /dev/null +++ b/redwood-layout-view/src/test/snapshots/images/app.cash.redwood.layout.view_ViewFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:aeff5cb1d11342d549ee6418a60809736bc4b321d573f55a67469bbb064d7e1c +size 3909 diff --git a/redwood-lazylayout-composeui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiLazyListTest.kt b/redwood-lazylayout-composeui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiLazyListTest.kt index 5447db0c5..ebda3edd3 100644 --- a/redwood-lazylayout-composeui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiLazyListTest.kt +++ b/redwood-lazylayout-composeui/src/androidUnitTest/kotlin/app/cash/redwood/layout/composeui/ComposeUiLazyListTest.kt @@ -27,6 +27,7 @@ import app.cash.redwood.layout.api.MainAxisAlignment import app.cash.redwood.layout.api.Overflow import app.cash.redwood.layout.widget.Column import app.cash.redwood.layout.widget.Row +import app.cash.redwood.layout.widget.Spacer import app.cash.redwood.lazylayout.composeui.ComposeUiLazyList import app.cash.redwood.lazylayout.widget.LazyList import app.cash.redwood.snapshot.testing.ComposeSnapshotter @@ -70,6 +71,11 @@ class ComposeUiLazyListTest( return ComposeUiRedwoodLayoutWidgetFactory().Column() } + override fun spacer(backgroundColor: Int): Spacer<@Composable () -> Unit> { + // TODO: honor backgroundColor. + return ComposeUiRedwoodLayoutWidgetFactory().Spacer() + } + override fun snapshotter(widget: @Composable () -> Unit) = ComposeSnapshotter(paparazzi, widget) class ComposeTestFlexContainer private constructor( diff --git a/redwood-lazylayout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png b/redwood-lazylayout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png new file mode 100644 index 000000000..31a853a64 --- /dev/null +++ b/redwood-lazylayout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:500df5359bd2f1aba6eb335cbba1acd26584374366ca8565d93c47f1e34a4606 +size 3844 diff --git a/redwood-lazylayout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png b/redwood-lazylayout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png new file mode 100644 index 000000000..31a853a64 --- /dev/null +++ b/redwood-lazylayout-composeui/src/test/snapshots/images/app.cash.redwood.layout.composeui_ComposeUiLazyListTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:500df5359bd2f1aba6eb335cbba1acd26584374366ca8565d93c47f1e34a4606 +size 3844 diff --git a/redwood-lazylayout-uiview/RedwoodLazylayoutUIViewTests/__Snapshots__/UIViewLazyListAsFlexContainerTestHost/testWidgetWithFlexModifierNestedInRowAndColumn.1.png b/redwood-lazylayout-uiview/RedwoodLazylayoutUIViewTests/__Snapshots__/UIViewLazyListAsFlexContainerTestHost/testWidgetWithFlexModifierNestedInRowAndColumn.1.png new file mode 100644 index 000000000..825c896dc --- /dev/null +++ b/redwood-lazylayout-uiview/RedwoodLazylayoutUIViewTests/__Snapshots__/UIViewLazyListAsFlexContainerTestHost/testWidgetWithFlexModifierNestedInRowAndColumn.1.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2e63d8061520f28e90252d1d2473c594773c707b2156541981933840f5036207 +size 65306 diff --git a/redwood-lazylayout-uiview/src/commonTest/kotlin/app/cash/redwood/lazylayout/uiview/UIViewLazyListAsFlexContainerTest.kt b/redwood-lazylayout-uiview/src/commonTest/kotlin/app/cash/redwood/lazylayout/uiview/UIViewLazyListAsFlexContainerTest.kt index 87486c226..1ecb5710f 100644 --- a/redwood-lazylayout-uiview/src/commonTest/kotlin/app/cash/redwood/lazylayout/uiview/UIViewLazyListAsFlexContainerTest.kt +++ b/redwood-lazylayout-uiview/src/commonTest/kotlin/app/cash/redwood/lazylayout/uiview/UIViewLazyListAsFlexContainerTest.kt @@ -20,6 +20,7 @@ import app.cash.redwood.layout.TestFlexContainer import app.cash.redwood.layout.api.MainAxisAlignment import app.cash.redwood.layout.api.Overflow import app.cash.redwood.layout.uiview.UIViewRedwoodLayoutWidgetFactory +import app.cash.redwood.layout.widget.Spacer import app.cash.redwood.lazylayout.toUIColor import app.cash.redwood.lazylayout.widget.LazyList import app.cash.redwood.snapshot.testing.UIViewSnapshotCallback @@ -47,6 +48,13 @@ class UIViewLazyListAsFlexContainerTest( override fun column() = UIViewRedwoodLayoutWidgetFactory().Column() + override fun spacer(backgroundColor: Int): Spacer { + return UIViewRedwoodLayoutWidgetFactory().Spacer() + .apply { + value.backgroundColor = backgroundColor.toUIColor() + } + } + override fun snapshotter(widget: UIView) = UIViewSnapshotter.framed(callback, widget) class ViewTestFlexContainer private constructor( diff --git a/redwood-lazylayout-view/src/test/kotlin/app/cash/redwood/lazylayout/view/ViewLazyListAsFlexContainerTest.kt b/redwood-lazylayout-view/src/test/kotlin/app/cash/redwood/lazylayout/view/ViewLazyListAsFlexContainerTest.kt index 9a5541b82..7bccefcfe 100644 --- a/redwood-lazylayout-view/src/test/kotlin/app/cash/redwood/lazylayout/view/ViewLazyListAsFlexContainerTest.kt +++ b/redwood-lazylayout-view/src/test/kotlin/app/cash/redwood/lazylayout/view/ViewLazyListAsFlexContainerTest.kt @@ -26,6 +26,7 @@ import app.cash.redwood.layout.api.Overflow import app.cash.redwood.layout.view.ViewRedwoodLayoutWidgetFactory import app.cash.redwood.layout.widget.Column import app.cash.redwood.layout.widget.Row +import app.cash.redwood.layout.widget.Spacer import app.cash.redwood.lazylayout.widget.LazyList import app.cash.redwood.snapshot.testing.ViewSnapshotter import app.cash.redwood.snapshot.testing.ViewTestWidgetFactory @@ -69,6 +70,13 @@ class ViewLazyListAsFlexContainerTest( return ViewRedwoodLayoutWidgetFactory(paparazzi.context).Column() } + override fun spacer(backgroundColor: Int): Spacer { + return ViewRedwoodLayoutWidgetFactory(paparazzi.context).Spacer() + .apply { + value.setBackgroundColor(backgroundColor) + } + } + override fun snapshotter(widget: View) = ViewSnapshotter(paparazzi, widget) class ViewTestFlexContainer private constructor( diff --git a/redwood-lazylayout-view/src/test/snapshots/images/app.cash.redwood.lazylayout.view_ViewLazyListAsFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png b/redwood-lazylayout-view/src/test/snapshots/images/app.cash.redwood.lazylayout.view_ViewLazyListAsFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png new file mode 100644 index 000000000..ebb6a426e --- /dev/null +++ b/redwood-lazylayout-view/src/test/snapshots/images/app.cash.redwood.lazylayout.view_ViewLazyListAsFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[LTR].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cdca08973fd5cbf55a12717a65eaa147bbfaff662cc7dca62bcae0f9d63a9859 +size 3837 diff --git a/redwood-lazylayout-view/src/test/snapshots/images/app.cash.redwood.lazylayout.view_ViewLazyListAsFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png b/redwood-lazylayout-view/src/test/snapshots/images/app.cash.redwood.lazylayout.view_ViewLazyListAsFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png new file mode 100644 index 000000000..ebb6a426e --- /dev/null +++ b/redwood-lazylayout-view/src/test/snapshots/images/app.cash.redwood.lazylayout.view_ViewLazyListAsFlexContainerTest_testWidgetWithFlexModifierNestedInRowAndColumn[RTL].png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cdca08973fd5cbf55a12717a65eaa147bbfaff662cc7dca62bcae0f9d63a9859 +size 3837