[Bleed] Remove spacing prop (#7732)

Fixes: #7735
The spacing prop name is confusing and can be achieved with a
combination of either specifying `top, right, bottom ,left` or
`horizontal, vertical`. Removing it simplifies the component and
documentation and aligns with our naming conventions

Author: kyledurand

.changeset/tricky-apes-vanish.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Removed `spacing` prop from Bleed component

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

@@ -64,7 +64,7 @@ export function WithSpecificDirection() {
 export function WithAllDirection() {
   return (
     <Box background="surface" padding="4">
-      <Bleed spacing="6">
+      <Bleed horizontal="6" vertical="6">
         <div style={styles} />
       </Bleed>
     </Box>

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

@@ -8,8 +8,6 @@ import styles from './Bleed.scss';
 export interface BleedProps {
   /** Elements to display inside tile */
   children: React.ReactNode;
-  /** Negative space around the element */
-  spacing?: SpacingSpaceScale;
   /** Negative horizontal space around the element
    * * @default '5'
    */
@@ -27,7 +25,6 @@ export interface BleedProps {
 }
 
 export const Bleed = ({
-  spacing,
   horizontal = '5',
   vertical,
   top,
@@ -55,8 +52,6 @@ export const Bleed = ({
       return directionValues.horizontal;
     } else if (!xAxis.includes(direction) && vertical) {
       return directionValues.vertical;
-    } else {
-      return spacing;
     }
   };
 

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

@@ -48,7 +48,7 @@ describe('<Bleed />', () => {
 
   it('renders custom properties combined with any overrides if they are passed in', () => {
     const bleed = mountWithApp(
-      <Bleed spacing="1" left="2" horizontal="3">
+      <Bleed vertical="1" left="2" horizontal="3">
         <Children />
       </Bleed>,
     );

polaris.shopify.com/pages/examples/bleed-all-directions.tsx

@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function BleedAllDirectionsExample() {
   return (
     <Box background="surface" border="base" padding="4">
-      <Bleed spacing="4">
+      <Bleed vertical="4" horizontal="4">
         <Placeholder label="All directions" />
       </Bleed>
     </Box>