test(chromatic): improve snapshots (#5140)

Author: Lukas742

.storybook/preview-head.html

@@ -64,6 +64,13 @@
     padding: 0;
   }
 
+  .chromaticPopoverContainer {
+    height: 500px;
+    width: 500px;
+    display: flex;
+    align-items: center;
+  }
+
   .infoTable {
     margin: 1rem 0;
     border-spacing: 0;

packages/main/src/components/ActionSheet/ActionSheet.stories.tsx

@@ -41,9 +41,10 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render(args) {
-    const [actionSheetOpen, setActionSheetOpen] = useState(isChromatic || args.open);
+    const [actionSheetOpen, setActionSheetOpen] = useState<boolean | undefined>(isChromatic || args.open);
+    const containerClass = isChromatic ? 'chromaticPopoverContainer' : undefined;
     return (
-      <div>
+      <div className={containerClass}>
         <Button
           onClick={() => {
             setActionSheetOpen(true);

packages/main/src/components/SelectDialog/SelectDialog.stories.tsx

@@ -15,7 +15,10 @@ const meta = {
   title: 'Modals & Popovers / SelectDialog',
   component: OriginalSelectDialog,
   argTypes: { children: { control: { disable: true } } },
-  args: { headerText: 'Select Product' }
+  args: { headerText: 'Select Product' },
+  parameters: {
+    chromatic: { delay: 1000 }
+  }
 } satisfies Meta<typeof OriginalSelectDialog>;
 
 export default meta;
@@ -35,7 +38,7 @@ const listItems = [
 ];
 export const Default: Story = {
   render: (args) => {
-    const [open, setOpen] = useState(isChromatic || args.open);
+    const [open, setOpen] = useState<boolean | undefined>(isChromatic || args.open);
     const onButtonClick = () => {
       setOpen(true);
     };

packages/main/src/components/Toolbar/Toolbar.stories.tsx

@@ -33,6 +33,9 @@ const meta = {
   args: {
     design: ToolbarDesign.Auto,
     toolbarStyle: ToolbarStyle.Standard
+  },
+  parameters: {
+    chromatic: { delay: 1000 }
   }
 } satisfies Meta<typeof Toolbar>;