DataViews: fix spacing when combining combined fields (#67226)

Co-authored-by: oandregal <[email protected]> Co-authored-by: youknowriad <[email protected]>
WordPress · Nov 22, 2024 · 4d2fb64 · 4d2fb64 · github-actions · Nov 22, 2024
1 parent 2919c5c
commit 4d2fb64
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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>;
 }