From 62ec8913be26bafcbe93c62afbcc8a2db6a40c6d Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Mon, 30 Oct 2023 12:25:28 +0200
Subject: [PATCH] [Data views]: Update icons and design tweaks (#55391)

* [Data views]: Update icons and design tweaks

* Button variants

* tooltips

* spacing

* fix pagination from conflicts

* pagination at the bottom of the frame

* fix styles

---------

Co-authored-by: James Koster <james@jameskoster.co.uk>
---
 .../src/components/dataviews/dataviews.js     |   2 +-
 .../src/components/dataviews/pagination.js    | 127 ++++++++----------
 .../src/components/dataviews/style.scss       |  15 ++-
 .../src/components/dataviews/view-grid.js     |   7 +-
 4 files changed, 70 insertions(+), 81 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
index cf3515f9947c4..a4e8a5524cceb 100644
--- a/packages/edit-site/src/components/dataviews/dataviews.js
+++ b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -35,7 +35,7 @@ export default function DataViews( {
 	}, [ fields ] );
 	return (
 		<div className="dataviews-wrapper">
-			<VStack spacing={ 4 }>
+			<VStack spacing={ 4 } justify="flex-start">
 				<HStack>
 					<HStack justify="start">
 						<Filters
diff --git a/packages/edit-site/src/components/dataviews/pagination.js b/packages/edit-site/src/components/dataviews/pagination.js
index 5fbe4669768e8..806d4bf7987cc 100644
--- a/packages/edit-site/src/components/dataviews/pagination.js
+++ b/packages/edit-site/src/components/dataviews/pagination.js
@@ -6,45 +6,11 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalText as Text,
 	__experimentalNumberControl as NumberControl,
-	__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
-	SelectControl,
 } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __, _x, _n } from '@wordpress/i18n';
+import { chevronRight, chevronLeft, previous, next } from '@wordpress/icons';
 
-const PAGE_SIZE_VALUES = [ 5, 20, 50 ];
-function PageSizeControl( { view, onChangeView } ) {
-	const label = __( 'Rows per page:' );
-	return (
-		<SelectControl
-			__nextHasNoMarginBottom
-			label={ label }
-			hideLabelFromVision
-			// TODO: This should probably use a label based on the wanted design
-			// and we could remove InputControlPrefixWrapper usage.
-			prefix={
-				<InputControlPrefixWrapper
-					as="span"
-					className="dataviews__select-control-prefix"
-				>
-					{ label }
-				</InputControlPrefixWrapper>
-			}
-			value={ view.perPage }
-			options={ PAGE_SIZE_VALUES.map( ( pageSize ) => ( {
-				value: pageSize,
-				label: pageSize,
-			} ) ) }
-			onChange={ ( value ) =>
-				onChangeView( { ...view, perPage: value, page: 1 } )
-			}
-		/>
-	);
-}
-
-// For now this is copied from the patterns list Pagination component, because
-// the datatable pagination starts from index zero(`0`). Eventually all lists will be
-// using this one.
 function Pagination( {
 	view,
 	onChangeView,
@@ -71,29 +37,37 @@ function Pagination( {
 				}
 			</Text>
 			{ !! totalItems && (
-				<HStack expanded={ false } spacing={ 1 }>
-					<Button
-						variant="tertiary"
-						onClick={ () => onChangeView( { ...view, page: 1 } ) }
-						disabled={ view.page === 1 }
-						aria-label={ __( 'First page' ) }
-					>
-						«
-					</Button>
-					<Button
-						variant="tertiary"
-						onClick={ () =>
-							onChangeView( { ...view, page: view.page - 1 } )
-						}
-						disabled={ view.page === 1 }
-						aria-label={ __( 'Previous page' ) }
-					>
-						‹
-					</Button>
+				<HStack expanded={ false } spacing={ 3 }>
 					<HStack
 						justify="flex-start"
 						expanded={ false }
 						spacing={ 1 }
+					>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: 1 } )
+							}
+							disabled={ view.page === 1 }
+							label={ __( 'First page' ) }
+							icon={ previous }
+							showTooltip
+							size="compact"
+						/>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: view.page - 1 } )
+							}
+							disabled={ view.page === 1 }
+							label={ __( 'Previous page' ) }
+							icon={ chevronLeft }
+							showTooltip
+							size="compact"
+						/>
+					</HStack>
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 2 }
 					>
 						{ createInterpolateElement(
 							sprintf(
@@ -130,29 +104,34 @@ function Pagination( {
 							}
 						) }
 					</HStack>
-					<Button
-						variant="tertiary"
-						onClick={ () =>
-							onChangeView( { ...view, page: view.page + 1 } )
-						}
-						disabled={ view.page >= totalPages }
-						aria-label={ __( 'Next page' ) }
-					>
-						›
-					</Button>
-					<Button
-						variant="tertiary"
-						onClick={ () =>
-							onChangeView( { ...view, page: totalPages } )
-						}
-						disabled={ view.page >= totalPages }
-						aria-label={ __( 'Last page' ) }
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 1 }
 					>
-						»
-					</Button>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: view.page + 1 } )
+							}
+							disabled={ view.page >= totalPages }
+							label={ __( 'Next page' ) }
+							icon={ chevronRight }
+							showTooltip
+							size="compact"
+						/>
+						<Button
+							onClick={ () =>
+								onChangeView( { ...view, page: totalPages } )
+							}
+							disabled={ view.page >= totalPages }
+							label={ __( 'Last page' ) }
+							icon={ next }
+							showTooltip
+							size="compact"
+						/>
+					</HStack>
 				</HStack>
 			) }
-			<PageSizeControl view={ view } onChangeView={ onChangeView } />
 		</HStack>
 	);
 }
diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss
index ff3bbbbff5db0..11208d9472a14 100644
--- a/packages/edit-site/src/components/dataviews/style.scss
+++ b/packages/edit-site/src/components/dataviews/style.scss
@@ -1,6 +1,16 @@
 .dataviews-wrapper {
 	width: 100%;
+	height: 100%;
+	overflow: auto;
 	padding: $grid-unit-40;
+
+	> div {
+		min-height: 100%;
+	}
+}
+
+.dataviews-pagination {
+	margin-top: auto;
 }
 
 .dataviews-list-view {
@@ -30,11 +40,6 @@
 	}
 }
 
-.dataviews__select-control-prefix {
-	color: $gray-700;
-	text-wrap: nowrap;
-}
-
 .dataviews-view-grid__media {
 	width: 100%;
 	min-height: 200px;
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
index 0c003c4da73d3..d319a25579f1a 100644
--- a/packages/edit-site/src/components/dataviews/view-grid.js
+++ b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -50,7 +50,12 @@ export function ViewGrid( { data, fields, view, actions } ) {
 									) ) }
 								</VStack>
 							</FlexBlock>
-							<ItemActions item={ item } actions={ actions } />
+							<FlexBlock>
+								<ItemActions
+									item={ item }
+									actions={ actions }
+								/>
+							</FlexBlock>
 						</HStack>
 					</VStack>
 				);