feat: margin and padding logical props (#1685)

Author: madhurisandbhor

.changeset/fresh-turkeys-approve.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+feat: add logic spacing properties

docs/stories/Box.mdx

@@ -24,12 +24,18 @@ The `Box` component allows creation of containers according to the guidelines of
 
 <Canvas of={BoxStories.Base} />
 
-## Box with padding
+## Box with responsive spaces
 
-The `Box` component with padding added.
+The `Box` component with responsive padding added.
 
 <Canvas of={BoxStories.ResponsiveSpaces} />
 
+## Box with logical properties
+
+The `Box` component is internally mapped to logical properties such as `paddingBlock`, `paddingInline`, `marginBlock` and `marginInline` added.
+
+<Canvas of={BoxStories.LogicalProperties} />
+
 ## Props
 
 <ArgsTable of={Box} />

docs/stories/Box.stories.tsx

@@ -37,3 +37,26 @@ export const ResponsiveSpaces = {
 
   name: 'responsive spaces',
 } satisfies Story;
+
+export const LogicalProperties = {
+  render: () => (
+    <Box
+      paddingTop={4}
+      padding={[6, 4, 1]}
+      paddingRight={2}
+      marginBottom={4}
+      margin={2}
+      marginLeft={[8, 4, 2]}
+      background="primary700"
+      shadow="filterShadow"
+      hiddenXS
+      borderColor="danger600"
+      borderStyle="dotted"
+      borderWidth="2px"
+    >
+      <Typography textColor="neutral0">Hello world</Typography>
+    </Box>
+  ),
+
+  name: 'logical properties',
+} satisfies Story;

packages/strapi-design-system/src/Box/Box.tsx

@@ -82,6 +82,10 @@ export type BoxProps<TElement extends keyof JSX.IntrinsicElements = 'div'> = Rea
      * Padding top. Supports responsive values
      */
     paddingTop?: ResponsiveValue<'paddingTop'>;
+    /**
+     * Margin. Supports responsive values
+     */
+    margin?: ResponsiveValue<'margin'>;
     marginLeft?: ResponsiveValue<'marginLeft'>;
     marginBottom?: ResponsiveValue<'marginBottom'>;
     marginRight?: ResponsiveValue<'marginRight'>;
@@ -137,15 +141,19 @@ export const Box = styled.div.withConfig<BoxProps>({
   color: ${({ theme, color }) => extractStyleFromTheme(theme.colors, color, undefined)};
 
   // Spaces
-  ${({ theme, padding }) => handleResponsiveValues('padding', padding, theme)}
-  ${({ theme, paddingTop }) => handleResponsiveValues('padding-top', paddingTop, theme)}
-  ${({ theme, paddingRight }) => handleResponsiveValues('padding-right', paddingRight, theme)}
-  ${({ theme, paddingBottom }) => handleResponsiveValues('padding-bottom', paddingBottom, theme)}
-  ${({ theme, paddingLeft }) => handleResponsiveValues('padding-left', paddingLeft, theme)}
-  ${({ theme, marginLeft }) => handleResponsiveValues('margin-left', marginLeft, theme)}
-  ${({ theme, marginRight }) => handleResponsiveValues('margin-right', marginRight, theme)}
-  ${({ theme, marginTop }) => handleResponsiveValues('margin-top', marginTop, theme)}
-  ${({ theme, marginBottom }) => handleResponsiveValues('margin-bottom', marginBottom, theme)}
+  ${({ theme, padding }) => handleResponsiveValues('padding-block', padding, theme)}
+  ${({ theme, padding }) => handleResponsiveValues('padding-inline', padding, theme)}
+  ${({ theme, paddingTop }) => handleResponsiveValues('padding-block-start', paddingTop, theme)}
+  ${({ theme, paddingRight }) => handleResponsiveValues('padding-inline-end', paddingRight, theme)}
+  ${({ theme, paddingBottom }) => handleResponsiveValues('padding-block-end', paddingBottom, theme)}
+  ${({ theme, paddingLeft }) => handleResponsiveValues('padding-inline-start', paddingLeft, theme)}
+
+  ${({ theme, margin }) => handleResponsiveValues('margin-block', margin, theme)}
+  ${({ theme, margin }) => handleResponsiveValues('margin-inline', margin, theme)}
+  ${({ theme, marginLeft }) => handleResponsiveValues('margin-inline-start', marginLeft, theme)}
+  ${({ theme, marginRight }) => handleResponsiveValues('margin-inline-end', marginRight, theme)}
+  ${({ theme, marginTop }) => handleResponsiveValues('margin-block-start', marginTop, theme)}
+  ${({ theme, marginBottom }) => handleResponsiveValues('margin-block-end', marginBottom, theme)}
 
   // Responsive hiding
   ${({ theme, hiddenS }) => (hiddenS ? `${theme.mediaQueries.tablet} { display: none; }` : undefined)}

packages/strapi-design-system/src/Box/__tests__/Box.spec.tsx

@@ -10,13 +10,57 @@ describe('Box', () => {
     expect(container.children[0]).toHaveStyle(`${colorProp}: #7b79ff`);
   });
 
-  it.each(['padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'])(
-    'retrieves the theme value corresponding to the %s props',
-    (spacingProp) => {
-      const { container } = setup({ [spacingProp]: 4 });
-      expect(container.children[0]).toHaveStyle(`${spacingProp}: 16px`);
-    },
-  );
+  it('retrieves the theme value corresponding to the padding', () => {
+    const { container } = setup({ padding: 4 });
+    expect(container.children[0]).toHaveStyle(`padding-block: 16px`);
+    expect(container.children[0]).toHaveStyle(`padding-inline: 16px`);
+  });
+
+  it('retrieves the theme value corresponding to the paddingTop', () => {
+    const { container } = setup({ paddingTop: 1 });
+    expect(container.children[0]).toHaveStyle(`padding-block-start: 4px`);
+  });
+
+  it('retrieves the theme value corresponding to the paddingBottom', () => {
+    const { container } = setup({ paddingBottom: 2 });
+    expect(container.children[0]).toHaveStyle(`padding-block-end: 8px`);
+  });
+
+  it('retrieves the theme value corresponding to the paddingLeft', () => {
+    const { container } = setup({ paddingLeft: 1 });
+    expect(container.children[0]).toHaveStyle(`padding-inline-start: 4px`);
+  });
+
+  it('retrieves the theme value corresponding to the paddingRight', () => {
+    const { container } = setup({ paddingRight: 2 });
+    expect(container.children[0]).toHaveStyle(`padding-inline-end: 8px`);
+  });
+
+  it('retrieves the theme value corresponding to the margin', () => {
+    const { container } = setup({ margin: 4 });
+    expect(container.children[0]).toHaveStyle(`margin-block: 16px`);
+    expect(container.children[0]).toHaveStyle(`margin-inline: 16px`);
+  });
+
+  it('retrieves the theme value corresponding to the marginTop', () => {
+    const { container } = setup({ marginTop: 1 });
+    expect(container.children[0]).toHaveStyle(`margin-block-start: 4px`);
+  });
+
+  it('retrieves the theme value corresponding to the marginBottom', () => {
+    const { container } = setup({ marginBottom: 2 });
+    expect(container.children[0]).toHaveStyle(`margin-block-end: 8px`);
+  });
+
+  it('retrieves the theme value corresponding to the marginLeft', () => {
+    const { container } = setup({ marginLeft: 1 });
+    expect(container.children[0]).toHaveStyle(`margin-inline-start: 4px`);
+  });
+
+  it('retrieves the theme value corresponding to the marginRight', () => {
+    const { container } = setup({ marginRight: 2 });
+    expect(container.children[0]).toHaveStyle(`margin-inline-end: 8px`);
+  });
 
   it.each(['color', 'cursor', 'height', 'width'])(
     'does not render color or cursor props as HTML attributes',

packages/strapi-design-system/src/ModalLayout/__tests__/__snapshots__/ModalLayout.spec.tsx.snap

@@ -21,8 +21,8 @@ exports[`ModalLayout should render component and match snapshot 1`] = `
 }
 
 .c1 {
-  padding-right: 40px;
-  padding-left: 40px;
+  padding-inline-end: 40px;
+  padding-inline-start: 40px;
   position: fixed;
   z-index: 4;
 }
@@ -36,30 +36,33 @@ exports[`ModalLayout should render component and match snapshot 1`] = `
 
 .c5 {
   background: #f6f6f9;
-  padding-top: 16px;
-  padding-right: 20px;
-  padding-bottom: 16px;
-  padding-left: 20px;
+  padding-block-start: 16px;
+  padding-inline-end: 20px;
+  padding-block-end: 16px;
+  padding-inline-start: 20px;
 }
 
 .c8 {
   background: #ffffff;
-  padding: 8px;
+  padding-block: 8px;
+  padding-inline: 8px;
   border-radius: 4px;
   border-color: #dcdce4;
   border: 1px solid #dcdce4;
   cursor: pointer;
 }
 
 .c11 {
-  padding: 32px;
+  padding-block: 32px;
+  padding-inline: 32px;
 }
 
 .c15 {
   background: #4945ff;
-  padding: 8px;
-  padding-right: 16px;
-  padding-left: 16px;
+  padding-block: 8px;
+  padding-inline: 8px;
+  padding-inline-end: 16px;
+  padding-inline-start: 16px;
   border-radius: 4px;
   border-color: #4945ff;
   border: 1px solid #4945ff;

packages/strapi-design-system/src/Tooltip/__tests__/__snapshots__/Tooltip.spec.tsx.snap

@@ -15,7 +15,8 @@ exports[`Tooltip snapshots document.body when the button is focused (aria-descri
 
 .c1 {
   background: #212134;
-  padding: 8px;
+  padding-block: 8px;
+  padding-inline: 8px;
   border-radius: 4px;
   position: absolute;
 }
@@ -106,7 +107,8 @@ exports[`Tooltip snapshots document.body when the tooltip is not visible but exi
 
 .c1 {
   background: #212134;
-  padding: 8px;
+  padding-block: 8px;
+  padding-inline: 8px;
   border-radius: 4px;
   position: absolute;
 }
@@ -190,7 +192,8 @@ exports[`Tooltip snapshots document.body with a label 1`] = `
 
 .c1 {
   background: #212134;
-  padding: 8px;
+  padding-block: 8px;
+  padding-inline: 8px;
   border-radius: 4px;
   position: absolute;
 }

packages/strapi-design-system/src/helpers/handleResponsiveValues.ts

@@ -23,11 +23,23 @@ type ResponsiveCSSProperties = Pick<
   | 'marginRight'
   | 'marginTop'
   | 'marginBottom'
+  | 'marginBlock'
+  | 'marginBlockStart'
+  | 'marginBlockEnd'
+  | 'marginInline'
+  | 'marginInlineStart'
+  | 'marginInlineEnd'
   | 'padding'
   | 'paddingLeft'
   | 'paddingRight'
   | 'paddingTop'
   | 'paddingBottom'
+  | 'paddingBlock'
+  | 'paddingBlockStart'
+  | 'paddingBlockEnd'
+  | 'paddingInline'
+  | 'paddingInlineStart'
+  | 'paddingInlineEnd'
 >;
 
 export type ResponsiveValue<TCSSProp extends keyof ResponsiveCSSProperties = any> =