Add defaults to bleed (#7644)

Bleed should do something by default. This offsets the default
horizontal padding from AlphaCard which I think will be the most common
use case

Part of #7592

Author: kyledurand

.changeset/blue-hotels-fly.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added horizontal spacing defaults to `Bleed`

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

@@ -49,7 +49,7 @@ export const AlphaCard = ({
       background={background}
       padding={padding}
       shadow="card"
-      {...(hasBorderRadius && {borderRadius: defaultBorderRadius})}
+      borderRadius={hasBorderRadius ? defaultBorderRadius : undefined}
     >
       {children}
     </Box>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Bleed, Box} from '@shopify/polaris';
+import {AlphaCard, Bleed, Box, Text} from '@shopify/polaris';
 
 export default {
   component: Bleed,
@@ -15,11 +15,19 @@ const styles = {
 
 export function Default() {
   return (
-    <Box background="surface" padding="4">
+    <AlphaCard>
+      <Text as="p" variant="bodySm">
+        Section 01
+      </Text>
       <Bleed>
-        <div style={styles} />
+        <Box paddingBlockStart="2" paddingBlockEnd="2">
+          <Box borderBlockStart="base" />
+        </Box>
       </Bleed>
-    </Box>
+      <Text as="p" variant="bodySm">
+        Section 02
+      </Text>
+    </AlphaCard>
   );
 }
 

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

@@ -10,7 +10,9 @@ export interface BleedProps {
   children: React.ReactNode;
   /** Negative space around the element */
   spacing?: SpacingSpaceScale;
-  /** Negative horizontal space around the element */
+  /** Negative horizontal space around the element
+   * * @default '5'
+   */
   horizontal?: SpacingSpaceScale;
   /** Negative vertical space around the element */
   vertical?: SpacingSpaceScale;
@@ -26,7 +28,7 @@ export interface BleedProps {
 
 export const Bleed = ({
   spacing,
-  horizontal,
+  horizontal = '5',
   vertical,
   top,
   bottom,

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

@@ -16,14 +16,19 @@ describe('<Bleed />', () => {
     expect(bleed).toContainReactComponent(Children);
   });
 
-  it('does not render custom properties by default', () => {
+  it('renders default horizontal custom properties', () => {
     const bleed = mountWithApp(
       <Bleed>
         <Children />
       </Bleed>,
     );
 
-    expect(bleed).toContainReactComponent('div', {style: undefined});
+    expect(bleed).toContainReactComponent('div', {
+      style: {
+        '--pc-bleed-margin-left': 'var(--p-space-5)',
+        '--pc-bleed-margin-right': 'var(--p-space-5)',
+      } as React.CSSProperties,
+    });
   });
 
   it('only renders the custom property that matches the property passed in', () => {
@@ -36,6 +41,7 @@ describe('<Bleed />', () => {
     expect(bleed).toContainReactComponent('div', {
       style: {
         '--pc-bleed-margin-left': 'var(--p-space-2)',
+        '--pc-bleed-margin-right': 'var(--p-space-5)',
       } as React.CSSProperties,
     });
   });