[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

Author: laurkim

.changeset/short-kids-buy.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Removed `polarisSummerEditions2023` feature flag from AppProvider context

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>

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"

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;

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}

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);
     }

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, {

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}>

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"]';

polaris-react/src/utilities/features/types.ts

@@ -1,5 +1,4 @@
 export interface FeaturesConfig {
-  polarisSummerEditions2023?: boolean;
   [key: string]: boolean | undefined;
 }