Rename Pagination component to OffsetPagination (#1597)

bigcommerce · Nov 26, 2024 · 3b4fdaf · 3b4fdaf
1 parent 05d2fb5
commit 3b4fdaf
Show file tree

Hide file tree

Showing 17 changed files with 77 additions and 63 deletions.
diff --git a/.../src/components/Pagination/Pagination.tsx → ...nts/OffsetPagination/OffsetPagination.tsx b/.../src/components/Pagination/Pagination.tsx → ...nts/OffsetPagination/OffsetPagination.tsx
@@ -11,25 +11,25 @@ import { Flex, FlexItem } from '../Flex';
 
 import { StyledButton } from './styled';
 
-export interface PaginationLocalization {
+export interface OffsetPaginationLocalization {
   previousPage: string;
   nextPage: string;
 }
 
-const defaultLocalization: PaginationLocalization = {
+const defaultLocalization: OffsetPaginationLocalization = {
   previousPage: 'Previous page',
   nextPage: 'Next page',
 };
 
-export interface PaginationProps extends MarginProps {
+export interface OffsetPaginationProps extends MarginProps {
   currentPage: number;
   itemsPerPage: number;
   itemsPerPageOptions: number[];
   totalItems: number;
   onPageChange(page: number): void;
   onItemsPerPageChange(range: number): void;
   label?: string;
-  localization?: PaginationLocalization;
+  localization?: OffsetPaginationLocalization;
   getRangeLabel?(start: number, end: number, totalItems: number): string;
 }
 
@@ -41,7 +41,7 @@ const defaultGetRangeLabel = (start: number, end: number, totalItems: number): s
   return `${start} - ${end} of ${totalItems}`;
 };
 
-export const Pagination: React.FC<PaginationProps> = memo(
+export const OffsetPagination: React.FC<OffsetPaginationProps> = memo(
   ({
     itemsPerPage,
     currentPage,
@@ -162,4 +162,4 @@ export const Pagination: React.FC<PaginationProps> = memo(
   },
 );
 
-Pagination.displayName = 'Pagination';
+OffsetPagination.displayName = 'OffsetPagination';
diff --git a/...ts/Pagination/__snapshots__/spec.tsx.snap → ...setPagination/__snapshots__/spec.tsx.snap b/...ts/Pagination/__snapshots__/spec.tsx.snap → ...setPagination/__snapshots__/spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`render pagination component 1`] = `
+exports[`render offset pagination component 1`] = `
 .c7 {
   vertical-align: middle;
   height: 2rem;
@@ -430,7 +430,7 @@ exports[`render pagination component 1`] = `
 </div>
 `;
 
-exports[`render pagination component with invalid page info 1`] = `
+exports[`render offset pagination component with invalid page info 1`] = `
 .c7 {
   vertical-align: middle;
   height: 2rem;
@@ -860,7 +860,7 @@ exports[`render pagination component with invalid page info 1`] = `
 </div>
 `;
 
-exports[`render pagination component with invalid range info 1`] = `
+exports[`render offset pagination component with invalid range info 1`] = `
 .c7 {
   vertical-align: middle;
   height: 2rem;
@@ -1291,7 +1291,7 @@ exports[`render pagination component with invalid range info 1`] = `
 </div>
 `;
 
-exports[`render pagination component with no items 1`] = `
+exports[`render offset pagination component with no items 1`] = `
 .c7 {
   vertical-align: middle;
   height: 2rem;

diff --git a/packages/big-design/src/components/OffsetPagination/index.ts b/packages/big-design/src/components/OffsetPagination/index.ts
@@ -0,0 +1,12 @@
+import { OffsetPagination, type OffsetPaginationProps } from './OffsetPagination';
+
+export { OffsetPagination, type OffsetPaginationProps } from './OffsetPagination';
+
+/**
+ * @deprecated This component has been renamed to `OffsetPagination`. Please import and use `OffsetPagination` instead.
+ */
+export const Pagination = OffsetPagination;
+/**
+ * @deprecated This type definition has been renamed to `OffsetPaginationProps`. Please import and use `OffsetPaginationProps` instead.
+ */
+export type PaginationProps = OffsetPaginationProps;
diff --git a/...design/src/components/Pagination/spec.tsx → .../src/components/OffsetPagination/spec.tsx b/...design/src/components/Pagination/spec.tsx → .../src/components/OffsetPagination/spec.tsx
@@ -4,13 +4,13 @@ import React from 'react';
 
 import 'jest-styled-components';
 
-import { Pagination } from './index';
+import { OffsetPagination } from './index';
 
-test('render pagination component', async () => {
+test('render offset pagination component', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByRole } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -25,11 +25,11 @@ test('render pagination component', async () => {
   expect(pagination).toMatchSnapshot();
 });
 
-test('render pagination component with invalid page info', async () => {
+test('render offset pagination component with invalid page info', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByRole } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={-2}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -45,11 +45,11 @@ test('render pagination component with invalid page info', async () => {
   expect(pagination).toMatchSnapshot();
 });
 
-test('render pagination component with invalid range info', async () => {
+test('render offset pagination component with invalid range info', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByRole } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={-5}
       itemsPerPageOptions={[2, 3, 5]}
@@ -64,11 +64,11 @@ test('render pagination component with invalid range info', async () => {
   expect(pagination).toMatchSnapshot();
 });
 
-test('render pagination component with no items', async () => {
+test('render offset pagination component with no items', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByRole } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -82,15 +82,15 @@ test('render pagination component with no items', async () => {
   expect(pagination).toMatchSnapshot();
 });
 
-test('render pagination component while overriding button labels', async () => {
+test('render offset pagination component while overriding button labels', async () => {
   const getRangeLabel = (first: number, last: number, totalItems: number) => {
     return `[Custom label] ${first}-${last} of ${totalItems}`;
   };
   const changePage = jest.fn();
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       getRangeLabel={getRangeLabel}
       itemsPerPage={3}
@@ -118,7 +118,7 @@ test('trigger range change', async () => {
   const changePage = jest.fn();
   const changeRange = jest.fn();
   const { findByText } = render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={2}
       itemsPerPageOptions={[2, 3, 5]}
@@ -142,7 +142,7 @@ test('trigger page decrease', async () => {
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={2}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -173,7 +173,7 @@ test('trigger page increase', async () => {
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -204,7 +204,7 @@ test('current itemsPerPage highlighted', async () => {
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={2}
       itemsPerPage={3}
       itemsPerPageOptions={[2, 3, 5]}
@@ -228,7 +228,7 @@ test('renders localized labels', async () => {
   const changeRange = jest.fn();
 
   render(
-    <Pagination
+    <OffsetPagination
       currentPage={1}
       getRangeLabel={(start: number, end: number, totalItems: number): string => {
         return `${start} - ${end} de ${totalItems}`;

diff --git a/...sign/src/components/Pagination/styled.tsx → ...rc/components/OffsetPagination/styled.tsx b/...sign/src/components/Pagination/styled.tsx → ...rc/components/OffsetPagination/styled.tsx
diff --git a/packages/big-design/src/components/Pagination/index.ts b/packages/big-design/src/components/Pagination/index.ts
diff --git a/packages/big-design/src/components/StatefulTable/StatefulTable.tsx b/packages/big-design/src/components/StatefulTable/StatefulTable.tsx
@@ -3,8 +3,8 @@ import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
 import { useDidUpdate } from '../../hooks';
 import { typedMemo } from '../../utils';
 import { Box } from '../Box';
-import { PaginationProps } from '../Pagination';
-import { PaginationLocalization } from '../Pagination/Pagination';
+import { PaginationProps } from '../OffsetPagination';
+import { OffsetPaginationLocalization } from '../OffsetPagination/OffsetPagination';
 import { PillTabItem, PillTabs, PillTabsProps } from '../PillTabs';
 import { Search } from '../Search';
 import { SearchLocalization } from '../Search/types';
@@ -20,9 +20,9 @@ import {
 import { createReducer, createReducerInit } from './reducer';
 
 type Localization =
-  | PaginationLocalization
+  | OffsetPaginationLocalization
   | SearchLocalization
-  | (PaginationLocalization & SearchLocalization);
+  | (OffsetPaginationLocalization & SearchLocalization);
 
 const defaultLocalization: Localization = {
   nextPage: 'Next page',

diff --git a/packages/big-design/src/components/Table/TablePagination/TablePagination.tsx b/packages/big-design/src/components/Table/TablePagination/TablePagination.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { Pagination } from '../../Pagination';
+import { OffsetPagination } from '../../OffsetPagination';
 import { TablePaginationProps } from '../types';
 
 import { StyledPaginationContainer } from './styled';
@@ -19,7 +19,7 @@ export const TablePagination: React.FC<TablePaginationProps> = memo(
   }) => {
     return (
       <StyledPaginationContainer flexShrink={0}>
-        <Pagination
+        <OffsetPagination
           currentPage={currentPage}
           getRangeLabel={getRangeLabel}
           itemsPerPage={itemsPerPage}

diff --git a/packages/big-design/src/components/Table/types.ts b/packages/big-design/src/components/Table/types.ts
@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 import { MarginProps } from '../../helpers';
-import { PaginationProps } from '../Pagination';
+import { OffsetPaginationProps } from '../OffsetPagination';
 
 import { TableColumnDisplayProps } from './helpers';
 
@@ -38,7 +38,7 @@ export interface TableColumn<T> extends TableColumnDisplayProps {
   withPadding?: boolean;
 }
 
-export type TablePaginationProps = Omit<PaginationProps, keyof MarginProps>;
+export type TablePaginationProps = Omit<OffsetPaginationProps, keyof MarginProps>;
 
 interface Localization {
   ascendingOrder: string;

diff --git a/packages/big-design/src/components/TableNext/TablePagination/TablePagination.tsx b/packages/big-design/src/components/TableNext/TablePagination/TablePagination.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 
-import { Pagination } from '../../Pagination';
+import { OffsetPagination } from '../../OffsetPagination';
 import { TablePaginationProps } from '../types';
 
 import { StyledPaginationContainer } from './styled';
@@ -19,7 +19,7 @@ export const TablePagination: React.FC<TablePaginationProps> = memo(
   }) => {
     return (
       <StyledPaginationContainer flexShrink={0}>
-        <Pagination
+        <OffsetPagination
           currentPage={currentPage}
           getRangeLabel={getRangeLabel}
           itemsPerPage={itemsPerPage}

diff --git a/packages/big-design/src/components/TableNext/types.ts b/packages/big-design/src/components/TableNext/types.ts
@@ -1,7 +1,7 @@
 import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 import { MarginProps } from '../../helpers';
-import { PaginationProps } from '../Pagination';
+import { OffsetPaginationProps } from '../OffsetPagination';
 
 import { TableColumnDisplayProps } from './helpers';
 
@@ -54,7 +54,7 @@ export interface TableColumn<T> extends TableColumnDisplayProps {
   withPadding?: boolean;
 }
 
-export type TablePaginationProps = Omit<PaginationProps, keyof MarginProps>;
+export type TablePaginationProps = Omit<OffsetPaginationProps, keyof MarginProps>;
 
 interface Localization {
   ascendingOrder: string;

diff --git a/packages/big-design/src/components/index.ts b/packages/big-design/src/components/index.ts
@@ -21,7 +21,7 @@ export * from './Link';
 export * from './Message';
 export * from './Modal';
 export * from './MultiSelect';
-export * from './Pagination';
+export * from './OffsetPagination';
 export * from './Panel';
 export * from './PillTabs';
 export * from './Popover';

diff --git a/...s/docs/PropTables/PaginationPropTable.tsx → .../PropTables/OffsetPaginationPropTable.tsx b/...s/docs/PropTables/PaginationPropTable.tsx → .../PropTables/OffsetPaginationPropTable.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Prop, PropTable, PropTableWrapper } from '../components';
 
-const paginationProps: Prop[] = [
+const offsetPaginationProps: Prop[] = [
   {
     name: 'itemsPerPage',
     types: 'number',
@@ -60,6 +60,6 @@ const paginationProps: Prop[] = [
   },
 ];
 
-export const PaginationPropTable: React.FC<PropTableWrapper> = (props) => {
-  return <PropTable propList={paginationProps} title="Pagination" {...props} />;
+export const OffsetPaginationPropTable: React.FC<PropTableWrapper> = (props) => {
+  return <PropTable propList={offsetPaginationProps} title="Pagination" {...props} />;
 };
diff --git a/packages/docs/PropTables/TablePropTable.tsx b/packages/docs/PropTables/TablePropTable.tsx
@@ -45,8 +45,8 @@ const tableProps: Prop[] = [
   },
   {
     name: 'pagination',
-    types: <NextLink href="/pagination">Pagination</NextLink>,
-    description: 'See pagination component for details.',
+    types: <NextLink href="/offset-pagination">OffsetPagination</NextLink>,
+    description: 'See offset pagination component for details.',
   },
   {
     name: 'selectable',

diff --git a/packages/docs/PropTables/index.ts b/packages/docs/PropTables/index.ts
@@ -23,7 +23,7 @@ export * from './MessagePropTable';
 export * from './ModalPropTable';
 export * from './MultiSelectPropTable';
 export * from './PaddingPropTable';
-export * from './PaginationPropTable';
+export * from './OffsetPaginationPropTable';
 export * from './PanelPropTable';
 export * from './PillTabsPropTable';
 export * from './PopoverPropTable';

diff --git a/packages/docs/components/SideNav/SideNav.tsx b/packages/docs/components/SideNav/SideNav.tsx
@@ -60,7 +60,7 @@ export const SideNav: React.FC = () => {
                 <SideNavLink href="/accordion-panel">Accordion Panel</SideNavLink>
                 <SideNavLink href="/collapse">Collapse</SideNavLink>
                 <SideNavLink href="/modal">Modal</SideNavLink>
-                <SideNavLink href="/pagination">Pagination</SideNavLink>
+                <SideNavLink href="/offset-pagination">OffsetPagination</SideNavLink>
                 <SideNavLink href="/panel">Panel</SideNavLink>
                 <SideNavLink href="/statefulTable">StatefulTable</SideNavLink>
                 <SideNavLink href="/statefulTree">StatefulTree</SideNavLink>