Updated Bleed to accept responsive spacing

.changeset/moody-dolls-kneel.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': patch
+---
+
+Added support for responsive spacing on `Bleed`

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

@@ -1,8 +1,56 @@
 @import '../../styles/common';
 
 .Bleed {
-  margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start));
-  margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end));
-  margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start));
-  margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end));
+  --pc-bleed-margin-block-start-xs: initial;
+  --pc-bleed-margin-block-start-sm: var(--pc-bleed-margin-block-start-xs);
+  --pc-bleed-margin-block-start-md: var(--pc-bleed-margin-block-start-sm);
+  --pc-bleed-margin-block-start-lg: var(--pc-bleed-margin-block-start-md);
+  --pc-bleed-margin-block-start-xl: var(--pc-bleed-margin-block-start-lg);
+  --pc-bleed-margin-block-end-xs: initial;
+  --pc-bleed-margin-block-end-sm: var(--pc-bleed-margin-block-end-xs);
+  --pc-bleed-margin-block-end-md: var(--pc-bleed-margin-block-end-sm);
+  --pc-bleed-margin-block-end-lg: var(--pc-bleed-margin-block-end-md);
+  --pc-bleed-margin-block-end-xl: var(--pc-bleed-margin-block-end-lg);
+  --pc-bleed-margin-inline-start-xs: initial;
+  --pc-bleed-margin-inline-start-sm: var(--pc-bleed-margin-inline-start-xs);
+  --pc-bleed-margin-inline-start-md: var(--pc-bleed-margin-inline-start-sm);
+  --pc-bleed-margin-inline-start-lg: var(--pc-bleed-margin-inline-start-md);
+  --pc-bleed-margin-inline-start-xl: var(--pc-bleed-margin-inline-start-lg);
+  --pc-bleed-margin-inline-end-xs: initial;
+  --pc-bleed-margin-inline-end-sm: var(--pc-bleed-margin-inline-end-xs);
+  --pc-bleed-margin-inline-end-md: var(--pc-bleed-margin-inline-end-sm);
+  --pc-bleed-margin-inline-end-lg: var(--pc-bleed-margin-inline-end-md);
+  --pc-bleed-margin-inline-end-xl: var(--pc-bleed-margin-inline-end-lg);
+  margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-xs));
+  margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-xs));
+  margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-xs));
+  margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-xs));
+
+  @media #{$p-breakpoints-sm-up} {
+    margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-sm));
+    margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-sm));
+    margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-sm));
+    margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-sm));
+  }
+
+  @media #{$p-breakpoints-md-up} {
+    margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-md));
+    margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-md));
+    margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-md));
+    margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-md));
+  }
+
+  @media #{$p-breakpoints-lg-up} {
+    margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-lg));
+    margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-lg));
+    margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-lg));
+    margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-lg));
+  }
+
+  @media #{$p-breakpoints-xl-up} {
+    margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-xl));
+    margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-xl));
+    margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-xl));
+    margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-xl));
+  }
 }

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

@@ -35,7 +35,7 @@ export function Default() {
 
 export function WithVerticalDirection() {
   return (
-    <Box background="surface" padding="4">
+    <Box background="surface-success" padding="4">
       <Bleed marginBlock="6">
         <div style={styles} />
       </Bleed>
@@ -45,7 +45,7 @@ export function WithVerticalDirection() {
 
 export function WithHorizontalDirection() {
   return (
-    <Box background="surface" padding="4">
+    <Box background="surface-success" padding="4">
       <Bleed marginInline="6">
         <div style={styles} />
       </Bleed>
@@ -57,33 +57,33 @@ export function WithSpecificDirection() {
   return (
     <Stack vertical>
       <Text variant="bodyMd" as="p">
-        Top
+        Block Start
       </Text>
-      <Box background="surface" padding="4">
+      <Box background="surface-success" padding="4">
         <Bleed marginInline="4" marginBlockStart="6">
           <div style={styles} />
         </Bleed>
       </Box>
       <Text variant="bodyMd" as="p">
-        Bottom
+        Block End
       </Text>
-      <Box background="surface" padding="4">
+      <Box background="surface-success" padding="4">
         <Bleed marginInline="4" marginBlockEnd="6">
           <div style={styles} />
         </Bleed>
       </Box>
       <Text variant="bodyMd" as="p">
-        Left
+        Inline Start
       </Text>
-      <Box background="surface" padding="4">
+      <Box background="surface-success" padding="4">
         <Bleed marginInline="0" marginInlineStart="6">
           <div style={styles} />
         </Bleed>
       </Box>
       <Text variant="bodyMd" as="p">
-        Right
+        Inline End
       </Text>
-      <Box background="surface" padding="4">
+      <Box background="surface-success" padding="4">
         <Bleed marginInline="0" marginInlineEnd="6">
           <div style={styles} />
         </Bleed>
@@ -94,10 +94,23 @@ export function WithSpecificDirection() {
 
 export function WithAllDirection() {
   return (
-    <Box background="surface" padding="4">
+    <Box background="surface-success" padding="4">
       <Bleed marginInline="6" marginBlock="6">
         <div style={styles} />
       </Bleed>
     </Box>
   );
 }
+
+export function WithResponsiveHorizontalDirection() {
+  return (
+    <Box
+      background="surface-success"
+      padding={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}
+    >
+      <Bleed marginInline={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}>
+        <div style={styles} />
+      </Bleed>
+    </Box>
+  );
+}

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

@@ -1,26 +1,32 @@
 import React from 'react';
 import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
 
-import {sanitizeCustomProperties} from '../../utilities/css';
+import {
+  getResponsiveProps,
+  sanitizeCustomProperties,
+} from '../../utilities/css';
+import type {ResponsiveProp} from '../../utilities/css';
 
 import styles from './Bleed.scss';
 
+type Spacing = ResponsiveProp<SpacingSpaceScale>;
+
 export interface BleedProps {
   children?: React.ReactNode;
   /** Negative horizontal space around children
    * @default '5'
    */
-  marginInline?: SpacingSpaceScale;
+  marginInline?: Spacing;
   /** Negative vertical space around children */
-  marginBlock?: SpacingSpaceScale;
+  marginBlock?: Spacing;
   /** Negative top space around children */
-  marginBlockStart?: SpacingSpaceScale;
+  marginBlockStart?: Spacing;
   /** Negative bottom space around children */
-  marginBlockEnd?: SpacingSpaceScale;
+  marginBlockEnd?: Spacing;
   /** Negative left space around children */
-  marginInlineStart?: SpacingSpaceScale;
+  marginInlineStart?: Spacing;
   /** Negative right space around children */
-  marginInlineEnd?: SpacingSpaceScale;
+  marginInlineEnd?: Spacing;
 }
 
 export const Bleed = ({
@@ -36,7 +42,7 @@ export const Bleed = ({
     const xAxis = ['marginInlineStart', 'marginInlineEnd'];
     const yAxis = ['marginBlockStart', 'marginBlockEnd'];
 
-    const directionValues: {[key: string]: string | undefined} = {
+    const directionValues: {[key: string]: Spacing | undefined} = {
       marginBlockStart,
       marginBlockEnd,
       marginInlineStart,
@@ -60,18 +66,30 @@ export const Bleed = ({
   const negativeMarginInlineEnd = getNegativeMargins('marginInlineEnd');
 
   const style = {
-    '--pc-bleed-margin-block-start': negativeMarginBlockStart
-      ? `var(--p-space-${negativeMarginBlockStart})`
-      : undefined,
-    '--pc-bleed-margin-block-end': negativeMarginBlockEnd
-      ? `var(--p-space-${negativeMarginBlockEnd})`
-      : undefined,
-    '--pc-bleed-margin-inline-start': negativeMarginInlineStart
-      ? `var(--p-space-${negativeMarginInlineStart})`
-      : undefined,
-    '--pc-bleed-margin-inline-end': negativeMarginInlineEnd
-      ? `var(--p-space-${negativeMarginInlineEnd})`
-      : undefined,
+    ...getResponsiveProps(
+      'bleed',
+      'margin-block-start',
+      'space',
+      negativeMarginBlockStart,
+    ),
+    ...getResponsiveProps(
+      'bleed',
+      'margin-block-end',
+      'space',
+      negativeMarginBlockEnd,
+    ),
+    ...getResponsiveProps(
+      'bleed',
+      'margin-inline-start',
+      'space',
+      negativeMarginInlineStart,
+    ),
+    ...getResponsiveProps(
+      'bleed',
+      'margin-inline-end',
+      'space',
+      negativeMarginInlineEnd,
+    ),
   } as React.CSSProperties;
 
   return (

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

@@ -25,8 +25,8 @@ describe('<Bleed />', () => {
 
     expect(bleed).toContainReactComponent('div', {
       style: {
-        '--pc-bleed-margin-inline-start': 'var(--p-space-5)',
-        '--pc-bleed-margin-inline-end': 'var(--p-space-5)',
+        '--pc-bleed-margin-inline-start-xs': 'var(--p-space-5)',
+        '--pc-bleed-margin-inline-end-xs': 'var(--p-space-5)',
       } as React.CSSProperties,
     });
   });
@@ -40,8 +40,8 @@ describe('<Bleed />', () => {
 
     expect(bleed).toContainReactComponent('div', {
       style: {
-        '--pc-bleed-margin-inline-start': 'var(--p-space-2)',
-        '--pc-bleed-margin-inline-end': 'var(--p-space-5)',
+        '--pc-bleed-margin-inline-start-xs': 'var(--p-space-2)',
+        '--pc-bleed-margin-inline-end-xs': 'var(--p-space-5)',
       } as React.CSSProperties,
     });
   });
@@ -55,11 +55,26 @@ describe('<Bleed />', () => {
 
     expect(bleed).toContainReactComponent('div', {
       style: {
-        '--pc-bleed-margin-block-start': 'var(--p-space-1)',
-        '--pc-bleed-margin-block-end': 'var(--p-space-1)',
-        '--pc-bleed-margin-inline-start': 'var(--p-space-2)',
-        '--pc-bleed-margin-inline-end': 'var(--p-space-3)',
+        '--pc-bleed-margin-block-start-xs': 'var(--p-space-1)',
+        '--pc-bleed-margin-block-end-xs': 'var(--p-space-1)',
+        '--pc-bleed-margin-inline-start-xs': 'var(--p-space-2)',
+        '--pc-bleed-margin-inline-end-xs': 'var(--p-space-3)',
       } as React.CSSProperties,
     });
   });
+
+  it('renders margin based on breakpoints', () => {
+    const bleed = mountWithApp(
+      <Bleed marginInlineStart={{xs: '2', md: '8'}}>
+        <Children />
+      </Bleed>,
+    );
+
+    expect(bleed).toContainReactComponent('div', {
+      style: expect.objectContaining({
+        '--pc-bleed-margin-inline-start-xs': 'var(--p-space-2)',
+        '--pc-bleed-margin-inline-start-md': 'var(--p-space-8)',
+      }) as React.CSSProperties,
+    });
+  });
 });