diff --git a/UNRELEASED.md b/UNRELEASED.md index 692df1d3588..01c4e71e5b8 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -10,6 +10,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Enhancements +- Added new label prop to `Pagination` which is used to insert contextual info between navigation buttons [#2098](https://github.com/Shopify/polaris-react/pull/2098) - Updated `trigger` to use `act` ([#2141](https://github.com/Shopify/polaris-react/pull/2141)) - Changed border color of `Drop zone` to have better contrast from the background and to be lighter when disabled ([#2119](https://github.com/Shopify/polaris-react/pull/2119)) - Adjusted search results overlay to take up 100% height of the screen on small screens and to match the width of the search bar on large screens. ([#2103](https://github.com/Shopify/polaris-react/pull/2103)) diff --git a/src/components/Pagination/Pagination.scss b/src/components/Pagination/Pagination.scss index 0ab14501ea7..707221e1e90 100644 --- a/src/components/Pagination/Pagination.scss +++ b/src/components/Pagination/Pagination.scss @@ -108,6 +108,7 @@ $stacking-order: ( ); border: border(dark); border-radius: border-radius(); + line-height: 1; color: color('ink'); text-align: center; @@ -166,3 +167,10 @@ $stacking-order: ( border-top-left-radius: 0; border-bottom-left-radius: 0; } + +.Label { + padding: 0 spacing(tight); + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index f05239e0d04..fc25523b95b 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {ArrowLeftMinor, ArrowRightMinor} from '@shopify/polaris-icons'; +import {TextStyle} from '../TextStyle'; import {classNames} from '../../utilities/css'; import {useI18n} from '../../utilities/i18n'; import {isInputFocused} from '../../utilities/is-input-focused'; @@ -35,6 +36,8 @@ export interface PaginationDescriptor { onNext?(): void; /** Callback when previous button is clicked */ onPrevious?(): void; + /** Text to provide more context in between the arrow buttons */ + label?: string; } export interface PaginationProps extends PaginationDescriptor { @@ -55,21 +58,23 @@ export function Pagination({ previousKeys, plain, accessibilityLabel, + label, }: PaginationProps) { const intl = useI18n(); const node: React.RefObject = React.createRef(); - let label: string; - if (accessibilityLabel) { - label = accessibilityLabel; - } else { - label = intl.translate('Polaris.Pagination.pagination'); - } + const navLabel = + accessibilityLabel || intl.translate('Polaris.Pagination.pagination'); const className = classNames(styles.Pagination, plain && styles.plain); - const previousClassName = classNames(styles.Button, styles.PreviousButton); - const nextClassName = classNames(styles.Button, styles.NextButton); + + const previousClassName = classNames( + styles.Button, + !label && styles.PreviousButton, + ); + + const nextClassName = classNames(styles.Button, !label && styles.NextButton); const previousButton = previousURL ? ( )); + const labelTextMarkup = + hasNext && hasPrevious ? ( + {label} + ) : ( + {label} + ); + + const labelMarkup = label ? ( +
+ {labelTextMarkup} +
+ ) : null; + return ( -