fix: Use a specific width and height for Chromatic

nulogy · Nov 22, 2024 · 7122ec3 · 7122ec3
1 parent 4ec4032
commit 7122ec3
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 0 deletions.
diff --git a/src/BottomSheet/stories/BottomSheet.actions.story.tsx b/src/BottomSheet/stories/BottomSheet.actions.story.tsx
@@ -5,6 +5,16 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Actions",
+  parameters: {
+    chromatic: {
+      viewports: [
+        {
+          width: 1024,
+          height: 1024,
+        },
+      ],
+    },
+  },
 };
 
 export const WithAHiddenCloseButton = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.content.story.tsx b/src/BottomSheet/stories/BottomSheet.content.story.tsx
@@ -7,6 +7,16 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Content",
+  parameters: {
+    chromatic: {
+      viewports: [
+        {
+          width: 1024,
+          height: 1024,
+        },
+      ],
+    },
+  },
 };
 
 export const WithHelpText = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.features.story.tsx b/src/BottomSheet/stories/BottomSheet.features.story.tsx
@@ -13,6 +13,16 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Features",
+  parameters: {
+    chromatic: {
+      viewports: [
+        {
+          width: 1024,
+          height: 1024,
+        },
+      ],
+    },
+  },
 };
 
 export const WithCustomWidths = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.parts.story.tsx b/src/BottomSheet/stories/BottomSheet.parts.story.tsx
@@ -8,6 +8,16 @@ import { BottomSheetParts as BottomSheet } from "../BottomSheet.parts";
 
 export default {
   title: "Components/BottomSheet/Parts",
+  parameters: {
+    chromatic: {
+      viewports: [
+        {
+          width: 1024,
+          height: 1024,
+        },
+      ],
+    },
+  },
 };
 
 export const RenderedUsingCompositionalAPI = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.story.tsx b/src/BottomSheet/stories/BottomSheet.story.tsx
@@ -1,10 +1,21 @@
 import React from "react";
 import { Button } from "../../Button";
+import { desktop as theme } from "../../theme";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet",
+  parameters: {
+    chromatic: {
+      viewports: [
+        {
+          width: theme.breakpoints.medium,
+          height: 1024,
+        },
+      ],
+    },
+  },
 };
 
 export const BasicUsage = () => {