Global styles: display tooltips for pagination buttons on styles revi…

…sion (WordPress#62395) * Showing tooltips for pagination buttons on global styles * Remove redundant aria-label prop. * Use actual SVG icons. * Adjust buttons size. --------- Co-authored-by: ramonjd <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jasmussen <[email protected]>
patil-vipul · Jun 17, 2024 · 1b93b32 · 1b93b32
1 parent 6b718c7
commit 1b93b32
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 23 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
@@ -173,20 +173,15 @@
 		// Safari from rendering the page / total text.
 		will-change: opacity;
 	}
+
 	.components-button.is-tertiary {
-		font-size: 28px;
-		font-weight: 200;
 		color: $gray-900;
-		margin-bottom: $grid-unit-05;
-		line-height: 1.2;
 	}
+
 	.components-button.is-tertiary:disabled,
 	.components-button.is-tertiary[aria-disabled="true"] {
 		color: $gray-600;
 	}
-	.components-button.is-tertiary:hover {
-		background: transparent;
-	}
 }
 
 .edit-site-global-styles-screen-revisions__footer {

diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js
@@ -12,6 +12,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';
 
 export default function Pagination( {
 	currentPage,
@@ -48,19 +49,19 @@ export default function Pagination( {
 					onClick={ () => changePage( 1 ) }
 					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
-					aria-label={ __( 'First page' ) }
-				>
-					«
-				</Button>
+					label={ __( 'First page' ) }
+					icon={ previous }
+					size="compact"
+				/>
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage - 1 ) }
 					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
-					aria-label={ __( 'Previous page' ) }
-				>
-					‹
-				</Button>
+					label={ __( 'Previous page' ) }
+					icon={ chevronLeft }
+					size="compact"
+				/>
 			</HStack>
 			<Text variant="muted">
 				{ sprintf(
@@ -76,19 +77,19 @@ export default function Pagination( {
 					onClick={ () => changePage( currentPage + 1 ) }
 					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
-					aria-label={ __( 'Next page' ) }
-				>
-					›
-				</Button>
+					label={ __( 'Next page' ) }
+					icon={ chevronRight }
+					size="compact"
+				/>
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( numPages ) }
 					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
-					aria-label={ __( 'Last page' ) }
-				>
-					»
-				</Button>
+					label={ __( 'Last page' ) }
+					icon={ next }
+					size="compact"
+				/>
 			</HStack>
 		</HStack>
 	);