fix: pagination: bug fixes for simplified pagination

src/components/Carousel/Carousel.tsx

@@ -642,7 +642,8 @@ export const Carousel: FC<CarouselProps> = React.forwardRef(
                     onCurrentChange={(currentPage: number) =>
                       handleIndicatorClick(currentPage - 1)
                     }
-                    pageSizes={[1]}
+                    restrictPageSizesPropToSizesLayout
+                    pageSize={1}
                     total={itemsNumber}
                   />
                 )}

src/components/Pagination/Pager.tsx

@@ -1,5 +1,8 @@
 import React, { FC, useEffect, useCallback, useState, Ref } from 'react';
-import { PagerProps } from './Pagination.types';
+import {
+  PagerProps,
+  PaginationVisiblePagerCountSizeOptions,
+} from './Pagination.types';
 import { ButtonShape, ButtonSize, NeutralButton } from '../Button';
 import { IconName } from '../Icon';
 import { mergeClasses } from '../../shared/utilities';
@@ -9,12 +12,16 @@ import styles from './pagination.module.scss';
 /** Represents the number of pages from each edge of the list before we show quick buttons. */
 const EDGE_BUFFER_THRESHOLD: number = 5;
 
-/** Represents that only 7 list items (pages) are visible at any given time. */
-const PAGER_COUNT: number = 7;
-
 /** Represents a list too short to display meaningful quick buttons. */
 const SHORT_LIST_THRESHOLD: number = 10;
 
+/** Represents the number of list items (pages) visible at any given time. */
+const VISIBLE_PAGER_COUNT = {
+  [PaginationVisiblePagerCountSizeOptions.Small]: 3,
+  [PaginationVisiblePagerCountSizeOptions.Medium]: 5,
+  [PaginationVisiblePagerCountSizeOptions.Large]: 7,
+};
+
 export const Pager: FC<PagerProps> = React.forwardRef(
   (
     {
@@ -26,6 +33,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
       quickPreviousIconButtonAriaLabel,
       simplified = false,
       showLast = true,
+      visiblePagerCountSize = PaginationVisiblePagerCountSizeOptions.Large,
       ...rest
     },
     ref: Ref<HTMLUListElement>
@@ -35,6 +43,8 @@ export const Pager: FC<PagerProps> = React.forwardRef(
     const [_quickPreviousActive, setQuickPreviousActive] =
       useState<boolean>(false);
 
+    const visiblePagerCount = VISIBLE_PAGER_COUNT?.[visiblePagerCountSize] || 7;
+
     /**
      * Updates the visible range of pages in the UL based upon list
      * traversal and other actions that trigger currentPage and pageCount updates.
@@ -69,7 +79,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
          * Only the quick previous button is visible.
          */
         if (afterQuickPrevious && !beforeQuickNext) {
-          const startPage = pageCount - (PAGER_COUNT - 2);
+          const startPage = pageCount - (visiblePagerCount - 2);
 
           for (let i: number = startPage; i < pageCount; ++i) {
             array.push(i);
@@ -83,7 +93,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
            * Only the quick next button is visible.
            */
         } else if (!afterQuickPrevious && beforeQuickNext) {
-          for (let i: number = 2; i < PAGER_COUNT; ++i) {
+          for (let i: number = 2; i < visiblePagerCount; ++i) {
             array.push(i);
           }
 
@@ -94,7 +104,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
            * position in the visible array. Both quick buttons are visible.
            */
         } else if (afterQuickPrevious && beforeQuickNext) {
-          const offset = Math.floor(PAGER_COUNT / 2) - 1;
+          const offset = Math.floor(visiblePagerCount / 2) - 1;
 
           for (
             let i: number = currentPage - offset;
@@ -145,9 +155,11 @@ export const Pager: FC<PagerProps> = React.forwardRef(
                 text={'1'.toLocaleString()}
               />
             ) : (
-              <span>{`${currentPage.toLocaleString()} ${
-                locale.lang!.pagerText
-              }`}</span>
+              <>
+                <span>{`${currentPage.toLocaleString()}`}</span>{' '}
+                {showLast && <span>{`${locale.lang!.pagerText}`}</span>}{' '}
+                {showLast && <span>{`${pageCount.toLocaleString()}`}</span>}
+              </>
             )}
           </li>
         )}
@@ -227,25 +239,21 @@ export const Pager: FC<PagerProps> = React.forwardRef(
               />
             </li>
           )}
-        {pageCount > 1 && showLast && (
+        {!simplified && pageCount > 1 && showLast && (
           <li>
-            {!simplified ? (
-              <NeutralButton
-                aria-current={currentPage === pageCount}
-                classNames={mergeClasses([
-                  styles.paginationButton,
-                  {
-                    [styles.active]: currentPage === pageCount,
-                  },
-                ])}
-                onClick={() => onCurrentChange(pageCount)}
-                shape={ButtonShape.Rectangle}
-                size={ButtonSize.Medium}
-                text={pageCount.toLocaleString()}
-              />
-            ) : (
-              <span>{pageCount.toLocaleString()}</span>
-            )}
+            <NeutralButton
+              aria-current={currentPage === pageCount}
+              classNames={mergeClasses([
+                styles.paginationButton,
+                {
+                  [styles.active]: currentPage === pageCount,
+                },
+              ])}
+              onClick={() => onCurrentChange(pageCount)}
+              shape={ButtonShape.Rectangle}
+              size={ButtonSize.Medium}
+              text={pageCount.toLocaleString()}
+            />
           </li>
         )}
       </ul>

src/components/Pagination/Pagination.stories.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { Pagination, PaginationLayoutOptions } from './index';
+import {
+  Pagination,
+  PaginationLayoutOptions,
+  PaginationVisiblePagerCountSizeOptions,
+} from './index';
 
 export default {
   title: 'Pagination',
@@ -109,7 +113,10 @@ const paginationArgs: Object = {
   ],
   pageSize: 10,
   pageSizes: [10, 20, 30, 40, 50, 100],
+  restrictPageSizesPropToSizesLayout: false,
+  hideWhenSinglePage: false,
   total: 50,
+  visiblePagerCountSize: PaginationVisiblePagerCountSizeOptions.Large,
   'data-test-id': 'myPaginationTestId',
 };
 

src/components/Pagination/Pagination.tsx

@@ -4,6 +4,7 @@ import {
   PaginationLayoutOptions,
   PaginationLocale,
   PaginationProps,
+  PaginationVisiblePagerCountSizeOptions,
 } from './index';
 import {
   ButtonIconAlign,
@@ -32,6 +33,7 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
       currentPage = 1,
       dots = false,
       goToText: defaultGoToText,
+      hideWhenSinglePage = false,
       layout = [
         PaginationLayoutOptions.Previous,
         PaginationLayoutOptions.Pager,
@@ -51,8 +53,10 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
       quickNextIconButtonAriaLabel: defaultQuickNextIconButtonAriaLabel,
       quickPreviousIconButtonAriaLabel: defaultQuickPreviousIconButtonAriaLabel,
       total = 1,
+      restrictPageSizesPropToSizesLayout = false,
       totalText: defaultTotalText,
       selfControlled = true,
+      visiblePagerCountSize = PaginationVisiblePagerCountSizeOptions.Large,
       'data-test-id': dataTestId,
       ...rest
     } = props;
@@ -138,9 +142,21 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
 
     useEffect((): void => {
       setTotal(total);
-      onSizeChangeHandler?.(
-        pageSizes.indexOf(pageSize) > -1 ? pageSize : pageSizes[0]
-      );
+      if (
+        restrictPageSizesPropToSizesLayout
+          ? layout.includes(PaginationLayoutOptions.Sizes)
+          : true
+      ) {
+        onSizeChangeHandler?.(
+          pageSizes.indexOf(pageSize) > -1 ? pageSize : pageSizes[0]
+        );
+      }
+      if (
+        restrictPageSizesPropToSizesLayout &&
+        !layout.includes(PaginationLayoutOptions.Sizes)
+      ) {
+        setPageCount(Math.ceil(total / _pageSize));
+      }
       jumpToPage?.(currentPage);
     }, []);
 
@@ -386,25 +402,29 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
                       showLast={
                         !layout.includes(PaginationLayoutOptions.NoLast)
                       }
+                      visiblePagerCountSize={visiblePagerCountSize}
                     />
                   ) : (
-                    <Pager
-                      currentPage={_currentPage}
-                      key="pager"
-                      locale={locale}
-                      onCurrentChange={handleCurrentChange}
-                      pageCount={getPageCount()}
-                      quickNextIconButtonAriaLabel={
-                        quickNextIconButtonAriaLabel
-                      }
-                      quickPreviousIconButtonAriaLabel={
-                        quickPreviousIconButtonAriaLabel
-                      }
-                      simplified={true}
-                      showLast={
-                        !layout.includes(PaginationLayoutOptions.NoLast)
-                      }
-                    />
+                    (hideWhenSinglePage ? moreThanOnePage : true) && (
+                      <Pager
+                        currentPage={_currentPage}
+                        key="pager"
+                        locale={locale}
+                        onCurrentChange={handleCurrentChange}
+                        pageCount={getPageCount()}
+                        quickNextIconButtonAriaLabel={
+                          quickNextIconButtonAriaLabel
+                        }
+                        quickPreviousIconButtonAriaLabel={
+                          quickPreviousIconButtonAriaLabel
+                        }
+                        simplified={true}
+                        showLast={
+                          !layout.includes(PaginationLayoutOptions.NoLast)
+                        }
+                        visiblePagerCountSize={visiblePagerCountSize}
+                      />
+                    )
                   )}
                   {layout.includes(PaginationLayoutOptions.Next) &&
                     moreThanOnePage && (

src/components/Pagination/Pagination.types.ts

@@ -54,6 +54,12 @@ export enum PaginationLayoutOptions {
   NoLast = 'noLast',
 }
 
+export enum PaginationVisiblePagerCountSizeOptions {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+
 export type PaginationLocale = {
   lang: Locale;
 };
@@ -88,6 +94,11 @@ export interface PaginationProps extends OcBaseProps<HTMLElement> {
    * @default 'Go to'
    */
   goToText?: string;
+  /**
+   * Hide pagination when there is a single page.
+   * @default false
+   */
+  hideWhenSinglePage?: boolean;
   /**
    * The Pagination layout options.
    * @default {PaginationLayoutOptions.Previous, PaginationLayoutOptions.Pager, PaginationLayoutOptions.Next}
@@ -132,6 +143,7 @@ export interface PaginationProps extends OcBaseProps<HTMLElement> {
   pageSizeButtonAriaLabel?: string;
   /**
    * The Pagination pageSizes array.
+   * pageSizes should be defined when layout uses PaginationLayoutOptions.Sizes
    * @default {[10, 20, 30, 40, 50, 100]}
    */
   pageSizes?: number[];
@@ -155,6 +167,12 @@ export interface PaginationProps extends OcBaseProps<HTMLElement> {
    * @default 'Previous 5'
    */
   quickPreviousIconButtonAriaLabel?: string;
+  /**
+   * pageSizes should only be defined for Sizes Layout.
+   * Recommended to turn this on as this is going to default behavior in future
+   * @default false
+   */
+  restrictPageSizesPropToSizesLayout?: boolean;
   /**
    * The Page change is controlled internally.
    * @default true
@@ -171,7 +189,7 @@ export interface PaginationProps extends OcBaseProps<HTMLElement> {
    */
   simplified?: boolean;
   /**
-   * The Pagination total number of pages.
+   * The Pagination total number of items.
    * @default 1
    */
   total: number;
@@ -180,4 +198,9 @@ export interface PaginationProps extends OcBaseProps<HTMLElement> {
    * @default 'Total'
    */
   totalText?: string;
+  /**
+   * Represents the number of list items (pages) are visible at any given time.
+   * @default PaginationVisiblePagerCountSizeOptions.Large
+   */
+  visiblePagerCountSize?: PaginationVisiblePagerCountSizeOptions;
 }

src/components/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -160,10 +160,13 @@ exports[`Pagination Pagination should render as simplified 1`] = `
     >
       <li>
         <span>
-          1 of
+          1
         </span>
-      </li>
-      <li>
+
+        <span>
+          of
+        </span>
+
         <span>
           5
         </span>

src/components/Pagination/pagination.module.scss

@@ -95,7 +95,6 @@
 
   .page-tracker {
     opacity: 50%;
-    padding-top: $space-xxs;
   }
 
   &.dots {