[Layout] Bleed remove default spacing (#8470)

### WHY are these changes introduced?

Fixes #8367

### WHAT is this pull request doing?

Removes the default negative horizontal margin from the `Bleed`
component

Author: aveline

.changeset/new-tools-flow.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Removed default margin from `Bleed`

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

@@ -88,7 +88,7 @@ export function WithSubduedSection() {
           </List>
         </Box>
       </AlphaStack>
-      <Bleed marginBlockEnd="5">
+      <Bleed marginBlockEnd="5" marginInline="5">
         <Divider />
         <Box
           background="surface-subdued"

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

@@ -13,9 +13,7 @@ type Spacing = ResponsiveProp<SpacingSpaceScale>;
 
 export interface BleedProps {
   children?: React.ReactNode;
-  /** Negative horizontal space around children
-   * @default '5'
-   */
+  /** Negative horizontal space around children */
   marginInline?: Spacing;
   /** Negative vertical space around children */
   marginBlock?: Spacing;
@@ -30,7 +28,7 @@ export interface BleedProps {
 }
 
 export const Bleed = ({
-  marginInline = '5',
+  marginInline,
   marginBlock,
   marginBlockStart,
   marginBlockEnd,

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

@@ -16,21 +16,6 @@ describe('<Bleed />', () => {
     expect(bleed).toContainReactComponent(Children);
   });
 
-  it('renders default horizontal custom properties', () => {
-    const bleed = mountWithApp(
-      <Bleed>
-        <Children />
-      </Bleed>,
-    );
-
-    expect(bleed).toContainReactComponent('div', {
-      style: {
-        '--pc-bleed-margin-inline-start-xs': 'var(--p-space-5)',
-        '--pc-bleed-margin-inline-end-xs': 'var(--p-space-5)',
-      } as React.CSSProperties,
-    });
-  });
-
   it('only renders the custom property that matches the property passed in', () => {
     const bleed = mountWithApp(
       <Bleed marginInlineStart="2">
@@ -41,7 +26,6 @@ describe('<Bleed />', () => {
     expect(bleed).toContainReactComponent('div', {
       style: {
         '--pc-bleed-margin-inline-start-xs': 'var(--p-space-2)',
-        '--pc-bleed-margin-inline-end-xs': 'var(--p-space-5)',
       } as React.CSSProperties,
     });
   });

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

@@ -108,10 +108,7 @@ export function ChoiceList({
     ) : null;
     return (
       <li key={value}>
-        <Bleed
-          marginInline="0"
-          marginBlockEnd={helpText ? {xs: '1', md: '0'} : {xs: '0'}}
-        >
+        <Bleed marginBlockEnd={helpText ? {xs: '1', md: '0'} : {xs: '0'}}>
           <ControlComponent
             name={finalName}
             value={value}

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

@@ -136,7 +136,7 @@ export function OptionList({
             paddingBlockStart={isFirstOption ? undefined : '2'}
           >
             {titleMarkup}
-            <Bleed marginBlockStart={title ? undefined : '05'} marginInline="0">
+            <Bleed marginBlockStart={title ? undefined : '05'}>
               <Box
                 as="ul"
                 id={`${id}-${sectionIndex}`}