From edd5381d94965f9b00198c236966bb6e2eaa21dc Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 20 Aug 2024 13:38:59 +0200
Subject: [PATCH 1/2] DataViews: Support defining field headers/names as React
 elements

---
 packages/dataviews/CHANGELOG.md                    |  8 +++++++-
 .../src/components/dataviews/stories/fixtures.js   | 14 +++++++++++++-
 .../components/dataviews/stories/index.story.js    |  8 +++++++-
 .../dataviews/src/dataviews-layouts/grid/index.tsx |  2 +-
 .../dataviews-layouts/table/column-header-menu.tsx |  4 ++--
 packages/dataviews/src/normalize-fields.ts         |  1 +
 packages/dataviews/src/types.ts                    |  9 +++++++++
 7 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
index cc6f4df9428b0..d51cf9c969016 100644
--- a/packages/dataviews/CHANGELOG.md
+++ b/packages/dataviews/CHANGELOG.md
@@ -2,7 +2,13 @@
 
 ## Unreleased
 
-- The "move left/move right" controls in the table layout (popup displayed on cliking header) are always visible. ([#64646](https://github.com/WordPress/gutenberg/pull/64646)). Before this, its visibility depending on filters, enableSorting, and enableHiding.
+## New features
+
+-   Support using a component for field headers or names by providing a `header` property in the field object. The string `label` property (or `id`) is still mandatory. ([#64642](https://github.com/WordPress/gutenberg/pull/64642)).
+
+## Internal
+
+-   The "move left/move right" controls in the table layout (popup displayed on cliking header) are always visible. ([#64646](https://github.com/WordPress/gutenberg/pull/64646)). Before this, its visibility depending on filters, enableSorting, and enableHiding.
 
 ## 4.1.0 (2024-08-07)
 
diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.js b/packages/dataviews/src/components/dataviews/stories/fixtures.js
index f89cea81e6f15..e6a72f509b855 100644
--- a/packages/dataviews/src/components/dataviews/stories/fixtures.js
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { trash } from '@wordpress/icons';
+import { trash, image, Icon, category } from '@wordpress/icons';
 import {
 	Button,
 	__experimentalText as Text,
@@ -173,6 +173,12 @@ export const fields = [
 	{
 		label: 'Image',
 		id: 'image',
+		header: (
+			<HStack justify="start">
+				<Icon icon={ image } />
+				<span>Image</span>
+			</HStack>
+		),
 		render: ( { item } ) => {
 			return (
 				<img src={ item.image } alt="" style={ { width: '100%' } } />
@@ -217,6 +223,12 @@ export const fields = [
 	{
 		label: 'Categories',
 		id: 'categories',
+		header: (
+			<HStack justify="start">
+				<Icon icon={ category } />
+				<span>Categories</span>
+			</HStack>
+		),
 		elements: [
 			{ value: 'Space', label: 'Space' },
 			{ value: 'NASA', label: 'NASA' },
diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.js b/packages/dataviews/src/components/dataviews/stories/index.story.js
index 9ce1c29573e55..376b14a464666 100644
--- a/packages/dataviews/src/components/dataviews/stories/index.story.js
+++ b/packages/dataviews/src/components/dataviews/stories/index.story.js
@@ -8,7 +8,7 @@ import { useState, useMemo } from '@wordpress/element';
  */
 import DataViews from '../index';
 import { DEFAULT_VIEW, actions, data, fields } from './fixtures';
-import { LAYOUT_GRID, LAYOUT_TABLE } from '../../../constants';
+import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
 import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
 
 const meta = {
@@ -61,5 +61,11 @@ Default.args = {
 				primaryField: 'title',
 			},
 		},
+		[ LAYOUT_LIST ]: {
+			layout: {
+				mediaField: 'image',
+				primaryField: 'title',
+			},
+		},
 	},
 };
diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index c8cac31bf7db8..230ffe0dc50b5 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -145,7 +145,7 @@ function GridItem< Item >( {
 							>
 								<>
 									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.label }
+										{ field.header }
 									</FlexItem>
 									<FlexItem
 										className="dataviews-view-grid__field-value"
diff --git a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
index b8fd0517e49d1..ba672715b91cc 100644
--- a/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
+++ b/packages/dataviews/src/dataviews-layouts/table/column-header-menu.tsx
@@ -72,7 +72,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 	);
 	const index = view.fields?.indexOf( fieldId ) as number;
 	if ( !! combinedField ) {
-		return combinedField.label;
+		return combinedField.header || combinedField.label;
 	}
 	const field = fields.find( ( f ) => f.id === fieldId );
 	if ( ! field ) {
@@ -102,7 +102,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 					ref={ ref }
 					variant="tertiary"
 				>
-					{ field.label }
+					{ field.header }
 					{ view.sort && isSorted && (
 						<span aria-hidden="true">
 							{ sortArrows[ view.sort.direction ] }
diff --git a/packages/dataviews/src/normalize-fields.ts b/packages/dataviews/src/normalize-fields.ts
index f9f95b5b8140d..5f0baec12c4df 100644
--- a/packages/dataviews/src/normalize-fields.ts
+++ b/packages/dataviews/src/normalize-fields.ts
@@ -55,6 +55,7 @@ export function normalizeFields< Item >(
 		return {
 			...field,
 			label: field.label || field.id,
+			header: field.header || field.label || field.id,
 			getValue,
 			render,
 			sort,
diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
index fa5cec8d7d032..ca55442f6529a 100644
--- a/packages/dataviews/src/types.ts
+++ b/packages/dataviews/src/types.ts
@@ -87,6 +87,12 @@ export type Field< Item > = {
 	 */
 	label?: string;
 
+	/**
+	 * The header of the field. Defaults to the label.
+	 * It allows the usage of a React Element to render the field labels.
+	 */
+	header?: string | ReactElement;
+
 	/**
 	 * A description of the field.
 	 */
@@ -151,6 +157,7 @@ export type Field< Item > = {
 
 export type NormalizedField< Item > = Field< Item > & {
 	label: string;
+	header: string | ReactElement;
 	getValue: ( args: { item: Item } ) => any;
 	render: ComponentType< { item: Item } >;
 	Edit: ComponentType< DataFormControlProps< Item > >;
@@ -289,6 +296,8 @@ export interface CombinedField {
 
 	label: string;
 
+	header?: string | ReactElement;
+
 	/**
 	 * The fields to use as columns.
 	 */

From 2de9530c1b5032daf6b187a40020499131b93058 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 21 Aug 2024 11:15:28 +0200
Subject: [PATCH 2/2] Use 4px spacing

---
 .../dataviews/src/components/dataviews/stories/fixtures.js    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.js b/packages/dataviews/src/components/dataviews/stories/fixtures.js
index e6a72f509b855..50401d97b026b 100644
--- a/packages/dataviews/src/components/dataviews/stories/fixtures.js
+++ b/packages/dataviews/src/components/dataviews/stories/fixtures.js
@@ -174,7 +174,7 @@ export const fields = [
 		label: 'Image',
 		id: 'image',
 		header: (
-			<HStack justify="start">
+			<HStack spacing={ 1 } justify="start">
 				<Icon icon={ image } />
 				<span>Image</span>
 			</HStack>
@@ -224,7 +224,7 @@ export const fields = [
 		label: 'Categories',
 		id: 'categories',
 		header: (
-			<HStack justify="start">
+			<HStack spacing={ 1 } justify="start">
 				<Icon icon={ category } />
 				<span>Categories</span>
 			</HStack>