feat(react,styles): adds thin modifier to pagination (#705)

dequelabs · Jul 21, 2022 · 53b76d5 · 53b76d5
1 parent 120c94c
commit 53b76d5
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 30 deletions.
diff --git a/docs/patterns/components/Pagination/index.js b/docs/patterns/components/Pagination/index.js
@@ -20,6 +20,7 @@ const PaginationDemo = () => {
         component={Pagination}
         states={[
           { totalItems: 15 },
+          { totalItems: 15, thin: true },
           {
             ...pagination,
             statusLabel: (
@@ -122,6 +123,11 @@ const PaginationDemo = () => {
               'The position of the tooltip relative to its target element.',
             required: false,
             defaultValue: "'bottom'"
+          },
+          thin: {
+            type: 'boolean',
+            description:
+              'Displays pagination with "thin" modifier (reduces height of buttons and spacing)'
           }
         }}
       >

diff --git a/packages/react/__tests__/src/components/Pagination/index.js b/packages/react/__tests__/src/components/Pagination/index.js
@@ -6,6 +6,11 @@ import Pagination, {
 } from '../../../../src/components/Pagination';
 
 describe('Pagination', () => {
+  test('sets `thin` variant', () => {
+    const wrapper = mount(<Pagination totalItems={18} currentPage={1} thin />);
+    expect(wrapper.find('.Pagination.Pagination--thin').exists());
+  });
+
   describe('without hook', () => {
     describe('on the first page', () => {
       test('Disables first/prev page buttons', () => {

diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
@@ -20,6 +20,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   onFirstPageClick?: () => void;
   onLastPageClick?: () => void;
   tooltipPlacement?: Placement;
+  thin?: boolean;
   className?: string;
 }
 
@@ -40,6 +41,7 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
       onFirstPageClick,
       onLastPageClick,
       className,
+      thin = false,
       ...other
     },
     ref
@@ -50,11 +52,18 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
     const isFirstPage = currentPage === 1;
 
     return (
-      <div ref={ref} className={classNames('Pagination', className)} {...other}>
+      <div
+        ref={ref}
+        className={classNames('Pagination', className, {
+          'Pagination--thin': thin
+        })}
+        {...other}
+      >
         <ul>
           <li>
             {isFirstPage ? (
               <TooltipTabstop
+                className="IconButton"
                 hideElementOnHidden
                 association="aria-labelledby"
                 tooltip={firstPageLabel}
@@ -75,6 +84,7 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
           <li>
             {isFirstPage ? (
               <TooltipTabstop
+                className="IconButton"
                 hideElementOnHidden
                 association="aria-labelledby"
                 tooltip={previousPageLabel}
@@ -106,6 +116,7 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
           <li>
             {isLastPage ? (
               <TooltipTabstop
+                className="IconButton"
                 hideElementOnHidden
                 association="aria-labelledby"
                 tooltip={nextPageLabel}
@@ -126,6 +137,7 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
           <li>
             {isLastPage ? (
               <TooltipTabstop
+                className="IconButton"
                 hideElementOnHidden
                 association="aria-labelledby"
                 tooltip={lastPageLabel}

diff --git a/packages/styles/pagination.css b/packages/styles/pagination.css
@@ -1,3 +1,17 @@
+:root {
+  --pagination-button-background-color: var(--gray-20);
+  --pagination-button-border-color: var(--gray-40);
+  --pagination-button-disabled-text-color: var(--gray-40);
+  --pagination-text-accent-color: var(--gray-90);
+}
+
+.cauldron--theme-dark {
+  --pagination-button-background-color: var(--accent-medium);
+  --pagination-button-border-color: transparent;
+  --pagination-button-disabled-text-color: var(--stroke-dark);
+  --pagination-text-accent-color: var(--white);
+}
+
 .Pagination > ul {
   list-style-type: none;
   display: flex;
@@ -6,25 +20,28 @@
 }
 
 .Pagination > ul > li {
-  margin-right: 5px;
+  margin-right: var(--space-smallest);
 }
 
-.Pagination button {
+.Pagination:not(.Pagination--thin) button {
   height: 2.26rem;
   width: 2.26rem;
-  border-radius: 2px;
+}
+
+.Pagination button {
   display: flex;
   justify-content: center;
   align-items: center;
   /* light theme-specific styles */
-  background: var(--gray-20);
-  border: 1px solid var(--gray-40);
-  color: var(--gray-90);
+  background: var(--pagination-button-background-color);
+  border: 1px solid var(--pagination-button-border-color);
+  padding: 0;
+  margin: 0;
+  border-radius: 2px;
 }
 
 .Pagination button[aria-disabled='true'] {
-  color: var(--gray-40);
-  margin: 2px;
+  color: var(--pagination-button-disabled-text-color);
 }
 
 .Pagination button .Icon {
@@ -33,33 +50,19 @@
 }
 
 .Pagination [role='log'] {
-  margin-left: calc(var(--space-medium) - 5px);
-  margin-right: calc(var(--space-medium) - 5px);
-  color: var(--gray-60);
-}
-
-.Pagination [role='log'] strong {
-  color: var(--gray-90);
+  margin: 0 var(--space-small);
+  font-variant-numeric: tabular-nums;
 }
 
-/*
- * dark theme
- */
-
-.cauldron--theme-dark .Pagination button {
-  background-color: var(--accent-medium);
-  border-color: transparent;
+.Pagination--thin [role='log'] {
+  font-size: var(--text-size-smaller);
+  margin: 0 var(--space-half);
 }
 
-.cauldron--theme-dark .Pagination button[aria-disabled='true'] {
-  color: #5d676f;
+.Pagination [role='log'] strong {
+  color: var(--pagination-text-accent-color);
 }
 
 .cauldron--theme-dark .Pagination [role='log'] {
   color: var(--accent-light);
-  font-variant-numeric: tabular-nums;
-}
-
-.cauldron--theme-dark .Pagination [role='log'] strong {
-  color: var(--white);
 }