Apply minimal variant to pagination dropdown

packages/dataviews/src/components/dataviews-pagination/index.tsx

@@ -40,38 +40,33 @@ function DataViewsPagination() {
 					spacing={ 2 }
 					className="dataviews-pagination__page-selection"
 				>
-					{ createInterpolateElement(
-						sprintf(
-							// translators: %s: Total number of pages.
-							_x( 'Page <CurrentPageControl /> of %s', 'paging' ),
-							totalPages
-						),
-						{
-							CurrentPageControl: (
-								<SelectControl
-									aria-label={ __( 'Current page' ) }
-									value={ view.page?.toString() }
-									options={ Array.from(
-										Array( totalPages )
-									).map( ( _, i ) => {
-										const page = i + 1;
-										return {
-											value: page.toString(),
-											label: page.toString(),
-										};
-									} ) }
-									onChange={ ( newValue ) => {
-										onChangeView( {
-											...view,
-											page: +newValue,
-										} );
-									} }
-									size="compact"
-									__nextHasNoMarginBottom
-								/>
-							),
-						}
-					) }
+					<SelectControl
+						aria-label={ __( 'Current page' ) }
+						value={ view.page?.toString() }
+						options={ Array.from( Array( totalPages ) ).map(
+							( _, i ) => {
+								const page = i + 1;
+								return {
+									value: page.toString(),
+									label: sprintf(
+										// translators: 1: Current page number, 2: Total number of pages
+										__( 'Page %1$s of %2$s' ),
+										page.toString(),
+										totalPages
+									),
+								};
+							}
+						) }
+						onChange={ ( newValue ) => {
+							onChangeView( {
+								...view,
+								page: +newValue,
+							} );
+						} }
+						size="compact"
+						__nextHasNoMarginBottom
+						variant="minimal"
+					/>
 				</HStack>
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button

packages/dataviews/src/components/dataviews-pagination/style.scss

@@ -12,10 +12,12 @@
 }
 
 .dataviews-pagination__page-selection {
-	font-size: 11px;
-	text-transform: uppercase;
-	font-weight: 500;
-	color: $gray-900;
+	.components-select-control__input {
+		&:hover,
+		&:focus {
+			color: $gray-900;
+		}
+	}
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */

packages/dataviews/src/layouts/list/style.scss

@@ -185,5 +185,9 @@
 
 	& + .dataviews-pagination {
 		justify-content: space-between;
+
+		.dataviews-pagination__page-selection {
+			margin-left: - $grid-unit-10; // Offset the padding applied to the SelectControl
+		}
 	}
 }