From 700091d4a7b92cce55a34e1e477fbef24688ee13 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Mon, 17 Feb 2025 11:48:41 +0100 Subject: [PATCH 1/5] Paginator redesign --- packages/lib/src/paginator/Paginator.tsx | 246 +++++++++++------------ 1 file changed, 119 insertions(+), 127 deletions(-) diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index 3f2486c861..f25a2cb79f 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -5,6 +5,7 @@ import DxcSelect from "../select/Select"; import HalstackContext from "../HalstackContext"; import PaginatorPropsType from "./types"; import { HalstackLanguageContext } from "../HalstackContext"; +import DxcFlex from "../flex/Flex"; const DxcPaginator = ({ currentPage = 1, @@ -28,59 +29,108 @@ const DxcPaginator = ({ const colorsTheme = useContext(HalstackContext); const translatedLabels = useContext(HalstackLanguageContext); + const DxcPaginatorContainer = styled.div` + display: flex; + justify-content: flex-end; + align-items: center; + width: 100%; + min-height: 48px; + box-sizing: border-box; + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-regular); + background-color: var(--color-bg-neutral-lighter); + color: var(--color-fg-neutral-dark); + padding: var(--spacing-padding-xs) var(--spacing-padding-xl); + `; + + const ItemsPerPageContainer = styled.span` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + margin-right: var(--spacing-gap-ml); + `; + + const SelectContainer = styled.div` + min-width: 6.25rem; + `; + + const TotalItemsContainer = styled.span` + margin-right: var(--spacing-gap-xl); + `; + + const GoToPageContainer = styled.div` + display: flex; + align-items: center; + gap: var(--spacing-gap-ml); + `; + + const ButtonsContainer = styled.div` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + `; + + const PageToSelectContainer = styled.span` + display: flex; + align-items: center; + gap: var(--spacing-gap-s); + `; + return ( - - {itemsPerPageOptions && ( - - {translatedLabels.paginator.itemsPerPageText} - - ({ - label: num.toString(), - value: num.toString(), - }))} - onChange={(newValue) => { - itemsPerPageFunction?.(Number(newValue.value)); - }} - value={itemsPerPage.toString()} - size="fillParent" - tabIndex={tabIndex} - /> - - - )} - - {translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems)} - - {onPageChange && ( - { - onPageChange(1); - }} - title="First results" - /> - )} + {itemsPerPageOptions && ( + + {translatedLabels.paginator.itemsPerPageText} + + ({ + label: num.toString(), + value: num.toString(), + }))} + onChange={(newValue) => { + itemsPerPageFunction?.(Number(newValue.value)); + }} + value={itemsPerPage.toString()} + size="fillParent" + tabIndex={tabIndex} + /> + + + )} + + {translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems)} + + {onPageChange && ( - { - onPageChange(currentPage - 1); - }} - title="Previous results" - /> + + { + onPageChange(1); + }} + title="First results" + /> + + { + onPageChange(currentPage - 1); + }} + title="Previous results" + /> + )} {showGoToPage ? ( - {translatedLabels.paginator.goToPageText} + {translatedLabels.paginator.goToPageText} ({ @@ -100,91 +150,33 @@ const DxcPaginator = ({ {translatedLabels.paginator.pageOfText(currentPageInternal, totalPages)} )} {onPageChange && ( - { - onPageChange(currentPage + 1); - }} - title="Next results" - /> + + { + onPageChange(currentPage + 1); + }} + title="Next results" + /> + { + onPageChange(totalPages); + }} + title="Last results" + /> + )} - {onPageChange && ( - { - onPageChange(totalPages); - }} - title="Last results" - /> - )} - + ); }; -const DxcPaginatorContainer = styled.div` - display: flex; - font-family: ${(props) => props.theme.fontFamily}; - font-size: ${(props) => props.theme.fontSize}; - font-weight: ${(props) => props.theme.fontWeight}; - font-style: ${(props) => props.theme.fontStyle}; - text-transform: ${(props) => props.theme.fontTextTransform}; - background-color: ${(props) => props.theme.backgroundColor}; - color: ${(props) => props.theme.fontColor}; - padding: ${(props) => props.theme.verticalPadding} ${(props) => props.theme.horizontalPadding}; - - button { - &:disabled { - background-color: transparent !important; - opacity: 0.3 !important; - } - } -`; - -const SelectContainer = styled.div` - min-width: 5.25rem; -`; - -const ItemsPageContainer = styled.span` - display: flex; - align-items: center; - margin-right: ${(props) => props.theme.itemsPerPageSelectorMarginRight}; - margin-left: ${(props) => props.theme.itemsPerPageSelectorMarginLeft}; -`; - -const ItemsLabel = styled.span` - margin-right: 0.5rem; -`; - -const GoToLabel = styled.span` - margin-right: 0.5rem; - margin-left: 0.5rem; -`; - -const TotalItemsContainer = styled.span` - margin-right: ${(props) => props.theme.totalItemsContainerMarginRight}; - margin-left: ${(props) => props.theme.totalItemsContainerMarginLeft}; -`; - -const LabelsContainer = styled.div` - display: flex; - gap: 0.5rem; - width: 100%; - justify-content: flex-end; - align-items: center; -`; - -const PageToSelectContainer = styled.span` - display: flex; - align-items: center; - margin-right: 0.5rem; -`; - export default DxcPaginator; From a21014ac93f55b19496a074cd76c57edad0c57a0 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 18 Feb 2025 08:36:16 +0100 Subject: [PATCH 2/5] removed unused import --- packages/lib/src/paginator/Paginator.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index f25a2cb79f..9ca39521cf 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -5,7 +5,6 @@ import DxcSelect from "../select/Select"; import HalstackContext from "../HalstackContext"; import PaginatorPropsType from "./types"; import { HalstackLanguageContext } from "../HalstackContext"; -import DxcFlex from "../flex/Flex"; const DxcPaginator = ({ currentPage = 1, From 3e00b4df4b61fdb4aee9f159026adc205edf6b58 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Thu, 20 Mar 2025 12:34:23 +0100 Subject: [PATCH 3/5] Paginator new documentation + small improvement to datagrid paginator --- .../pages/components/paginator/code.tsx | 19 ++ .../pages/components/paginator/index.tsx | 8 +- .../components/paginator/specifications.tsx | 21 -- .../pages/components/paginator/usage.tsx | 21 -- .../paginator/PaginatorPageLayout.tsx | 7 +- .../overview/PaginatorOverviewPage.tsx | 163 ++++++++++ .../examples/flexibleConfiguration.ts | 28 ++ .../paginator/overview/examples/scrollable.ts | 135 +++++++++ .../overview/images/paginator_anatomy.png | Bin 0 -> 24539 bytes .../paginator/specs/PaginatorSpecsPage.tsx | 285 ------------------ .../specs/images/paginator_anatomy.png | Bin 20868 -> 0 bytes .../specs/images/paginator_specs.png | Bin 28019 -> 0 bytes .../paginator/usage/PaginatorUsagePage.tsx | 40 --- packages/lib/src/data-grid/DataGrid.tsx | 8 +- packages/lib/src/paginator/Paginator.tsx | 4 + 15 files changed, 360 insertions(+), 379 deletions(-) create mode 100644 apps/website/pages/components/paginator/code.tsx delete mode 100644 apps/website/pages/components/paginator/specifications.tsx delete mode 100644 apps/website/pages/components/paginator/usage.tsx create mode 100644 apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx create mode 100644 apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts create mode 100644 apps/website/screens/components/paginator/overview/examples/scrollable.ts create mode 100644 apps/website/screens/components/paginator/overview/images/paginator_anatomy.png delete mode 100644 apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx delete mode 100644 apps/website/screens/components/paginator/specs/images/paginator_anatomy.png delete mode 100644 apps/website/screens/components/paginator/specs/images/paginator_specs.png delete mode 100644 apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx diff --git a/apps/website/pages/components/paginator/code.tsx b/apps/website/pages/components/paginator/code.tsx new file mode 100644 index 0000000000..316860243a --- /dev/null +++ b/apps/website/pages/components/paginator/code.tsx @@ -0,0 +1,19 @@ +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 = () => { + return ( + <> + + Paginator Usage — Halstack Design System + + + + ); +}; + +Code.getLayout = (page: ReactElement) => {page}; + +export default Code; diff --git a/apps/website/pages/components/paginator/index.tsx b/apps/website/pages/components/paginator/index.tsx index 032c17b850..c2183f2d8f 100644 --- a/apps/website/pages/components/paginator/index.tsx +++ b/apps/website/pages/components/paginator/index.tsx @@ -1,7 +1,7 @@ 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 ( @@ -9,13 +9,11 @@ const Index = () => { Paginator — Halstack Design System - + ); }; -Index.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; +Index.getLayout = (page: ReactElement) => {page}; export default Index; diff --git a/apps/website/pages/components/paginator/specifications.tsx b/apps/website/pages/components/paginator/specifications.tsx deleted file mode 100644 index 91186c11dd..0000000000 --- a/apps/website/pages/components/paginator/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout"; -import PaginatorSpecsPage from "screens/components/paginator/specs/PaginatorSpecsPage"; - -const Specifications = () => { - return ( - <> - - Paginator Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/paginator/usage.tsx b/apps/website/pages/components/paginator/usage.tsx deleted file mode 100644 index 5c91956f01..0000000000 --- a/apps/website/pages/components/paginator/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout"; -import PaginatorUsagePage from "screens/components/paginator/usage/PaginatorUsagePage"; - -const Usage = () => { - return ( - <> - - Paginator Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/paginator/PaginatorPageLayout.tsx b/apps/website/screens/components/paginator/PaginatorPageLayout.tsx index 00ae9636b8..9d06a6cfb3 100644 --- a/apps/website/screens/components/paginator/PaginatorPageLayout.tsx +++ b/apps/website/screens/components/paginator/PaginatorPageLayout.tsx @@ -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 ( @@ -19,7 +18,7 @@ const PaginatorPageHeading = ({ children }: { children: ReactNode }) => { The paginator component allows dividing large amounts of content into multiple pages. - + {children} diff --git a/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx new file mode 100644 index 0000000000..60b734fc42 --- /dev/null +++ b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx @@ -0,0 +1,163 @@ +import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; +import Image from "@/common/Image"; +import Figure from "@/common/Figure"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import Code from "@/common/Code"; +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: ( + + 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. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Paginator anatomy + + + Container: the structural wrapper that holds all the elements of the paginator, ensuring + proper spacing, alignment and responsiveness within the interface. + + + Items per page: a control that allows users to adjust the number of items displayed per + page, providing flexibility in data viewing. + + + Items indicator: displays the current range of items being viewed and the total number of + items, helping users understand their position within the dataset. + + + Page actions: navigation buttons that let users move between pages, typically including + "Next", "Previous", "First" and "Last" controls. + + + Page selector: a dropdown or input that enables users to jump directly to a specific page, + improving efficiency when navigating large datasets. + + + + ), + }, + { + title: "Using paginators", + subSections: [ + { + title: "Reducing cognitive load", + content: ( + + 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. + + ), + }, + { + title: "Flexible configuration", + content: ( + <> + + 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. + + + + ), + }, + { + title: "Pagination and scrolling", + content: ( + <> + + 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. + + + + ), + }, + ], + }, + { + title: "Best practices", + content: ( + + + Use pagination when necessary + + Implement a paginator when the number of elements affects system performance or when displaying all content + at once would significantly impact usability, specially on larger screens. + + + + Positioning matters + + 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. + + + + Clearly indicate current status + + 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. + + + + Ensure intuitive navigation + + Provide clear, accessible controls for moving between pages, including next/previous buttons and, when + applicable, direct page selection for quicker access to specific sections. + + + + Consider different configurations + + Adapt the paginator'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. + + + + Combine with scrolling when needed + + 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. + + + + ), + }, +]; + +const PaginatorOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default PaginatorOverviewPage; diff --git a/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts b/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts new file mode 100644 index 0000000000..25c3ae0868 --- /dev/null +++ b/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts @@ -0,0 +1,28 @@ +import { DxcPaginator, DxcInset, DxcFlex } from "@dxc-technology/halstack-react"; +import { useState } from "react"; + +const code = `() => { + + return ( + + + + + + {}} /> + {}} /> + {}} /> + + + ); +}`; + +const scope = { + DxcPaginator, + DxcFlex, + DxcInset, + useState, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/paginator/overview/examples/scrollable.ts b/apps/website/screens/components/paginator/overview/examples/scrollable.ts new file mode 100644 index 0000000000..0f6f2640b6 --- /dev/null +++ b/apps/website/screens/components/paginator/overview/examples/scrollable.ts @@ -0,0 +1,135 @@ +import { DxcPaginator, DxcInset, DxcDataGrid, DxcContainer } from "@dxc-technology/halstack-react"; +import { useState } from "react"; + +const code = `() => { + const columns = [ + { + key: "id", + label: "ID", + resizable: true, + sortable: true, + draggable: false, + alignment: "left", + }, + { + key: "task", + label: "Title", + resizable: true, + sortable: true, + draggable: true, + textEditable: true, + alignment: "left", + }, + { + key: "complete", + label: " % Complete", + resizable: true, + sortable: true, + draggable: true, + alignment: "right", + summaryKey: "label", + }, + { + key: "priority", + label: "Priority", + resizable: true, + draggable: true, + alignment: "center", + summaryKey: "total", + } + ]; + +const expandableRows = [ + { + id: 1, + task: "Task 1", + complete: 46, + priority: "High", + issueType: "Bug", + expandedContent: Custom content 1, + expandedContentHeight: 470 + }, + { + id: 2, + task: "Task 2", + complete: 51, + priority: "High", + issueType: "Epic", + expandedContent: Custom content 1 + }, + { + id: 3, + task: "Task 3", + complete: 40, + priority: "High", + issueType: "Improvement", + expandedContent: Custom content 1 + }, + { + id: 4, + task: "Task 4", + complete: 10, + priority: "High", + issueType: "Improvement", + expandedContent: Custom content 1 + }, + { + id: 5, + task: "Task 5", + complete: 68, + priority: "High", + issueType: "Improvement", + expandedContent: Custom content 1 + }, + { + id: 6, + task: "Task 6", + complete: 37, + priority: "High", + issueType: "Improvement", + expandedContent: Custom content 1 + }, + { + id: 7, + task: "Task 7", + complete: 73, + priority: "Medium", + issueType: "Story", + expandedContent: Custom content 1 + }, + { + id: 8, + task: "Task 8", + complete: 27, + priority: "Medium", + issueType: "Story", + expandedContent: Custom content 1 + }, + { + id: 9, + task: "Task 9", + complete: 36, + priority: "Critical", + issueType: "Epic", + expandedContent: Custom content 1 + }, + ]; + + return ( + + + + + + ); +}`; + +const scope = { + DxcContainer, + DxcDataGrid, + DxcPaginator, + DxcInset, + useState, +}; + +export default { code, scope }; diff --git a/apps/website/screens/components/paginator/overview/images/paginator_anatomy.png b/apps/website/screens/components/paginator/overview/images/paginator_anatomy.png new file mode 100644 index 0000000000000000000000000000000000000000..e9142731a59553099542c789b19dab0fc9bdc61c GIT binary patch literal 24539 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 literal 0 HcmV?d00001 diff --git a/apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx b/apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx deleted file mode 100644 index 6f1b3ff046..0000000000 --- a/apps/website/screens/components/paginator/specs/PaginatorSpecsPage.tsx +++ /dev/null @@ -1,285 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcTable } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import Figure from "@/common/Figure"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Code from "@/common/Code"; -import DocFooter from "@/common/DocFooter"; -import paginatorAnatomy from "./images/paginator_anatomy.png"; -import paginatorSpecs from "./images/paginator_specs.png"; - -const sections = [ - { - title: "Specifications", - content: ( -
- Paginator design specifications -
- ), - }, - { - title: "Anatomy", - content: ( - <> - Paginator anatomy - - Container - Items per page - Items indicator - Page actions - Page selector - - - ), - }, - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - backgroundColor - - Container - - color-grey-100 - - #f2f2f2 - - - - fontColor - - Type all - - color-black - - #000000 - - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Element - Core token - Value - - - - - - fontFamily - - Type all - - font-family-sans - - 'Open Sans', sans-serif - - - - fontSize - - Type all - - font-scale-03 - - 1rem / 16px - - - - fontStyle - - Type all - - font-style-normal - - normal - - - - fontWeight - - Type all - - font-weight-regular - - 400 - - - - fontTextTransform - - Type all - - - none - - - - ), - }, - { - title: "Spacing", - content: ( - - - - Component token - Element - Core token - Value - - - - - - marginRight - - Content - - spacing-32 - - 2rem / 32px - - - - marginLeft - - Content - - spacing-32 - - 2rem / 32px - - - - itemsPerPageSelectorMarginLeft - - Items per page - - spacing-0 - - 0rem / 0px - - - - itemsPerPageSelectorMarginRight - - Items per page - - spacing-16 - - 1rem / 16px - - - - pageSelectorMarginRight - - Page selector - - spacing-16 - - 1rem / 16px - - - - pageSelectorMarginLeft - - Page selector - - spacing-0 - - 0rem / 0px - - - - totalItemsContainerMarginRight - - Items indicator - - spacing-48 - - 3rem / 48px - - - - totalItemsContainerMarginLeft - - Items indicator - - spacing-0 - - 0rem / 0px - - - - ), - }, - { - title: "Size", - content: ( - - - - Component token - Element - Core token - Value - - - - - - height - - Container - - - 64px - - - - width - - Container - - - 100% - - - - ), - }, - ], - }, -]; - -const PaginatorSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default PaginatorSpecsPage; diff --git a/apps/website/screens/components/paginator/specs/images/paginator_anatomy.png b/apps/website/screens/components/paginator/specs/images/paginator_anatomy.png deleted file mode 100644 index d77134074a54057d1d7f27ae7fa1cce5799bc109..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 20868 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 diff --git a/apps/website/screens/components/paginator/specs/images/paginator_specs.png b/apps/website/screens/components/paginator/specs/images/paginator_specs.png deleted file mode 100644 index 536096ece279f5f0502d1eb6d6e63663e65ea2f4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 28019 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 diff --git a/apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx b/apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx deleted file mode 100644 index 4e87e625ec..0000000000 --- a/apps/website/screens/components/paginator/usage/PaginatorUsagePage.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import DocFooter from "@/common/DocFooter"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; - -const sections = [ - { - title: "Usage", - content: ( - <> - Usage considerations about the paginator component: - - - Use the paginator when the number of elements is affecting the system load, or when the screen size grows - considerably. - - - Always place the paginator at the bottom of the data that is being divided. - - - Identify the current page and the number of elements that are being displayed. - - - - ), - }, -]; - -const PaginatorUsagePage = () => { - return ( - - - - - - - ); -}; - -export default PaginatorUsagePage; diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx index 3035bbeb22..9b483666f1 100644 --- a/packages/lib/src/data-grid/DataGrid.tsx +++ b/packages/lib/src/data-grid/DataGrid.tsx @@ -239,7 +239,7 @@ const DxcDataGrid = ({ return ( - + itemsPerPage}> ` width: 100%; - height: 100%; + height: ${(props) => (props.paginatorRendered ? `calc(100% - 50px)` : `100%`)}; .rdg { border-radius: 4px; height: 100%; diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index 9ca39521cf..39b060009d 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -113,6 +113,7 @@ const DxcPaginator = ({ onPageChange(1); }} title="First results" + size={{ height: "medium" }} /> )} @@ -159,6 +161,7 @@ const DxcPaginator = ({ onPageChange(currentPage + 1); }} title="Next results" + size={{ height: "medium" }} /> )} From 026e20fb40f77c6acbe61b900e00675480c33f32 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Fri, 21 Mar 2025 11:23:45 +0100 Subject: [PATCH 4/5] removed themeContext, improved format and fixed some typos --- .../pages/components/paginator/code.tsx | 18 +- .../pages/components/paginator/index.tsx | 18 +- .../paginator/code/PaginatorCodePage.tsx | 18 +- .../overview/PaginatorOverviewPage.tsx | 22 +-- .../examples/flexibleConfiguration.ts | 26 ++- .../paginator/overview/examples/scrollable.ts | 2 +- .../lib/src/paginator/Paginator.stories.tsx | 26 +-- packages/lib/src/paginator/Paginator.tsx | 185 +++++++++--------- 8 files changed, 148 insertions(+), 167 deletions(-) diff --git a/apps/website/pages/components/paginator/code.tsx b/apps/website/pages/components/paginator/code.tsx index 316860243a..4d99f6eff8 100644 --- a/apps/website/pages/components/paginator/code.tsx +++ b/apps/website/pages/components/paginator/code.tsx @@ -3,16 +3,14 @@ import type { ReactElement } from "react"; import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout"; import PaginatorCodePage from "screens/components/paginator/code/PaginatorCodePage"; -const Code = () => { - return ( - <> - - Paginator Usage — Halstack Design System - - - - ); -}; +const Code = () => ( + <> + + Paginator Code — Halstack Design System + + + +); Code.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/pages/components/paginator/index.tsx b/apps/website/pages/components/paginator/index.tsx index c2183f2d8f..b40e66ce5b 100644 --- a/apps/website/pages/components/paginator/index.tsx +++ b/apps/website/pages/components/paginator/index.tsx @@ -3,16 +3,14 @@ import type { ReactElement } from "react"; import PaginatorPageLayout from "screens/components/paginator/PaginatorPageLayout"; import PaginatorOverviewPage from "screens/components/paginator/overview/PaginatorOverviewPage"; -const Index = () => { - return ( - <> - - Paginator — Halstack Design System - - - - ); -}; +const Index = () => ( + <> + + Paginator — Halstack Design System + + + +); Index.getLayout = (page: ReactElement) => {page}; diff --git a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx index 16572b8f8d..546e42affd 100644 --- a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx +++ b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx @@ -129,15 +129,13 @@ const sections = [ }, ]; -const PaginatorCodePage = () => { - return ( - - - - - - - ); -}; +const PaginatorCodePage = () => ( + + + + + + +); export default PaginatorCodePage; diff --git a/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx index 60b734fc42..f103053e0d 100644 --- a/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx +++ b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx @@ -1,9 +1,7 @@ import { DxcBulletedList, DxcFlex, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; import Image from "@/common/Image"; -import Figure from "@/common/Figure"; import QuickNavContainer from "@/common/QuickNavContainer"; import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import paginatorAnatomy from "./images/paginator_anatomy.png"; import Example from "@/common/example/Example"; @@ -106,7 +104,7 @@ const sections = [ Use pagination when necessary Implement a paginator when the number of elements affects system performance or when displaying all content - at once would significantly impact usability, specially on larger screens. + at once would significantly impact usability, especially on larger screens. @@ -149,15 +147,13 @@ const sections = [ }, ]; -const PaginatorOverviewPage = () => { - return ( - - - - - - - ); -}; +const PaginatorOverviewPage = () => ( + + + + + + +); export default PaginatorOverviewPage; diff --git a/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts b/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts index 25c3ae0868..490ecd08ac 100644 --- a/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts +++ b/apps/website/screens/components/paginator/overview/examples/flexibleConfiguration.ts @@ -9,10 +9,28 @@ const code = `() => { - {}} /> - {}} /> - {}} /> + {}} + /> + {}} + /> + {}} + /> ); diff --git a/apps/website/screens/components/paginator/overview/examples/scrollable.ts b/apps/website/screens/components/paginator/overview/examples/scrollable.ts index 0f6f2640b6..856536c6a4 100644 --- a/apps/website/screens/components/paginator/overview/examples/scrollable.ts +++ b/apps/website/screens/components/paginator/overview/examples/scrollable.ts @@ -39,7 +39,7 @@ const code = `() => { } ]; -const expandableRows = [ + const expandableRows = [ { id: 1, task: "Task 1", diff --git a/packages/lib/src/paginator/Paginator.stories.tsx b/packages/lib/src/paginator/Paginator.stories.tsx index f44fbccdf3..76593dd4cc 100644 --- a/packages/lib/src/paginator/Paginator.stories.tsx +++ b/packages/lib/src/paginator/Paginator.stories.tsx @@ -1,7 +1,6 @@ import { Meta, StoryObj } from "@storybook/react"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import Title from "../../.storybook/components/Title"; -import { HalstackProvider } from "../HalstackContext"; import DxcPaginator from "./Paginator"; export default { @@ -9,13 +8,6 @@ export default { component: DxcPaginator, } as Meta; -const opinionatedTheme = { - paginator: { - baseColor: "#f2f2f2", - fontColor: "#000000", - }, -}; - const Paginator = () => ( <> @@ -67,22 +59,6 @@ const Paginator = () => ( showGoToPage /> - - <ExampleContainer> - <HalstackProvider theme={opinionatedTheme}> - <ExampleContainer> - <Title title="Page change and items per page options" theme="light" level={4} /> - <DxcPaginator - currentPage={1} - itemsPerPage={10} - totalItems={27} - onPageChange={() => {}} - itemsPerPageOptions={[5, 10, 15]} - showGoToPage - /> - </ExampleContainer> - </HalstackProvider> - </ExampleContainer> </> ); @@ -90,4 +66,4 @@ type Story = StoryObj<typeof DxcPaginator>; export const Chromatic: Story = { render: Paginator, -}; \ No newline at end of file +}; diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx index 39b060009d..0c8ed6692a 100644 --- a/packages/lib/src/paginator/Paginator.tsx +++ b/packages/lib/src/paginator/Paginator.tsx @@ -1,5 +1,5 @@ import { useContext } from "react"; -import styled, { ThemeProvider } from "styled-components"; +import styled from "styled-components"; import DxcButton from "../button/Button"; import DxcSelect from "../select/Select"; import HalstackContext from "../HalstackContext"; @@ -25,7 +25,6 @@ const DxcPaginator = ({ const maxItemsPerPage = minItemsPerPage - 1 + itemsPerPage > totalItems ? totalItems : minItemsPerPage - 1 + itemsPerPage; - const colorsTheme = useContext(HalstackContext); const translatedLabels = useContext(HalstackLanguageContext); const DxcPaginatorContainer = styled.div` @@ -77,108 +76,106 @@ const DxcPaginator = ({ `; return ( - <ThemeProvider theme={colorsTheme.paginator}> - <DxcPaginatorContainer> - {itemsPerPageOptions && ( - <ItemsPerPageContainer> - <span>{translatedLabels.paginator.itemsPerPageText}</span> + <DxcPaginatorContainer> + {itemsPerPageOptions && ( + <ItemsPerPageContainer> + <span>{translatedLabels.paginator.itemsPerPageText}</span> + <SelectContainer> + <DxcSelect + options={itemsPerPageOptions.map((num) => ({ + label: num.toString(), + value: num.toString(), + }))} + onChange={(newValue) => { + itemsPerPageFunction?.(Number(newValue.value)); + }} + value={itemsPerPage.toString()} + size="fillParent" + tabIndex={tabIndex} + /> + </SelectContainer> + </ItemsPerPageContainer> + )} + <TotalItemsContainer> + {translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems)} + </TotalItemsContainer> + <GoToPageContainer> + {onPageChange && ( + <ButtonsContainer> + <DxcButton + mode="secondary" + disabled={currentPageInternal === 1 || currentPageInternal === 0} + icon="first_page" + tabIndex={tabIndex} + onClick={() => { + onPageChange(1); + }} + title="First results" + size={{ height: "medium" }} + /> + + <DxcButton + mode="secondary" + disabled={currentPageInternal === 1 || currentPageInternal === 0} + icon="navigate_before" + tabIndex={tabIndex} + onClick={() => { + onPageChange(currentPage - 1); + }} + title="Previous results" + size={{ height: "medium" }} + /> + </ButtonsContainer> + )} + {showGoToPage ? ( + <PageToSelectContainer> + <span>{translatedLabels.paginator.goToPageText} </span> <SelectContainer> <DxcSelect - options={itemsPerPageOptions.map((num) => ({ - label: num.toString(), - value: num.toString(), + options={Array.from(Array(totalPages), (e, num) => ({ + label: (num + 1).toString(), + value: (num + 1).toString(), }))} onChange={(newValue) => { - itemsPerPageFunction?.(Number(newValue.value)); + onPageChange?.(Number(newValue.value)); }} - value={itemsPerPage.toString()} + value={currentPage.toString()} size="fillParent" tabIndex={tabIndex} /> </SelectContainer> - </ItemsPerPageContainer> + </PageToSelectContainer> + ) : ( + <span>{translatedLabels.paginator.pageOfText(currentPageInternal, totalPages)}</span> )} - <TotalItemsContainer> - {translatedLabels.paginator.minToMaxOfText(minItemsPerPage, maxItemsPerPage, totalItems)} - </TotalItemsContainer> - <GoToPageContainer> - {onPageChange && ( - <ButtonsContainer> - <DxcButton - mode="secondary" - disabled={currentPageInternal === 1 || currentPageInternal === 0} - icon="first_page" - tabIndex={tabIndex} - onClick={() => { - onPageChange(1); - }} - title="First results" - size={{ height: "medium" }} - /> - - <DxcButton - mode="secondary" - disabled={currentPageInternal === 1 || currentPageInternal === 0} - icon="navigate_before" - tabIndex={tabIndex} - onClick={() => { - onPageChange(currentPage - 1); - }} - title="Previous results" - size={{ height: "medium" }} - /> - </ButtonsContainer> - )} - {showGoToPage ? ( - <PageToSelectContainer> - <span>{translatedLabels.paginator.goToPageText} </span> - <SelectContainer> - <DxcSelect - options={Array.from(Array(totalPages), (e, num) => ({ - label: (num + 1).toString(), - value: (num + 1).toString(), - }))} - onChange={(newValue) => { - onPageChange?.(Number(newValue.value)); - }} - value={currentPage.toString()} - size="fillParent" - tabIndex={tabIndex} - /> - </SelectContainer> - </PageToSelectContainer> - ) : ( - <span>{translatedLabels.paginator.pageOfText(currentPageInternal, totalPages)}</span> - )} - {onPageChange && ( - <ButtonsContainer> - <DxcButton - mode="secondary" - disabled={currentPageInternal === totalPages} - icon="navigate_next" - tabIndex={tabIndex} - onClick={() => { - onPageChange(currentPage + 1); - }} - title="Next results" - size={{ height: "medium" }} - /> - <DxcButton - mode="secondary" - disabled={currentPageInternal === totalPages} - icon="last_page" - tabIndex={tabIndex} - onClick={() => { - onPageChange(totalPages); - }} - title="Last results" - size={{ height: "medium" }} - /> - </ButtonsContainer> - )} - </GoToPageContainer> - </DxcPaginatorContainer> - </ThemeProvider> + {onPageChange && ( + <ButtonsContainer> + <DxcButton + mode="secondary" + disabled={currentPageInternal === totalPages} + icon="navigate_next" + tabIndex={tabIndex} + onClick={() => { + onPageChange(currentPage + 1); + }} + title="Next results" + size={{ height: "medium" }} + /> + <DxcButton + mode="secondary" + disabled={currentPageInternal === totalPages} + icon="last_page" + tabIndex={tabIndex} + onClick={() => { + onPageChange(totalPages); + }} + title="Last results" + size={{ height: "medium" }} + /> + </ButtonsContainer> + )} + </GoToPageContainer> + </DxcPaginatorContainer> ); }; From 442cf121b88fc34c023034769f7277a5037d3551 Mon Sep 17 00:00:00 2001 From: Jialecl <jialestrabajos@gmail.com> Date: Fri, 21 Mar 2025 12:40:50 +0100 Subject: [PATCH 5/5] Small changes based on feedback --- .../screens/components/paginator/code/PaginatorCodePage.tsx | 2 +- .../components/paginator/overview/PaginatorOverviewPage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx index 546e42affd..3f538f9ba8 100644 --- a/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx +++ b/apps/website/screens/components/paginator/code/PaginatorCodePage.tsx @@ -132,7 +132,7 @@ const sections = [ const PaginatorCodePage = () => ( <DxcFlex direction="column" gap="4rem"> <QuickNavContainerLayout> - <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer> + <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> diff --git a/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx index f103053e0d..0c1e7563c4 100644 --- a/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx +++ b/apps/website/screens/components/paginator/overview/PaginatorOverviewPage.tsx @@ -150,7 +150,7 @@ const sections = [ const PaginatorOverviewPage = () => ( <DxcFlex direction="column" gap="4rem"> <QuickNavContainerLayout> - <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer> + <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>