Shopify · laurkim · Nov 15, 2023 · Nov 14, 2023 · Nov 14, 2023 · Nov 14, 2023
diff --git a/.changeset/serious-days-grow.md b/.changeset/serious-days-grow.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Added support for `paddingInline` and `paddingBlock` on `Box` component with updated documentation
diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
@@ -141,6 +141,69 @@ export function WithBorderRadius() {
   );
 }
 
+export function WithPadding() {
+  return (
+    <BlockStack gap="400">
+      <Box
+        background="bg-surface"
+        padding="100"
+        borderWidth="050"
+        borderColor="border-info"
+      >
+        <Icon source={PaintBrushMajor} tone="base" />
+      </Box>
+      <Box
+        background="bg-surface"
+        paddingBlock="400"
+        borderWidth="050"
+        borderColor="border-info"
+      >
+        <Icon source={PaintBrushMajor} tone="base" />
+      </Box>
+      <Box
+        background="bg-surface"
+        paddingBlockStart="400"
+        borderWidth="050"
+        borderColor="border-info"
+      >
+        <Icon source={PaintBrushMajor} tone="base" />
+      </Box>
+      <Box
+        background="bg-surface"
+        paddingBlockEnd="400"
+        borderWidth="050"
+        borderColor="border-info"
+      >
+        <Icon source={PaintBrushMajor} tone="base" />
+      </Box>
+      <Box
+        background="bg-surface"
+        paddingInline="400"
+        borderWidth="050"
+        borderColor="border-info"
+      >
+        <Icon source={PaintBrushMajor} tone="base" />
+      </Box>
+      <Box
+        background="bg-surface"
+        paddingInlineStart="400"
+        borderWidth="050"
+        borderColor="border-info"
+      >
+        <Icon source={PaintBrushMajor} tone="base" />
+      </Box>
+      <Box
+        background="bg-surface"
+        paddingInlineEnd="400"
+        borderWidth="050"
+        borderColor="border-info"
+      >
+        <Icon source={PaintBrushMajor} tone="base" />
+      </Box>
+    </BlockStack>
+  );
+}
+
 export function WithResponsivePadding() {
   return (
     <BlockStack gap="400">

diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
@@ -78,6 +78,12 @@ export interface BoxProps extends React.AriaAttributes {
    * padding={{xs: '200', sm: '300', md: '400', lg: '500', xl: '600'}}
    */
   padding?: Spacing;
+  /** Vertical start and end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+   * @example
+   * paddingBlock='400'
+   * paddingBlock={{xs: '200', sm: '300', md: '400', lg: '500', xl: '600'}}
+   */
+  paddingBlock?: Spacing;
   /** Vertical start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
    * @example
    * paddingBlockStart='400'
@@ -90,6 +96,12 @@ export interface BoxProps extends React.AriaAttributes {
    * paddingBlockEnd={{xs: '200', sm: '300', md: '400', lg: '500', xl: '600'}}
    */
   paddingBlockEnd?: Spacing;
+  /** Horizontal start and end spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
+   * @example
+   * paddingInline='400'
+   * paddingInline={{xs: '200', sm: '300', md: '400', lg: '500', xl: '600'}}
+   */
+  paddingInline?: Spacing;
   /** Horizontal start spacing around children. Accepts a spacing token or an object of spacing tokens for different screen sizes.
    * @example
    * paddingInlineStart='400'
@@ -169,8 +181,10 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       outlineStyle,
       outlineWidth,
       padding,
+      paddingBlock,
       paddingBlockStart,
       paddingBlockEnd,
+      paddingInline,
       paddingInlineStart,
       paddingInlineEnd,
       role,
@@ -265,27 +279,27 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
       '--pc-box-overflow-y': overflowY,
       ...getResponsiveProps(
         'box',
-        'padding-block-end',
+        'padding-block-start',
         'space',
-        paddingBlockEnd || padding,
+        paddingBlockStart || paddingBlock || padding,
       ),
       ...getResponsiveProps(
         'box',
-        'padding-block-start',
+        'padding-block-end',
         'space',
-        paddingBlockStart || padding,
+        paddingBlockEnd || paddingBlock || padding,
       ),
       ...getResponsiveProps(
         'box',
         'padding-inline-start',
         'space',
-        paddingInlineStart || padding,
+        paddingInlineStart || paddingInline || padding,
       ),
       ...getResponsiveProps(
         'box',
         'padding-inline-end',
         'space',
-        paddingInlineEnd || padding,
+        paddingInlineEnd || paddingInline || padding,
       ),
       '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : undefined,
       '--pc-box-width': width,

diff --git a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
@@ -32,7 +32,12 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
             color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
-          <Text as="h2" variant="bodyMd" fontWeight="regular">
+          <Text
+            as="h2"
+            variant="bodyMd"
+            fontWeight="regular"
+            tone="text-inverse"
+          >
             {label}
           </Text>
         </div>

diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
@@ -47,7 +47,12 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
             color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
-          <Text as="h2" variant="bodyMd" fontWeight="regular">
+          <Text
+            as="h2"
+            variant="bodyMd"
+            fontWeight="regular"
+            tone="text-inverse"
+          >
             {label}
           </Text>
         </div>

diff --git a/polaris.shopify.com/pages/examples/bleed-vertical.tsx b/polaris.shopify.com/pages/examples/bleed-vertical.tsx
@@ -29,7 +29,12 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
             color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
-          <Text as="h2" variant="bodyMd" fontWeight="regular">
+          <Text
+            as="h2"
+            variant="bodyMd"
+            fontWeight="regular"
+            tone="text-inverse"
+          >
             {label}
           </Text>
         </div>

diff --git a/polaris.shopify.com/pages/examples/block-stack-with-align.tsx b/polaris.shopify.com/pages/examples/block-stack-with-align.tsx
@@ -59,7 +59,12 @@ const Placeholder = ({
             color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
-          <Text as="h2" variant="bodyMd" fontWeight="regular">
+          <Text
+            as="h2"
+            variant="bodyMd"
+            fontWeight="regular"
+            tone="text-inverse"
+          >
             {label}
           </Text>
         </div>

diff --git a/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx b/polaris.shopify.com/pages/examples/block-stack-with-inline-align.tsx
@@ -53,7 +53,12 @@ const Placeholder = ({
             color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
-          <Text as="h2" variant="bodyMd" fontWeight="regular">
+          <Text
+            as="h2"
+            variant="bodyMd"
+            fontWeight="regular"
+            tone="text-inverse"
+          >
             {label}
           </Text>
         </div>

diff --git a/polaris.shopify.com/pages/examples/box-with-color.tsx b/polaris.shopify.com/pages/examples/box-with-color.tsx
@@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BoxWithColorExample() {
   return (
-    <Box background="bg-surface-selected">
+    <Box background="bg-fill-info">
       <Placeholder label="Content inside a box" />
     </Box>
   );

diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx
@@ -8,37 +8,34 @@ function BoxWithPaddingExample() {
     <BlockStack gap="400">
       <div
         style={{
-          backgroundColor: 'var(--p-color-bg-fill-info)',
           width: '586px',
         }}
       >
-        <Box padding="400" width="586px">
+        <Box padding="400" width="586px" background="bg-fill-info">
           <Placeholder label="padding" childAlign="center" />
         </Box>
       </div>
       <InlineStack gap="400">
-        <div style={{backgroundColor: 'var(--p-color-bg-fill-info)'}}>
-          <Box paddingInlineStart="400" width="284px">
-            <Placeholder label="paddingInlineStart" childAlign="start" />
-          </Box>
-        </div>
-        <div style={{backgroundColor: 'var(--p-color-bg-fill-info)'}}>
-          <Box paddingInlineEnd="400" width="284px">
-            <Placeholder label="paddingInlineEnd" childAlign="end" />
-          </Box>
-        </div>
+        <Box paddingInline="400" width="586px" background="bg-fill-info">
+          <Placeholder label="paddingInline" childAlign="center" />
+        </Box>
+        <Box paddingInlineStart="400" width="284px" background="bg-fill-info">
+          <Placeholder label="paddingInlineStart" childAlign="start" />
+        </Box>
+        <Box paddingInlineEnd="400" width="284px" background="bg-fill-info">
+          <Placeholder label="paddingInlineEnd" childAlign="end" />
+        </Box>
       </InlineStack>
       <InlineStack gap="400">
-        <div style={{backgroundColor: 'var(--p-color-bg-fill-info)'}}>
-          <Box paddingBlockStart="400" width="284px">
-            <Placeholder label="paddingBlockStart" childAlign="center" />
-          </Box>
-        </div>
-        <div style={{backgroundColor: 'var(--p-color-bg-fill-info)'}}>
-          <Box paddingBlockEnd="400" width="284px">
-            <Placeholder label="paddingBlockEnd" childAlign="center" />
-          </Box>
-        </div>
+        <Box paddingBlock="400" width="586px" background="bg-fill-info">
+          <Placeholder label="paddingBlock" childAlign="center" />
+        </Box>
+        <Box paddingBlockStart="400" width="284px" background="bg-fill-info">
+          <Placeholder label="paddingBlockStart" childAlign="center" />
+        </Box>
+        <Box paddingBlockEnd="400" width="284px" background="bg-fill-info">
+          <Placeholder label="paddingBlockEnd" childAlign="center" />
+        </Box>
       </InlineStack>
     </BlockStack>
   );
@@ -69,7 +66,12 @@ const Placeholder = ({
             color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
-          <Text as="h2" variant="bodyMd" fontWeight="medium">
+          <Text
+            as="h2"
+            variant="bodyMd"
+            fontWeight="medium"
+            tone="text-inverse"
+          >
             {label}
           </Text>
         </div>

diff --git a/polaris.shopify.com/pages/examples/box-with-shadow.tsx b/polaris.shopify.com/pages/examples/box-with-shadow.tsx
@@ -25,7 +25,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
           color: 'var(--p-color-text-info-on-bg-fill)',
         }}
       >
-        <Text as="p" variant="bodyMd">
+        <Text as="p" variant="bodyMd" tone="text-inverse">
           {label}
         </Text>
       </div>

diff --git a/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/card-with-varying-padding.tsx
@@ -35,7 +35,7 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
           color: 'var(--p-color-text-info-on-bg-fill)',
         }}
       >
-        <Text as="h2" variant="bodyMd">
+        <Text as="h2" variant="bodyMd" tone="text-inverse">
           {label}
         </Text>
       </div>

diff --git a/polaris.shopify.com/pages/examples/inline-grid-with-fixed-widths.tsx b/polaris.shopify.com/pages/examples/inline-grid-with-fixed-widths.tsx
@@ -37,7 +37,13 @@ const Placeholder = ({
             width: width ?? undefined,
           }}
         >
-          <Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">
+          <Text
+            as="h2"
+            variant="bodyMd"
+            fontWeight="medium"
+            alignment="center"
+            tone="text-inverse"
+          >
             {label}
           </Text>
         </div>

diff --git a/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-align.tsx
@@ -69,7 +69,12 @@ const Placeholder = ({
             color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
-          <Text as="h2" variant="bodyMd" fontWeight="medium">
+          <Text
+            as="h2"
+            variant="bodyMd"
+            fontWeight="medium"
+            tone="text-inverse"
+          >
             {label}
           </Text>
         </div>

diff --git a/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx b/polaris.shopify.com/pages/examples/inline-stack-with-block-align.tsx
@@ -81,7 +81,12 @@ const Placeholder = ({
             color: 'var(--p-color-text-info-on-bg-fill)',
           }}
         >
-          <Text as="h2" variant="bodyMd" fontWeight="medium">
+          <Text
+            as="h2"
+            variant="bodyMd"
+            fontWeight="medium"
+            tone="text-inverse"
+          >
             {label}
           </Text>
         </div>
-Original file line number
+Diff line change
@@ Expand Up @@
               color: 'var(--p-color-text-info-on-bg-fill)',
             }}
           >
-            <Text as="p" variant="bodyMd">
+            <Text as="p" variant="bodyMd" tone="text-inverse">
               {label}
             </Text>
           </div>
@@ Expand Down @@