Configure Chromatic to be less flaky (#6439)

Author: lkostrowski

src/attributes/components/AttributeListDatagrid/AttributeListDatagrid.stories.tsx

@@ -7,6 +7,9 @@ import { AttributeListDatagrid } from "./AttributeListDatagrid";
 const meta: Meta<typeof AttributeListDatagrid> = {
   title: "Attributes/AttributeListDatagrid",
   component: AttributeListDatagrid,
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   args: {
     attributes,
     disabled: false,

src/categories/components/CategoryListDatagrid/CategoryListDatagrid.stories.tsx

@@ -7,6 +7,9 @@ import { CategoryListDatagrid } from "./CategoryListDatagrid";
 const meta: Meta<typeof CategoryListDatagrid> = {
   title: "Categories/CategoryListDatagrid",
   component: CategoryListDatagrid,
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   args: {
     categories,
     disabled: false,

src/categories/components/CategoryProductListDatagrid/CategoryProductListDatagrid.stories.tsx

@@ -23,6 +23,9 @@ const mockProducts: RelayToFlat<NonNullable<CategoryDetailsQuery["category"]>["p
 const meta: Meta<typeof CategoryProductListDatagrid> = {
   title: "Categories/CategoryProductListDatagrid",
   component: CategoryProductListDatagrid,
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   args: {
     products: mockProducts,
     disabled: false,

src/collections/components/CollectionListDatagrid/CollectionListDatagrid.stories.tsx

@@ -7,6 +7,9 @@ import { CollectionListDatagrid } from "./CollectionListDatagrid";
 const meta: Meta<typeof CollectionListDatagrid> = {
   title: "Collections/CollectionListDatagrid",
   component: CollectionListDatagrid,
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   args: {
     collections,
     loading: false,

src/components/Datagrid/Datagrid.stories.tsx

@@ -152,6 +152,9 @@ const meta: Meta<typeof Datagrid> = {
     onColumnResize: { table: { disable: true } },
     onRowSelectionChange: { table: { disable: true } },
   },
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   args: {
     availableColumns: columns,
     rows: initialData.length,

src/customers/components/CustomerListDatagrid/CustomerListDatagrid.stories.tsx

@@ -7,6 +7,9 @@ import { CustomerListDatagrid } from "./CustomerListDatagrid";
 const meta: Meta<typeof CustomerListDatagrid> = {
   title: "Customers/CustomerListDatagrid",
   component: CustomerListDatagrid,
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   args: {
     customers: customerList,
     loading: false,

src/discounts/components/DiscountListDatagrid/DiscountListDatagrid.stories.tsx

@@ -7,6 +7,9 @@ import { DiscountListDatagrid } from "./DiscountListDatagrid";
 const meta: Meta<typeof DiscountListDatagrid> = {
   title: "Discounts/DiscountListDatagrid",
   component: DiscountListDatagrid,
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   args: {
     promotions: discountList,
     disabled: false,

src/discounts/components/VoucherCodesDatagrid/VoucherCodesDatagrid.stories.tsx

@@ -14,6 +14,9 @@ const mockCodes: VoucherCode[] = [
 const meta: Meta<typeof VoucherCodesDatagrid> = {
   title: "Discounts/VoucherCodesDatagrid",
   component: VoucherCodesDatagrid,
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   args: {
     codes: mockCodes,
     loading: false,

src/discounts/components/VoucherListDatagrid/VoucherListDatagrid.stories.tsx

@@ -7,6 +7,9 @@ import { VoucherListDatagrid } from "./VoucherListDatagrid";
 const meta: Meta<typeof VoucherListDatagrid> = {
   title: "Discounts/VoucherListDatagrid",
   component: VoucherListDatagrid,
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   args: {
     vouchers: voucherList,
     disabled: false,

src/giftCards/GiftCardsList/GiftCardsListDatagrid/GiftCardsListDatagrid.stories.tsx

@@ -142,6 +142,9 @@ const MockGiftCardListProvider = ({
 const meta: Meta<typeof GiftCardsListDatagrid> = {
   title: "GiftCards/GiftCardsListDatagrid",
   component: GiftCardsListDatagrid,
+  parameters: {
+    chromatic: { diffThreshold: 0.3, delay: 500 },
+  },
   decorators: [
     (Story: React.ComponentType) => (
       <MockGiftCardListProvider value={defaultContextValue}>