From 0d394d9095fb8fa308d6b930eb16b12180e9bf2c Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 14 Nov 2023 11:35:17 -0500
Subject: [PATCH 1/5] [Box] Add support for `paddingInline` and `paddingBlock`

---
 polaris-react/src/components/Box/Box.tsx | 26 ++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/polaris-react/src/components/Box/Box.tsx b/polaris-react/src/components/Box/Box.tsx
index 3e57eaf5ad5..4571a9335e1 100644
--- 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,

From 1b463ca5236596b349d72f42fcdd353121e74c20 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 14 Nov 2023 11:50:03 -0500
Subject: [PATCH 2/5] [Box] Update `padding` example on style guide

---
 .../pages/examples/box-with-padding.tsx       | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx
index 71461f6a8c3..166dbf50dcc 100644
--- 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>

From ecafd9c39116ab985ed19118f1fc3984e45b0df8 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 14 Nov 2023 11:53:55 -0500
Subject: [PATCH 3/5] [Layout docs] Update example text color for accessibility

---
 polaris.shopify.com/pages/examples/bleed-horizontal.tsx   | 7 ++++++-
 .../pages/examples/bleed-specific-direction.tsx           | 7 ++++++-
 polaris.shopify.com/pages/examples/bleed-vertical.tsx     | 7 ++++++-
 .../pages/examples/block-stack-with-align.tsx             | 7 ++++++-
 .../pages/examples/block-stack-with-inline-align.tsx      | 7 ++++++-
 polaris.shopify.com/pages/examples/box-with-color.tsx     | 2 +-
 polaris.shopify.com/pages/examples/box-with-shadow.tsx    | 2 +-
 .../pages/examples/card-with-varying-padding.tsx          | 2 +-
 .../pages/examples/inline-grid-with-fixed-widths.tsx      | 8 +++++++-
 .../pages/examples/inline-stack-with-align.tsx            | 7 ++++++-
 .../pages/examples/inline-stack-with-block-align.tsx      | 7 ++++++-
 11 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
index 625f39b482d..6f4ad23bd78 100644
--- 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
index 2150c72b71e..ec6d94123f2 100644
--- 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
index b22745893f8..7e2b3b8a45a 100644
--- 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
index 7b39258b043..2c890604cc7 100644
--- 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
index e8fcb587e02..3cd85548fb7 100644
--- 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
index 53a66190cb9..83bba2b0de2 100644
--- 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-shadow.tsx b/polaris.shopify.com/pages/examples/box-with-shadow.tsx
index 65f1b640fa7..8cf5cacb104 100644
--- 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
index 7d5ea50b1b4..9b2e76ac50b 100644
--- 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
index 59a847efca1..81f110d526d 100644
--- 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
index 1b14f1b674b..f39f7ff7d80 100644
--- 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
index ecaf028d129..2886d336b65 100644
--- 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>

From 0657b7f38cc911073639e116cb36d3171bd25e37 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 14 Nov 2023 11:54:40 -0500
Subject: [PATCH 4/5] Add changeset

---
 .changeset/serious-days-grow.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/serious-days-grow.md

diff --git a/.changeset/serious-days-grow.md b/.changeset/serious-days-grow.md
new file mode 100644
index 00000000000..6b7e70d8ea8
--- /dev/null
+++ 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

From 4e2408dd3f8339eb204cc8b15dbdd291e9b79a31 Mon Sep 17 00:00:00 2001
From: Lo Kim <lo.kim@shopify.com>
Date: Tue, 14 Nov 2023 13:16:54 -0500
Subject: [PATCH 5/5] [Box] Add storybook example for padding

---
 .../src/components/Box/Box.stories.tsx        | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
index 6eb6a6cb2f7..24a277febc4 100644
--- 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">