feat: Reintroduce spacing with unit (#74)

Bojagi · Nov 23, 2024 · 0c4cadf · 0c4cadf
1 parent 47fdec0
commit 0c4cadf
Show file tree

Hide file tree

Showing 55 changed files with 263 additions and 179 deletions.
diff --git a/benchmark/button/SimpleThemedButton.tsx b/benchmark/button/SimpleThemedButton.tsx
@@ -22,7 +22,7 @@ const SimpleThemedButton = styled.button`
 `;
 
 const Wrapper = styled.div`
-  margin-bottom: ${getSpacing(1)};
+  margin-bottom: ${getSpacing(0.25)};
 `;
 
 export const SimpleThemedButtonApp = () => (

diff --git a/src/Avatar/Avatar.mdx b/src/Avatar/Avatar.mdx
@@ -19,28 +19,28 @@ Renders an image with square dimensions and masks it with a circle or rounded co
 Avatars can have different sizes, spaning from `tiny` to `large`. By default avatars are square.
 
 <Playground>
-  <Flex mx={-4}>
+  <Flex mx={-1}>
     <Avatar
-      mx={4}
+      mx={1}
       size="large"
       src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
       variant="square"
     />
     <Avatar
       size="medium"
-      mx={4}
+      mx={1}
       src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
       variant="square"
     />
     <Avatar
       size="small"
-      mx={4}
+      mx={1}
       src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
       variant="square"
     />
     <Avatar
       size="tiny"
-      mx={4}
+      mx={1}
       src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
       variant="square"
     />

diff --git a/src/Avatar/Avatar.stories.tsx b/src/Avatar/Avatar.stories.tsx
@@ -8,28 +8,28 @@ export default {
 };
 
 const BaseStory = (args) => (
-  <Flex mx={-4}>
+  <Flex mx={-1}>
     <Avatar
-      mx={4}
+      mx={1}
       size="large"
       src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
       {...args}
     />
     <Avatar
       size="medium"
-      mx={4}
+      mx={1}
       src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
       {...args}
     />
     <Avatar
       size="small"
-      mx={4}
+      mx={1}
       src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
       {...args}
     />
     <Avatar
       size="tiny"
-      mx={4}
+      mx={1}
       src="https://avatars.githubusercontent.com/u/36902682?s=200&v=4"
       {...args}
     />

diff --git a/src/Box/Box.mdx b/src/Box/Box.mdx
@@ -74,9 +74,9 @@ align the left and right edges back to the content outside.
   <>
     <Box height={100} mb={4} bgColor="green"/>
     <Box display="flex" mx={-4}>
-      <Box mx={4} width={200} height={150} bgColor="red" />
-      <Box mx={4} width={200} height={150} bgColor="red" />
-      <Box mx={4} width={200} height={150} bgColor="red" />
+      <Box mx={1} width={200} height={150} bgColor="red" />
+      <Box mx={1} width={200} height={150} bgColor="red" />
+      <Box mx={1} width={200} height={150} bgColor="red" />
     </Box>
   </>
 </Playground>

diff --git a/src/Box/Box.tsx b/src/Box/Box.tsx
@@ -1,16 +1,8 @@
 import styled from '@emotion/styled';
-import { space } from '@styled-system/space';
 import { layout } from '@styled-system/layout';
 import { flexbox } from '@styled-system/flexbox';
 import { position } from '@styled-system/position';
-import { border } from '@styled-system/border';
-import type {
-  SpaceProps,
-  LayoutProps,
-  FlexboxProps,
-  PositionProps,
-  BorderProps,
-} from 'styled-system';
+import type { LayoutProps, FlexboxProps, PositionProps, PaddingProps } from 'styled-system';
 import { system } from '@styled-system/core';
 
 import { color, ColorProps } from './color';
@@ -19,6 +11,7 @@ import { baseStyle } from '../shared/baseStyle';
 import { getByPath } from '../utils/getByPath';
 import { themeVars } from '../theme/themeVars';
 import { interpolateCssProp } from '../utils/interpolateCssProp';
+import { margin, MarginProps, padding } from './spacingInterpolation';
 
 export interface BoxCssProps {
   css?: CssFunctionReturn;
@@ -28,17 +21,17 @@ export interface BoxFillableProps {
   fillColor?: string;
 }
 
-export type BoxProps = SpaceProps &
+export type BoxProps = MarginProps &
+  PaddingProps &
   ColorProps &
   LayoutProps &
-  BorderProps &
   FlexboxProps &
   PositionProps &
   BoxFillableProps &
   BoxCssProps;
 
 export const boxInterpolateFn = (props) =>
-  [space, color, layout, border, flexbox, position].map((fn) => fn(props));
+  [margin, padding, color, layout, flexbox, position].map((fn) => fn(props));
 
 export const Box = styled.div<BoxProps>`
   ${baseStyle}
@@ -52,10 +45,15 @@ export const Box = styled.div<BoxProps>`
   ${boxInterpolateFn}
 `;
 
-export type LayoutBoxProps = SpaceProps & FlexboxProps & LayoutProps & PositionProps & BoxCssProps;
+export type LayoutBoxProps = MarginProps &
+  PaddingProps &
+  FlexboxProps &
+  LayoutProps &
+  PositionProps &
+  BoxCssProps;
 
 export const layoutInterpolationFn = (props) =>
-  [space, layout, flexbox, position]
+  [margin, padding, layout, flexbox, position]
     .map((fn) => fn(props))
     .reduce((acc, styles) => ({ ...acc, ...styles }), {});
 

diff --git a/src/Box/spacingInterpolation.ts b/src/Box/spacingInterpolation.ts
@@ -0,0 +1,84 @@
+import { system } from '@styled-system/core';
+
+const DEFAULT_SCALE = 8;
+
+const getSpacing = (value: any, scale: number) => {
+  if (value === undefined) {
+    return undefined;
+  }
+
+  if (typeof value === 'string') {
+    return value;
+  }
+  return `${value * scale}px`;
+};
+
+interface MarginProps {
+  m?: string | number;
+  mt?: string | number;
+  mr?: string | number;
+  mb?: string | number;
+  ml?: string | number;
+  mx?: string | number;
+  my?: string | number;
+}
+
+interface PaddingProps {
+  p?: string | number;
+  pt?: string | number;
+  pr?: string | number;
+  pb?: string | number;
+  pl?: string | number;
+  px?: string | number;
+  py?: string | number;
+}
+
+const getConfig = (property: string, shortHand: string) => ({
+  [shortHand]: {
+    property,
+    scale: 'spacing',
+    transform: getSpacing,
+    defaultScale: DEFAULT_SCALE,
+  },
+  [`${shortHand}t`]: {
+    property: `${property}Top`,
+    scale: 'spacing',
+    transform: getSpacing,
+    defaultScale: DEFAULT_SCALE,
+  },
+  [`${shortHand}r`]: {
+    property: `${property}Right`,
+    scale: 'spacing',
+    transform: getSpacing,
+    defaultScale: DEFAULT_SCALE,
+  },
+  [`${shortHand}b`]: {
+    property: `${property}Bottom`,
+    scale: 'spacing',
+    transform: getSpacing,
+    defaultScale: DEFAULT_SCALE,
+  },
+  [`${shortHand}l`]: {
+    property: `${property}Left`,
+    scale: 'spacing',
+    transform: getSpacing,
+    defaultScale: DEFAULT_SCALE,
+  },
+  [`${shortHand}x`]: {
+    properties: [`${property}Left`, `${property}Right`],
+    scale: 'spacing',
+    transform: getSpacing,
+    defaultScale: DEFAULT_SCALE,
+  },
+  [`${shortHand}y`]: {
+    properties: [`${property}Top`, `${property}Bottom`],
+    scale: 'spacing',
+    transform: getSpacing,
+    defaultScale: DEFAULT_SCALE,
+  },
+});
+
+const margin = system(getConfig('margin', 'm'));
+const padding = system(getConfig('padding', 'p'));
+
+export { margin, padding, MarginProps, PaddingProps };
diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx
@@ -22,13 +22,13 @@ Buttons can be either `small`, `medium` or `large`. Default size is `medium`.
 
 <Playground>
   <Box mx={-4}>  
-    <Button size="small" mx={4}>
+    <Button size="small" mx={1}>
       Small
     </Button>
-    <Button mx={4}>
+    <Button mx={1}>
       Medium
     </Button>
-    <Button size="large" mx={4}>
+    <Button size="large" mx={1}>
       Large
     </Button>
   </Box>
@@ -43,16 +43,16 @@ You can also use the color `positive` for construcive or positive actions.
 
 <Playground>
   <Box mx={-4}>  
-    <Button mx={4}>
+    <Button mx={1}>
       Brand button
     </Button>
-    <Button color="plain" mx={4}>
+    <Button color="plain" mx={1}>
       Plain button
     </Button>
-    <Button color="positive" mx={4}>
+    <Button color="positive" mx={1}>
       Positive button
     </Button>
-    <Button color="negative" mx={4}>
+    <Button color="negative" mx={1}>
       Negative button
     </Button>
   </Box>
@@ -67,13 +67,13 @@ where `secondary` is more important than `text`.
 
 <Playground>
   <Box mx={-4}>  
-    <Button mx={4}>
+    <Button mx={1}>
       Accept
     </Button>
-    <Button variant="secondary" mx={4}>
+    <Button variant="secondary" mx={1}>
       Cancel
     </Button>
-    <Button variant="text" mx={4}>
+    <Button variant="text" mx={1}>
       read more
     </Button>
   </Box>
@@ -87,13 +87,13 @@ making it camel case (e.g. `primaryInverted`).
 
 <Playground>
   <Box borderRadius={4} py={6} px={4}  bgColor="brand.main">  
-    <Button variant="primaryInverted" mx={4}>
+    <Button variant="primaryInverted" mx={1}>
       Accept
     </Button>
-    <Button variant="secondaryInverted" mx={4}>
+    <Button variant="secondaryInverted" mx={1}>
       Cancel
     </Button>
-    <Button variant="textInverted" mx={4}>
+    <Button variant="textInverted" mx={1}>
       read more
     </Button>
   </Box>
@@ -108,16 +108,16 @@ Colors are applied based on the `variant` and `color` prop.
 
 <Playground>
   <Box display="flex" alignItems="center" mx={-4}>
-    <Button mx={4} endIcon={<GitPullRequest size={16} />}>
+    <Button mx={1} endIcon={<GitPullRequest size={16} />}>
       Accept
     </Button>
-    <Button mx={4} startIcon={<GitPullRequest size={16} />}>
+    <Button mx={1} startIcon={<GitPullRequest size={16} />}>
       Cancel
     </Button>
-    <Button mx={4} variant="secondary" endIcon={<GitPullRequest size={16} />}>
+    <Button mx={1} variant="secondary" endIcon={<GitPullRequest size={16} />}>
       Accept
     </Button>
-    <Button mx={4} variant="secondary" startIcon={<GitPullRequest size={16} />}>
+    <Button mx={1} variant="secondary" startIcon={<GitPullRequest size={16} />}>
       Cancel
     </Button>
   </Box>

diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
@@ -24,22 +24,22 @@ const SetOfButtons = ({ inverted, ...args }) => (
     flexDirection={args.fullWidth ? 'column' : 'row'}
   >
     <ButtonBox inverted={inverted} invertedBgColor="brand.main">
-      <Button mx={4} mb={args.fullWidth ? 4 : 0} {...args} color="brand">
+      <Button mx={1} mb={args.fullWidth ? 4 : 0} {...args} color="brand">
         Brand
       </Button>
     </ButtonBox>
     <ButtonBox inverted={inverted} invertedBgColor="common.black">
-      <Button mx={4} mb={args.fullWidth ? 4 : 0} {...args} color="plain">
+      <Button mx={1} mb={args.fullWidth ? 4 : 0} {...args} color="plain">
         Plain
       </Button>
     </ButtonBox>
     <ButtonBox inverted={inverted} invertedBgColor="positive.main">
-      <Button mx={4} mb={args.fullWidth ? 4 : 0} {...args} color="positive">
+      <Button mx={1} mb={args.fullWidth ? 4 : 0} {...args} color="positive">
         Positive
       </Button>
     </ButtonBox>
     <ButtonBox inverted={inverted} invertedBgColor="negative.main">
-      <Button mx={4} mb={args.fullWidth ? 4 : 0} {...args} color="negative">
+      <Button mx={1} mb={args.fullWidth ? 4 : 0} {...args} color="negative">
         Negative
       </Button>
     </ButtonBox>

diff --git a/src/Button/styles.ts b/src/Button/styles.ts
@@ -92,9 +92,9 @@ const gray = themeVars.colors.gray;
 
 export const buttonStyles: ButtonStyles = {
   base: {
-    borderRadius: getSpacing(2),
+    borderRadius: getSpacing(0.5),
     icon: {
-      gap: getSpacing(4),
+      gap: getSpacing(1),
       size: {
         small: '20px',
         medium: '20px',
@@ -106,7 +106,7 @@ export const buttonStyles: ButtonStyles = {
     },
     borderSize: 1,
     focus: {
-      outlineSize: getSpacing(2),
+      outlineSize: getSpacing(0.5),
     },
     active: {
       outlineSize: getSpacing(0.5),

diff --git a/src/ButtonBar/styles.ts b/src/ButtonBar/styles.ts
@@ -9,5 +9,5 @@ export interface ButtonBarStyles extends BaseStyles<ButtonBarStyleProperties> {
 }
 
 export const buttonBarStyles: ButtonBarStyles = {
-  gap: getSpacing(2),
+  gap: getSpacing(0.5),
 };
diff --git a/src/Card/styles.ts b/src/Card/styles.ts
@@ -14,8 +14,8 @@ export interface CardStyles extends BaseStyles<CardStyleProperties> {
 }
 
 export const cardStyles: CardStyles = {
-  padding: getSpacing(6),
-  borderRadius: getSpacing(4),
+  padding: getSpacing(2),
+  borderRadius: getSpacing(1),
   backgroundColor: themeVars.colors.common.white,
   color: themeVars.colors.common.whiteContrastText,
   shadow: ['0px 1px 2px rgba(0, 0, 0, 0.1)', '0px 4px 10px rgba(0, 0, 0, 0.05)'],