From 4d2fb64425d7653315997d9c4003f1fa6a4f912a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Fri, 22 Nov 2024 11:24:12 +0100
Subject: [PATCH] DataViews: fix spacing when combining combined fields
 (#67226)

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
---
 .../components/dataviews/stories/fixtures.tsx  |  1 +
 .../dataviews/stories/index.story.tsx          | 18 +++++++++++++++---
 .../src/dataviews-layouts/table/index.tsx      |  6 +++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
index ff098209b34684..6c74c516853c5b 100644
--- a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
@@ -558,6 +558,7 @@ export const themeFields: Field< Theme >[] = [
 	},
 	{ id: 'requires', label: 'Requires at least' },
 	{ id: 'tested', label: 'Tested up to' },
+	{ id: 'icon', label: 'Icon', render: () => <Icon icon={ image } /> },
 	{
 		id: 'tags',
 		label: 'Tags',
diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.tsx b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
index 878677d2eb30c6..6161af125b5ca4 100644
--- a/packages/dataviews/src/components/dataviews/stories/index.story.tsx
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
@@ -137,16 +137,28 @@ export const FieldsNoSortableNoHidable = () => {
 export const CombinedFields = () => {
 	const defaultLayoutsThemes = {
 		table: {
-			fields: [ 'theme', 'requires', 'tested' ],
+			fields: [ 'theme_with_combined', 'theme_with_simple' ],
 			layout: {
 				primaryField: 'name',
 				combinedFields: [
 					{
-						id: 'theme',
+						id: 'name_tested',
 						label: 'Theme',
-						children: [ 'name', 'description' ],
+						children: [ 'name', 'tested' ],
 						direction: 'vertical',
 					},
+					{
+						id: 'theme_with_combined',
+						label: 'Combine combined fields',
+						children: [ 'icon', 'name_tested' ],
+						direction: 'horizontal',
+					},
+					{
+						id: 'theme_with_simple',
+						label: 'Combine simple fields',
+						children: [ 'icon', 'name' ],
+						direction: 'horizontal',
+					},
 				] as CombinedField[],
 				styles: {
 					theme: {
diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx
index 8ef41db1c38798..db76d24b53bfa3 100644
--- a/packages/dataviews/src/dataviews-layouts/table/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx
@@ -147,7 +147,11 @@ function TableColumnCombined< Item >( {
 	) );
 
 	if ( field.direction === 'horizontal' ) {
-		return <HStack spacing={ 3 }>{ children }</HStack>;
+		return (
+			<HStack spacing={ 3 } justify="flex-start">
+				{ children }
+			</HStack>
+		);
 	}
 	return <VStack spacing={ 0 }>{ children }</VStack>;
 }