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, }); });