Skip to content

Paginator redesign #2165

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mil4n0r merged 6 commits into from
Mar 21, 2025
Merged

Paginator redesign #2165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
700091d
Paginator redesign
Jialecl Feb 17, 2025
a21014a
removed unused import
Jialecl Feb 18, 2025
47a2d53
Merge branch 'master' into jialecl-tokens-paginator
Mil4n0r Mar 18, 2025
3e00b4d
Paginator new documentation + small improvement to datagrid paginator
Jialecl Mar 20, 2025
026e20f
removed themeContext, improved format and fixed some typos
Jialecl Mar 21, 2025
442cf12
Small changes based on feedback
Jialecl Mar 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions apps/website/pages/components/paginator/code.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout";
import PaginatorCodePage from "screens/components/paginator/code/PaginatorCodePage";

const Code = () => (
<>
<Head>
<title>Paginator Code — Halstack Design System</title>
</Head>
<PaginatorCodePage />
</>
);

Code.getLayout = (page: ReactElement) => <PaginatorPageLayout>{page}</PaginatorPageLayout>;

export default Code;
24 changes: 10 additions & 14 deletions apps/website/pages/components/paginator/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
import Head from "next/head";
import type { ReactElement } from "react";
import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout";
import PaginatorCodePage from "screens/components/paginator/code/PaginatorCodePage";
import PaginatorOverviewPage from "screens/components/paginator/overview/PaginatorOverviewPage";

const Index = () => {
return (
<>
<Head>
<title>Paginator — Halstack Design System</title>
</Head>
<PaginatorCodePage></PaginatorCodePage>
</>
);
};
const Index = () => (
<>
<Head>
<title>Paginator — Halstack Design System</title>
</Head>
<PaginatorOverviewPage />
</>
);

Index.getLayout = function getLayout(page: ReactElement) {
return <PaginatorPageLayout>{page}</PaginatorPageLayout>;
};
Index.getLayout = (page: ReactElement) => <PaginatorPageLayout>{page}</PaginatorPageLayout>;

export default Index;
21 changes: 0 additions & 21 deletions apps/website/pages/components/paginator/specifications.tsx
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions apps/website/pages/components/paginator/usage.tsx
View file
Open in desktop

This file was deleted.

7 changes: 3 additions & 4 deletions apps/website/screens/components/paginator/PaginatorPageLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { ReactNode } from "react";

const PaginatorPageHeading = ({ children }: { children: ReactNode }) => {
const tabs = [
{ label: "Code", path: "/components/paginator" },
{ label: "Usage", path: "/components/paginator/usage" },
{ label: "Specifications", path: "/components/paginator/specifications" },
{ label: "Overview", path: "/components/paginator" },
{ label: "Code", path: "/components/paginator/code" },
];

return (
Expand All @@ -19,7 +18,7 @@ const PaginatorPageHeading = ({ children }: { children: ReactNode }) => {
<DxcParagraph>
The paginator component allows dividing large amounts of content into multiple pages.
</DxcParagraph>
<TabsPageHeading tabs={tabs}></TabsPageHeading>
<TabsPageHeading tabs={tabs} />
</DxcFlex>
</PageHeading>
{children}
Expand Down
18 changes: 8 additions & 10 deletions apps/website/screens/components/paginator/code/PaginatorCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,15 +129,13 @@ const sections = [
},
];

const PaginatorCodePage = () => {
return (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx" />
</DxcFlex>
);
};
const PaginatorCodePage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx" />
</DxcFlex>
);

export default PaginatorCodePage;
159 changes: 159 additions & 0 deletions apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
import Image from "@/common/Image";
import QuickNavContainer from "@/common/QuickNavContainer";
import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
import DocFooter from "@/common/DocFooter";
import paginatorAnatomy from "./images/paginator_anatomy.png";
import Example from "@/common/example/Example";
import flexibleConfiguration from "./examples/flexibleConfiguration";
import scrollable from "./examples/scrollable";

const sections = [
{
title: "Introduction",
content: (
<DxcParagraph>
The paginator component allows users to navigate through large sets of data by breaking content into multiple
pages. It provides controls to move between pages efficiently, ensuring a seamless browsing experience. Ideal
for tables, lists and search results, the paginator improves usability by reducing load times and making content
more manageable.
</DxcParagraph>
),
},
{
title: "Anatomy",
content: (
<>
<Image src={paginatorAnatomy} alt="Paginator anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Container:</strong> the structural wrapper that holds all the elements of the paginator, ensuring
proper spacing, alignment and responsiveness within the interface.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Items per page:</strong> a control that allows users to adjust the number of items displayed per
page, providing flexibility in data viewing.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Items indicator:</strong> displays the current range of items being viewed and the total number of
items, helping users understand their position within the dataset.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Page actions:</strong> navigation buttons that let users move between pages, typically including
&quot;Next&quot;, &quot;Previous&quot;, &quot;First&quot; and &quot;Last&quot; controls.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Page selector:</strong> a dropdown or input that enables users to jump directly to a specific page,
improving efficiency when navigating large datasets.
</DxcBulletedList.Item>
</DxcBulletedList>
</>
),
},
{
title: "Using paginators",
subSections: [
{
title: "Reducing cognitive load",
content: (
<DxcParagraph>
Paginators are essential for managing large amounts of content by dividing it into smaller, more digestible
sections. They help maintain a clean and organized interface, ensuring that users can navigate through
information efficiently without feeling overwhelmed. By breaking content into separate views, paginators
reduce cognitive load, improve readability, and enhance the overall user experience. This approach is
particularly useful in data-heavy applications, tables, or multi-page lists where presenting all information
simultaneously would be impractical.
</DxcParagraph>
),
},
{
title: "Flexible configuration",
content: (
<>
<DxcParagraph>
Our paginator component offers different configurations to accommodate various use cases. Take the time to
explore these options and identify the best fit for your specific needs—whether it’s simple navigation,
dynamic content loading, or more advanced pagination controls. Choosing the right configuration ensures a
seamless experience for users.
</DxcParagraph>
<Example example={flexibleConfiguration} />
</>
),
},
{
title: "Pagination and scrolling",
content: (
<>
<DxcParagraph>
Pagination does not eliminate the need for scrolling; in fact, both can work together to improve
usability. For instance, a table with many rows might require vertical scrolling to display more content
within a single page while still using pagination to divide data into manageable sections. This approach
provides a more intuitive way to navigate large datasets without losing context.
</DxcParagraph>
<Example example={scrollable} />
</>
),
},
],
},
{
title: "Best practices",
content: (
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Use pagination when necessary</strong>
<DxcParagraph>
Implement a paginator when the number of elements affects system performance or when displaying all content
at once would significantly impact usability, especially on larger screens.
</DxcParagraph>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Positioning matters</strong>
<DxcParagraph>
Always place the paginator at the bottom of the content it divides. This ensures users encounter all
relevant information before deciding to navigate to another page.
</DxcParagraph>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Clearly indicate current status</strong>
<DxcParagraph>
Display the current page number and the total number of items being shown. This helps users understand their
position within the dataset and manage expectations when navigating.
</DxcParagraph>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Ensure intuitive navigation</strong>
<DxcParagraph>
Provide clear, accessible controls for moving between pages, including next/previous buttons and, when
applicable, direct page selection for quicker access to specific sections.
</DxcParagraph>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Consider different configurations</strong>
<DxcParagraph>
Adapt the paginator&apos;s design to fit different scenarios, such as adding an option to adjust the number
of items displayed per page or offering compact versions for space-constrained layouts.
</DxcParagraph>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Combine with scrolling when needed</strong>
<DxcParagraph>
In some cases, pagination and scrolling can work together. For example, tables with many rows may use a
paginator to divide content into sections while allowing vertical scrolling within each page.
</DxcParagraph>
</DxcBulletedList.Item>
</DxcBulletedList>
),
},
];

const PaginatorOverviewPage = () => (
<DxcFlex direction="column" gap="4rem">
<QuickNavContainerLayout>
<QuickNavContainer sections={sections} startHeadingLevel={2} />
</QuickNavContainerLayout>
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx" />
</DxcFlex>
);

export default PaginatorOverviewPage;
46 changes: 46 additions & 0 deletions apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { DxcPaginator, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
import { useState } from "react";

const code = `() => {

return (
<DxcInset space="1rem">
<DxcFlex gap="1rem" direction="column">
<DxcPaginator/>
<DxcPaginator itemsPerPageOptions={[5, 10, 15]} />
<DxcPaginator showGoToPage />
<DxcPaginator
showGoToPage
currentPage={1}
itemsPerPage={10}
totalItems={27}
onPageChange={() => {}}
/>
<DxcPaginator
showGoToPage
currentPage={2}
itemsPerPage={10}
totalItems={27}
onPageChange={() => {}}
/>
<DxcPaginator
showGoToPage
itemsPerPageOptions={[5, 10, 15]}
currentPage={2}
itemsPerPage={10}
totalItems={27}
onPageChange={() => {}}
/>
</DxcFlex>
</DxcInset>
);
}`;

const scope = {
DxcPaginator,
DxcFlex,
DxcInset,
useState,
};

export default { code, scope };
Loading