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 ffcdf58c0d7..124fd23f336 100644
--- a/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
+++ b/polaris-react/src/components/PolarisTestProvider/PolarisTestProvider.tsx
@@ -78,14 +78,6 @@ export function PolarisTestProvider({
const stickyManager = useMemo(() => new StickyManager(), []);
- const featuresConfig = useMemo(
- () => ({
- polarisSummerEditions2023: true,
- ...features,
- }),
- [features],
- );
-
const mergedFrame = createFrameContext(frame);
const mergedMediaQuery = merge(defaultMediaQuery, mediaQuery);
@@ -94,7 +86,7 @@ export function PolarisTestProvider({
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}
);
diff --git a/polaris.shopify.com/src/components/Lede/index.tsx b/polaris.shopify.com/src/components/Lede/index.tsx
index c563a19adda..08922438871 100644
--- a/polaris.shopify.com/src/components/Lede/index.tsx
+++ b/polaris.shopify.com/src/components/Lede/index.tsx
@@ -2,13 +2,13 @@ import {forwardRef} from 'react';
import styles from './Lede.module.scss';
import {Box, type WithAsProp} from '../Box';
-export const Lede = forwardRef(({as = 'p', className, ...props}, ref) => (
+export const Lede = forwardRef(({as = 'div', className, ...props}, ref) => (
-)) as WithAsProp<{}, typeof Box, 'p'>;
+)) as WithAsProp<{}, typeof Box, 'div'>;
Lede.displayName = 'Lede';
diff --git a/polaris.shopify.com/src/components/PropsTable/PropsTable.tsx b/polaris.shopify.com/src/components/PropsTable/PropsTable.tsx
index 6720420e4f8..1e8f0829604 100644
--- a/polaris.shopify.com/src/components/PropsTable/PropsTable.tsx
+++ b/polaris.shopify.com/src/components/PropsTable/PropsTable.tsx
@@ -217,10 +217,10 @@ function TypeTable({
)}
{deprecationMessage && (
-
+
{' '}
{endWithPeriod(deprecationMessage)}
-
+
)}
diff --git a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss
index bf49f94844f..10072d3ad7c 100644
--- a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss
+++ b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.module.scss
@@ -1,37 +1,24 @@
.StatusBadge {
- font-size: var(--p-font-size-75);
+ font-size: var(--font-size-100);
letter-spacing: 0;
- font-weight: var(--p-font-weight-medium);
- padding: var(--p-space-05) var(--p-space-2);
- color: var(--p-color-text-subdued);
- border-radius: var(--p-border-radius-2);
-}
+ font-weight: var(--font-weight-400);
+ border-radius: var(--border-radius-round);
+ padding: 0.05rem 0.25rem;
+ color: var(--text);
-.toneSuccess {
- background-color: var(--p-color-bg-success);
- color: var(--p-color-text-success);
-}
+ &[data-value='alpha'] {
+ background: var(--surface-attention);
+ }
-.toneInfo {
- background-color: var(--p-color-bg-info);
- color: var(--p-color-text-info);
-}
-
-.toneAttention {
- background-color: var(--p-color-bg-caution);
- color: var(--p-color-text-caution);
-}
-
-.toneWarning {
- background-color: var(--p-color-bg-warning);
- color: var(--p-color-text-warning-experimental);
-}
-
-.toneCritical {
- background-color: var(--p-color-bg-critical);
- color: var(--p-color-text-critical);
-}
+ &[data-value='warning'],
+ &[data-value='deprecated'],
+ &[data-value='legacy'] {
+ background: var(--surface-warning);
+ }
-.toneNew {
- background-color: var(--p-color-bg-transparent-subdued-experimental);
+ &[data-value='beta'],
+ &[data-value='information'],
+ &[data-value='new'] {
+ background: var(--surface-information);
+ }
}
diff --git a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.tsx b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.tsx
index a9d38a0d855..a810f07ec80 100644
--- a/polaris.shopify.com/src/components/StatusBadge/StatusBadge.tsx
+++ b/polaris.shopify.com/src/components/StatusBadge/StatusBadge.tsx
@@ -1,30 +1,15 @@
import {Status} from '../../types';
-import {className as classNames, variationName} from '../../utils/various';
import styles from './StatusBadge.module.scss';
interface Props {
status: Status;
}
-
-type Tone = 'info' | 'success' | 'warning' | 'critical' | 'attention' | 'new';
-
-const StatusToneMapping: {[S in Status]: Tone} = {
- Alpha: 'info',
- Beta: 'success',
- Deprecated: 'critical',
- Information: 'info',
- Legacy: 'warning',
- New: 'new',
- Warning: 'warning',
-};
-
function StatusBadge({status}: Props) {
- const className = classNames(
- styles.StatusBadge,
- styles[variationName('tone', StatusToneMapping[status])],
+ return (
+
+ {status}
+
);
-
- return {status}
;
}
export default StatusBadge;
diff --git a/polaris.shopify.com/src/components/ThumbnailPreview/index.tsx b/polaris.shopify.com/src/components/ThumbnailPreview/index.tsx
index d2386657e6d..1a2d87d4ebc 100644
--- a/polaris.shopify.com/src/components/ThumbnailPreview/index.tsx
+++ b/polaris.shopify.com/src/components/ThumbnailPreview/index.tsx
@@ -13,7 +13,7 @@ const Preview = ({
return (
{src ? (
-
+
) : null}
);
diff --git a/polaris.shopify.com/src/utils/various.ts b/polaris.shopify.com/src/utils/various.ts
index 722106881af..8e5462f7a4b 100644
--- a/polaris.shopify.com/src/utils/various.ts
+++ b/polaris.shopify.com/src/utils/various.ts
@@ -62,10 +62,6 @@ export const className = (...classNames: ClassName[]): string => {
.join(' ');
};
-export const variationName = (name: string, value: string) => {
- return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
-};
-
export const toPascalCase = (str: string): string =>
(str.match(/[a-zA-Z0-9]+/g) || [])
.map((w) => `${w.charAt(0).toUpperCase()}${w.slice(1)}`)