DataViews: Rename the header property of fields to label (#63843)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>
WordPress · Jul 23, 2024 · fe0dcf4 · fe0dcf4 · github-actions · Jul 23, 2024
1 parent 8446fc7
commit fe0dcf4
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 35 deletions.
diff --git a/packages/dataviews/CHANGELOG.md b/packages/dataviews/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 - `onSelectionChange` prop has been renamed to `onChangeSelection` and its argument has been updated to be a list of ids.
 - `setSelection` prop has been removed. Please use `onChangeSelection` instead.
+- `header` field property has been renamed to `label`.
 
 ## 3.0.0 (2024-07-10)
 

diff --git a/packages/dataviews/src/components/dataform/index.tsx b/packages/dataviews/src/components/dataform/index.tsx
@@ -33,7 +33,7 @@ function DataFormTextControl< Item >( {
 	field,
 	onChange,
 }: DataFormControlProps< Item > ) {
-	const { id, header, placeholder } = field;
+	const { id, label, placeholder } = field;
 	const value = field.getValue( { item: data } );
 
 	const onChangeControl = useCallback(
@@ -47,7 +47,7 @@ function DataFormTextControl< Item >( {
 
 	return (
 		<TextControl
-			label={ header }
+			label={ label }
 			placeholder={ placeholder }
 			value={ value }
 			onChange={ onChangeControl }

diff --git a/packages/dataviews/src/components/dataviews-filters/index.tsx b/packages/dataviews/src/components/dataviews-filters/index.tsx
@@ -33,7 +33,7 @@ function Filters() {
 		const isPrimary = !! field.filterBy?.isPrimary;
 		filters.push( {
 			field: field.id,
-			name: field.header,
+			name: field.label,
 			elements: field.elements,
 			singleSelection: operators.some( ( op ) =>
 				[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( op )

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -183,7 +183,7 @@ function FieldsVisibilityMenu< Item >( {
 						} }
 					>
 						<DropdownMenuItemLabel>
-							{ field.header }
+							{ field.label }
 						</DropdownMenuItemLabel>
 					</DropdownMenuCheckboxItem>
 				);
@@ -212,7 +212,7 @@ function SortMenu< Item >( {
 				<DropdownMenuItem
 					suffix={
 						<span aria-hidden="true">
-							{ currentSortedField?.header }
+							{ currentSortedField?.label }
 						</span>
 					}
 				>
@@ -230,7 +230,7 @@ function SortMenu< Item >( {
 						trigger={
 							<DropdownMenuItem>
 								<DropdownMenuItemLabel>
-									{ field.header }
+									{ field.label }
 								</DropdownMenuItemLabel>
 							</DropdownMenuItem>
 						}

diff --git a/packages/dataviews/src/layouts/grid/index.tsx b/packages/dataviews/src/layouts/grid/index.tsx
@@ -145,7 +145,7 @@ function GridItem< Item >( {
 							>
 								<>
 									<FlexItem className="dataviews-view-grid__field-name">
-										{ field.header }
+										{ field.label }
 									</FlexItem>
 									<FlexItem
 										className="dataviews-view-grid__field-value"

diff --git a/packages/dataviews/src/layouts/list/index.tsx b/packages/dataviews/src/layouts/list/index.tsx
@@ -185,7 +185,7 @@ function ListItem< Item >( {
 												as="span"
 												className="dataviews-view-list__field-label"
 											>
-												{ field.header }
+												{ field.label }
 											</VisuallyHidden>
 											<span className="dataviews-view-list__field-value">
 												<field.render item={ item } />

diff --git a/packages/dataviews/src/layouts/table/column-header-menu.tsx b/packages/dataviews/src/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.header;
+		return combinedField.label;
 	}
 	const field = fields.find( ( f ) => f.id === fieldId );
 	if ( ! field ) {
@@ -92,7 +92,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 		!! operators.length &&
 		! field.filterBy?.isPrimary;
 	if ( ! isSortable && ! isHidable && ! canAddFilter ) {
-		return field.header;
+		return field.label;
 	}
 	return (
 		<DropdownMenu
@@ -104,7 +104,7 @@ const _HeaderMenu = forwardRef( function HeaderMenu< Item >(
 					ref={ ref }
 					variant="tertiary"
 				>
-					{ field.header }
+					{ field.label }
 					{ 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
@@ -19,7 +19,7 @@ export function normalizeFields< Item >(
 
 		return {
 			...field,
-			header: field.header || field.id,
+			label: field.label || field.id,
 			getValue,
 			render: field.render || getValue,
 		};

diff --git a/packages/dataviews/src/stories/fixtures.js b/packages/dataviews/src/stories/fixtures.js
@@ -160,7 +160,7 @@ export const actions = [
 
 export const fields = [
 	{
-		header: 'Image',
+		label: 'Image',
 		id: 'image',
 		render: ( { item } ) => {
 			return (
@@ -170,13 +170,13 @@ export const fields = [
 		enableSorting: false,
 	},
 	{
-		header: 'Title',
+		label: 'Title',
 		id: 'title',
 		enableHiding: false,
 		enableGlobalSearch: true,
 	},
 	{
-		header: 'Type',
+		label: 'Type',
 		id: 'type',
 		enableHiding: false,
 		elements: [
@@ -187,18 +187,18 @@ export const fields = [
 		],
 	},
 	{
-		header: 'Satellites',
+		label: 'Satellites',
 		id: 'satellites',
 		enableSorting: true,
 	},
 	{
-		header: 'Description',
+		label: 'Description',
 		id: 'description',
 		enableSorting: false,
 		enableGlobalSearch: true,
 	},
 	{
-		header: 'Categories',
+		label: 'Categories',
 		id: 'categories',
 		elements: [
 			{ value: 'Space', label: 'Space' },

diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts
@@ -63,7 +63,7 @@ export type Field< Item > = {
 	/**
 	 * The label of the field. Defaults to the id.
 	 */
-	header?: string;
+	label?: string;
 
 	/**
 	 * Placeholder for the field.
@@ -116,7 +116,7 @@ export type Field< Item > = {
 	  } );
 
 export type NormalizedField< Item > = Field< Item > & {
-	header: string;
+	label: string;
 	getValue: ( args: { item: Item } ) => any;
 	render: ComponentType< { item: Item } >;
 };
@@ -242,7 +242,7 @@ interface ViewBase {
 export interface CombinedField {
 	id: string;
 
-	header: string;
+	label: string;
 
 	/**
 	 * The fields to use as columns.

diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
@@ -284,15 +284,15 @@ export default function DataviewsPatterns() {
 	const fields = useMemo( () => {
 		const _fields = [
 			{
-				header: __( 'Preview' ),
+				label: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => (
 					<Preview item={ item } viewType={ view.type } />
 				),
 				enableSorting: false,
 			},
 			{
-				header: __( 'Title' ),
+				label: __( 'Title' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.raw || item.title,
 				render: ( { item } ) => <Title item={ item } />,
@@ -302,7 +302,7 @@ export default function DataviewsPatterns() {
 
 		if ( type === PATTERN_TYPES.user ) {
 			_fields.push( {
-				header: __( 'Sync status' ),
+				label: __( 'Sync status' ),
 				id: 'sync-status',
 				render: ( { item } ) => {
 					const syncStatus =
@@ -333,7 +333,7 @@ export default function DataviewsPatterns() {
 			} );
 		} else if ( type === TEMPLATE_PART_POST_TYPE ) {
 			_fields.push( {
-				header: __( 'Author' ),
+				label: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item.author_text,
 				render: ( { item } ) => {

diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -58,7 +58,7 @@ const defaultLayouts = {
 			combinedFields: [
 				{
 					id: 'template',
-					header: __( 'Template' ),
+					label: __( 'Template' ),
 					children: [ 'title', 'description' ],
 					direction: 'vertical',
 				},
@@ -286,15 +286,15 @@ export default function PageTemplates() {
 	const fields = useMemo(
 		() => [
 			{
-				header: __( 'Preview' ),
+				label: __( 'Preview' ),
 				id: 'preview',
 				render: ( { item } ) => {
 					return <Preview item={ item } viewType={ view.type } />;
 				},
 				enableSorting: false,
 			},
 			{
-				header: __( 'Template' ),
+				label: __( 'Template' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered,
 				render: ( { item } ) => (
@@ -304,7 +304,7 @@ export default function PageTemplates() {
 				enableGlobalSearch: true,
 			},
 			{
-				header: __( 'Description' ),
+				label: __( 'Description' ),
 				id: 'description',
 				render: ( { item } ) => {
 					return (
@@ -319,7 +319,7 @@ export default function PageTemplates() {
 				enableGlobalSearch: true,
 			},
 			{
-				header: __( 'Author' ),
+				label: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item.author_text,
 				render: ( { item } ) => {

diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
@@ -167,15 +167,15 @@ function usePostFields( viewType ) {
 		() => [
 			{
 				id: 'featured-image',
-				header: __( 'Featured Image' ),
+				label: __( 'Featured Image' ),
 				getValue: ( { item } ) => item.featured_media,
 				render: ( { item } ) => (
 					<FeaturedImage item={ item } viewType={ viewType } />
 				),
 				enableSorting: false,
 			},
 			{
-				header: __( 'Title' ),
+				label: __( 'Title' ),
 				id: 'title',
 				type: 'text',
 				getValue: ( { item } ) =>
@@ -233,7 +233,7 @@ function usePostFields( viewType ) {
 				enableHiding: false,
 			},
 			{
-				header: __( 'Author' ),
+				label: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
 				elements:
@@ -244,7 +244,7 @@ function usePostFields( viewType ) {
 				render: PostAuthorField,
 			},
 			{
-				header: __( 'Status' ),
+				label: __( 'Status' ),
 				id: 'status',
 				getValue: ( { item } ) =>
 					STATUSES.find( ( { value } ) => value === item.status )
@@ -257,7 +257,7 @@ function usePostFields( viewType ) {
 				},
 			},
 			{
-				header: __( 'Date' ),
+				label: __( 'Date' ),
 				id: 'date',
 				render: ( { item } ) => {
 					const isDraftOrPrivate = [ 'draft', 'private' ].includes(