[AppProvider] Consolidate se23 logic (#10635)

### 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
Shopify · Sep 22, 2023 · 340e36e · 340e36e
1 parent b037ca7
commit 340e36e
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 58 deletions.
diff --git a/.changeset/short-kids-buy.md 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
@@ -32,13 +32,7 @@ function AppProviderDecorator(Story, context) {
   if (context.args.omitAppProvider) return <Story {...context} />;
 
   return (
-    <AppProvider
-      theme={context.globals.theme}
-      features={{
-        polarisSummerEditions2023: true,
-      }}
-      i18n={enTranslations}
-    >
+    <AppProvider theme={context.globals.theme} i18n={enTranslations}>
       <FrameContext.Provider value={{}}>
         <Story {...context} />
       </FrameContext.Provider>

diff --git 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,
-      }}
     >
       <Page>
         <LegacyCard>
@@ -97,9 +94,6 @@ export function WithI18n(_, context) {
           },
         },
       }}
-      features={{
-        polarisSummerEditions2023: true,
-      }}
     >
       <Page>
         <LegacyCard>
@@ -155,13 +149,7 @@ export function WithLinkComponent(_, context) {
   };
 
   return (
-    <AppProvider
-      linkComponent={CustomLinkComponent}
-      i18n={{}}
-      features={{
-        polarisSummerEditions2023: true,
-      }}
-    >
+    <AppProvider linkComponent={CustomLinkComponent} i18n={{}}>
       <Page
         backAction={{content: 'Products', url: '#'}}
         title="Jar With Lock-Lid"

diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -148,20 +148,10 @@ export class AppProvider extends Component<AppProviderProps, State> {
     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
@@ -357,7 +357,6 @@ function InAnApplicationComponent() {
             },
           },
         }}
-        features={{polarisSummerEditions2023: true}}
       >
         <Frame
           logo={logo}
@@ -701,7 +700,6 @@ function WithAnOffsetComponent() {
             },
           },
         }}
-        features={{polarisSummerEditions2023: true}}
       >
         <Frame
           logo={logo}
@@ -1060,7 +1058,6 @@ function WithSidebarEnabled() {
             },
           },
         }}
-        features={{polarisSummerEditions2023: true}}
       >
         <Frame
           logo={logo}

diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss
@@ -108,7 +108,7 @@ $loading-panel-height: 53px;
 
   // This is to bust specificity with .Table-scrolling and TableCell:first-child or TableCell:first-child + TableCell bg color above.
   .TableRow-subdued {
-    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- se23 overrides
+    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- bg color overrides
     .TableCell-first,
     .TableCell-first + .TableCell {
       background-color: var(--p-color-bg-subdued);
@@ -209,7 +209,7 @@ $loading-panel-height: 53px;
 
   // NOTE: `-hovered` must come after `-selected` so elements don't appear to lose their interactivity when selected.
   &.TableRow-hovered {
-    // stylelint-disable selector-max-class,  selector-max-specificity, selector-max-combinators -- se23 status hover styles
+    // stylelint-disable selector-max-class,  selector-max-specificity, selector-max-combinators -- status hover styles
     &,
     .TableCell-first,
     .TableCell-first + .TableCell {
@@ -247,7 +247,7 @@ $loading-panel-height: 53px;
         background-color: var(--p-color-bg-subdued-hover);
       }
     }
-    // stylelint-enable selector-max-class, selector-max-specificity, selector-max-combinators -- se23 status hover styles
+    // stylelint-enable selector-max-class, selector-max-specificity, selector-max-combinators -- status hover styles
   }
 
   // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
@@ -653,7 +653,7 @@ $loading-panel-height: 53px;
   }
   // This is to bust specificity with Table-unselectable and TableCel:first-child bg color above.
   .TableRow-subdued:not(.TableRow-hovered) {
-    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- se23 override
+    // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- bg color override
     .TableCell:first-child {
       background-color: var(--p-color-bg-subdued);
     }

diff --git a/polaris-react/src/components/Pagination/tests/Pagination.test.tsx b/polaris-react/src/components/Pagination/tests/Pagination.test.tsx
@@ -295,7 +295,6 @@ describe('<Pagination />', () => {
           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
@@ -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 (
     <Wrapper>
-      <FeaturesContext.Provider value={featuresConfig}>
+      <FeaturesContext.Provider value={features}>
         <I18nContext.Provider value={intl}>
           <ScrollLockManagerContext.Provider value={scrollLockManager}>
             <StickyManagerContext.Provider value={stickyManager}>

diff --git 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
@@ -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
@@ -22,16 +22,9 @@ export const mountWithApp = createMount<
     return options;
   },
   render(element, context) {
-    const {features, ...rest} = context;
+    const {...rest} = context;
     return (
-      <PolarisTestProvider
-        i18n={translations}
-        features={{
-          polarisSummerEditions2023: true,
-          ...features,
-        }}
-        {...rest}
-      >
+      <PolarisTestProvider i18n={translations} {...rest}>
         {element}
       </PolarisTestProvider>
     );