[Data views]: Update icons and design tweaks

WordPress · Oct 16, 2023 · a6793a7 · a6793a7
1 parent 5a04a2b
commit a6793a7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 12 deletions.
diff --git a/packages/edit-site/src/components/dataviews/pagination.js b/packages/edit-site/src/components/dataviews/pagination.js
@@ -11,6 +11,7 @@ import {
 } 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 } ) {
@@ -78,19 +79,17 @@ function Pagination( {
 						onClick={ () => onChangeView( { ...view, page: 0 } ) }
 						disabled={ view.page === 0 }
 						aria-label={ __( 'First page' ) }
-					>
-						«
-					</Button>
+						icon={ previous }
+					/>
 					<Button
 						variant="tertiary"
 						onClick={ () =>
 							onChangeView( { ...view, page: view.page - 1 } )
 						}
 						disabled={ view.page === 0 }
 						aria-label={ __( 'Previous page' ) }
-					>
-						‹
-					</Button>
+						icon={ chevronLeft }
+					/>
 					<HStack
 						justify="flex-start"
 						expanded={ false }
@@ -132,19 +131,17 @@ function Pagination( {
 						}
 						disabled={ view.page >= totalPages - 1 }
 						aria-label={ __( 'Next page' ) }
-					>
-						›
-					</Button>
+						icon={ chevronRight }
+					/>
 					<Button
 						variant="tertiary"
 						onClick={ () =>
 							onChangeView( { ...view, page: totalPages - 1 } )
 						}
 						disabled={ view.page >= totalPages - 1 }
 						aria-label={ __( 'Last page' ) }
-					>
-						»
-					</Button>
+						icon={ next }
+					/>
 				</HStack>
 			) }
 			<PageSizeControl view={ view } onChangeView={ onChangeView } />

diff --git a/packages/edit-site/src/components/dataviews/style.scss b/packages/edit-site/src/components/dataviews/style.scss
@@ -3,6 +3,12 @@
 	padding: $grid-unit-40;
 }
 
+.dataviews-pagination {
+	position: sticky;
+	bottom: $grid-unit-20;
+	background: $white;
+}
+
 .dataviews-list-view {
 	width: 100%;
 	text-indent: 0;