Rebuild EmptyState component with layout primitives

polaris-react/src/components/EmptyState/EmptyState.scss

@@ -1,156 +1,8 @@
 @import '../../styles/common';
 
-$within-page-detail-width: 336px;
-$detail-width: 400px;
-
-$stacking-order: (
-  illustration: 0,
-  details: 10,
-);
-
-$left-offset: 35%;
-$right-offset: 10%;
-
-// Multiply by 2 to expand the image size to align with design requirements
-$illustration-left-margin: $left-offset * -2;
-
-// Shift the illustration to the left to overlap with Details
-$illustration-width: calc(100% + #{$left-offset} * 2);
-
-// Respect the right offset on mobile so the illustration shows the correct
-// crop zone
-$illustration-width-cropped: calc(
-  #{$illustration-width} + #{$right-offset} * 2
-);
-
-$centered-illustration-width: 226px;
-
-.EmptyState {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  display: flex;
-  flex-direction: column;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: center;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: 100%;
-  margin: 0 auto;
-  padding: var(--p-space-5) 0;
-  padding-top: var(--p-space-5);
-  padding-bottom: calc(3 * var(--p-space-5));
-  max-width: $page-max-width;
-}
-
-.Section {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  display: flex;
-  flex-direction: column-reverse;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex: 1 1 auto;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: 100%;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: center;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  justify-content: center;
-
-  @media #{$p-breakpoints-md-up} {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    left: var(--p-space-5);
-  }
-}
-
-.Details {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  display: flex;
-  text-align: center;
-  flex-direction: column;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  align-items: center;
-
-  @media #{$p-breakpoints-sm-up} {
-    max-width: $detail-width;
-  }
-}
-
-.Image {
-  margin: 0;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  width: initial;
-}
-
-.ImageContainer,
-.DetailsContainer {
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  flex: 1 1 auto;
-  padding: 0;
-  margin: 0;
-
-  @media #{$p-breakpoints-md-up} {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    flex-basis: 50%;
-  }
-}
-
-.withinContentContainer {
-  margin: 0 auto;
-  padding-top: var(--p-space-5);
-  padding-bottom: calc(3 * var(--p-space-5));
-
-  .Section {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    position: unset;
-    flex-direction: column-reverse;
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    align-items: center;
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    justify-content: center;
-  }
-
-  .Details {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    display: flex;
-    text-align: center;
-    flex-direction: column;
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    align-items: center;
-
-    @media #{$p-breakpoints-sm-up} {
-      max-width: $detail-width;
-    }
-  }
-
-  .Image {
-    margin: 0;
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    width: initial;
-  }
-
-  .Content {
-    padding-bottom: var(--p-space-2);
-  }
-}
-
 .imageContained {
-  .Image {
-    @media #{$p-breakpoints-md-up} {
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      position: initial;
-      // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-      width: 100%;
-    }
-  }
-}
-
-.fullWidth {
-  .Details {
-    max-width: 100%;
+  @media #{$p-breakpoints-md-up} {
+    position: initial;
+    width: 100%;
   }
 }
-
-.Content {
-  padding-bottom: var(--p-space-2);
-}
-
-.Actions {
-  margin-top: var(--p-space-4);
-}

polaris-react/src/components/EmptyState/EmptyState.stories.tsx

@@ -70,3 +70,19 @@ export function WithFullWidthLayout() {
     </Card>
   );
 }
+
+export function WithoutContentContainer() {
+  return (
+    <EmptyState
+      heading="Manage your inventory transfers"
+      action={{content: 'Add transfer'}}
+      secondaryAction={{
+        content: 'Learn more',
+        url: 'https://help.shopify.com',
+      }}
+      image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
+    >
+      <p>Track and receive your incoming inventory from suppliers.</p>
+    </EmptyState>
+  );
+}

polaris-react/src/components/EmptyState/EmptyState.tsx

@@ -6,9 +6,9 @@ import type {ComplexAction} from '../../types';
 import {Box} from '../Box';
 import {buttonFrom} from '../Button';
 import {Image} from '../Image';
-import {Stack} from '../Stack';
-import {TextContainer} from '../TextContainer';
 import {Text} from '../Text';
+import {AlphaStack} from '../AlphaStack';
+import {Inline} from '../Inline';
 
 import styles from './EmptyState.scss';
 
@@ -48,27 +48,29 @@ export function EmptyState({
   footerContent,
 }: EmptyStateProps) {
   const withinContentContainer = useContext(WithinContentContext);
-  const className = classNames(
-    styles.EmptyState,
-    fullWidth && styles.fullWidth,
+  const imageContainedClass = classNames(
     imageContained && styles.imageContained,
-    withinContentContainer && styles.withinContentContainer,
   );
 
   const imageMarkup = largeImage ? (
     <Image
       alt=""
       role="presentation"
-      className={styles.Image}
       source={largeImage}
+      className={imageContainedClass}
       sourceSet={[
         {source: image, descriptor: '568w'},
         {source: largeImage, descriptor: '1136w'},
       ]}
       sizes="(max-width: 568px) 60vw"
     />
   ) : (
-    <Image role="presentation" alt="" className={styles.Image} source={image} />
+    <Image
+      className={imageContainedClass}
+      role="presentation"
+      alt=""
+      source={image}
+    />
   );
 
   const secondaryActionMarkup = secondaryAction
@@ -77,7 +79,7 @@ export function EmptyState({
 
   const footerContentMarkup = footerContent ? (
     <Box paddingBlockStart="4">
-      <Text as="span" variant="bodyMd" color="subdued">
+      <Text as="span" variant="bodyMd" color="subdued" alignment="center">
         {footerContent}
       </Text>
     </Box>
@@ -90,56 +92,57 @@ export function EmptyState({
     : null;
 
   const headingMarkup = heading ? (
-    <Text variant={headingSize} as="p">
-      {heading}
-    </Text>
+    <Box paddingBlockEnd="4">
+      <Text variant={headingSize} as="p" alignment="center">
+        {heading}
+      </Text>
+    </Box>
   ) : null;
 
   const childrenMarkup = children ? (
-    <div className={styles.Content}>
-      <Text as="span" variant="bodyMd" color="subdued">
-        {children}
-      </Text>
-    </div>
+    <Text as="span" variant="bodyMd" color="subdued" alignment="center">
+      {children}
+    </Text>
   ) : null;
 
   const textContentMarkup =
     headingMarkup || children ? (
-      <TextContainer>
+      <Box paddingBlockEnd="6">
         {headingMarkup}
         {childrenMarkup}
-      </TextContainer>
+      </Box>
     ) : null;
 
   const actionsMarkup =
     primaryActionMarkup || secondaryActionMarkup ? (
-      <div className={styles.Actions}>
-        <Stack alignment="center" distribution="center" spacing="tight">
-          {secondaryActionMarkup}
-          {primaryActionMarkup}
-        </Stack>
-      </div>
+      <Inline align="center" gap="2">
+        {secondaryActionMarkup}
+        {primaryActionMarkup}
+      </Inline>
     ) : null;
 
   const detailsMarkup =
     textContentMarkup || actionsMarkup || footerContentMarkup ? (
-      <div className={styles.DetailsContainer}>
-        <div className={styles.Details}>
+      <Box maxWidth={fullWidth ? '100%' : '400px'}>
+        <AlphaStack align="center" gap="0">
           {textContentMarkup}
           {actionsMarkup}
           {footerContentMarkup}
-        </div>
-      </div>
-    ) : (
-      <div className={styles.DetailsContainer} />
-    );
+        </AlphaStack>
+      </Box>
+    ) : null;
 
   return (
-    <div className={className}>
-      <div className={styles.Section}>
+    <Box
+      paddingInlineStart="0"
+      paddingInlineEnd="0"
+      paddingBlockStart="5"
+      paddingBlockEnd="16"
+    >
+      <AlphaStack align="center" gap="0" reverseOrder={withinContentContainer}>
         {detailsMarkup}
-        <div className={styles.ImageContainer}>{imageMarkup}</div>
-      </div>
-    </div>
+        {imageMarkup}
+      </AlphaStack>
+    </Box>
   );
 }

polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx

@@ -3,11 +3,11 @@ import {mountWithApp} from 'tests/utilities';
 
 import {Button} from '../../Button';
 import {Image} from '../../Image';
-import {Stack} from '../../Stack';
 import {Text} from '../../Text';
 import {UnstyledLink} from '../../UnstyledLink';
 import {WithinContentContext} from '../../../utilities/within-content-context';
 import {EmptyState} from '../EmptyState';
+import {Inline} from '../../Inline';
 
 describe('<EmptyState />', () => {
   let imgSrc =
@@ -50,14 +50,14 @@ describe('<EmptyState />', () => {
       });
     });
 
-    it('adds center distribution and tight spacing to Stack', () => {
+    it('adds center align and spacing-2 to Inline', () => {
       const emptyState = mountWithApp(
         <EmptyState image={imgSrc} action={{content: 'Add transfer'}} />,
       );
 
-      expect(emptyState).toContainReactComponent(Stack, {
-        spacing: 'tight',
-        distribution: 'center',
+      expect(emptyState).toContainReactComponent(Inline, {
+        align: 'center',
+        gap: '2',
       });
     });