Migrate PaginationNavigation to Tailwind

src/sidebar/components/PaginationNavigation.js

 import { LabeledButton } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
 
 import { pageNumberOptions } from '../util/pagination';
 
@@ -12,7 +13,8 @@ import { pageNumberOptions } from '../util/pagination';
 
 /**
  * Render pagination navigation controls, with buttons to go next, previous
- * and nearby pages.
+ * and nearby pages. Buttons corresponding to nearby pages are shown on wider
+ * screens; for narrow screens only Prev and Next buttons are shown.
  *
  * @param {PaginationNavigationProps} props
  */
@@ -36,11 +38,14 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) {
   };
 
   return (
-    <div className="PaginationNavigation">
-      <div className="PaginationNavigation__relative PaginationNavigation__prev">
+    <div
+      className="flex items-center text-lg"
+      data-testid="pagination-navigation"
+    >
+      <div className="w-28 h-10">
         {hasPreviousPage && (
           <LabeledButton
-            classes="PaginationPageButton"
+            classes="p-navigation-button"
             icon="arrow-left"
             title="Go to previous page"
             onClick={e =>
@@ -55,14 +60,30 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) {
           </LabeledButton>
         )}
       </div>
-      <ul className="PaginationNavigation__pages">
+      <ul
+        className={classnames(
+          // Where there's enough horizontal space,
+          // lay out page navigation buttons horizontally between prev/next:
+          // | prevPage  |       numberedPages          | nextPage
+          //
+          // e.g.
+          // | [<- prev] | [2] ... [5] [6] [7] ... [10] | [next ->] |
+          //
+          // These page buttons are hidden on narrow screens
+          'hidden',
+          // For slightly wider screens, they are shown in a horizontal row
+          'md:flex md:items-center md:justify-center md:gap-x-2',
+          // when visible, this element should stretch to fill available space
+          'md:grow'
+        )}
+      >
         {pageNumbers.map((page, idx) => (
           <li key={idx}>
             {page === null ? (
-              <div className="PaginationNavigation__gap">...</div>
+              <div data-testid="pagination-gap">...</div>
             ) : (
               <LabeledButton
-                classes="PaginationPageButton"
+                classes="p-navigation-button"
                 key={`page-${idx}`}
                 title={`Go to page ${page}`}
                 pressed={page === currentPage}
@@ -77,10 +98,17 @@ function PaginationNavigation({ currentPage, onChangePage, totalPages }) {
           </li>
         ))}
       </ul>
-      <div className="PaginationNavigation__relative PaginationNavigation__next">
+      <div
+        className={classnames(
+          'w-28 h-10 flex justify-end',
+          // When page buttons are not shown, this element should grow to fill
+          // available space. But when page buttons are shown, it should not.
+          'grow md:grow-0'
+        )}
+      >
         {hasNextPage && (
           <LabeledButton
-            classes="PaginationPageButton"
+            classes="p-navigation-button"
             icon="arrow-right"
             iconPosition="right"
             title="Go to next page"

src/sidebar/components/test/PaginationNavigation-test.js

@@ -133,7 +133,7 @@ describe('PaginationNavigation', () => {
       });
 
       // There is one "gap":
-      assert.equal(wrapper.find('.PaginationNavigation__gap').length, 1);
+      assert.equal(wrapper.find('[data-testid="pagination-gap"]').length, 1);
     });
 
     it('should invoke the onChangePage callback when page number button clicked', () => {

src/styles/frontend-shared.scss

@@ -13,12 +13,6 @@
   text-decoration: underline;
 }
 
-// This button style has asymmetrical padding. Hold it here to see if
-// this kind of padding is useful in other patterns.
-.PaginationPageButton {
-  padding: var.$layout-space--small var.$layout-space;
-}
-
 // An IconButton, but override minimum height/width on touch screen devices
 .NonResponsiveIconButton {
   @media (pointer: coarse) {

src/styles/sidebar/components/PaginationNavigation.scss

-@use '../../mixins/buttons';
-@use '../../mixins/layout';
-@use '../../mixins/responsive';
-@use '../../mixins/utils';
-@use '../../variables' as var;
-
-.PaginationNavigation {
-  @include utils.font--large;
-
-  display: grid;
-  align-items: center;
-  grid-template-areas: 'prevPage nextPage';
-
-  &__prev {
-    grid-area: prevPage;
-  }
-
-  &__next {
-    grid-area: nextPage;
-    justify-self: end;
-  }
-
-  &__pages {
-    // On narrower viewports, there isn't enough room to display all of
-    // the numbered page buttons; fall back to just prev and next options
-    display: none;
-  }
-
-  @include responsive.wide-handheld-and-up {
-    // Where there's enough horizontal space,
-    // lay out page navigation buttons horizontally as:
-    // | prevPage  |       numberedPages          | nextPage
-    //
-    // e.g.
-    // | [<- prev] | [2] ... [5] [6] [7] ... [10] | [next ->] |
-    grid-template-columns: 8em auto 8em;
-    grid-template-areas: 'prevPage numberedPages nextPage';
-
-    &__pages {
-      display: block;
-      grid-area: numberedPages;
-      @include layout.row($justify: center, $align: center);
-      @include layout.horizontal-rhythm(0.5em);
-    }
-  }
-}

src/styles/sidebar/components/_index.scss

@@ -15,7 +15,6 @@
 @use './Menu';
 @use './MenuItem';
 @use './MenuSection';
-@use './PaginationNavigation';
 @use './StyledText';
 
 // TODO: Evaluate all classes below after components have been converted to
@@ -60,6 +59,12 @@
   @apply line-through grayscale contrast-50 text-color-text-light;
 }
 
+// Applies to <LabeledButton>; asymmetrical padding used on pagination
+// navigation buttons
+.p-navigation-button {
+  @apply py-2.5 px-3.5;
+}
+
 // Disable scroll anchoring as it interferes with `ThreadList` and
 // `visible-threads` calculations and can cause a render loop
 .js-thread-list-scroll-root {