From 80578622f1fbbe3704d094ba0d5dc8f1ed4251ba Mon Sep 17 00:00:00 2001
From: Marc Thomas <marc.thomas@shopify.com>
Date: Fri, 15 Sep 2023 17:09:14 +0100
Subject: [PATCH] [Storybook] Fix stories containing Modal components (#10492)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### WHY are these changes introduced?

Due to a recent update to the Dialog component within the Modal, it now
uses the `useFrame` hook. Due to this, we need to ensure that anywhere
it's used, we have a parent `<Frame>` component anywhere. This is not an
issue for production, where the `<Frame>` is automatically included by
the `<AppProvider>` or for tests where `mountWithApp` includes the
`<Frame>`, but I noticed some Storybook stories breaking. So we wrap all
stories in a `<FrameContext.Provider>` component now.

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

- Go to Storybook generated by Chromatic
- Go to the Banner -> In a Modal story
- It should work fine
- Go to the IndexFilters stories
- Launch the Create new View modal
- They should work fine
- Go to the IndexTable stories that contain the filtering element
- Launch the Create new View modal
- They should work fine

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com>
---
 .changeset/six-donkeys-nail.md      | 5 +++++
 polaris-react/.storybook/preview.js | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/six-donkeys-nail.md

diff --git a/.changeset/six-donkeys-nail.md b/.changeset/six-donkeys-nail.md
new file mode 100644
index 00000000000..21ae6df5e5c
--- /dev/null
+++ b/.changeset/six-donkeys-nail.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Updated Storybook stories to be wrapped with an empty FrameContext.Provider
diff --git a/polaris-react/.storybook/preview.js b/polaris-react/.storybook/preview.js
index 4a5db4d336d..cb3a5c196d9 100644
--- a/polaris-react/.storybook/preview.js
+++ b/polaris-react/.storybook/preview.js
@@ -1,6 +1,6 @@
 import React, {useRef, useEffect} from 'react';
 
-import {AppProvider} from '../src';
+import {AppProvider, FrameContext} from '../src';
 import enTranslations from '../locales/en.json';
 import {GridOverlay} from './GridOverlay';
 import {RenderPerformanceProfiler} from './RenderPerformanceProfiler';
@@ -37,7 +37,9 @@ function AppProviderDecorator(Story, context) {
       }}
       i18n={enTranslations}
     >
-      <Story {...context} />
+      <FrameContext.Provider value={{}}>
+        <Story {...context} />
+      </FrameContext.Provider>
     </AppProvider>
   );
 }