diff --git a/apps/website/pages/components/data-grid/code.tsx b/apps/website/pages/components/data-grid/code.tsx new file mode 100644 index 0000000000..5f9367842d --- /dev/null +++ b/apps/website/pages/components/data-grid/code.tsx @@ -0,0 +1,18 @@ +import Head from "next/head"; +import type { ReactElement } from "react"; +import DataGridCodePage from "screens/components/data-grid/code/DataGridCodePage"; +import DataGridPageLayout from "screens/components/data-grid/DataGridPageLayout"; + +const Code = () => { + return ( + <> + + Data grid — Halstack Design System + + + + ); +}; + +Code.getLayout = (page: ReactElement) => {page}; +export default Code; diff --git a/apps/website/pages/components/data-grid/index.tsx b/apps/website/pages/components/data-grid/index.tsx index f6f6f2a17e..af1b58abea 100644 --- a/apps/website/pages/components/data-grid/index.tsx +++ b/apps/website/pages/components/data-grid/index.tsx @@ -1,22 +1,18 @@ import Head from "next/head"; import type { ReactElement } from "react"; -import DataGridCodePage from "screens/components/data-grid/code/DataGridCodePage"; import DataGridPageLayout from "screens/components/data-grid/DataGridPageLayout"; +import DataGridOverviewPage from "screens/components/data-grid/overview/DataGridOverviewPage"; - -const Usage = () => { +const Index = () => { return ( <> - Data Grid — Halstack Design System + Data grid — Halstack Design System - + ); }; -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; +Index.getLayout = (page: ReactElement) => {page}; +export default Index; diff --git a/apps/website/pages/components/data-grid/specifications.tsx b/apps/website/pages/components/data-grid/specifications.tsx deleted file mode 100644 index 254c432ffd..0000000000 --- a/apps/website/pages/components/data-grid/specifications.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import DataGridSpecsPage from "screens/components/data-grid/specs/DataGridSpecsPage"; -import DataGridPageLayout from "screens/components/data-grid/DataGridPageLayout"; - -const Specifications = () => { - return ( - <> - - Data Grid Specs — Halstack Design System - - - - ); -}; - -Specifications.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Specifications; diff --git a/apps/website/pages/components/data-grid/usage.tsx b/apps/website/pages/components/data-grid/usage.tsx deleted file mode 100644 index bf0271cda5..0000000000 --- a/apps/website/pages/components/data-grid/usage.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import Head from "next/head"; -import type { ReactElement } from "react"; -import DataGridUsagePage from "screens/components/data-grid/usage/DataGridUsagePage"; -import DataGridPageLayout from "screens/components/data-grid/DataGridPageLayout"; - -const Usage = () => { - return ( - <> - - Data Grid Usage — Halstack Design System - - - - ); -}; - -Usage.getLayout = function getLayout(page: ReactElement) { - return {page}; -}; - -export default Usage; diff --git a/apps/website/screens/components/data-grid/DataGridPageLayout.tsx b/apps/website/screens/components/data-grid/DataGridPageLayout.tsx index 53769dd55e..dbeb44b4ab 100644 --- a/apps/website/screens/components/data-grid/DataGridPageLayout.tsx +++ b/apps/website/screens/components/data-grid/DataGridPageLayout.tsx @@ -6,9 +6,8 @@ import { ReactNode } from "react"; const DataGridPageHeading = ({ children }: { children: ReactNode }) => { const tabs = [ - { label: "Code", path: "/components/data-grid" }, - { label: "Usage", path: "/components/data-grid/usage" }, - { label: "Specifications", path: "/components/data-grid/specifications" }, + { label: "Overview", path: "/components/data-grid" }, + { label: "Code", path: "/components/data-grid/code" }, ]; return ( @@ -23,12 +22,10 @@ const DataGridPageHeading = ({ children }: { children: ReactNode }) => { closable={false} /> - A data grid is a component designed to display large volumes in a structured and organized manner. It - structures data into rows and columns, making it easy for users to visualize, analyze, and interact with the - information. The data grid also improves user experience by providing features like sorting, filtering, and - editing. + The datagrid component is used to display and manage large sets of data in a tabular format, allowing users + to sort, filter, and interact with the data efficiently. - + {children} diff --git a/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx b/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx new file mode 100644 index 0000000000..b2dde9228d --- /dev/null +++ b/apps/website/screens/components/data-grid/overview/DataGridOverviewPage.tsx @@ -0,0 +1,291 @@ +import { DxcParagraph, DxcBulletedList, DxcTable, DxcFlex, DxcLink } from "@dxc-technology/halstack-react"; +import QuickNavContainer from "@/common/QuickNavContainer"; +import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; +import DocFooter from "@/common/DocFooter"; +import Image from "@/common/Image"; +import anatomy from "./images/datagrid-anatomy.png"; + +const sections = [ + { + title: "Introduction", + content: ( + + The datagrid component offers a robust solution for displaying and managing tabular data. It supports essential + features such as sorting, allowing users to organize and refine data easily. With{" "} + multi-selection capabilities, users can perform bulk actions like deleting or exporting records + efficiently. The component also includes in-line editing for quick data modifications directly + within the grid, and expandable rows for showcasing additional details without cluttering the + main view. Additionally, users can reorder columns to customize their data layout, ensuring an + intuitive and flexible user experience tailored to their specific needs. + + ), + }, + { + title: "Anatomy", + content: ( + <> + Datagrid's anatomy + + + Header row: it's the top section of the datagrid that displays the column titles and can + support actions like sorting or filtering. + + + Cell: basic unit of the datagrid where individual pieces of data are displayed and aligned + with the column. + + + Summary row (Optional): row at the bottom that shows summarized or aggregated data + for one or multiple columns. + + + Selectable row (Optional): a data row that users can click to select, usually for + performing actions like editing or deleting. + + + Expanded row (Optional): a row that, when expanded, reveals additional contextual + information related to that entry. + + + Expandable indicator (Optional): an icon or control that shows users a row can be + expanded to access more detailed content. + + + + ), + }, + { + title: "Key interactions and features", + subSections: [ + { + title: "Row selection", + content: ( + <> + + + Users can select one or multiple rows for bulk actions. It's recommended to include + checkboxes for multiple row selection, or else radio buttons for single-row selection. + + + Row selection can persist across pages when pagination is used in the datagrid, + ensuring users can perform bulk actions on rows even if they navigate away from the current view. + + + Users can set a default selected row on initial load, useful for pre-populating forms or automatically + highlighting the most relevant data for their specific use case. + + + Users can easily undo multiple selections at once using the select/deselect all feature + located in the datagrid's header, streamlining bulk actions. + + + + ), + }, + { + title: "Sorting and filtering", + content: ( + <> + + + Users can apply sorting to multiple columns simultaneously, enabling more complex data + analysis by arranging data based on different criteria. + + + Filtering in our datagrid is enabled through integrated Halstack components, such as dropdowns, and is + applied at the row level for precise data refinement. + + + + ), + }, + { + title: "In-line editing", + content: ( + <> + + + Users can modify data directly within the grid cells, allowing for quick and intuitive updates without + navigating away from the grid. This feature is particularly valuable for large datasets, where edits + need to be made directly within the data source for efficiency and real-time updates. + + + Changes made through in-line editing are immediately reflected in the datagrid, giving + users real-time feedback on their edits. + + + Built-in validation ensures that only correct and acceptable values are submitted, reducing errors and + improving data accuracy. + + + Additionally, when editing permissions are required, the datagrid can be configured with other Halstack + components, such as the button, to enable editing only after the button is activated. + + + + ), + }, + { + title: "Expandable rows", + content: ( + <> + + + The datagrid component allows users to{" "} + reveal additional information for specific rows without cluttering the main view. This + optimizes space efficiency and improves user experience by offering access to in-depth information when + needed, all while maintaining a clean and organized grid layout. + + + When a row is expanded, it displays supplementary details, such as extra data fields, images, or action + buttons, providing context and enhancing data exploration. + + + The expanded area can display various content types, such as additional data fields, images, or action + buttons, enhancing the data presentation. + + + + ), + }, + { + title: "Column reordering", + content: ( + <> + + + The re-ordering feature of our datagrid allows users to rearrange columns according to + their preferences by dragging and dropping them, enhancing the personalized data + viewing experience. + + + By letting users prioritize the most relevant columns, this feature helps them access and analyze data + more efficiently. It is also designed to be user-friendly, enabling quick adjustments with minimal + effort. + + + As users drag columns, visual indicators guide them, making it clear where the column will be placed + when dropped. + + + + ), + }, + { + title: "Hierarchical data", + content: ( + <> + + + The datagrid supports hierarchical or tree-structured data, allowing users to explore + nested information within expandable rows. This is especially useful when working with parent-child + relationships, such as organizational structures, grouped datasets, or categories with subcategories. + + + Rows can be expanded to reveal child rows, enabling users to{" "} + view and interact with multi-level data in context, without navigating away or loading + separate tables. + + + This feature improves clarity and usability for complex datasets by letting users{" "} + drill down into relevant sections while keeping the rest of the grid collapsed and + clean. + + + + ), + }, + ], + }, + { + title: "Best practices", + content: ( + <> + + + Data contextualization: provide context within the grid by labeling columns clearly, + ensuring users understand the significance of the data they are viewing. + + + Column alignment: although data can be aligned in columns however the user chooses, it must + be aligned consistently across columns to enhance readability: + + + Text: aligned to the left for natural reading flow. + + + Numbers and currencies: align numbers, currencies, and other quantitative data to the{" "} + right for clear comparison, especially when dealing with decimals or aligning figures + by their numerical place value. + + + Dates and times: aligned to the left for readability, as users generally read these + like text, but consider right-aligning if dates need to be compared sequentially. + + + Actions: align action buttons or interactive elements (such as "Edit" or "Delete") to the{" "} + center or right, depending on layout consistency. Centering actions + can make them more accessible and distinguishable from data fields. + + + Booleans: align checkboxes or toggles to the center to visually separate them from text + or data and create a clear, interactive area. + + + Icons: aligned to the center or next to their corresponding text, with spacing, to + maintain clarity and improve the user interface. + + + + + Column sizing: make sure that columns are sized appropriately for the type of data they + display (e.g. dates should not take up too much space, neither do numerical values, which must take only the + minimal space it requires for them to be shown without truncation). + + + Clear default sorting: set a sensible default sorting order for columns to help users + quickly access the most relevant data when they first interact with the grid. + + + Clear filters option: when filtering data, include a button to clear all filters at once, + allowing users to quickly reset their views and return to the unfiltered dataset. + + + Accessible bulk actions: ensure that bulk actions, such as "Delete" or "Export", are easily + accessible once rows are selected, facilitating efficient data management. Consider also implementing + confirmation prompts for bulk actions to prevent accidental data loss and ensure users are intentional with + their actions. + + + Use of expandable rows: use expandable rows to display additional information that isn't + crucial for immediate viewing, but avoid overusing this feature to prevent increased cognitive load on + users. + + + Limit expandable content: use expandable rows sparingly to avoid overwhelming users, + ensuring that only essential supplementary information is included. + + + Scrolling: the datagrid supports both horizontal and vertical scrolling to handle extensive + data sets, ensuring all rows and columns are accessible without cluttering the UI. While the component + supports scrolling, it is designed to prioritize displaying the most essential data upfront, minimizing the + need for scrolling to reduce potential user confusion and enhance accessibility. + + + + ), + }, +]; + +const DataGridOverviewPage = () => { + return ( + + + + + + + ); +}; + +export default DataGridOverviewPage; diff --git a/apps/website/screens/components/data-grid/overview/images/datagrid-anatomy.png b/apps/website/screens/components/data-grid/overview/images/datagrid-anatomy.png new file mode 100644 index 0000000000..55b7b5a115 Binary files /dev/null and b/apps/website/screens/components/data-grid/overview/images/datagrid-anatomy.png differ diff --git a/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx b/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx deleted file mode 100644 index 9e85b4dbc4..0000000000 --- a/apps/website/screens/components/data-grid/specs/DataGridSpecsPage.tsx +++ /dev/null @@ -1,576 +0,0 @@ -import { DxcParagraph, DxcBulletedList, DxcTable, DxcFlex, DxcLink } from "@dxc-technology/halstack-react"; -import Image from "@/common/Image"; -import Link from "next/link"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import Figure from "@/common/Figure"; -import Code from "@/common/Code"; - -const sections = [ - { - title: "Design tokens", - subSections: [ - { - title: "Color", - content: ( - - - - Component token - Element - Core token - Value - - - - - - rowSeparatorColor - - Separator - - color-grey-300 - - #cccccc - - - - dataBackgroundColor - - Data grid - - color-white - - #ffffff - - - - dataFontColor - - Data grid - - color-black - - #000000 - - - - headerBackgroundColor - - Header - - color-black - - #000000 - - - - headerBackgroundColor - - Header - - color-purple-700 - - #5f249f - - - - headerFontColor - - Header - - color-white - - #ffffff - - - - headerCheckboxBackgroundColorChecked - - Header checkbox - - color-white - - #ffffff - - - - headerCheckboxHoverBackgroundColorChecked - - Header checkbox:hover - - color-grey-200 - - #e6e6e6 - - - - headerCheckboxBorderColor - - Header checkbox - - color-white - - #ffffff - - - - headerCheckboxHoverBorderColor - - Header checkbox:hover - - color-white - - #ffffff - - - - headerCheckboxCheckColor - - Header checkbox - - color-purple-700 - - #5f249f - - - - focusColor - - Data grid - - color-blue-600 - - #0095ff - - - - scrollBarThumbColor - - Scroll bar - - color-grey-700 - - #666666 - - - - scrollBarTrackColor - - Scroll bar - - color-grey-300 - - #cccccc - - - - actionIconColor - - Actions cell - - color-purple-700 - - #5f249f - - - - disabledActionIconColor - - Actions cell - - color-grey-500 - - #999999 - - - - hoverActionIconColor - - Actions cell - - color-purple-700 - - #5f249f - - - - focusActionIconColor - - Actions cell - - color-purple-700 - - #5f249f - - - - activeActionIconColor - - Actions cell - - color-purple-700 - - #5f249f - - - - actionBackgroundColor - - Actions cell - - color-transparent - - transparent - - - - disabledActionBackgroundColor - - Actions cell - - color-transparent - - transparent - - - - hoverActionBackgroundColor - - Actions cell - - color-grey-100 - - #f2f2f2 - - - - focusActionBorderColor - - Actions cell - - color-blue-600 - - #0095ff - - - - activeActionBackgroundColor - - Actions cell - - color-grey-300 - - #cccccc - - - - ), - }, - { - title: "Typography", - content: ( - - - - Component token - Element - Core token - Value - - - - - - dataFontFamily - - Data grid - - font-family-sans - - 'Open Sans', sans-serif - - - - dataFontSize - - Data grid - - font-scale-02 - - 0.875rem / 14px - - - - dataFontStyle - - Data grid - - font-style-normal - - normal - - - - dataFontWeight - - Data grid - - font-weight-regular - - 400 - - - - dataFontTextTransform - - Data grid - - - none - - - - dataTextLineHeight - - Data grid - - - normal - - - - headerFontFamily - - Header - - font-family-sans - - 'Open Sans', sans-serif - - - - headerFontSize - - Header - - font-scale-02 - - 0.875rem / 14px - - - - headerFontSize - - Header - - font-style-normal - - normal - - - - headerFontWeight - - Header - - font-weight-bold - - bold - - - - headerFontTextTransform - - Header - - - none - - - - headerTextLineHeight - - Header - - - normal - - - - ), - }, - { - title: "Separator", - content: ( - - - - Component token - Element - Core token - Value - - - - - - rowSeparatorThickness - - Separator - - - 1px - - - - rowSeparatorStyle - - Separator - - border-style-solid - - solid - - - - ), - }, - { - title: "Spacing", - content: ( - - - - Component token - Element - Core token - Value - - - - - - dataPaddingRight - - Data grid - - spacing-8 - - 0.5rem / 8px - - - - dataPaddingLeft - - Data grid - - spacing-8 - - 0.5rem / 8px - - - - headerPaddingRight - - Header - - spacing-8 - - 0.5rem / 8px - - - - headerPaddingLeft - - Header - - spacing-8 - - 0.5rem / 8px - - - - ), - }, - { - title: "Size", - content: ( - - - - Component token - Element - Core token - Value - - - - - - dataRowHeight - - Data grid - - - 36 - - - - headerRowHeight - - Header - - - 36 - - - - summaryRowHeight - - Summary row - - - 36 - - - - headerBorderRadius - - Header - - - 4px - - - - ), - }, - ], - }, - { - title: "Accessibility", - subSections: [ - { - title: "WAI-ARIA", - content: ( - <> - - - WAI-ARIA authoring practices -{" "} - - Data Grid Examples - - - - - ), - }, - ], - }, -]; - -const DataGridSpecsPage = () => { - return ( - - - - - - - ); -}; - -export default DataGridSpecsPage; diff --git a/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx b/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx deleted file mode 100644 index 448d641343..0000000000 --- a/apps/website/screens/components/data-grid/usage/DataGridUsagePage.tsx +++ /dev/null @@ -1,247 +0,0 @@ -import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react"; -import QuickNavContainer from "@/common/QuickNavContainer"; -import QuickNavContainerLayout from "@/common/QuickNavContainerLayout"; -import DocFooter from "@/common/DocFooter"; -import Example from "@/common/example/Example"; -import expandedContent from "./examples/expandedContent"; -import selectable from "./examples/selectable"; -import filterable from "./examples/filterable"; -import draggable from "./examples/draggable"; - -const sections = [ - { - title: "Overview", - content: ( - - The Datagrid component offers a robust solution for displaying and managing tabular data. It supports essential - features such as sorting and filtering, allowing users to organize and refine data easily. With multi-selection - capabilities, users can perform bulk actions like deleting or exporting records efficiently. The component also - includes in-line editing for quick data modifications directly within the grid, and expandable rows for - showcasing additional details without cluttering the main view. Additionally, users can reorder columns to - customize their data layout, ensuring an intuitive and flexible user experience tailored to their specific - needs. - - ), - }, - { - title: "Key interactions and features", - subSections: [ - { - title: "Row selection", - content: ( - <> - - Users can select one or multiple rows for bulk actions. - - Row selection can persist across pages when pagination is used in the Datagrid, ensuring users can - perform bulk actions on rows even if they navigate away from the current view. - - - Users can set a default selected row on initial load, useful for pre-populating forms or automatically - highlighting the most relevant data for their specific use case. - - - Users can easily undo multiple selections at once using the select/deselect all feature located in the - Datagrid’s header, streamlining bulk actions. - - - - ), - subSections: [ - { - title: "Example", - content: , - }, - ], - }, - { - title: "Sorting and filtering", - content: ( - <> - - - Users can apply sorting to multiple columns simultaneously, enabling more complex data analysis by - arranging data based on different criteria. - - - Filtering in our Datagrid is enabled through integrated Halstack components, such as Dropdowns, and is - applied at the row level for precise data refinement. - - - - ), - subSections: [ - { - title: "Example", - content: , - }, - ], - }, - { - title: "In-line editing", - content: ( - <> - - - Users can modify data directly within the grid cells, allowing for quick and intuitive updates without - navigating away from the grid. This feature is particularly valuable for large datasets, where edits - need to be made directly within the data source for efficiency and real-time updates. - - - Changes made through in-line editing are immediately reflected in the Datagrid, giving users real-time - feedback on their edits. - - - Additionally, when editing permissions are required, the Datagrid can be configured with other Halstack - components, such as the Button, to enable editing only after the button is activated. - - - - ), - }, - { - title: "Expandable rows", - content: ( - <> - - - The Datagrid component allows users to reveal additional information for specific rows without - cluttering the main view. This optimizes space efficiency and improves user experience by offering - access to in-depth information when needed, all while maintaining a clean and organized grid layout. - - - The expanded area can display various content types, such as additional data fields, images, or action - buttons, enhancing the data presentation. - - - - ), - subSections: [ - { - title: "Example", - content: , - }, - ], - }, - { - title: "Column reordering", - content: ( - <> - - - The re-ordering feature of our Datagrid allows users to rearrange columns according to their preferences - by dragging and dropping them, enhancing the personalized data viewing experience. - - - By letting users prioritize the most relevant columns, this feature helps them access and analyze data - more efficiently. It is also designed to be user-friendly, enabling quick adjustments with minimal - effort. - - - As users drag columns, visual indicators guide them, making it clear where the column will be placed - when dropped. - - - - ), - subSections: [ - { - title: "Example", - content: , - }, - ], - }, - ], - }, - { - title: "Best practices", - content: ( - <> - - - Data contextualization: provide context within the grid by labeling columns clearly, - ensuring users understand the significance of the data they are viewing. - - - Column alignment: although data can be aligned in columns however the user chooses, it must - be aligned consistently across columns to enhance readability: - - - Text: aligned to the left for natural reading flow. - - - Numbers and currencies: align numbers, currencies, and other quantitative data to the - right for clear comparison, especially when dealing with decimals or aligning figures by their numerical - place value. - - - Dates and times: aligned to the left for readability, as users generally read these - like text, but consider right-aligning if dates need to be compared sequentially. - - - Actions: align action buttons or interactive elements (such as "Edit" or "Delete") to - the center or right, depending on layout consistency. Centering actions can make them more accessible - and distinguishable from data fields. - - - Booleans: align checkboxes or toggles to the center to visually separate them from text - or data and create a clear, interactive area. - - - Icons: aligned to the center or next to their corresponding text, with spacing, to - maintain clarity and improve the user interface. - - - - - Column sizing: make sure that columns are sized appropriately for the type of data they - display (e.g. dates should not take up too much space, neither do numerical values, which must take only the - minimal space it requires for them to be shown without truncation). - - - Clear default sorting: Set a sensible default sorting order for columns to help users - quickly access the most relevant data when they first interact with the grid. - - - Clear filters option: when filtering data, include a button to clear all filters at once, - allowing users to quickly reset their views and return to the unfiltered dataset. - - - Accessible bulk actions: ensure that bulk actions, such as “Delete” or “Export,” are easily - accessible once rows are selected, facilitating efficient data management. Consider also implementing - confirmation prompts for bulk actions to prevent accidental data loss and ensure users are intentional with - their actions. - - - Use of expandable rows: use expandable rows to display additional information that isn’t - crucial for immediate viewing, but avoid overusing this feature to prevent increased cognitive load on - users. - - - Limit expandable content: use expandable rows sparingly to avoid overwhelming users, - ensuring that only essential supplementary information is included. - - - Scrolling: the Datagrid supports both horizontal and vertical scrolling to handle extensive - data sets, ensuring all rows and columns are accessible without cluttering the UI. While the component - supports scrolling, it is designed to prioritize displaying the most essential data upfront, minimizing the - need for scrolling to reduce potential user confusion and enhance accessibility. - - - - ), - }, -]; - -const DataGridUsagePage = () => { - return ( - - - - - - - ); -}; - -export default DataGridUsagePage; diff --git a/apps/website/screens/components/data-grid/usage/examples/draggable.ts b/apps/website/screens/components/data-grid/usage/examples/draggable.ts deleted file mode 100644 index 3b24719d3d..0000000000 --- a/apps/website/screens/components/data-grid/usage/examples/draggable.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react"; - -const code = `() => { - const columns = [ - { - key: "label", - label: "Name", - draggable: true, - }, - { - key: "id", - label: "ID", - draggable: true, - }, - { - key: "complete", - label: "% Complete", - draggable: true, - alignment: "right", - }, - ]; - - const rows = [ - { - label: "Task 1", - id: "ID-1", - complete: 46, - }, - { - label: "Task 2", - id: "ID-2", - complete: 51, - }, - { - label: "Task 3", - id: "ID-3", - complete: 40, - }, - { - label: "Task 4", - id: "ID-4", - complete: 10, - }, - ]; - - return ( - - - - ); -}`; - -const scope = { - DxcDataGrid, - DxcInset, -}; - -export default { code, scope }; diff --git a/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts b/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts deleted file mode 100644 index f2ee25ce30..0000000000 --- a/apps/website/screens/components/data-grid/usage/examples/expandedContent.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { DxcContainer, DxcDataGrid, DxcInset, DxcParagraph } from "@dxc-technology/halstack-react"; - -const code = `() => { - const columns = [ - { - key: "id", - label: "ID", - }, - { - key: "complete", - label: "% Complete", - alignment: "right", - }, - ]; - - const rows = [ - { - id: "Row 1", - complete: 46, - expandedContent: "Expanded content" - }, - { - id: "Row 2", - complete: 51, - expandedContent: - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet vulputate augue, non cursus justo eleifend non. - Nam ante erat, finibus at tincidunt ut, convallis sed tortor. Proin commodo vestibulum sagittis. - Nunc elit lorem, lobortis quis est in, tempus feugiat velit. Donec commodo hendrerit augue non suscipit. - Nam facilisis leo at est auctor, a faucibus diam lacinia. - In finibus urna id felis dictum blandit. - Praesent pharetra sapien ac purus fringilla, ac molestie metus ullamcorper. - Phasellus aliquet lobortis bibendum. Fusce convallis nulla at mauris tincidunt hendrerit sed sit amet est. - Fusce aliquam quam id efficitur convallis. Vivamus mattis ex in nisi aliquet, et volutpat nulla rhoncus. - Integer dui mauris, fringilla eu vulputate vel, ullamcorper ut orci. - - - In hac habitasse platea dictumst. - Sed velit arcu, consectetur pharetra hendrerit id, convallis id erat. - Quisque eu ante sed ligula blandit placerat ac vitae purus. - Proin ullamcorper dapibus erat. - Vestibulum hendrerit iaculis ipsum, sit amet aliquam enim ornare vitae. - Nullam molestie malesuada cursus. - Maecenas et blandit eros, at posuere urna. - Ut enim neque, volutpat sit amet scelerisque id, hendrerit vitae mi. - Morbi sit amet laoreet ante, eget gravida leo. Sed eu dolor at leo vestibulum imperdiet. - Aenean fringilla lorem et condimentum sollicitudin. - - , - expandedContentHeight: 200 - }, - { - id: "Row 3", - complete: 40, - }, - { - id: "Row 4", - complete: 10, - }, - - ]; - return ( - - - - ); -}`; - -const scope = { - DxcDataGrid, - DxcContainer, - DxcInset, - DxcParagraph, -}; - -export default { code, scope }; diff --git a/apps/website/screens/components/data-grid/usage/examples/filterable.ts b/apps/website/screens/components/data-grid/usage/examples/filterable.ts deleted file mode 100644 index 849105e963..0000000000 --- a/apps/website/screens/components/data-grid/usage/examples/filterable.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { DxcDataGrid, DxcFlex, DxcInset, DxcSelect } from "@dxc-technology/halstack-react"; -import { useState } from "react"; - -const code = `() => { - const columns = [ - { - key: "id", - label: "ID", - }, - { - key: "complete", - label: "% Complete", - alignment: "right", - }, - ]; - - const rows1 = [ - { - id: "Row 1", - complete: 46, - }, - { - id: "Row 2", - complete: 51, - }, - { - id: "Row 3", - complete: 40, - }, - { - id: "Row 4", - complete: 10, - }, - ]; - - const rows2 = [ - { - id: "Row 11", - complete: 20, - }, - { - id: "Row 12", - complete: 1, - }, - { - id: "Row 13", - complete: 67, - }, - { - id: "Row 14", - complete: 47, - }, - ]; - - const options = [ - { label: "Data set 1", value: "rows1" }, - { label: "Data set 2", value: "rows2" }, - ]; - - const [rows, setRows]= useState(rows1); - const onChange = ({ value }) => { - value === "rows1" ? setRows(rows1) : setRows(rows2); - }; - - return ( - - - - - - - ); -}`; - -const scope = { - DxcDataGrid, - DxcSelect, - DxcInset, - DxcFlex, - useState, -}; - -export default { code, scope }; diff --git a/apps/website/screens/components/data-grid/usage/examples/selectable.ts b/apps/website/screens/components/data-grid/usage/examples/selectable.ts deleted file mode 100644 index 0f5d7240b9..0000000000 --- a/apps/website/screens/components/data-grid/usage/examples/selectable.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { DxcDataGrid, DxcInset } from "@dxc-technology/halstack-react"; -import { useState } from "react"; - -const code = `() => { - const columns = [ - { - key: "id", - label: "ID", - }, - { - key: "complete", - label: "% Complete", - alignment: "right", - }, - ]; - - const rows = [ - { - id: "Row 1", - complete: 46, - }, - { - id: "Row 2", - complete: 51, - }, - { - id: "Row 3", - complete: 40, - }, - { - id: "Row 4", - complete: 10, - }, - ]; - - const [selectedRows, setSelectedRows] = useState(new Set([1, 2])); - return ( - - - - ); -}`; - -const scope = { - DxcDataGrid, - DxcInset, - useState, -}; - -export default { code, scope }; diff --git a/packages/lib/src/data-grid/DataGrid.stories.tsx b/packages/lib/src/data-grid/DataGrid.stories.tsx index e78d010fc8..ea4a0728f0 100644 --- a/packages/lib/src/data-grid/DataGrid.stories.tsx +++ b/packages/lib/src/data-grid/DataGrid.stories.tsx @@ -652,13 +652,6 @@ const customSortRows = [ ]; const DataGrid = () => { - const [selectedRows, setSelectedRows] = useState((): Set => new Set()); - const [selectedChildRows, setSelectedChildRows] = useState((): Set => new Set()); - - const [itemsPerPage, setItemsPerPage] = useState(5); - const [rowsControlled, setRowsControlled] = useState(expandableRows.slice(0, itemsPerPage)); - const [page, setPage] = useState(0); - return ( <> @@ -669,6 +662,34 @@ const DataGrid = () => { <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" expandable /> </ExampleContainer> + <ExampleContainer> + <Title title="Summary row" theme="light" level={4} /> + <DxcDataGrid + columns={columns} + rows={expandableRows} + summaryRow={{ label: "Total", total: 100 }} + uniqueRowId="id" + /> + </ExampleContainer> + {/* <ExampleContainer> + <Title title="Scrollable Data Grid" theme="light" level={4} /> + <DxcContainer height="250px"> + <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" /> + </DxcContainer> + </ExampleContainer> */} + </> + ); +}; + +const DataGridControlled = () => { + const [selectedRows, setSelectedRows] = useState((): Set<number | string> => new Set()); + const [selectedChildRows, setSelectedChildRows] = useState((): Set<number | string> => new Set()); + const [itemsPerPage, setItemsPerPage] = useState(5); + const [rowsControlled, setRowsControlled] = useState(expandableRows.slice(0, itemsPerPage)); + const [page, setPage] = useState(0); + + return ( + <> <ExampleContainer> <Title title="Selectable" theme="light" level={4} /> <DxcDataGrid @@ -707,21 +728,6 @@ const DataGrid = () => { onSelectRows={setSelectedChildRows} /> </ExampleContainer> - <ExampleContainer> - <Title title="Summary row" theme="light" level={4} /> - <DxcDataGrid - columns={columns} - rows={expandableRows} - summaryRow={{ label: "Total", total: 100 }} - uniqueRowId="id" - /> - </ExampleContainer> - <ExampleContainer> - <Title title="Scrollable Data Grid" theme="light" level={4} /> - <DxcContainer height="250px"> - <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="id" /> - </DxcContainer> - </ExampleContainer> <ExampleContainer> <Title title="Empty Data Grid" theme="light" level={4} /> <DxcDataGrid @@ -940,20 +946,8 @@ const DataGridUnknownUniqueRowId = () => { const [selectedRows, setSelectedRows] = useState((): Set<number | string> => new Set()); const [selectedChildRows, setSelectedChildRows] = useState((): Set<number | string> => new Set()); - const [itemsPerPage, setItemsPerPage] = useState(5); - const [rowsControlled, setRowsControlled] = useState(expandableRows.slice(0, itemsPerPage)); - const [page, setPage] = useState(0); - return ( <> - <ExampleContainer> - <Title title="Default" theme="light" level={4} /> - <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="error" /> - </ExampleContainer> - <ExampleContainer> - <Title title="Expandable" theme="light" level={4} /> - <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="error" expandable /> - </ExampleContainer> <ExampleContainer> <Title title="Selectable" theme="light" level={4} /> <DxcDataGrid @@ -965,18 +959,6 @@ const DataGridUnknownUniqueRowId = () => { onSelectRows={setSelectedRows} /> </ExampleContainer> - <ExampleContainer> - <Title title="Selectable & expandable" theme="light" level={4} /> - <DxcDataGrid - columns={columns} - rows={expandableRows} - uniqueRowId="error" - expandable - selectable - selectedRows={selectedRows} - onSelectRows={setSelectedRows} - /> - </ExampleContainer> <ExampleContainer> <Title title="DataGrid with children" theme="light" level={4} /> <DxcDataGrid columns={childcolumns} rows={childRows} uniqueRowId="error" /> @@ -992,21 +974,6 @@ const DataGridUnknownUniqueRowId = () => { onSelectRows={setSelectedChildRows} /> </ExampleContainer> - <ExampleContainer> - <Title title="Summary row" theme="light" level={4} /> - <DxcDataGrid - columns={columns} - rows={expandableRows} - summaryRow={{ label: "Total", total: 100 }} - uniqueRowId="error" - /> - </ExampleContainer> - <ExampleContainer> - <Title title="Scrollable Data Grid" theme="light" level={4} /> - <DxcContainer height="250px"> - <DxcDataGrid columns={columns} rows={expandableRows} uniqueRowId="error" /> - </DxcContainer> - </ExampleContainer> <ExampleContainer> <Title title="Empty Data Grid" theme="light" level={4} /> <DxcDataGrid @@ -1018,57 +985,6 @@ const DataGridUnknownUniqueRowId = () => { onSelectRows={setSelectedChildRows} /> </ExampleContainer> - <ExampleContainer> - <Title title="Controlled Rows" theme="light" level={4} /> - <DxcDataGrid - columns={columns} - rows={rowsControlled} - uniqueRowId="error" - showPaginator - onSort={(sortColumn) => { - if (sortColumn) { - const { columnKey, direction } = sortColumn; - console.log(`Sorting the column '${columnKey}' by '${direction}' direction`); - setRowsControlled((currentRows) => { - return currentRows.sort((a, b) => { - if (isKeyOfRow(columnKey, a) && isKeyOfRow(columnKey, b)) { - const valueA = a[columnKey]; - const valueB = b[columnKey]; - if (valueA != null && valueB != null) { - if (direction === "ASC") { - return valueA < valueB ? -1 : valueA > valueB ? 1 : 0; - } else { - return valueA < valueB ? 1 : valueA > valueB ? -1 : 0; - } - } else { - return 0; - } - } else { - return 0; - } - }); - }); - } else { - console.log("Removed sorting criteria"); - setRowsControlled(expandableRows.slice(page * itemsPerPage, page * itemsPerPage + itemsPerPage)); - } - }} - onPageChange={(page) => { - const internalPage = page - 1; - setPage(internalPage); - setRowsControlled( - expandableRows.slice(internalPage * itemsPerPage, internalPage * itemsPerPage + itemsPerPage) - ); - }} - itemsPerPage={itemsPerPage} - itemsPerPageOptions={[5, 10]} - itemsPerPageFunction={(n) => { - setItemsPerPage(n); - setRowsControlled(expandableRows.slice(0, n)); - }} - totalItems={expandableRows.length} - /> - </ExampleContainer> </> ); }; @@ -1079,6 +995,10 @@ export const Chromatic: Story = { render: DataGrid, }; +export const Controlled: Story = { + render: DataGridControlled, +}; + export const CustomSort: Story = { render: DataGridSort, }; diff --git a/packages/lib/src/data-grid/DataGrid.test.tsx b/packages/lib/src/data-grid/DataGrid.test.tsx index 337a79916a..d421b7b27a 100644 --- a/packages/lib/src/data-grid/DataGrid.test.tsx +++ b/packages/lib/src/data-grid/DataGrid.test.tsx @@ -1,6 +1,15 @@ import { fireEvent, render, waitFor } from "@testing-library/react"; import DxcDataGrid from "./DataGrid"; -import { GridColumn, HierarchyGridRow } from "./types"; +import { GridColumn } from "./types"; + +Object.defineProperty(window, "getComputedStyle", { + value: () => ({ + getPropertyValue: (prop: string) => { + if (prop === "--height-l") return "36px"; + return ""; + }, + }), +}); const columns: GridColumn[] = [ { @@ -205,7 +214,7 @@ describe("Data grid component tests", () => { }); test("Renders with correct content", async () => { - const { getByText, getAllByRole } = render(<DxcDataGrid columns={columns} rows={expandableRows} />); + const { getByText, getAllByRole } = await render(<DxcDataGrid columns={columns} rows={expandableRows} />); expect(getByText("46")).toBeTruthy(); const rows = getAllByRole("row"); expect(rows.length).toBe(5); diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx index 83ee3d9cc3..a21c4ffa75 100644 --- a/packages/lib/src/data-grid/DataGrid.tsx +++ b/packages/lib/src/data-grid/DataGrid.tsx @@ -1,6 +1,6 @@ -import { useContext, useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import DataGrid, { SortColumn } from "react-data-grid"; -import styled, { ThemeProvider } from "styled-components"; +import styled from "styled-components"; import DataGridPropsType, { HierarchyGridRow, GridRow, ExpandableGridRow } from "./types"; import "react-data-grid/lib/styles.css"; import { @@ -21,38 +21,7 @@ import { } from "./utils"; import DxcPaginator from "../paginator/Paginator"; import { DxcActionsCell } from "../table/Table"; -import HalstackContext from "../HalstackContext"; - -const ActionContainer = styled.div` - display: flex; - height: 100%; - align-items: center; - justify-content: center; - font-size: 14px; - width: 100%; -`; - -const HierarchyContainer = styled.div<{ - level: number; -}>` - padding-left: ${(props) => `calc(${props.theme.dataPaddingLeft} * ${props.level})`}; - button { - display: grid; - grid-template-columns: auto 1fr; - align-items: center; - gap: 0.5rem; - padding: 0px; - border: 0px; - width: 100%; - height: ${(props) => props.theme.dataRowHeight}px; - background: transparent; - text-align: left; - font-size: ${(props) => props.theme.dataFontSize}; - font-family: inherit; - color: inherit; - cursor: pointer; - } -`; +import { scrollbarStyles } from "../styles/scroll"; const DataGridContainer = styled.div<{ paginatorRendered: boolean; @@ -60,64 +29,46 @@ const DataGridContainer = styled.div<{ width: 100%; height: ${(props) => (props.paginatorRendered ? `calc(100% - 50px)` : `100%`)}; .rdg { - border-radius: 4px; + border-radius: var(--border-radius-s); height: 100%; border: 0px; - &::-webkit-scrollbar { - width: 8px; - height: 8px; - } - &::-webkit-scrollbar-thumb { - background-color: ${(props) => props.theme.scrollBarThumbColor}; - border-radius: 6px; - } - &::-webkit-scrollbar-track { - background-color: ${(props) => props.theme.scrollBarTrackColor}; - border-radius: 6px; - } + ${scrollbarStyles} } - .rdg-cell:has(> #action) { + .rdg-cell:has(> #small_action) { padding: 0px; } .rdg-cell { display: grid; align-items: center; width: 100%; - padding: 0px ${(props) => props.theme.dataPaddingRight} 0 ${(props) => props.theme.dataPaddingLeft}; - font-family: ${(props) => props.theme.dataFontFamily}; - font-size: ${(props) => props.theme.dataFontSize}; - font-style: ${(props) => props.theme.dataFontStyle}; - font-weight: ${(props) => props.theme.dataFontWeight}; - color: ${(props) => props.theme.dataFontColor}; - text-transform: ${(props) => props.theme.dataFontTextTransform}; - line-height: ${(props) => props.theme.dataTextLineHeight}; - border-bottom: ${(props) => - `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`}; - border-right: ${(props) => - `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`}; - background-color: ${(props) => props.theme.dataBackgroundColor}; - outline-color: ${(props) => props.theme.focusColor} !important; + padding: 0px var(--spacing-padding-xs); + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-regular); + color: var(--color-fg-neutral-dark); + border-bottom: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-lightest); + border-right: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-lightest); + background-color: var(--color-bg-neutral-lightest); + + &[aria-selected="true"] { + outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); + } .rdg-text-editor:focus { border-color: transparent; - background-color: transparent; - color: ${(props) => props.theme.dataFontColor}; + background-color: var(--color-bg-neutral-lightest); + color: var(--color-fg-neutral-dark); } } .rdg-header-row { - border-top-left-radius: ${(props) => props.theme.headerBorderRadius}; - border-top-right-radius: ${(props) => props.theme.headerBorderRadius}; + border-top-left-radius: var(--border-radius-s); + border-top-right-radius: var(--border-radius-s); .rdg-cell { - font-family: ${(props) => props.theme.headerFontFamily}; - font-size: ${(props) => props.theme.headerFontSize}; - font-style: ${(props) => props.theme.headerFontStyle}; - font-weight: ${(props) => props.theme.headerFontWeight}; - color: ${(props) => props.theme.headerFontColor}; - text-transform: ${(props) => props.theme.headerFontTextTransform}; - padding: 0px ${(props) => props.theme.headerPaddingRight} 0 ${(props) => props.theme.headerPaddingLeft}; - line-height: ${(props) => props.theme.headerTextLineHeight}; - background-color: ${(props) => props.theme.headerBackgroundColor}; + font-weight: var(--font-weight-bold); + color: var(--color-fg-neutral-bright); + padding: 0px var(--spacing-padding-xs); + background-color: var(--color-bg-primary-strong); .sortIconContainer { - margin-left: 0.5rem; + margin-left: var(--spacing-gap-s); display: flex; height: 100%; align-items: center; @@ -130,10 +81,10 @@ const DataGridContainer = styled.div<{ } } .rdg-summary-row { - background-color: #fafafa; + background-color: var(--color-bg-neutral-lighter); .rdg-cell { border: 0px; - font-weight: 600; + font-weight: var(--font-weight-semibold); } } .ellipsis-cell { @@ -168,6 +119,38 @@ const DataGridContainer = styled.div<{ } `; +const HierarchyContainer = styled.div<{ + level: number; +}>` + padding-left: ${(props) => `calc(var(--spacing-gap-s) * ${props.level})`}; + button { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + gap: var(--spacing-gap-s); + padding: 0px; + border: 0px; + width: 100%; + height: var(--height-l); + background-color: var(--color-bg-neutral-lightest); + font-family: var(--typography-font-family); + font-size: var(--typography-label-m); + font-weight: var(--typography-label-regular); + color: var(--color-fg-neutral-dark); + text-align: left; + cursor: pointer; + } +`; + +const ActionContainer = styled.div` + display: flex; + height: 100%; + align-items: center; + justify-content: center; + font-size: var(--height-s); + width: 100%; +`; + const DxcDataGrid = ({ columns, rows, @@ -189,8 +172,8 @@ const DxcDataGrid = ({ defaultPage = 1, }: DataGridPropsType): JSX.Element => { const [rowsToRender, setRowsToRender] = useState<GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]>(rows); - const colorsTheme = useContext(HalstackContext); const [page, changePage] = useState(defaultPage); + const [colHeight, setColHeight] = useState(36); const goToPage = (newPage: number) => { if (onPageChange) { @@ -232,7 +215,7 @@ const DxcDataGrid = ({ } // if row has expandable content return ( - <ActionContainer id="action"> + <ActionContainer id="small_action"> {row.expandedContent && renderExpandableTrigger(row, rowsToRender, uniqueRowId, setRowsToRender)} </ActionContainer> ); @@ -275,7 +258,7 @@ const DxcDataGrid = ({ renderCell({ row }) { if (!row.isExpandedChildContent) { return ( - <ActionContainer id="action"> + <ActionContainer id="small_action"> {renderCheckbox(rows, row, uniqueRowId, selectedRows, onSelectRows)} </ActionContainer> ); @@ -283,8 +266,8 @@ const DxcDataGrid = ({ return null; }, renderHeaderCell: () => ( - <ActionContainer id="action"> - {renderHeaderCheckbox(rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows)} + <ActionContainer id="small_action"> + {renderHeaderCheckbox(rows, uniqueRowId, selectedRows, onSelectRows)} </ActionContainer> ), }, @@ -297,6 +280,11 @@ const DxcDataGrid = ({ const [columnsOrder, setColumnsOrder] = useState((): number[] => columnsToRender.map((_, index) => index)); const [sortColumns, setSortColumns] = useState<readonly SortColumn[]>([]); + useEffect(() => { + const rootStyles = getComputedStyle(document.documentElement); + if (rootStyles) setColHeight(parseFloat(rootStyles.getPropertyValue("--height-l"))); + }, []); + useEffect(() => { setColumnsOrder(Array.from({ length: columnsToRender.length }, (_, index) => index)); }, [columnsToRender.length]); @@ -405,41 +393,39 @@ const DxcDataGrid = ({ }, [sortedRows, minItemsPerPageIndex, maxItemsPerPageIndex]); return ( - <ThemeProvider theme={colorsTheme.dataGrid}> - <DataGridContainer paginatorRendered={showPaginator && (totalItems ?? rows.length) > itemsPerPage}> - <DataGrid - columns={reorderedColumns} - rows={filteredRows} - onColumnsReorder={onColumnsReorder} - onRowsChange={onRowsChange} - renderers={{ renderSortStatus }} - sortColumns={sortColumns} - onSortColumnsChange={handleSortChange} - rowKeyGetter={(row) => (uniqueRowId ? rowKeyGetter(row, uniqueRowId) : "")} - rowHeight={(row) => - row.isExpandedChildContent && typeof row.expandedContentHeight === "number" && row.expandedContentHeight > 0 - ? row.expandedContentHeight - : (colorsTheme.dataGrid?.dataRowHeight ?? 0) - } - selectedRows={selectedRows} - bottomSummaryRows={summaryRow ? [summaryRow] : undefined} - headerRowHeight={colorsTheme.dataGrid.headerRowHeight} - summaryRowHeight={colorsTheme.dataGrid.summaryRowHeight} - className="fill-grid" + <DataGridContainer paginatorRendered={showPaginator && (totalItems ?? rows.length) > itemsPerPage}> + <DataGrid + columns={reorderedColumns} + rows={filteredRows} + onColumnsReorder={onColumnsReorder} + onRowsChange={onRowsChange} + renderers={{ renderSortStatus }} + sortColumns={sortColumns} + onSortColumnsChange={handleSortChange} + rowKeyGetter={(row) => (uniqueRowId ? rowKeyGetter(row, uniqueRowId) : "")} + rowHeight={(row) => + row.isExpandedChildContent && typeof row.expandedContentHeight === "number" && row.expandedContentHeight > 0 + ? row.expandedContentHeight + : (colHeight ?? 0) + } + selectedRows={selectedRows} + bottomSummaryRows={summaryRow ? [summaryRow] : undefined} + headerRowHeight={colHeight} + summaryRowHeight={colHeight} + className="fill-grid" + /> + {showPaginator && (totalItems ?? rows.length) > itemsPerPage && ( + <DxcPaginator + totalItems={totalItems ?? rows.length} + itemsPerPage={itemsPerPage} + itemsPerPageOptions={itemsPerPageOptions} + itemsPerPageFunction={itemsPerPageFunction} + currentPage={page} + showGoToPage={showGoToPage} + onPageChange={goToPage} /> - {showPaginator && (totalItems ?? rows.length) > itemsPerPage && ( - <DxcPaginator - totalItems={totalItems ?? rows.length} - itemsPerPage={itemsPerPage} - itemsPerPageOptions={itemsPerPageOptions} - itemsPerPageFunction={itemsPerPageFunction} - currentPage={page} - showGoToPage={showGoToPage} - onPageChange={goToPage} - /> - )} - </DataGridContainer> - </ThemeProvider> + )} + </DataGridContainer> ); }; diff --git a/packages/lib/src/data-grid/utils.tsx b/packages/lib/src/data-grid/utils.tsx index f10bde38dc..0aa8f13a22 100644 --- a/packages/lib/src/data-grid/utils.tsx +++ b/packages/lib/src/data-grid/utils.tsx @@ -5,31 +5,10 @@ import { ReactNode, SetStateAction } from "react"; import { Column, RenderSortStatusProps, SortColumn, textEditor } from "react-data-grid"; import DxcActionIcon from "../action-icon/ActionIcon"; import DxcCheckbox from "../checkbox/Checkbox"; -import { AdvancedTheme } from "../common/variables"; import { DeepPartial, HalstackProvider } from "../HalstackContext"; import DxcIcon from "../icon/Icon"; import { GridColumn, HierarchyGridRow, GridRow, ExpandableGridRow } from "./types"; -/** - * Function to overwrite the checkbox theme based on a passed theme object. - * @param {DeepPartial<AdvancedTheme>} theme - Theme object with dataGrid properties. - * @returns {object} New theme object with customized checkbox styles. - */ -const overwriteTheme = (theme: DeepPartial<AdvancedTheme>) => { - const newTheme = { - checkbox: { - backgroundColorChecked: theme?.dataGrid?.headerCheckboxBackgroundColorChecked, - hoverBackgroundColorChecked: theme?.dataGrid?.headerCheckboxHoverBackgroundColorChecked, - borderColor: theme?.dataGrid?.headerCheckboxBorderColor, - hoverBorderColor: theme?.dataGrid?.headerCheckboxHoverBorderColor, - checkColor: theme?.dataGrid?.headerCheckboxCheckColor, - focusColor: theme?.dataGrid?.focusColor, - }, - }; - - return newTheme; -}; - /** * Converts grid columns into react-data-grid column format. * @param {GridColumn} gridColumn - Object representing the properties of a grid column. @@ -234,7 +213,6 @@ export const renderCheckbox = ( * @param {GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]} rows - Array of rows that are currently displayed. * @param {string} uniqueRowId - The key used to uniquely identify each row. * @param {Set<string | number>} selectedRows - Set containing the IDs of selected rows. - * @param {DeepPartial<AdvancedTheme>} colorsTheme - Custom theme colors for the checkbox. * @param {Function} onSelectRows - Callback function that triggers when rows are selected/deselected. * @returns {JSX.Element} Checkbox for the header checkbox. */ @@ -242,36 +220,33 @@ export const renderHeaderCheckbox = ( rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[], uniqueRowId: string, selectedRows: Set<string | number>, - colorsTheme: DeepPartial<AdvancedTheme>, onSelectRows: (_selected: Set<string | number>) => void ) => ( - <HalstackProvider advancedTheme={overwriteTheme(colorsTheme)}> - <DxcCheckbox - checked={rows.length > 0 && !rows.some((row) => !selectedRows.has(rowKeyGetter(row, uniqueRowId)))} - onChange={(checked) => { - const updatedSelection = new Set(selectedRows); - - if (checked) { - rows.forEach((row) => { - updatedSelection.add(rowKeyGetter(row, uniqueRowId)); - if (row.childRows && Array.isArray(row.childRows)) { - getChildrenSelection(row.childRows, uniqueRowId, updatedSelection, checked); - } - }); - } else { - rows.forEach((row) => { - updatedSelection.delete(rowKeyGetter(row, uniqueRowId)); - if (row.childRows && Array.isArray(row.childRows)) { - getChildrenSelection(row.childRows, uniqueRowId, updatedSelection, checked); - } - }); - } + <DxcCheckbox + checked={rows.length > 0 && !rows.some((row) => !selectedRows.has(rowKeyGetter(row, uniqueRowId)))} + onChange={(checked) => { + const updatedSelection = new Set(selectedRows); - onSelectRows(updatedSelection); - }} - disabled={rows.length === 0 || !rows.some((row) => uniqueRowId in row)} - /> - </HalstackProvider> + if (checked) { + rows.forEach((row) => { + updatedSelection.add(rowKeyGetter(row, uniqueRowId)); + if (row.childRows && Array.isArray(row.childRows)) { + getChildrenSelection(row.childRows, uniqueRowId, updatedSelection, checked); + } + }); + } else { + rows.forEach((row) => { + updatedSelection.delete(rowKeyGetter(row, uniqueRowId)); + if (row.childRows && Array.isArray(row.childRows)) { + getChildrenSelection(row.childRows, uniqueRowId, updatedSelection, checked); + } + }); + } + + onSelectRows(updatedSelection); + }} + disabled={rows.length === 0 || !rows.some((row) => uniqueRowId in row)} + /> ); /**