fix: Use a specific width and height for Chromatic

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

Hide file tree

Showing 5 changed files with 35 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,13 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Actions",
+  parameters: {
+    chromatic: {
+      modes: {
+        small: { name: "Small", styles: { width: "640px", height: "900px" } },
+      },
+    },
+  },
 };
 
 export const WithAHiddenCloseButton = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.content.story.tsx b/src/BottomSheet/stories/BottomSheet.content.story.tsx
@@ -7,6 +7,13 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Content",
+  parameters: {
+    chromatic: {
+      modes: {
+        small: { name: "Small", styles: { width: "640px", height: "900px" } },
+      },
+    },
+  },
 };
 
 export const WithHelpText = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.features.story.tsx b/src/BottomSheet/stories/BottomSheet.features.story.tsx
@@ -13,6 +13,13 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Features",
+  parameters: {
+    chromatic: {
+      modes: {
+        small: { name: "Small", styles: { width: "640px", height: "900px" } },
+      },
+    },
+  },
 };
 
 export const WithCustomWidths = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.parts.story.tsx b/src/BottomSheet/stories/BottomSheet.parts.story.tsx
@@ -8,6 +8,13 @@ import { BottomSheetParts as BottomSheet } from "../BottomSheet.parts";
 
 export default {
   title: "Components/BottomSheet/Parts",
+  parameters: {
+    chromatic: {
+      modes: {
+        small: { name: "Small", styles: { width: "640px", height: "900px" } },
+      },
+    },
+  },
 };
 
 export const RenderedUsingCompositionalAPI = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.story.tsx b/src/BottomSheet/stories/BottomSheet.story.tsx
@@ -5,6 +5,13 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet",
+  parameters: {
+    chromatic: {
+      modes: {
+        small: { name: "Small", styles: { width: "640px", height: "900px" } },
+      },
+    },
+  },
 };
 
 export const BasicUsage = () => {