From 340e36e7dfe4bcfdafce1c169c896242832dec3f Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Fri, 22 Sep 2023 12:38:20 -0400 Subject: [PATCH] [AppProvider] Consolidate se23 logic (#10635) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Resolves #9915. Resolves #10189. Resolves #10190. Resolves #10192. Resolves #10193. Consolidates se23 logic (passing in `polarisSummerEditions2023` to `features`) in AppProvider and related components. ### WHAT is this pull request doing? Removes se23 flag from features and consolidates se23 comments. Adds comment with warning to discourage use of `se23` flag in `_common.scss`. ### How to 🎩 [Storybook]() [Next branch storybook](https://5d559397bae39100201eedc1-kzivkxiyci.chromatic.com/?path=/story/playground--details-page) 🖥 [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) ### 🎩 checklist - [ ] 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) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --- .changeset/short-kids-buy.md | 5 +++++ polaris-react/.storybook/preview.js | 8 +------- .../components/AppProvider/AppProvider.stories.tsx | 14 +------------- .../src/components/AppProvider/AppProvider.tsx | 12 +----------- .../src/components/Frame/Frame.stories.tsx | 3 --- .../src/components/IndexTable/IndexTable.scss | 8 ++++---- .../Pagination/tests/Pagination.test.tsx | 1 - .../PolarisTestProvider/PolarisTestProvider.tsx | 10 +--------- polaris-react/src/styles/_common.scss | 2 ++ polaris-react/src/utilities/features/types.ts | 1 - polaris-react/tests/utilities/react-testing.tsx | 11 ++--------- 11 files changed, 17 insertions(+), 58 deletions(-) create mode 100644 .changeset/short-kids-buy.md diff --git a/.changeset/short-kids-buy.md b/.changeset/short-kids-buy.md new file mode 100644 index 00000000000..b2d077927ba --- /dev/null +++ b/.changeset/short-kids-buy.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': major +--- + +Removed `polarisSummerEditions2023` feature flag from AppProvider context diff --git a/polaris-react/.storybook/preview.js b/polaris-react/.storybook/preview.js index 3b2c7bc153f..725a55ddc2f 100644 --- a/polaris-react/.storybook/preview.js +++ b/polaris-react/.storybook/preview.js @@ -32,13 +32,7 @@ function AppProviderDecorator(Story, context) { if (context.args.omitAppProvider) return ; return ( - + diff --git a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx index 5cf04fdbb4a..e6c74cbcb1f 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.stories.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.stories.tsx @@ -34,9 +34,6 @@ export function Default(_, context) { }, }, }} - features={{ - polarisSummerEditions2023: true, - }} > @@ -97,9 +94,6 @@ export function WithI18n(_, context) { }, }, }} - features={{ - polarisSummerEditions2023: true, - }} > @@ -155,13 +149,7 @@ export function WithLinkComponent(_, context) { }; return ( - + { document.documentElement.classList.add(classNamePolarisSummerEditions2023); }; - getFeatures = () => { - const {features} = this.props; - - return { - ...features, - polarisSummerEditions2023: features?.polarisSummerEditions2023 ?? true, - }; - }; - getThemeName = (): ThemeName => this.props.theme ?? themeNameDefault; render() { - const {children} = this.props; - const features = this.getFeatures(); + const {children, features} = this.props; const themeName = this.getThemeName(); const {intl, link} = this.state; diff --git a/polaris-react/src/components/Frame/Frame.stories.tsx b/polaris-react/src/components/Frame/Frame.stories.tsx index 05c03025fa9..c20bb5fb11b 100644 --- a/polaris-react/src/components/Frame/Frame.stories.tsx +++ b/polaris-react/src/components/Frame/Frame.stories.tsx @@ -357,7 +357,6 @@ function InAnApplicationComponent() { }, }, }} - features={{polarisSummerEditions2023: true}} > ', () => { label="Hello, world!" type="page" />, - {features: {polarisSummerEditions2023: false}}, ); expect(pagination).toContainReactComponent(ButtonGroup, { diff --git a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx index 30d714e0981..f5e5e954823 100644 --- a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx +++ b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx @@ -65,21 +65,13 @@ export function PolarisTestProvider({ const stickyManager = useMemo(() => new StickyManager(), []); - const featuresConfig = useMemo( - () => ({ - polarisSummerEditions2023: true, - ...features, - }), - [features], - ); - const mergedFrame = createFrameContext(frame); const mergedMediaQuery = merge(defaultMediaQuery, mediaQuery); return ( - + diff --git a/polaris-react/src/styles/_common.scss b/polaris-react/src/styles/_common.scss index a2e8524a0d4..053650eaf53 100644 --- a/polaris-react/src/styles/_common.scss +++ b/polaris-react/src/styles/_common.scss @@ -23,4 +23,6 @@ // tag+attribute selector. // However, we're still supporting iOS 12 for embedded web views in some apps, which // unfortunately doesn't support :where https://caniuse.com/?search=%3Awhere + +// 🚨 WARNING: Refrain from using the `se23` flag, this will be deprecated post v12. $se23: 'html[class~="Polaris-Summer-Editions-2023"]'; diff --git a/polaris-react/src/utilities/features/types.ts b/polaris-react/src/utilities/features/types.ts index ca9f5d769e3..e959412ae7d 100644 --- a/polaris-react/src/utilities/features/types.ts +++ b/polaris-react/src/utilities/features/types.ts @@ -1,5 +1,4 @@ export interface FeaturesConfig { - polarisSummerEditions2023?: boolean; [key: string]: boolean | undefined; } diff --git a/polaris-react/tests/utilities/react-testing.tsx b/polaris-react/tests/utilities/react-testing.tsx index 625c5aac07c..f319517a7c7 100644 --- a/polaris-react/tests/utilities/react-testing.tsx +++ b/polaris-react/tests/utilities/react-testing.tsx @@ -22,16 +22,9 @@ export const mountWithApp = createMount< return options; }, render(element, context) { - const {features, ...rest} = context; + const {...rest} = context; return ( - + {element} );