feat: map margin and padding to logical properties internally

strapi · Apr 15, 2024 · be41c57 · be41c57
1 parent 75b4b2c
commit be41c57
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 61 deletions.
diff --git a/docs/stories/Box.mdx b/docs/stories/Box.mdx
@@ -32,7 +32,7 @@ The `Box` component with responsive padding added.
 
 ## Box with logical properties
 
-The `Box` component with logical properties `paddingBlockStart`, `paddingBlockEnd` and responsive `marginBlock` added.
+The `Box` component is internally mapped to logical properties such as `paddingBlock`, `paddingInline`, `marginBlock` and `marginInline` added.
 
 <Canvas of={BoxStories.LogicalProperties} />
 

diff --git a/docs/stories/Box.stories.tsx b/docs/stories/Box.stories.tsx
@@ -41,13 +41,12 @@ export const ResponsiveSpaces = {
 export const LogicalProperties = {
   render: () => (
     <Box
-      paddingBlockStart={6}
-      paddingBlockEnd={2}
-      marginBlock={[
-        [3, 6],
-        [2, 5],
-        [1, 4],
-      ]}
+      paddingTop={4}
+      padding={[6, 4, 1]}
+      paddingRight={2}
+      marginBottom={4}
+      margin={2}
+      marginLeft={[8, 4, 2]}
       background="primary700"
       shadow="filterShadow"
       hiddenXS

diff --git a/packages/strapi-design-system/src/Box/Box.tsx b/packages/strapi-design-system/src/Box/Box.tsx
@@ -82,31 +82,14 @@ export type BoxProps<TElement extends keyof JSX.IntrinsicElements = 'div'> = Rea
      * Padding top. Supports responsive values
      */
     paddingTop?: ResponsiveValue<'paddingTop'>;
-    /**
-     * Padding logical properties, supports responsive values
-     */
-    paddingBlock?: ResponsiveValue<'paddingBlock'>;
-    paddingBlockStart?: ResponsiveValue<'paddingBlockStart'>;
-    paddingBlockEnd?: ResponsiveValue<'paddingBlockEnd'>;
-    paddingInline?: ResponsiveValue<'paddingInline'>;
-    paddingInlineStart?: ResponsiveValue<'paddingInlineStart'>;
-    paddingInlineEnd?: ResponsiveValue<'paddingInlineEnd'>;
     /**
      * Margin. Supports responsive values
      */
+    margin?: ResponsiveValue<'margin'>;
     marginLeft?: ResponsiveValue<'marginLeft'>;
     marginBottom?: ResponsiveValue<'marginBottom'>;
     marginRight?: ResponsiveValue<'marginRight'>;
     marginTop?: ResponsiveValue<'marginTop'>;
-    /**
-     * Margin logical properties, supports responsive values
-     */
-    marginBlock?: ResponsiveValue<'marginBlock'>;
-    marginBlockStart?: ResponsiveValue<'marginBlockStart'>;
-    marginBlockEnd?: ResponsiveValue<'marginBlockEnd'>;
-    marginInline?: ResponsiveValue<'marginInline'>;
-    marginInlineStart?: ResponsiveValue<'marginInlineStart'>;
-    marginInlineEnd?: ResponsiveValue<'marginInlineEnd'>;
     /**
      * Shadow name (see `theme.shadows`)
      */
@@ -158,27 +141,20 @@ 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, paddingBlock }) => handleResponsiveValues('padding-block', paddingBlock, theme)}
-  ${({ theme, paddingBlockStart }) => handleResponsiveValues('padding-block-start', paddingBlockStart, theme)}
-  ${({ theme, paddingBlockEnd }) => handleResponsiveValues('padding-block-end', paddingBlockEnd, theme)}
-  ${({ theme, paddingInline }) => handleResponsiveValues('padding-inline', paddingInline, theme)}
-  ${({ theme, paddingInlineStart }) => handleResponsiveValues('padding-inline-start', paddingInlineStart, theme)}
-  ${({ theme, paddingInlineEnd }) => handleResponsiveValues('padding-inline-end', paddingInlineEnd, 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, marginBlock }) => handleResponsiveValues('margin-block', marginBlock, theme)}
-  ${({ theme, marginBlockStart }) => handleResponsiveValues('margin-block-start', marginBlockStart, theme)}
-  ${({ theme, marginBlockEnd }) => handleResponsiveValues('margin-block-end', marginBlockEnd, theme)}
-  ${({ theme, marginInline }) => handleResponsiveValues('margin-inline', marginInline, theme)}
-  ${({ theme, marginInlineStart }) => handleResponsiveValues('margin-inline-start', marginInlineStart, theme)}
-  ${({ theme, marginInlineEnd }) => handleResponsiveValues('margin-inline-end', marginInlineEnd, 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)}
   ${({ theme, hiddenXS }) => (hiddenXS ? `${theme.mediaQueries.mobile} { display: none; }` : undefined)}

diff --git a/packages/strapi-design-system/src/helpers/handleResponsiveValues.ts b/packages/strapi-design-system/src/helpers/handleResponsiveValues.ts
@@ -64,24 +64,13 @@ const handleResponsiveValues = <TCSSProp extends keyof ResponsiveCSSProperties>(
 
     const spaces = transformedArray.reduce((acc, curr, index) => {
       if (curr) {
-        let formattedCurr = '';
-
-        if (Array.isArray(curr)) {
-          const [start, end] = curr;
-          const startValue = theme.spaces[start as keyof DefaultTheme['spaces']] ?? start;
-          const endValue = theme.spaces[end as keyof DefaultTheme['spaces']] ?? end;
-          formattedCurr = `${startValue} ${endValue}`;
-        }
-
-        const value = Array.isArray(curr) ? formattedCurr : theme.spaces[curr];
-
         switch (index) {
           case 0:
-            return `${acc}${property}: ${value};`;
+            return `${acc}${property}: ${theme.spaces[curr]};`;
           case 1:
-            return `${acc}${theme.mediaQueries.tablet} { ${property}: ${value}; }`;
+            return `${acc}${theme.mediaQueries.tablet}{${property}: ${theme.spaces[curr]};}`;
           case 2:
-            return `${acc}${theme.mediaQueries.mobile} { ${property}: ${value}; }`;
+            return `${acc}${theme.mediaQueries.mobile}{${property}: ${theme.spaces[curr]};}`;
           default:
             return acc;
         }