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 ? ( - {alt} + {alt} ) : 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)}`)