Fix the position and sizing of pagination controls in the variations table (#40439)

* Fix the position of pagination controls in the variations table

* Fix the sizing of controls in the variations table

* Add changelog file

* Fix linter errors

packages/js/product-editor/changelog/fix-40199

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix the position and sizing of the pagination controls in variations table

packages/js/product-editor/src/components/variations-table/pagination/index.ts

@@ -0,0 +1,2 @@
+export * from './pagination';
+export * from './types';

packages/js/product-editor/src/components/variations-table/pagination/pagination.tsx

@@ -0,0 +1,69 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	PaginationPageSizePicker,
+	PaginationPageArrowsWithPicker,
+	usePagination,
+} from '@woocommerce/components';
+import { createElement } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { PaginationProps } from './types';
+import {
+	DEFAULT_VARIATION_PER_PAGE_OPTION,
+	DEFAULT_VARIATION_PER_PAGE_OPTIONS,
+} from '../../../constants';
+
+export function Pagination( {
+	className,
+	totalCount,
+	perPageOptions = DEFAULT_VARIATION_PER_PAGE_OPTIONS,
+	defaultPerPage = DEFAULT_VARIATION_PER_PAGE_OPTION,
+	onPageChange,
+	onPerPageChange,
+}: PaginationProps ) {
+	const paginationProps = usePagination( {
+		defaultPerPage,
+		totalCount,
+		onPageChange,
+		onPerPageChange,
+	} );
+
+	return (
+		<div
+			className={ classNames(
+				className,
+				'woocommerce-product-variations-pagination'
+			) }
+		>
+			<div className="woocommerce-product-variations-pagination__info">
+				{ sprintf(
+					// eslint-disable-next-line max-len
+					// translators: Viewing 1-5 of 100 items. First two %ds are a range of items that are shown on the screen. The last %d is the total amount of items that exist.
+					__( 'Viewing %d-%d of %d items', 'woocommerce' ),
+					paginationProps.start,
+					paginationProps.end,
+					totalCount
+				) }
+			</div>
+
+			<div className="woocommerce-product-variations-pagination__current-page">
+				<PaginationPageArrowsWithPicker { ...paginationProps } />
+			</div>
+
+			<div className="woocommerce-product-variations-pagination__page-size">
+				<PaginationPageSizePicker
+					{ ...paginationProps }
+					total={ totalCount }
+					perPageOptions={ perPageOptions }
+					label=""
+				/>
+			</div>
+		</div>
+	);
+}

packages/js/product-editor/src/components/variations-table/pagination/styles.scss

@@ -0,0 +1,40 @@
+.woocommerce-product-variations-pagination {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	gap: $gap;
+	width: 100%;
+
+	&__info,
+	&__current-page,
+	&__page-size {
+		display: flex;
+		align-items: center;
+	}
+
+	&__current-page {
+		justify-content: center;
+
+		.woocommerce-pagination__page-arrow-picker-input {
+			border-radius: 2px;
+		}
+
+		.components-button.has-icon {
+			min-width: initial;
+			width: 30px;
+			height: 30px;
+			padding: 3px;
+		}
+	}
+
+	&__page-size {
+		justify-content: flex-end;
+
+		> .woocommerce-pagination__per-page-picker
+			.components-base-control
+			.components-select-control
+			.components-input-control__container
+			.components-select-control__input {
+			min-height: 30px;
+		}
+	}
+}

packages/js/product-editor/src/components/variations-table/pagination/types.ts

@@ -0,0 +1,10 @@
+/**
+ * External dependencies
+ */
+import { usePaginationProps } from '@woocommerce/components';
+
+export type PaginationProps = usePaginationProps & {
+	className?: string;
+	perPageOptions?: number[];
+	defaultPerPage?: number;
+};

packages/js/product-editor/src/components/variations-table/styles.scss

@@ -1,4 +1,5 @@
 @import "./variations-actions-menu/styles.scss";
+@import "./pagination/styles.scss";
 
 $table-row-height: calc($grid-unit * 9);
 
@@ -166,7 +167,7 @@ $table-row-height: calc($grid-unit * 9);
 	}
 
 	&__footer {
-		padding: $gap 0;
-		justify-content: space-between;
+		border-top: 1px solid $gray-200;
+		padding-top: $grid-unit-30;
 	}
 }

packages/js/product-editor/src/components/variations-table/variations-table.tsx

@@ -14,14 +14,7 @@ import {
 	ProductVariation,
 } from '@woocommerce/data';
 import { recordEvent } from '@woocommerce/tracks';
-import {
-	ListItem,
-	Sortable,
-	Tag,
-	PaginationPageSizePicker,
-	PaginationPageArrowsWithPicker,
-	usePagination,
-} from '@woocommerce/components';
+import { ListItem, Sortable, Tag } from '@woocommerce/components';
 import {
 	useContext,
 	useState,
@@ -53,6 +46,7 @@ import { VariationActionsMenu } from './variation-actions-menu';
 import { useSelection } from '../../hooks/use-selection';
 import { VariationsActionsMenu } from './variations-actions-menu';
 import HiddenIcon from '../../icons/hidden-icon';
+import { Pagination } from './pagination';
 
 const NOT_VISIBLE_TEXT = __( 'Not visible to customers', 'woocommerce' );
 
@@ -159,13 +153,6 @@ export const VariationsTable = forwardRef<
 		[ productId ]
 	);
 
-	const paginationProps = usePagination( {
-		totalCount,
-		defaultPerPage: DEFAULT_VARIATION_PER_PAGE_OPTION,
-		onPageChange: setCurrentPage,
-		onPerPageChange: setPerPage,
-	} );
-
 	const {
 		updateProductVariation,
 		deleteProductVariation,
@@ -524,23 +511,12 @@ export const VariationsTable = forwardRef<
 			</Sortable>
 
 			{ totalCount > 5 && (
-				<div className="woocommerce-product-variations__footer woocommerce-pagination">
-					<div>
-						{ sprintf(
-							__( 'Viewing %d-%d of %d items', 'woocommerce' ),
-							paginationProps.start,
-							paginationProps.end,
-							totalCount
-						) }
-					</div>
-					<PaginationPageArrowsWithPicker { ...paginationProps } />
-					<PaginationPageSizePicker
-						{ ...paginationProps }
-						total={ totalCount }
-						perPageOptions={ [ 5, 10, 25 ] }
-						label=""
-					/>
-				</div>
+				<Pagination
+					className="woocommerce-product-variations__footer"
+					totalCount={ totalCount }
+					onPageChange={ setCurrentPage }
+					onPerPageChange={ setPerPage }
+				/>
 			) }
 		</div>
 	);

packages/js/product-editor/src/constants.ts

@@ -64,3 +64,4 @@ export const TRACKS_SOURCE = 'product-block-editor-v1';
 export const DEFAULT_PER_PAGE_OPTION = 25;
 
 export const DEFAULT_VARIATION_PER_PAGE_OPTION = 5;
+export const DEFAULT_VARIATION_PER_PAGE_OPTIONS = [ 5, 10, 25 ];