[Bleed] Refactor props to use logical property names (#7779)

### WHY are these changes introduced? Resolves #7772. Updates `Bleed` to use logical properties. Style guide has been updated to reflect new prop names. [Storybook](https://5d559397bae39100201eedc1-jximmitnfv.chromatic.com/?path=/story/all-components-bleed--with-specific-direction). ### WHAT is this pull request doing? Updates `Bleed` to use logical properties: - `vertical` -> `marginBlock` - `horizontal` -> `marginInline` - `top` -> `marginBlockStart` - `bottom` -> `marginBlockEnd` - `left` -> `marginInlineStart` - `right` -> `marginInlineEnd` The logic to get the negative margins when `horizontal` or `vertical` was passed in was flipped and causing issues so I've also fixed that. ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
Shopify · Nov 30, 2022 · ba086af · ba086af
1 parent cb24dbb
commit ba086af
Show file tree

Hide file tree

Showing 10 changed files with 525 additions and 490 deletions.
diff --git a/.changeset/two-fishes-join.md b/.changeset/two-fishes-join.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide
diff --git a/polaris-react/src/components/Bleed/Bleed.scss b/polaris-react/src/components/Bleed/Bleed.scss
@@ -1,10 +1,8 @@
 @import '../../styles/common';
 
 .Bleed {
-  /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-  margin-bottom: calc(-1 * var(--pc-bleed-margin-bottom));
-  margin-left: calc(-1 * var(--pc-bleed-margin-left));
-  margin-right: calc(-1 * var(--pc-bleed-margin-right));
-  margin-top: calc(-1 * var(--pc-bleed-margin-top));
-  /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+  margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start));
+  margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end));
+  margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start));
+  margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end));
 }
diff --git 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 {AlphaCard, Bleed, Box, Text} from '@shopify/polaris';
+import {AlphaCard, Bleed, Box, Stack, Text} from '@shopify/polaris';
 
 export default {
   component: Bleed,
@@ -16,25 +16,27 @@ const styles = {
 export function Default() {
   return (
     <AlphaCard>
-      <Text as="p" variant="bodySm">
-        Section 01
-      </Text>
+      <Box paddingBlockEnd="5">
+        <Text as="p" variant="bodySm">
+          Section 01
+        </Text>
+      </Box>
       <Bleed>
-        <Box paddingBlockStart="2" paddingBlockEnd="2">
-          <Box borderBlockStart="base" />
-        </Box>
+        <Box borderBlockStart="base" />
       </Bleed>
-      <Text as="p" variant="bodySm">
-        Section 02
-      </Text>
+      <Box paddingBlockStart="5">
+        <Text as="p" variant="bodySm">
+          Section 02
+        </Text>
+      </Box>
     </AlphaCard>
   );
 }
 
 export function WithVerticalDirection() {
   return (
     <Box background="surface" padding="4">
-      <Bleed vertical="6">
+      <Bleed marginBlock="6">
         <div style={styles} />
       </Bleed>
     </Box>
@@ -44,7 +46,7 @@ export function WithVerticalDirection() {
 export function WithHorizontalDirection() {
   return (
     <Box background="surface" padding="4">
-      <Bleed horizontal="6">
+      <Bleed marginInline="6">
         <div style={styles} />
       </Bleed>
     </Box>
@@ -53,18 +55,47 @@ export function WithHorizontalDirection() {
 
 export function WithSpecificDirection() {
   return (
-    <Box background="surface" padding="4">
-      <Bleed top="6">
-        <div style={styles} />
-      </Bleed>
-    </Box>
+    <Stack vertical>
+      <Text variant="bodyMd" as="p">
+        Top
+      </Text>
+      <Box background="surface" padding="4">
+        <Bleed marginInline="4" marginBlockStart="6">
+          <div style={styles} />
+        </Bleed>
+      </Box>
+      <Text variant="bodyMd" as="p">
+        Bottom
+      </Text>
+      <Box background="surface" padding="4">
+        <Bleed marginInline="4" marginBlockEnd="6">
+          <div style={styles} />
+        </Bleed>
+      </Box>
+      <Text variant="bodyMd" as="p">
+        Left
+      </Text>
+      <Box background="surface" padding="4">
+        <Bleed marginInline="0" marginInlineStart="6">
+          <div style={styles} />
+        </Bleed>
+      </Box>
+      <Text variant="bodyMd" as="p">
+        Right
+      </Text>
+      <Box background="surface" padding="4">
+        <Bleed marginInline="0" marginInlineEnd="6">
+          <div style={styles} />
+        </Bleed>
+      </Box>
+    </Stack>
   );
 }
 
 export function WithAllDirection() {
   return (
     <Box background="surface" padding="4">
-      <Bleed horizontal="6" vertical="6">
+      <Bleed marginInline="6" marginBlock="6">
         <div style={styles} />
       </Bleed>
     </Box>

diff --git a/polaris-react/src/components/Bleed/Bleed.tsx b/polaris-react/src/components/Bleed/Bleed.tsx
@@ -10,67 +10,67 @@ export interface BleedProps {
   /** Negative horizontal space around children
    * @default '5'
    */
-  horizontal?: SpacingSpaceScale;
+  marginInline?: SpacingSpaceScale;
   /** Negative vertical space around children */
-  vertical?: SpacingSpaceScale;
+  marginBlock?: SpacingSpaceScale;
   /** Negative top space around children */
-  top?: SpacingSpaceScale;
+  marginBlockStart?: SpacingSpaceScale;
   /** Negative bottom space around children */
-  bottom?: SpacingSpaceScale;
+  marginBlockEnd?: SpacingSpaceScale;
   /** Negative left space around children */
-  left?: SpacingSpaceScale;
+  marginInlineStart?: SpacingSpaceScale;
   /** Negative right space around children */
-  right?: SpacingSpaceScale;
+  marginInlineEnd?: SpacingSpaceScale;
 }
 
 export const Bleed = ({
-  horizontal = '5',
-  vertical,
-  top,
-  bottom,
-  left,
-  right,
+  marginInline = '5',
+  marginBlock,
+  marginBlockStart,
+  marginBlockEnd,
+  marginInlineStart,
+  marginInlineEnd,
   children,
 }: BleedProps) => {
   const getNegativeMargins = (direction: string) => {
-    const xAxis = ['left', 'right'];
-    const yAxis = ['top', 'bottom'];
+    const xAxis = ['marginInlineStart', 'marginInlineEnd'];
+    const yAxis = ['marginBlockStart', 'marginBlockEnd'];
 
     const directionValues: {[key: string]: string | undefined} = {
-      top,
-      bottom,
-      left,
-      right,
-      horizontal,
-      vertical,
+      marginBlockStart,
+      marginBlockEnd,
+      marginInlineStart,
+      marginInlineEnd,
+      marginInline,
+      marginBlock,
     };
 
     if (directionValues[direction]) {
       return directionValues[direction];
-    } else if (!yAxis.includes(direction) && horizontal) {
-      return directionValues.horizontal;
-    } else if (!xAxis.includes(direction) && vertical) {
-      return directionValues.vertical;
+    } else if (xAxis.includes(direction) && marginInline) {
+      return directionValues.marginInline;
+    } else if (yAxis.includes(direction) && marginBlock) {
+      return directionValues.marginBlock;
     }
   };
 
-  const negativeTop = getNegativeMargins('top');
-  const negativeLeft = getNegativeMargins('left');
-  const negativeRight = getNegativeMargins('right');
-  const negativeBottom = getNegativeMargins('bottom');
+  const negativeMarginBlockStart = getNegativeMargins('marginBlockStart');
+  const negativeMarginBlockEnd = getNegativeMargins('marginBlockEnd');
+  const negativeMarginInlineStart = getNegativeMargins('marginInlineStart');
+  const negativeMarginInlineEnd = getNegativeMargins('marginInlineEnd');
 
   const style = {
-    '--pc-bleed-margin-bottom': negativeBottom
-      ? `var(--p-space-${negativeBottom})`
+    '--pc-bleed-margin-block-start': negativeMarginBlockStart
+      ? `var(--p-space-${negativeMarginBlockStart})`
       : undefined,
-    '--pc-bleed-margin-left': negativeLeft
-      ? `var(--p-space-${negativeLeft})`
+    '--pc-bleed-margin-block-end': negativeMarginBlockEnd
+      ? `var(--p-space-${negativeMarginBlockEnd})`
       : undefined,
-    '--pc-bleed-margin-right': negativeRight
-      ? `var(--p-space-${negativeRight})`
+    '--pc-bleed-margin-inline-start': negativeMarginInlineStart
+      ? `var(--p-space-${negativeMarginInlineStart})`
       : undefined,
-    '--pc-bleed-margin-top': negativeTop
-      ? `var(--p-space-${negativeTop})`
+    '--pc-bleed-margin-inline-end': negativeMarginInlineEnd
+      ? `var(--p-space-${negativeMarginInlineEnd})`
       : undefined,
   } as React.CSSProperties;
 

diff --git a/polaris-react/src/components/Bleed/tests/Bleed.test.tsx b/polaris-react/src/components/Bleed/tests/Bleed.test.tsx
@@ -25,40 +25,40 @@ describe('<Bleed />', () => {
 
     expect(bleed).toContainReactComponent('div', {
       style: {
-        '--pc-bleed-margin-left': 'var(--p-space-5)',
-        '--pc-bleed-margin-right': 'var(--p-space-5)',
+        '--pc-bleed-margin-inline-start': 'var(--p-space-5)',
+        '--pc-bleed-margin-inline-end': 'var(--p-space-5)',
       } as React.CSSProperties,
     });
   });
 
   it('only renders the custom property that matches the property passed in', () => {
     const bleed = mountWithApp(
-      <Bleed left="2">
+      <Bleed marginInlineStart="2">
         <Children />
       </Bleed>,
     );
 
     expect(bleed).toContainReactComponent('div', {
       style: {
-        '--pc-bleed-margin-left': 'var(--p-space-2)',
-        '--pc-bleed-margin-right': 'var(--p-space-5)',
+        '--pc-bleed-margin-inline-start': 'var(--p-space-2)',
+        '--pc-bleed-margin-inline-end': 'var(--p-space-5)',
       } as React.CSSProperties,
     });
   });
 
   it('renders custom properties combined with any overrides if they are passed in', () => {
     const bleed = mountWithApp(
-      <Bleed vertical="1" left="2" horizontal="3">
+      <Bleed marginBlock="1" marginInlineStart="2" marginInline="3">
         <Children />
       </Bleed>,
     );
 
     expect(bleed).toContainReactComponent('div', {
       style: {
-        '--pc-bleed-margin-bottom': 'var(--p-space-1)',
-        '--pc-bleed-margin-left': 'var(--p-space-2)',
-        '--pc-bleed-margin-right': 'var(--p-space-3)',
-        '--pc-bleed-margin-top': 'var(--p-space-1)',
+        '--pc-bleed-margin-block-start': 'var(--p-space-1)',
+        '--pc-bleed-margin-block-end': 'var(--p-space-1)',
+        '--pc-bleed-margin-inline-start': 'var(--p-space-2)',
+        '--pc-bleed-margin-inline-end': 'var(--p-space-3)',
       } as React.CSSProperties,
     });
   });

diff --git a/polaris.shopify.com/pages/examples/bleed-all-directions.tsx b/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="5">
-      <Bleed vertical="5">
+      <Bleed marginBlock="5">
         <Placeholder label="All directions" />
       </Bleed>
     </Box>

diff --git a/polaris.shopify.com/pages/examples/bleed-horizontal.tsx b/polaris.shopify.com/pages/examples/bleed-horizontal.tsx
@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function BleedHorizontalExample() {
   return (
     <Box background="surface" border="base" padding="4">
-      <Bleed horizontal="4">
+      <Bleed marginInline="4">
         <Placeholder label="Horizontal" />
       </Bleed>
     </Box>

diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
@@ -7,22 +7,22 @@ function BleedSpecificDirectionExample() {
   return (
     <AlphaStack gap="6" fullWidth>
       <Box background="surface" border="base" padding="5">
-        <Bleed top="5">
+        <Bleed marginBlockStart="5">
           <Placeholder label="Top" />
         </Bleed>
       </Box>
       <Box background="surface" border="base" padding="5">
-        <Bleed bottom="5">
+        <Bleed marginBlockEnd="5">
           <Placeholder label="Bottom" />
         </Bleed>
       </Box>
       <Box background="surface" border="base" padding="5">
-        <Bleed left="5" right="0">
+        <Bleed marginInlineStart="5" marginInlineEnd="0">
           <Placeholder label="Left" />
         </Bleed>
       </Box>
       <Box background="surface" border="base" padding="5">
-        <Bleed right="5" left="0">
+        <Bleed marginInlineEnd="5" marginInlineStart="0">
           <Placeholder label="Right" />
         </Bleed>
       </Box>

diff --git a/polaris.shopify.com/pages/examples/bleed-vertical.tsx b/polaris.shopify.com/pages/examples/bleed-vertical.tsx
@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function BleedVerticalExample() {
   return (
     <Box background="surface" border="base" padding="4">
-      <Bleed horizontal="0" vertical="4">
+      <Bleed marginInline="0" marginBlock="4">
         <Placeholder label="Vertical" />
       </Bleed>
     </Box>