diff --git a/.changeset/blue-hotels-fly.md b/.changeset/blue-hotels-fly.md
new file mode 100644
index 00000000000..9a4f42a7d98
--- /dev/null
+++ b/.changeset/blue-hotels-fly.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added horizontal spacing defaults to `Bleed`
diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.tsx
index 200fad3a5b5..ec8429e17f3 100644
--- a/polaris-react/src/components/AlphaCard/AlphaCard.tsx
+++ b/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}
diff --git a/polaris-react/src/components/Bleed/Bleed.stories.tsx b/polaris-react/src/components/Bleed/Bleed.stories.tsx
index a01edd02630..2cbf1f4e0a5 100644
--- a/polaris-react/src/components/Bleed/Bleed.stories.tsx
+++ b/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 (
-
+
+
+ Section 01
+
-
+
+
+
-
+
+ Section 02
+
+
);
}
diff --git a/polaris-react/src/components/Bleed/Bleed.tsx b/polaris-react/src/components/Bleed/Bleed.tsx
index e3c170a212e..89232b3d705 100644
--- a/polaris-react/src/components/Bleed/Bleed.tsx
+++ b/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,
diff --git a/polaris-react/src/components/Bleed/tests/Bleed.test.tsx b/polaris-react/src/components/Bleed/tests/Bleed.test.tsx
index da2c480b410..44c2e28bf00 100644
--- a/polaris-react/src/components/Bleed/tests/Bleed.test.tsx
+++ b/polaris-react/src/components/Bleed/tests/Bleed.test.tsx
@@ -16,14 +16,19 @@ describe('', () => {
expect(bleed).toContainReactComponent(Children);
});
- it('does not render custom properties by default', () => {
+ it('renders default horizontal custom properties', () => {
const bleed = mountWithApp(
,
);
- 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('', () => {
expect(bleed).toContainReactComponent('div', {
style: {
'--pc-bleed-margin-left': 'var(--p-space-2)',
+ '--pc-bleed-margin-right': 'var(--p-space-5)',
} as React.CSSProperties,
});
});