Updated Bleed to accept responsive spacing (#7794)

### WHY are these changes introduced? Resolves #7792 and unblocks #7354 ### WHAT is this pull request doing? - Add support for responsive spacing values to be passed in to `Bleed` - Created the responsive custom properties manually instead of using the mixin because the mixin doesn't currently support applying the negative values with `calc()`. Not sure it's a use case we will run into enough to warrant adding the complexity to the mixin to support this. However if that is something we find ourselves needing to do repeatedly then worth revisiting the mixin.
Shopify · Nov 23, 2022 · d43e3bc · d43e3bc
1 parent dc4540c
commit d43e3bc
Show file tree

Hide file tree

Showing 6 changed files with 724 additions and 616 deletions.
diff --git a/.changeset/moody-dolls-kneel.md b/.changeset/moody-dolls-kneel.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': patch
+---
+
+Added support for responsive spacing on `Bleed`
diff --git a/polaris-react/src/components/Bleed/Bleed.scss b/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));
+  }
 }
diff --git a/polaris-react/src/components/Bleed/Bleed.stories.tsx b/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" padding="4" border="base">
       <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" padding="4" border="base">
       <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" padding="4" border="base">
         <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" padding="4" border="base">
         <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" padding="4" border="base">
         <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" padding="4" border="base">
         <Bleed marginInline="0" marginInlineEnd="6">
           <div style={styles} />
         </Bleed>
@@ -94,10 +94,24 @@ export function WithSpecificDirection() {
 
 export function WithAllDirection() {
   return (
-    <Box background="surface" padding="4">
+    <Box background="surface" padding="4" border="base">
       <Bleed marginInline="6" marginBlock="6">
         <div style={styles} />
       </Bleed>
     </Box>
   );
 }
+
+export function WithResponsiveHorizontalDirection() {
+  return (
+    <Box
+      background="surface"
+      padding={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}
+      border="base"
+    >
+      <Bleed marginInline={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}>
+        <div style={styles} />
+      </Bleed>
+    </Box>
+  );
+}
diff --git a/polaris-react/src/components/Bleed/Bleed.tsx b/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 (

diff --git a/polaris-react/src/components/Bleed/tests/Bleed.test.tsx b/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,
+    });
+  });
 });