Font Library Modal: enhance pagination appearance (#63210)

* Font Library Modal: enhance pagination appearance * Remove first/last page buttons Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
WordPress · Jul 9, 2024 · bd56c28 · bd56c28
1 parent fed15ba
commit bd56c28
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 40 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
@@ -28,7 +28,7 @@ import {
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { moreVertical, chevronLeft } from '@wordpress/icons';
+import { moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -429,7 +429,7 @@ function FontCollection( { slug } ) {
 					{ selectedFont && (
 						<Flex
 							justify="flex-end"
-							className="font-library-modal__tabpanel-layout__footer"
+							className="font-library-modal__footer"
 						>
 							<Button
 								variant="primary"
@@ -446,32 +446,26 @@ function FontCollection( { slug } ) {
 					) }
 
 					{ ! selectedFont && (
-						<Flex
+						<HStack
+							spacing={ 4 }
 							justify="center"
-							className="font-library-modal__tabpanel-layout__footer"
+							className="font-library-modal__footer"
 						>
-							<Button
-								label={ __( 'First page' ) }
-								size="compact"
-								onClick={ () => setPage( 1 ) }
-								disabled={ page === 1 }
-								accessibleWhenDisabled
-							>
-								<span>«</span>
-							</Button>
 							<Button
 								label={ __( 'Previous page' ) }
 								size="compact"
 								onClick={ () => setPage( page - 1 ) }
 								disabled={ page === 1 }
+								showTooltip
 								accessibleWhenDisabled
-							>
-								<span>‹</span>
-							</Button>
+								icon={ chevronLeft }
+								tooltipPosition="top"
+							/>
 							<HStack
 								justify="flex-start"
 								expanded={ false }
 								spacing={ 2 }
+								className="font-library-modal__page-selection"
 							>
 								{ createInterpolateElement(
 									sprintf(
@@ -515,19 +509,10 @@ function FontCollection( { slug } ) {
 								onClick={ () => setPage( page + 1 ) }
 								disabled={ page === totalPages }
 								accessibleWhenDisabled
-							>
-								<span>›</span>
-							</Button>
-							<Button
-								label={ __( 'Last page' ) }
-								size="compact"
-								onClick={ () => setPage( totalPages ) }
-								disabled={ page === totalPages }
-								accessibleWhenDisabled
-							>
-								<span>»</span>
-							</Button>
-						</Flex>
+								icon={ chevronRight }
+								tooltipPosition="top"
+							/>
+						</HStack>
 					) }
 				</>
 			) }

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -311,7 +311,7 @@ function InstalledFonts() {
 
 					<HStack
 						justify="flex-end"
-						className="font-library-modal__tabpanel-layout__footer"
+						className="font-library-modal__footer"
 					>
 						{ isInstalling && <ProgressBar /> }
 						{ shouldDisplayDeleteButton && (

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
@@ -49,17 +49,24 @@ $footer-height: 70px;
 		// It should be 120px (72px modal header height + 48px tab height)
 		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
 	}
+}
 
-	.font-library-modal__tabpanel-layout__footer {
-		border-top: 1px solid $gray-300;
-		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
-		padding: $grid-unit-20 $grid-unit-40;
-		position: absolute;
-		bottom: $grid-unit-40;
-		width: 100%;
-		height: $footer-height;
-		background-color: $white;
-	}
+.font-library-modal__footer {
+	border-top: 1px solid $gray-300;
+	margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
+	padding: $grid-unit-20 $grid-unit-40;
+	position: absolute;
+	bottom: $grid-unit-40;
+	width: 100%;
+	height: $footer-height;
+	background-color: $white;
+}
+
+.font-library-modal__page-selection {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
 }
 
 .font-library-modal__tabpanel-layout .components-base-control__field {