Refactor Placeholder component

Author: chazdean

.changeset/heavy-eagles-train.md

@@ -2,4 +2,4 @@
 'polaris.shopify.com': patch
 ---
 
-Update `AlphaStack` component docs
+Update `AlphaStack` component docs and added `ExampleStyleGuideComponents` for layout primitives

polaris.shopify.com/pages/examples/ExampleStyleGuideComponents/AlignBlockComponent/Placeholder.tsx

@@ -10,7 +10,7 @@ export interface PlaceholderProps {
   childAlign?: Align;
 }
 
-export const Placeholder = ({
+const Placeholder = ({
   label,
   height,
   width,
@@ -20,9 +20,9 @@ export const Placeholder = ({
     <div
       style={{
         background: 'var(--surface-example-block)',
-        padding: '14px 8px 14px 8px',
-        height: height ? `${height}px` : '',
-        width: width ? `${width}px` : '',
+        padding: '14px var(--p-space-2)',
+        height: height ?? undefined,
+        width: width ?? undefined,
       }}
     >
       <Inline align={childAlign}>
@@ -41,3 +41,5 @@ export const Placeholder = ({
     </div>
   );
 };
+
+export default Placeholder;

polaris.shopify.com/pages/examples/ExampleStyleGuideComponents/DefaultBlockComponent/Placeholder.tsx

@@ -8,27 +8,22 @@ export interface PlaceholderProps {
   childWidth?: string;
 }
 
-export const Placeholder = ({
-  label,
-  height,
-  width,
-  childWidth,
-}: PlaceholderProps) => {
+const Placeholder = ({label, height, width, childWidth}: PlaceholderProps) => {
   return (
     <div
       style={{
         background: 'var(--surface-example-block)',
-        padding: '14px 8px 14px 8px',
-        height: height ? `${height}px` : '',
-        width: width ? `${width}px` : '',
+        padding: '14px var(--p-space-2)',
+        height: height ?? undefined,
+        width: width ?? undefined,
       }}
     >
       <div
         style={{
           display: 'inline-block',
           background: 'rgba(255, 255, 255, 0.3)',
           color: '#FFFFFF',
-          width: childWidth ? `${childWidth}` : '',
+          width: childWidth ?? undefined,
         }}
       >
         <Text as="h2" variant="bodyMd" fontWeight="medium">
@@ -38,3 +33,5 @@ export const Placeholder = ({
     </div>
   );
 };
+
+export default Placeholder;

polaris.shopify.com/pages/examples/ExampleStyleGuideComponents/SpacingBackgroundExample.tsx

@@ -5,20 +5,19 @@ export interface SpacingBackgroundProps {
   width?: string;
 }
 
-export const SpacingBackground = ({
-  children,
-  width,
-}: SpacingBackgroundProps) => {
+const SpacingBackground = ({children, width}: SpacingBackgroundProps) => {
   return (
     <div
       style={{
         background:
           'repeating-linear-gradient(-45deg, #7B47F1, #7B47F1 1px, #E8D1FA 1px, #E8D1FA 7px)',
-        width: width ? `${width}px` : '100%',
+        width: width ?? '100%',
         height: 'auto',
       }}
     >
       {children}
     </div>
   );
 };
+
+export default SpacingBackground;

polaris.shopify.com/pages/examples/alpha-stack-default.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import {AlphaStack} from '@shopify/polaris';
-import {Placeholder} from './ExampleStyleGuideComponents/DefaultBlockComponent/Placeholder';
+import Placeholder from './ExampleStyleGuideComponents/DefaultBlockComponent/Placeholder';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AlphaStackExample() {
   return (
     <AlphaStack>
-      <Placeholder width="320" label="Stack child" />
-      <Placeholder width="320" />
-      <Placeholder width="320" />
+      <Placeholder width="320px" label="Stack child" />
+      <Placeholder width="320px" />
+      <Placeholder width="320px" />
     </AlphaStack>
   );
 }

polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {AlphaStack, Box, Page, Inline} from '@shopify/polaris';
-import {Placeholder} from './ExampleStyleGuideComponents/AlignBlockComponent/Placeholder';
+import Placeholder from './ExampleStyleGuideComponents/AlignBlockComponent/Placeholder';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -9,25 +9,25 @@ function AlphaStackWithAlignExample() {
     <Page>
       <Box paddingBottom="20">
         <AlphaStack align="start">
-          <Placeholder width="320" label="Start" childAlign="start" />
-          <Placeholder width="320" />
-          <Placeholder width="320" />
+          <Placeholder width="320px" label="Start" childAlign="start" />
+          <Placeholder width="320px" />
+          <Placeholder width="320px" />
         </AlphaStack>
       </Box>
       <Box paddingBottom="20">
         <AlphaStack align="center">
           <AlphaStack>
-            <Placeholder width="320" label="Center" childAlign="center" />
-            <Placeholder width="320" />
-            <Placeholder width="320" />
+            <Placeholder width="320px" label="Center" childAlign="center" />
+            <Placeholder width="320px" />
+            <Placeholder width="320px" />
           </AlphaStack>
         </AlphaStack>
       </Box>
       <Box>
         <AlphaStack align="end">
-          <Placeholder width="320" label="End" childAlign="end" />
-          <Placeholder width="320" />
-          <Placeholder width="320" />
+          <Placeholder width="320px" label="End" childAlign="end" />
+          <Placeholder width="320px" />
+          <Placeholder width="320px" />
         </AlphaStack>
       </Box>
     </Page>

polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {AlphaStack} from '@shopify/polaris';
-import {Placeholder} from './ExampleStyleGuideComponents/DefaultBlockComponent/Placeholder';
+import Placeholder from './ExampleStyleGuideComponents/DefaultBlockComponent/Placeholder';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 

polaris.shopify.com/pages/examples/alpha-stack-with-spacing.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import {AlphaStack} from '@shopify/polaris';
-import {Placeholder} from './ExampleStyleGuideComponents/DefaultBlockComponent/Placeholder';
-import {SpacingBackground} from './ExampleStyleGuideComponents/SpacingBackgroundExample';
+import Placeholder from './ExampleStyleGuideComponents/DefaultBlockComponent/Placeholder';
+import SpacingBackground from './ExampleStyleGuideComponents/SpacingBackgroundExample';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AlphaStackWithSpacingExample() {
   return (
-    <SpacingBackground width="320">
+    <SpacingBackground width="320px">
       <AlphaStack spacing="5">
-        <Placeholder width="320" label="Stack child" />
-        <Placeholder width="320" />
-        <Placeholder width="320" />
+        <Placeholder width="320px" label="Stack child" />
+        <Placeholder width="320px" />
+        <Placeholder width="320px" />
       </AlphaStack>
     </SpacingBackground>
   );