Add defaults to bleed

Author: kyledurand

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

@@ -1,7 +1,6 @@
 import type {
   BreakpointsAlias,
   ColorsTokenName,
-  ShapeBorderRadiusScale,
   SpacingSpaceScale,
 } from '@shopify/polaris-tokens';
 import React from 'react';
@@ -36,20 +35,15 @@ export const AlphaCard = ({
   roundedAbove,
 }: AlphaCardProps) => {
   const breakpoints = useBreakpoints();
-  const defaultBorderRadius = '2' as ShapeBorderRadiusScale;
-
-  let hasBorderRadius = !roundedAbove;
-
-  if (roundedAbove && breakpoints[`${roundedAbove}Up`]) {
-    hasBorderRadius = true;
-  }
+  const borderRadius =
+    roundedAbove && breakpoints[`${roundedAbove}Up`] ? '2' : undefined;
 
   return (
     <Box
       background={background}
       padding={padding}
       shadow="card"
-      {...(hasBorderRadius && {borderRadius: defaultBorderRadius})}
+      borderRadius={borderRadius}
     >
       {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,
     });
   });