Merge pull request #65 from EMCECS/feature-OBSDEF-46956

EMCECS · Apr 30, 2024 · 2800fd7 · 2800fd7
2 parents 07d08b4 + 1956c5e
commit 2800fd7
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dellstorage/dell-design-react-common",
   "description": "Override CSS of Clarity-React components to align it with Dell design standards",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "license": "Apache-2.0",
   "private": false,
   "outDir": "dist",
@@ -12,7 +12,7 @@
     "node": ">=16.14.1"
   },
   "dependencies": {
-    "@dellstorage/clarity-react": "^1.2.12",
+    "@dellstorage/clarity-react": "^1.2.13",
     "@types/node": "^12.14.1",
     "bootstrap": "^5.2.0",
     "react": "^17.0.2",

diff --git a/src/components/dataGrid/DataGrid.stories.tsx b/src/components/dataGrid/DataGrid.stories.tsx
@@ -35,7 +35,7 @@ import {
     sortFunction,
     columnsForCustomRows,
     paginationRowsWithLinks,
-    paginationDetailswithDefaultPageSizes
+    paginationDetailswithCustomPageSize,
 } from "./DataGridStoriesData";
 
 const datagridFilterRef = React.createRef<DataGrid>();
@@ -91,12 +91,12 @@ storiesOf("DataGrid", module)
             />
         </div>
     ))
-    .add("Grid with pagination and default pageSizes dropdown", () => (
+    .add("Grid with pagination and custom pageSize", () => (
         <div style={{width: "80%"}}>
             <DataGrid
                 columns={normalColumns}
                 rows={paginationRows.slice(0, 10)}
-                pagination={paginationDetailswithDefaultPageSizes}
+                pagination={paginationDetailswithCustomPageSize}
                 itemText={"Items"}
                 footer={{showFooter: true}}
             />

diff --git a/src/components/dataGrid/DataGridStoriesData.tsx b/src/components/dataGrid/DataGridStoriesData.tsx
@@ -9,7 +9,14 @@
  */
 
 import React from "react";
-import {DataGridRow, DataGridFilterResult, SortOrder, DataGridColumn} from "@dellstorage/clarity-react/datagrid";
+import {
+    DataGridRow,
+    DataGridFilterResult,
+    SortOrder,
+    DataGridColumn,
+    DataGridPaginationProps,
+    CUSTOM_PAGE_SIZE_OPTION
+} from "@dellstorage/clarity-react/datagrid";
 import {Icon} from "@dellstorage/clarity-react/icon";
 import {Button} from "@dellstorage/clarity-react/forms/button";
 /**
@@ -280,17 +287,18 @@ export function getRowData() {
 // Data for pagination rows
 export const paginationRows = getRowData();
 
-export const paginationDetails = {
+export const paginationDetails: DataGridPaginationProps = {
     totalItems: paginationRows.length,
     getPageData: getPageData,
     pageSize: 5,
     pageSizes: ["5", "10"],
 };
 
-export const paginationDetailswithDefaultPageSizes = {
+export const paginationDetailswithCustomPageSize: DataGridPaginationProps = {
     totalItems: paginationRows.length,
     getPageData: getPageDataForCustomPageSize,
     pageSize: 10,
+    pageSizes: ["10", "20", "50", "100", CUSTOM_PAGE_SIZE_OPTION],
 };
 
 /**

diff --git a/yarn.lock b/yarn.lock
@@ -1337,10 +1337,10 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@dellstorage/clarity-react@^1.2.12":
-  version "1.2.12"
-  resolved "https://registry.yarnpkg.com/@dellstorage/clarity-react/-/clarity-react-1.2.12.tgz#2fdb064f3fc98775d41c93f7e2927ece61194516"
-  integrity sha512-ueBMht6ZmF2lMmj7jBuMNivXVT5wfK2DEl2igDxzHo4NoCLKUn71nLsvIQxCskQFW8t250Y4p07jQDizYik+GA==
+"@dellstorage/clarity-react@^1.2.13":
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/@dellstorage/clarity-react/-/clarity-react-1.2.13.tgz#c5355efd6515d6875e9513cbd98b4fcadc469f45"
+  integrity sha512-IKu65gzeTNTUTWywP7enrOQ3SkSdym+gblbEYtXdV6B3iS5LmKxkehbRFIuzohxajGLilwftWDlwTLnC7welNw==
   dependencies:
     "@clr/icons" "12.0.8"
     "@clr/ui" "12.0.8"