Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data views: Reduce page selector prominence #58195

Closed
wants to merge 4 commits into from
Closed

Data views: Reduce page selector prominence #58195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4fb53e0
Reduce page selector prominence
jameskoster Jan 24, 2024
565d185
Merge branch 'trunk' into update/pagination
jameskoster Jan 24, 2024
330ebff
Label usage and size
jameskoster Jan 25, 2024
b39fb01
Chevron position
jameskoster Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 28 additions & 30 deletions packages/dataviews/src/pagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import {
__experimentalHStack as HStack,
SelectControl,
} from '@wordpress/components';
import { createInterpolateElement, memo } from '@wordpress/element';
import { sprintf, __, _x } from '@wordpress/i18n';
import { memo } from '@wordpress/element';
import { sprintf, __ } from '@wordpress/i18n';
import { chevronRight, chevronLeft } from '@wordpress/icons';

const Pagination = memo( function Pagination( {
Expand All @@ -27,36 +27,34 @@ const Pagination = memo( function Pagination( {
justify="end"
className="dataviews-pagination"
>
<HStack justify="flex-start" expanded={ false } spacing={ 2 }>
{ createInterpolateElement(
sprintf(
<HStack justify="flex-start" expanded={ false } spacing={ 1 }>
<SelectControl
label={ __( 'Current page' ) }
value={ view.page }
className="dataviews-pagination__page-selector"
options={ Array.from( Array( totalPages ) ).map(
( _, i ) => {
const page = i + 1;
return { value: page, label: page };
}
) }
onChange={ ( newValue ) => {
onChangeView( {
...view,
page: +newValue,
} );
} }
size="compact"
__nextHasNoMarginBottom
hideLabelFromVision
/>
<span>
{ sprintf(
// translators: %s: Total number of pages.
_x( 'Page <CurrenPageControl /> of %s', 'paging' ),
'of %s',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about how easy it is for screen readers to parse the information (ie. Current page is X of Y).

The risk with splitting the strings like this is that the "of Y" structure may not hold true for all locales.

cc'ing @andrewhayward in case he can help with this

totalPages
),
{
CurrenPageControl: (
<SelectControl
aria-label={ __( 'Current page' ) }
value={ view.page }
options={ Array.from(
Array( totalPages )
).map( ( _, i ) => {
const page = i + 1;
return { value: page, label: page };
} ) }
onChange={ ( newValue ) => {
onChangeView( {
...view,
page: +newValue,
} );
} }
size={ 'compact' }
__nextHasNoMarginBottom
/>
),
}
) }
) }
</span>
</HStack>
<HStack expanded={ false } spacing={ 1 }>
<Button
Expand Down
15 changes: 14 additions & 1 deletion packages/dataviews/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,20 @@
backdrop-filter: blur(6px);
padding: $grid-unit-15 $grid-unit-40;
border-top: $border-width solid $gray-100;
color: $gray-700;

.dataviews-pagination__page-selector {
.components-input-control__backdrop {
border: 0 !important;
}

.components-input-control__container {
background: transparent !important;
}

.components-select-control__input {
padding-right: $grid-unit-05 * 5 !important;
}
}
}

.dataviews-filters-options {
Expand Down
Loading