Skip to content

Commit

Permalink
[Storybook] Fix stories containing Modal components (Shopify#10492)
Browse files Browse the repository at this point in the history
### 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>
  • Loading branch information
mrcthms and kyledurand committed Sep 15, 2023
1 parent 1310da2 commit 8057862
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 2 deletions.
5 changes: 5 additions & 0 deletions .changeset/six-donkeys-nail.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Updated Storybook stories to be wrapped with an empty FrameContext.Provider
6 changes: 4 additions & 2 deletions polaris-react/.storybook/preview.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -37,7 +37,9 @@ function AppProviderDecorator(Story, context) {
}}
i18n={enTranslations}
>
<Story {...context} />
<FrameContext.Provider value={{}}>
<Story {...context} />
</FrameContext.Provider>
</AppProvider>
);
}
Expand Down

0 comments on commit 8057862

Please sign in to comment.