Update: Use status icons in field display. (#63289)

Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Jul 9, 2024 · 88163ea · 88163ea
1 parent 38a495e
commit 88163ea
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 8 deletions.
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
@@ -547,7 +547,7 @@
 		}
 
 		.dataviews-view-list__field-value {
-			line-height: $grid-unit-05 * 5;
+			line-height: $grid-unit-05 * 6;
 			display: inline-flex;
 		}
 	}

diff --git a/packages/edit-site/src/components/posts-app/posts-list.js b/packages/edit-site/src/components/posts-app/posts-list.js
@@ -26,7 +26,15 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { DataViews } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { commentAuthorAvatar as authorIcon } from '@wordpress/icons';
+import {
+	trash,
+	drafts,
+	published,
+	scheduled,
+	pending,
+	notAllowed,
+	commentAuthorAvatar as authorIcon,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -164,12 +172,12 @@ function useView( postType ) {
 // See https://github.com/WordPress/gutenberg/issues/55886
 // We do not support custom statutes at the moment.
 const STATUSES = [
-	{ value: 'draft', label: __( 'Draft' ) },
-	{ value: 'future', label: __( 'Scheduled' ) },
-	{ value: 'pending', label: __( 'Pending Review' ) },
-	{ value: 'private', label: __( 'Private' ) },
-	{ value: 'publish', label: __( 'Published' ) },
-	{ value: 'trash', label: __( 'Trash' ) },
+	{ value: 'draft', label: __( 'Draft' ), icon: drafts },
+	{ value: 'future', label: __( 'Scheduled' ), icon: scheduled },
+	{ value: 'pending', label: __( 'Pending Review' ), icon: pending },
+	{ value: 'private', label: __( 'Private' ), icon: notAllowed },
+	{ value: 'publish', label: __( 'Published' ), icon: published },
+	{ value: 'trash', label: __( 'Trash' ), icon: trash },
 ];
 const DEFAULT_STATUSES = 'draft,future,pending,private,publish'; // All but 'trash'.
 
@@ -217,6 +225,22 @@ function getItemId( item ) {
 	return item.id.toString();
 }
 
+function PostStatusField( { item } ) {
+	const status = STATUSES.find( ( { value } ) => value === item.status );
+	const label = status?.label || item.status;
+	const icon = status?.icon;
+	return (
+		<HStack alignment="left" spacing={ 1 }>
+			{ icon && (
+				<div className="posts-list-page-post-author-field__icon-container">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span>{ label }</span>
+		</HStack>
+	);
+}
+
 function PostAuthorField( { item, viewType } ) {
 	const { text, icon, imageUrl } = useSelect(
 		( select ) => {
@@ -460,6 +484,7 @@ export default function PostsList( { postType } ) {
 					STATUSES.find( ( { value } ) => value === item.status )
 						?.label ?? item.status,
 				elements: STATUSES,
+				render: PostStatusField,
 				enableSorting: false,
 				filterBy: {
 					operators: [ OPERATOR_IS_ANY ],

diff --git a/packages/edit-site/src/components/posts-app/style.scss b/packages/edit-site/src/components/posts-app/style.scss
@@ -73,3 +73,10 @@
 	font-weight: 400;
 	flex-shrink: 0;
 }
+
+.posts-list-page-post-author-field__icon-container {
+	height: $grid-unit-30;
+	svg {
+		fill: currentColor;
+	}
+}