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

@@ -227,7 +227,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
               />
             </li>
           )}
-        {pageCount > 1 && showLast && (
+        {!simplified && pageCount > 1 && showLast && (
           <li>
             {!simplified ? (
               <NeutralButton
@@ -248,6 +248,11 @@ export const Pager: FC<PagerProps> = React.forwardRef(
             )}
           </li>
         )}
+        {simplified && pageCount > 0 && showLast && (
+          <li>
+            <span>{pageCount.toLocaleString()}</span>
+          </li>
+        )}
       </ul>
     );
   }

src/components/Pagination/Pagination.stories.tsx

@@ -109,6 +109,8 @@ const paginationArgs: Object = {
   ],
   pageSize: 10,
   pageSizes: [10, 20, 30, 40, 50, 100],
+  restrictPageSizesPropToSizesLayout: false,
+  hideWhenSinglePage: false,
   total: 50,
   'data-test-id': 'myPaginationTestId',
 };

src/components/Pagination/Pagination.tsx

@@ -32,6 +32,7 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
       currentPage = 1,
       dots = false,
       goToText: defaultGoToText,
+      hideWhenSinglePage = false,
       layout = [
         PaginationLayoutOptions.Previous,
         PaginationLayoutOptions.Pager,
@@ -51,6 +52,7 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
       quickNextIconButtonAriaLabel: defaultQuickNextIconButtonAriaLabel,
       quickPreviousIconButtonAriaLabel: defaultQuickPreviousIconButtonAriaLabel,
       total = 1,
+      restrictPageSizesPropToSizesLayout = false,
       totalText: defaultTotalText,
       selfControlled = true,
       'data-test-id': dataTestId,
@@ -138,9 +140,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);
     }, []);
 
@@ -388,23 +402,25 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
                       }
                     />
                   ) : (
-                    <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)
+                        }
+                      />
+                    )
                   )}
                   {layout.includes(PaginationLayoutOptions.Next) &&
                     moreThanOnePage && (

src/components/Pagination/Pagination.types.ts

@@ -88,6 +88,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 +137,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 +161,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 +183,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;

src/components/Pagination/pagination.module.scss

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