From 006fb8c0b1eb12476bf4619738547ef5d8d561ba Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Wed, 7 Aug 2024 15:10:08 +0100
Subject: [PATCH] enhacements

---
 .../dataviews-view-config/index.tsx           | 74 +++++++++----------
 .../dataviews-view-config/style.scss          |  2 +-
 packages/dataviews/src/constants.ts           | 15 ++--
 3 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
index bd4c8a5116e3bc..28e151079008eb 100644
--- a/packages/dataviews/src/components/dataviews-view-config/index.tsx
+++ b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -11,6 +11,7 @@ import {
 	Popover,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	SelectControl,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
@@ -29,7 +30,7 @@ import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
-import { SORTING_DIRECTIONS, sortLabelsShort } from '../../constants';
+import { SORTING_DIRECTIONS, sortIcons, sortLabels } from '../../constants';
 import { VIEW_LAYOUTS, getMandatoryFields } from '../../dataviews-layouts';
 import type { SupportedLayouts } from '../../types';
 import DataViewsContext from '../dataviews-context';
@@ -60,9 +61,9 @@ function ViewTypeMenu( {
 				<Button
 					size="compact"
 					icon={ activeView?.icon }
-			label={ __( 'Layout' ) }
+					label={ __( 'Layout' ) }
 				/>
-				}
+			}
 		>
 			{ availableLayouts.map( ( layout ) => {
 				const config = VIEW_LAYOUTS.find( ( v ) => v.type === layout );
@@ -168,10 +169,11 @@ function SortDirectionControl() {
 		>
 			{ SORTING_DIRECTIONS.map( ( direction ) => {
 				return (
-					<ToggleGroupControlOption
+					<ToggleGroupControlOptionIcon
 						key={ direction }
 						value={ direction }
-						label={ sortLabelsShort[ direction ] }
+						icon={ sortIcons[ direction ] }
+						label={ sortLabels[ direction ] }
 					/>
 				);
 			} ) }
@@ -270,7 +272,7 @@ function SettingsSection( {
 	children,
 }: {
 	title: string;
-	description: string;
+	description?: string;
 	children: React.ReactNode;
 } ) {
 	return (
@@ -282,12 +284,14 @@ function SettingsSection( {
 				>
 					{ title }
 				</Heading>
-				<Text
-					variant="muted"
-					className="dataviews-settings-section__description"
-				>
-					{ description }
-				</Text>
+				{ description && (
+					<Text
+						variant="muted"
+						className="dataviews-settings-section__description"
+					>
+						{ description }
+					</Text>
+				) }
 			</div>
 			<Grid
 				columns={ 8 }
@@ -303,20 +307,14 @@ function SettingsSection( {
 function DataviewsViewConfigContent() {
 	return (
 		<VStack className="dataviews-view-config" spacing={ 6 }>
-			<SettingsSection
-				title={ __( 'Appearance' ) }
-				description={ __( 'Customize the display of data' ) }
-			>
+			<SettingsSection title={ __( 'Appearance' ) }>
 				<HStack expanded className="is-divided-in-two">
 					<SortFieldControl />
 					<SortDirectionControl />
 				</HStack>
 				<ItemsPerPageControl />
 			</SettingsSection>
-			<SettingsSection
-				title={ __( 'Properties' ) }
-				description={ __( 'Manage property order and display' ) }
-			>
+			<SettingsSection title={ __( 'Properties' ) }>
 				<FieldControl />
 			</SettingsSection>
 		</VStack>
@@ -332,25 +330,25 @@ function _DataViewsViewConfig( {
 	return (
 		<>
 			<ViewTypeMenu defaultLayouts={ defaultLayouts } />
-		<div>
-			<Button
-				size="compact"
-				icon={ cog }
-				label={ _x( 'View options', 'View is used as a noun' ) }
-				onClick={ () => setIsShowingViewPopover( true ) }
-			/>
-			{ isShowingViewPopover && (
-				<Popover
-					placement="bottom-end"
-					onClose={ () => {
-						setIsShowingViewPopover( false );
-					} }
-					focusOnMount
-				>
+			<div>
+				<Button
+					size="compact"
+					icon={ cog }
+					label={ _x( 'View options', 'View is used as a noun' ) }
+					onClick={ () => setIsShowingViewPopover( true ) }
+				/>
+				{ isShowingViewPopover && (
+					<Popover
+						placement="bottom-end"
+						onClose={ () => {
+							setIsShowingViewPopover( false );
+						} }
+						focusOnMount
+					>
 						<DataviewsViewConfigContent />
-				</Popover>
-			) }
-		</div>
+					</Popover>
+				) }
+			</div>
 		</>
 	);
 }
diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
index 0edd37508e91f3..2709577c206a45 100644
--- a/packages/dataviews/src/components/dataviews-view-config/style.scss
+++ b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -1,5 +1,5 @@
 .dataviews-view-config {
-	width: 363px;
+	width: 320px;
 	container-type: inline-size;
 	padding: $grid-unit-20;
 }
diff --git a/packages/dataviews/src/constants.ts b/packages/dataviews/src/constants.ts
index 779f5a204f23d9..5ae94c7eb4a135 100644
--- a/packages/dataviews/src/constants.ts
+++ b/packages/dataviews/src/constants.ts
@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
+import { arrowDown, arrowUp } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -58,15 +59,9 @@ export const sortLabels = {
 	asc: __( 'Sort ascending' ),
 	desc: __( 'Sort descending' ),
 };
-export const sortLabelsShort = {
-	asc: _x(
-		'Asc',
-		'Short label for ascending sorting, should be at most 6 characters'
-	),
-	desc: _x(
-		'Desc',
-		'Short label for descending sorting, should be at most 6 characters'
-	),
+export const sortIcons = {
+	asc: arrowUp,
+	desc: arrowDown,
 };
 
 // View layouts.