Merge latest next

Shopify · Sep 22, 2023 · 327bbc8 · 327bbc8
2 parents e516a74 + a5aa56a
commit 327bbc8
Show file tree

Hide file tree

Showing 17 changed files with 42 additions and 115 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
@@ -149,20 +149,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-compound-selectors, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
+    // 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);
@@ -693,7 +693,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 -- generated by polaris-migrator DO NOT COPY */
+    // 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
@@ -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 (
     <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>
     );

diff --git 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) => (
   <Box
     ref={ref}
     as={as}
     className={[styles.LedeParagraph, className]}
     {...props}
   />
-)) 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
@@ -217,10 +217,10 @@ function TypeTable({
                           </p>
                         )}
                         {deprecationMessage && (
-                          <p className={styles.DeprecationNotice}>
+                          <div className={styles.DeprecationNotice}>
                             <StatusBadge status={StatusName.Deprecated} />{' '}
                             {endWithPeriod(deprecationMessage)}
-                          </p>
+                          </div>
                         )}
                       </div>
 

diff --git 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
@@ -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 (
+    <div className={styles.StatusBadge} data-value={status.toLowerCase()}>
+      {status}
+    </div>
   );
-
-  return <div className={className}>{status}</div>;
 }
 
 export default StatusBadge;
diff --git 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 (
     <Box className={[styles.ThumbnailPreview, className]}>
       {src ? (
-        <Image alt={alt} src={src} fill style={{objectFit: 'contain'}} />
+        <Image alt={alt} src={src} fill style={{objectFit: 'cover'}} />
       ) : null}
     </Box>
   );

diff --git 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)}`)