pagination at the bottom of the frame

WordPress · Oct 26, 2023 · 2caf1f9 · 2caf1f9
1 parent 8d04537
commit 2caf1f9
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 45 deletions.
diff --git 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
@@ -6,46 +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,
@@ -167,7 +132,6 @@ function Pagination( {
 					</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
@@ -1,12 +1,16 @@
 .dataviews-wrapper {
 	width: 100%;
+	min-height: calc(100% - 60px);
+	overflow: auto;
 	padding: $grid-unit-40;
+
+	> div {
+		min-height: 100%;
+	}
 }
 
 .dataviews-pagination {
-	position: sticky;
-	bottom: $grid-unit-20;
-	background: $white;
+	margin-top: auto;
 }
 
 .dataviews-list-view {
@@ -36,11 +40,6 @@
 	}
 }
 
-.dataviews__select-control-prefix {
-	color: $gray-700;
-	text-wrap: nowrap;
-}
-
 .dataviews-view-grid__media {
 	width: 100%;
 	min-height: 200px;