fix: Use a specific width and height for Chromatic

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

Hide file tree

Showing 5 changed files with 20 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,10 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Actions",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
+  parameters: {
+    chromatic: { delay: 1000 },
+  },
 };
 
 export const WithAHiddenCloseButton = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.content.story.tsx b/src/BottomSheet/stories/BottomSheet.content.story.tsx
@@ -7,6 +7,10 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Content",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
+  parameters: {
+    chromatic: { delay: 1000 },
+  },
 };
 
 export const WithHelpText = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.features.story.tsx b/src/BottomSheet/stories/BottomSheet.features.story.tsx
@@ -13,6 +13,10 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet/Features",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
+  parameters: {
+    chromatic: { delay: 1000 },
+  },
 };
 
 export const WithCustomWidths = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.parts.story.tsx b/src/BottomSheet/stories/BottomSheet.parts.story.tsx
@@ -8,6 +8,10 @@ import { BottomSheetParts as BottomSheet } from "../BottomSheet.parts";
 
 export default {
   title: "Components/BottomSheet/Parts",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
+  parameters: {
+    chromatic: { delay: 1000 },
+  },
 };
 
 export const RenderedUsingCompositionalAPI = () => {

diff --git a/src/BottomSheet/stories/BottomSheet.story.tsx b/src/BottomSheet/stories/BottomSheet.story.tsx
@@ -5,6 +5,10 @@ import BottomSheet from "../BottomSheet";
 
 export default {
   title: "Components/BottomSheet",
+  decorators: [(storyFn) => <div style={{ width: "800px", height: "800px" }}>{storyFn()}</div>],
+  parameters: {
+    chromatic: { delay: 1000 },
+  },
 };
 
 export const BasicUsage = () => {