@kaizen/components 1.39.0 → 1.39.2

package/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import {
   FilterAttributes,
@@ -113,53 +113,48 @@ describe("<FilterBarDatePicker />", () => {
   })
 
   it("updates the selected value in the trigger button when selecting a date", async () => {
-    const { getByRole } = render(
+    render(
       <FilterBarDatePickerWrapper
         defaultValues={{ drank: new Date("2023-06-06") }}
       />
     )
-    const triggerButton = getByRole("button", {
+    const triggerButton = screen.getByRole("button", {
       name: "Drank : 6 Jun 2023",
     })
 
     await user.click(triggerButton)
 
     await waitFor(() => {
-      const dialog = getByRole("dialog")
+      const dialog = screen.getByRole("dialog")
       expect(dialog).toBeInTheDocument()
     })
 
-    await user.click(
-      getByRole("button", {
-        name: "7th June (Wednesday)",
-      })
-    )
+    const targetMonth = screen.getByRole("grid", { name: "June 2023" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "7" })
+
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(
-        getByRole("button", { name: "Drank : 7 Jun 2023" })
+        screen.getByRole("button", { name: "Drank : 7 Jun 2023" })
       ).toBeInTheDocument()
     })
   })
 
   it("allows calling additional functions on selection change", async () => {
-    const onChange = jest.fn<void, [Date | undefined]>()
-    const { getByRole } = render(
-      <FilterBarDatePickerWrapper onDateChange={onChange} />
-    )
-    const triggerButton = getByRole("button", { name: "Drank" })
+    const onChange = jest.fn()
+    render(<FilterBarDatePickerWrapper onDateChange={onChange} />)
 
+    const triggerButton = screen.getByRole("button", { name: "Drank" })
     await user.click(triggerButton)
+
     await waitFor(() => {
-      const dialog = getByRole("dialog")
-      expect(dialog).toBeInTheDocument()
+      expect(screen.getByRole("dialog")).toBeInTheDocument()
     })
 
-    await user.click(
-      getByRole("button", {
-        name: "7th June (Wednesday)",
-      })
-    )
+    const targetMonth = screen.getByRole("grid", { name: "June 2023" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "7" })
+    await user.click(targetDay)
 
     await waitFor(() => {
       expect(onChange.mock.calls).toEqual([[new Date("2023-06-07")]])

package/src/Filter/FilterBar/subcomponents/FilterBarDatePicker/FilterBarDatePicker.tsx

@@ -45,7 +45,7 @@ export const FilterBarDatePicker = ({
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton
           {...triggerProps}
-          id={id}
+          filterId={id}
           isRemovable={filterState.isRemovable}
         />
       )}

package/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import {
   FilterAttributes,
@@ -134,9 +134,8 @@ describe("<FilterBarDateRangePicker />", () => {
       expect(getByText("May 2022")).toBeVisible()
     })
 
-    const targetDay = getByRole("button", {
-      name: "23rd June (Thursday)",
-    })
+    const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "23" })
     await user.click(targetDay)
     await user.click(document.body) // Exit the focus lock
 
@@ -169,10 +168,10 @@ describe("<FilterBarDateRangePicker />", () => {
       expect(getByText("May 2022")).toBeVisible()
     })
 
-    const targetDay = getByRole("button", {
-      name: "23rd June (Thursday)",
-    })
+    const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "23" })
     await user.click(targetDay)
+
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith({
         from: new Date("2022-05-01"),

package/src/Filter/FilterBar/subcomponents/FilterBarDateRangePicker/FilterBarDateRangePicker.tsx

@@ -44,7 +44,7 @@ export const FilterBarDateRangePicker = ({
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton
           {...triggerProps}
-          id={id}
+          filterId={id}
           isRemovable={filterState.isRemovable}
         />
       )}

package/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx

@@ -55,7 +55,7 @@ export const FilterBarSelect = <Option extends SelectOption = SelectOption>({
       renderTrigger={(triggerProps): JSX.Element => (
         <FilterBarButton
           {...triggerProps}
-          id={id}
+          filterId={id}
           isRemovable={filterState.isRemovable}
         />
       )}

package/src/Filter/FilterDatePicker/FilterDatePicker.spec.stories.tsx

@@ -61,7 +61,7 @@ export const SubmitInputViaEnterKey: Story = {
     })
 
     await step("Type value and press Enter key", async () => {
-      const inputDate = getByLabelText("Date")
+      const inputDate = getByLabelText("Date", { selector: "input" })
       await userEvent.click(inputDate)
       await userEvent.type(inputDate, "03/05/2022")
       await userEvent.keyboard("{Enter}")

package/src/Filter/FilterDatePicker/FilterDatePicker.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { FilterButton } from "~components/Filter/FilterButton"
 import { FilterDatePicker, FilterDatePickerProps } from "."
@@ -75,10 +75,8 @@ describe("<FilterDatePicker />", () => {
       expect(dialog).toBeInTheDocument()
     })
 
-    const targetDay = screen.getByRole("button", {
-      name: "2nd May (Monday)",
-    })
-
+    const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+    const targetDay = within(targetMonth).getByRole("gridcell", { name: "2" })
     await user.click(targetDay)
 
     await waitFor(() => {

package/src/Filter/FilterDatePicker/hooks/useDateInputHandlers.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import {
   DisabledDays,
   formatDateAsNumeral,

package/src/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import {
   DateInput,
   DateInputProps,

package/src/Filter/FilterDatePicker/subcomponents/FilterDatePickerField/FilterDatePickerField.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FocusEvent } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { FilterDatePickerField, FilterDatePickerFieldProps } from "."
 
@@ -77,10 +77,11 @@ describe("<FilterDatePickerField />", () => {
         const inputDate = screen.getByLabelText("Date")
         expect(inputDate).toHaveValue("2 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputDate)
         await user.clear(inputDate)
@@ -91,7 +92,7 @@ describe("<FilterDatePickerField />", () => {
         await waitFor(() => {
           expect(inputDate).toHaveValue("1 May 2022")
           expect(inputDateOnBlur).toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
     })
@@ -105,10 +106,11 @@ describe("<FilterDatePickerField />", () => {
         const inputDate = screen.getByLabelText("Date")
         expect(inputDate).toHaveValue("2 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputDate)
         await user.clear(inputDate)
@@ -116,7 +118,7 @@ describe("<FilterDatePickerField />", () => {
         await user.keyboard("{Enter}")
 
         await waitFor(() => {
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
           expect(inputDateOnSubmit).toHaveBeenCalledWith(new Date("2022-05-01"))
         })
       })
@@ -189,10 +191,10 @@ describe("<FilterDatePickerField />", () => {
       render(
         <FilterDatePickerFieldWrapper defaultMonth={new Date("2022-05-01")} />
       )
-      const targetDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
-
       await user.click(targetDay)
 
       await waitFor(() => {
@@ -208,14 +210,15 @@ describe("<FilterDatePickerField />", () => {
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("15 May 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputDate).toHaveValue("12 May 2022")
       })
     })
@@ -228,8 +231,9 @@ describe("<FilterDatePickerField />", () => {
       const inputDate = screen.getByLabelText("Date")
       expect(inputDate).toHaveValue("15 May 2022")
 
-      const firstSelectedDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const firstSelectedDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
       await user.click(firstSelectedDay)
 
@@ -323,10 +327,10 @@ describe("<FilterDatePickerField />", () => {
         )
       })
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-
       await user.click(targetDay)
 
       await waitFor(() => {

package/src/Filter/FilterDatePicker/utils/transformDateToInputValue.ts

@@ -1,3 +1,4 @@
+import type { Locale } from "date-fns"
 import { DisabledDays, formatDateAsText } from "~components/Calendar"
 
 export const transformDateToInputValue = (

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeDisplayLabel/DateRangeDisplayLabel.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import type { Locale } from "date-fns"
 import { formatDateAsText } from "~components/Calendar"
 import styles from "./DateRangeDisplayLabel.module.scss"
 

package/src/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
+import type { Locale } from "date-fns"
 import {
   DateInput,
   DateInputDescription,

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FocusEvent } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { DateRange } from "~components/Calendar"
 import { FilterDateRangePickerField, FilterDateRangePickerFieldProps } from "."
@@ -92,10 +92,11 @@ describe("<FilterDateRangePickerField />", () => {
         expect(inputStartDate).toHaveValue("2 May 2022")
         expect(inputEndDate).toHaveValue("22 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputStartDate)
         await user.clear(inputStartDate)
@@ -108,7 +109,7 @@ describe("<FilterDateRangePickerField />", () => {
           expect(startDateOnBlur).toHaveBeenCalled()
           expect(inputEndDate).toHaveValue("22 May 2022")
           expect(endDateOnBlur).not.toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
 
@@ -132,10 +133,11 @@ describe("<FilterDateRangePickerField />", () => {
         expect(inputStartDate).toHaveValue("1 May 2022")
         expect(inputEndDate).toHaveValue("22 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "31st May (Tuesday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "31",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputEndDate)
         await user.clear(inputEndDate)
@@ -148,7 +150,7 @@ describe("<FilterDateRangePickerField />", () => {
           expect(startDateOnBlur).not.toHaveBeenCalled()
           expect(inputEndDate).toHaveValue("31 May 2022")
           expect(endDateOnBlur).toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
     })
@@ -236,14 +238,15 @@ describe("<FilterDateRangePickerField />", () => {
       const inputStartDate = screen.getByLabelText("Date from")
       expect(inputStartDate).toHaveValue("15 May 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputStartDate).toHaveValue("12 May 2022")
       })
     })
@@ -261,14 +264,15 @@ describe("<FilterDateRangePickerField />", () => {
       const inputEndDate = screen.getByLabelText("Date to")
       expect(inputEndDate).toHaveValue("15 Jun 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "23rd June (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "23",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputEndDate).toHaveValue("23 Jun 2022")
       })
     })
@@ -288,8 +292,9 @@ describe("<FilterDateRangePickerField />", () => {
       expect(inputStartDate).toHaveValue("15 May 2022")
       expect(inputEndDate).toHaveValue("22 May 2022")
 
-      const firstSelectedDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const firstSelectedDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
       await user.click(firstSelectedDay)
 
@@ -455,7 +460,7 @@ describe("<FilterDateRangePickerField />", () => {
             )
             // End date in Calendar is deselected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(1)
           })
 
@@ -470,7 +475,7 @@ describe("<FilterDateRangePickerField />", () => {
             expect(dateEndErrorContainer).not.toBeInTheDocument()
             // End date in Calendar is re-selected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(3)
           })
         })
@@ -499,7 +504,7 @@ describe("<FilterDateRangePickerField />", () => {
             )
             // End date in Calendar is deselected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(1)
           })
         })
@@ -636,8 +641,9 @@ describe("<FilterDateRangePickerField />", () => {
         )
       })
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
       await user.click(targetDay)
 

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -12,11 +12,7 @@ import isChromatic from "chromatic"
 import { InlineNotification } from "~components/Notification"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"
-import {
-  FilterMultiSelect,
-  getSelectedOptionLabels,
-  FilterMultiSelectProps,
-} from ".."
+import { FilterMultiSelect, getSelectedOptionLabels } from ".."
 import { mockItems } from "./MockData"
 import styles from "./FilterMultiSelect.stories.scss"
 
@@ -24,7 +20,7 @@ const IS_CHROMATIC = isChromatic()
 
 const client = new QueryClient()
 
-const withQueryProvider: Decorator<FilterMultiSelectProps> = Story => (
+const withQueryProvider: Decorator = Story => (
   <QueryClientProvider client={client}>
     <Story />
   </QueryClientProvider>

package/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx

@@ -1,38 +1,12 @@
 import React, { useState } from "react"
-import { Decorator, Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { Text } from "~components/Text"
-import { ConfirmationModal, ConfirmationModalProps } from "../index"
+import { chromaticModalSettings } from "../../_docs/controls"
+import { ConfirmationModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-// Add additional height to the stories when running in Chromatic only.
-// Modals have fixed position and would be cropped from snapshot tests.
-// Setting height to 100vh ensures we capture as much content of the
-// modal, as it's height responds to the content within it.
-const HeightDecorator: Decorator<ConfirmationModalProps> = Story => {
-  if (IS_CHROMATIC) {
-    return (
-      <div style={{ minHeight: "100vh" }}>
-        <Story />
-      </div>
-    )
-  }
-
-  return <Story />
-}
-
-const chromaticModalSettings = {
-  parameters: {
-    chromatic: {
-      disable: false,
-      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
-      pauseAnimationAtEnd: true,
-    },
-  },
-  decorators: [HeightDecorator],
-}
-
 const ConfirmationModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)

package/src/Modal/ContextModal/_docs/ContextModal.stories.tsx

@@ -1,40 +1,14 @@
 import React, { useState } from "react"
-import { Decorator, Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { AddImage } from "~components/Illustration"
 import { ModalAccessibleDescription } from "~components/Modal/GenericModal/subcomponents/ModalAccessibleDescription"
 import { Text } from "~components/Text"
-import { ContextModal, ContextModalProps } from "../index"
+import { chromaticModalSettings } from "../../_docs/controls"
+import { ContextModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-// Add additional height to the stories when running in Chromatic only.
-// Modals have fixed position and would be cropped from snapshot tests.
-// Setting height to 100vh ensures we capture as much content of the
-// modal, as it's height responds to the content within it.
-const HeightDecorator: Decorator<ContextModalProps> = Story => {
-  if (IS_CHROMATIC) {
-    return (
-      <div style={{ minHeight: "100vh" }}>
-        <Story />
-      </div>
-    )
-  }
-
-  return <Story />
-}
-
-const chromaticModalSettings = {
-  parameters: {
-    chromatic: {
-      disable: false,
-      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
-      pauseAnimationAtEnd: true,
-    },
-  },
-  decorators: [HeightDecorator],
-}
-
 const ContextModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -1,40 +1,14 @@
 import React, { useState } from "react"
-import { Decorator, Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { ModalAccessibleDescription } from "~components/Modal"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"
-import { InputEditModal, InputEditModalProps } from "../index"
+import { chromaticModalSettings } from "../../_docs/controls"
+import { InputEditModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-// Add additional height to the stories when running in Chromatic only.
-// Modals have fixed position and would be cropped from snapshot tests.
-// Setting height to 100vh ensures we capture as much content of the
-// modal, as it's height responds to the content within it.
-const HeightDecorator: Decorator<InputEditModalProps> = Story => {
-  if (IS_CHROMATIC) {
-    return (
-      <div style={{ minHeight: "100vh" }}>
-        <Story />
-      </div>
-    )
-  }
-
-  return <Story />
-}
-
-const chromaticModalSettings = {
-  parameters: {
-    chromatic: {
-      disable: false,
-      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
-      pauseAnimationAtEnd: true,
-    },
-  },
-  decorators: [HeightDecorator],
-}
-
 const InputModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)

package/src/Modal/_docs/controls.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { Decorator } from "@storybook/react"
+import isChromatic from "chromatic"
+
+const IS_CHROMATIC = isChromatic()
+
+// Add additional height to the stories when running in Chromatic only.
+// Modals have fixed position and would be cropped from snapshot tests.
+// Setting height to 100vh ensures we capture as much content of the
+// modal, as it's height responds to the content within it.
+const heightDecorator: Decorator = Story => {
+  if (IS_CHROMATIC) {
+    return (
+      <div style={{ minHeight: "100vh" }}>
+        <Story />
+      </div>
+    )
+  }
+
+  return <Story />
+}
+
+export const chromaticModalSettings = {
+  parameters: {
+    chromatic: {
+      disable: false,
+      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
+      pauseAnimationAtEnd: true,
+    },
+  },
+  decorators: [heightDecorator],
+}