fix(DatatableV2): fix pagination display in storybook

securityscorecard · Jul 12, 2024 · 7b2e6db · 7b2e6db
1 parent 5254e43
commit 7b2e6db
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/...pshots/expected/components_DatatableV2_ColumnPinning_Initial Column Pinning.png b/...pshots/expected/components_DatatableV2_ColumnPinning_Initial Column Pinning.png
diff --git a/src/components/DatatableV2/toolbar/Pagination.tsx b/src/components/DatatableV2/toolbar/Pagination.tsx
@@ -7,15 +7,23 @@ import { Inline, Padbox } from '../../layout';
 import IconButton from '../buttons/IconButton';
 import { DatatableInstance } from '../Datatable.types';
 
-const cq = {
-  sm: {
-    maxWidth: 512,
-  },
-  md: {
-    minWidth: 513,
-    maxWidth: 720,
-  },
-};
+/**
+ * THIS IS A QUICK FIX
+ * We need to replace the `react-container-query` with CSS based container queries
+ */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const cq = window?.__STORYBOOK_PREVIEW__ // eslint-disable-line no-underscore-dangle
+  ? { sm: { maxWidth: 0 } }
+  : {
+      sm: {
+        maxWidth: 512,
+      },
+      md: {
+        minWidth: 513,
+        maxWidth: 720,
+      },
+    };
 
 const Select = styled.select`
   border: 1px solid ${getFormStyle('borderColor')};