[Pagination] Added label prop

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))

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;
+}

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<HTMLElement> = 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 ? (
     <UnstyledLink
@@ -163,10 +168,24 @@ export function Pagination({
       />
     ));
 
+  const labelTextMarkup =
+    hasNext && hasPrevious ? (
+      <TextStyle>{label}</TextStyle>
+    ) : (
+      <TextStyle variation="subdued">{label}</TextStyle>
+    );
+
+  const labelMarkup = label ? (
+    <div className={styles.Label} aria-live="polite">
+      {labelTextMarkup}
+    </div>
+  ) : null;
+
   return (
-    <nav className={className} aria-label={label} ref={node}>
+    <nav className={className} aria-label={navLabel} ref={node}>
       {previousButtonEvents}
       {constructedPrevious}
+      {labelMarkup}
       {nextButtonEvents}
       {constructedNext}
     </nav>

src/components/Pagination/README.md

@@ -9,6 +9,7 @@ keywords:
   - lists
   - detail
   - page
+  - label
   - pager
   - previous
   - next
@@ -96,6 +97,24 @@ Attach standard keyboard shortcuts to important pagination controls.
 </div>
 ```
 
+### Pagination with label
+
+Add a label between navigation buttons to provide more context of the content being viewed by the user.
+
+```jsx
+<Pagination
+  label="Results"
+  hasPrevious
+  onPrevious={() => {
+    console.log('Previous');
+  }}
+  hasNext
+  onNext={() => {
+    console.log('Next');
+  }}
+/>
+```
+
 ### Infinite scroll
 
 <!-- example-for: ios, android -->

src/components/Pagination/tests/Pagination.test.tsx

@@ -78,6 +78,39 @@ describe('<Pagination />', () => {
     });
   });
 
+  describe('accessibilityLabel', () => {
+    it('inserts prop as aria-label', () => {
+      const pagination = mountWithAppProvider(
+        <Pagination accessibilityLabel="test" />,
+      );
+      expect(pagination.find('nav').prop('aria-label')).toStrictEqual('test');
+    });
+
+    it('uses default value for aria-label', () => {
+      const pagination = mountWithAppProvider(<Pagination />);
+      expect(pagination.find('nav').prop('aria-label')).toStrictEqual(
+        'Pagination',
+      );
+    });
+  });
+
+  describe('label', () => {
+    it('renders as text', () => {
+      const pagination = mountWithAppProvider(<Pagination label="test" />);
+      expect(pagination.text()).toContain('test');
+    });
+
+    it('has subdued text without next and previous pages', () => {
+      const pagination = mountWithAppProvider(<Pagination label="test" />);
+      expect(
+        pagination
+          .find('.Label')
+          .children()
+          .prop('variation'),
+      ).toStrictEqual('subdued');
+    });
+  });
+
   it('adds a keypress event for nextKeys', () => {
     const spy = jest.fn();
     mountWithAppProvider(