FontCollection: Update pagination controls (#67143)

Co-authored-by: yogeshbhutkar <[email protected]> Co-authored-by: matiasbenedetto <[email protected]> Co-authored-by: juanfra <[email protected]>
WordPress · Dec 5, 2024 · 46f638e · 46f638e
1 parent 081db5e
commit 46f638e
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 32 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -27,7 +27,13 @@ import {
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
-import { moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
+import {
+	moreVertical,
+	next,
+	previous,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -486,37 +492,30 @@ function FontCollection( { slug } ) {
 
 					{ ! selectedFont && (
 						<HStack
-							spacing={ 4 }
-							justify="center"
+							expanded={ false }
 							className="font-library-modal__footer"
+							justify="end"
+							spacing={ 6 }
 						>
-							<Button
-								label={ __( 'Previous page' ) }
-								size="compact"
-								onClick={ () => setPage( page - 1 ) }
-								disabled={ page === 1 }
-								showTooltip
-								accessibleWhenDisabled
-								icon={ isRTL() ? chevronRight : chevronLeft }
-								tooltipPosition="top"
-							/>
 							<HStack
 								justify="flex-start"
 								expanded={ false }
-								spacing={ 2 }
+								spacing={ 1 }
 								className="font-library-modal__page-selection"
 							>
 								{ createInterpolateElement(
 									sprintf(
-										// translators: %s: Total number of pages.
+										// translators: 1: Current page number, 2: Total number of pages.
 										_x(
-											'Page <CurrentPageControl /> of %s',
+											'<div>Page</div>%1$s<div>of %2$s</div>',
 											'paging'
 										),
+										'<CurrentPage />',
 										totalPages
 									),
 									{
-										CurrentPageControl: (
+										div: <div aria-hidden />,
+										CurrentPage: (
 											<SelectControl
 												aria-label={ __(
 													'Current page'
@@ -535,22 +534,36 @@ function FontCollection( { slug } ) {
 														parseInt( newPage )
 													)
 												}
-												size="compact"
+												size="small"
 												__nextHasNoMarginBottom
+												variant="minimal"
 											/>
 										),
 									}
 								) }
 							</HStack>
-							<Button
-								label={ __( 'Next page' ) }
-								size="compact"
-								onClick={ () => setPage( page + 1 ) }
-								disabled={ page === totalPages }
-								accessibleWhenDisabled
-								icon={ isRTL() ? chevronLeft : chevronRight }
-								tooltipPosition="top"
-							/>
+							<HStack expanded={ false } spacing={ 1 }>
+								<Button
+									onClick={ () => setPage( page - 1 ) }
+									disabled={ page === 1 }
+									accessibleWhenDisabled
+									label={ __( 'Previous page' ) }
+									icon={ isRTL() ? next : previous }
+									showTooltip
+									size="compact"
+									tooltipPosition="top"
+								/>
+								<Button
+									onClick={ () => setPage( page + 1 ) }
+									disabled={ page === totalPages }
+									accessibleWhenDisabled
+									label={ __( 'Next page' ) }
+									icon={ isRTL() ? previous : next }
+									showTooltip
+									size="compact"
+									tooltipPosition="top"
+								/>
+							</HStack>
 						</HStack>
 					) }
 				</>

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -64,9 +64,15 @@ $footer-height: 70px;
 
 .font-library-modal__page-selection {
 	font-size: 11px;
-	text-transform: uppercase;
 	font-weight: 500;
-	color: $gray-900;
+	text-transform: uppercase;
+
+	@include break-small() {
+		.components-select-control__input {
+			font-size: 11px !important;
+			font-weight: 500;
+		}
+	}
 }
 
 // TODO: See if this can be removed after https://github.com/WordPress/gutenberg/issues/38730
@@ -124,7 +130,7 @@ $footer-height: 70px;
 		white-space: nowrap;
 		flex-shrink: 0;
 		transition: opacity 0.3s ease-in-out;
-		@include reduce-motion("transition");
+		@include reduce-motion( "transition" );
 	}
 }
 
@@ -147,7 +153,6 @@ $footer-height: 70px;
 	}
 }
 
-
 .font-library-modal__upload-area {
 	align-items: center;
 	display: flex;
@@ -200,7 +205,9 @@ button.font-library-modal__upload-area {
 }
 
 .font-library-modal__select-all {
-	padding: $grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-20 + $border-width;
+	padding:
+		$grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-20 +
+		$border-width;
 
 	.components-checkbox-control__label {
 		padding-left: $grid-unit-20;