fix: adjust marginUtility to spacingUtility

BREAKING CHANGE: marginUtility renamed to spacingUtility
kiwicom · Feb 24, 2023 · e9e2f09 · e9e2f09
1 parent 6c7607f
commit e9e2f09
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 30 deletions.
diff --git a/packages/orbit-components/src/Card/index.tsx b/packages/orbit-components/src/Card/index.tsx
@@ -11,7 +11,7 @@ import { ELEMENT_OPTIONS } from "../Heading/consts";
 import type { Props } from "./types";
 import type * as Common from "../common/types";
 import useTheme from "../hooks/useTheme";
-import { marginUtility } from "../utils/common";
+import { spacingUtility } from "../utils/common";
 
 export const StyledCard = styled.div<{
   spaceAfter?: Common.SpaceAfterSizes;
@@ -22,7 +22,7 @@ export const StyledCard = styled.div<{
     box-sizing: border-box;
     position: relative;
     font-family: ${theme.orbit.fontFamily};
-    ${marginUtility(margin)}
+    ${spacingUtility(margin)}
   `};
 `;
 

diff --git a/packages/orbit-components/src/Text/index.tsx b/packages/orbit-components/src/Text/index.tsx
@@ -15,7 +15,7 @@ import {
 import getSpacingToken from "../common/getSpacingToken";
 import { textAlign } from "../utils/rtl";
 import { getLinkStyle, StyledTextLink } from "../TextLink";
-import { marginUtility } from "../utils/common";
+import { spacingUtility } from "../utils/common";
 import useTheme from "../hooks/useTheme";
 import type { Props, Type, Weight } from "./types";
 
@@ -105,7 +105,7 @@ export const StyledText = styled(
     text-decoration: ${strikeThrough && `line-through`};
     font-style: ${italic && `italic`};
     margin: 0;
-    ${marginUtility(margin)};
+    ${spacingUtility(margin)};
 
     a:not(${StyledTextLink}) {
       ${getLinkStyle({ theme, $type })};

diff --git a/packages/orbit-components/src/primitives/IllustrationPrimitive/index.tsx b/packages/orbit-components/src/primitives/IllustrationPrimitive/index.tsx
@@ -5,7 +5,7 @@ import defaultTheme from "../../defaultTheme";
 import { SIZE_OPTIONS, baseURL } from "./consts";
 import getSpacingToken from "../../common/getSpacingToken";
 import type { Size, Props } from "./types";
-import { marginUtility } from "../../utils/common";
+import { spacingUtility } from "../../utils/common";
 import useTheme from "../../hooks/useTheme";
 
 const getHeightToken = ({ theme, size }) => {
@@ -48,7 +48,7 @@ export const StyledImage = styled.img.attrs<{
     max-width: 100%;
     background-color: ${theme.orbit.backgroundIllustration};
     flex-shrink: 0;
-    ${marginUtility(margin)};
+    ${spacingUtility(margin)};
   `};
 `;
 

diff --git a/packages/orbit-components/src/utils/common/__tests__/index.test.ts b/packages/orbit-components/src/utils/common/__tests__/index.test.ts
@@ -2,40 +2,58 @@ import * as utils from "..";
 
 describe("utils", () => {
   it("should have correct margin values", () => {
-    expect(utils.marginUtility("10px")).toMatchInlineSnapshot(`
+    expect(utils.spacingUtility("10px")).toMatchInlineSnapshot(`
       Array [
-        "margin:",
+        "margin",
+        ":",
         "10px",
         ";",
       ]
     `);
-    expect(utils.marginUtility(10)).toMatchInlineSnapshot(`
+    expect(utils.spacingUtility(10)).toMatchInlineSnapshot(`
       Array [
-        "margin:",
+        "margin",
+        ":",
         "10px",
         ";",
       ]
     `);
-    expect(utils.marginUtility({ top: "10px" })).toMatchInlineSnapshot(`
+    expect(utils.spacingUtility({ top: "10px" })).toMatchInlineSnapshot(`
       Array [
-        "margin-top:",
+        "margin",
+        "-top:",
         "10px",
-        ";margin-right:",
-        ";margin-bottom:",
-        ";margin-left:",
+        ";",
+        "margin",
+        "-right:",
+        ";",
+        "margin",
+        "-bottom:",
+        ";",
+        "margin",
+        "-left:",
         ";",
       ]
     `);
-    expect(utils.marginUtility({ top: 10, bottom: 2 })).toMatchInlineSnapshot(`
+    expect(utils.spacingUtility({ top: 10, bottom: 2 })).toMatchInlineSnapshot(`
       Array [
-        "margin-top:",
+        "margin",
+        "-top:",
         "10px",
-        ";margin-right:",
-        ";margin-bottom:",
+        ";",
+        "margin",
+        "-right:",
+        ";",
+        "margin",
+        "-bottom:",
         "2px",
-        ";margin-left:",
+        ";",
+        "margin",
+        "-left:",
         ";",
       ]
     `);
+    expect(utils.spacingUtility({ top: 10, bottom: 3 }, "padding"));
+    expect(utils.spacingUtility("10", "padding"));
   });
 });
diff --git a/packages/orbit-components/src/utils/common/index.ts b/packages/orbit-components/src/utils/common/index.ts
@@ -15,22 +15,23 @@ const setValue = (value?: string | number): string | null => {
   return typeof value === "number" && value !== 0 ? `${value}px` : String(value);
 };
 
-export const marginUtility = (
-  margin?: React.CSSProperties["margin"] | ObjectProperty,
+export const spacingUtility = (
+  spacing?: string | number | ObjectProperty,
+  prop: "padding" | "margin" = "margin",
 ): FlattenSimpleInterpolation | null => {
-  if (!margin) return null;
-  if (typeof margin === "string" || typeof margin === "number") {
+  if (!spacing) return null;
+  if (typeof spacing === "string" || typeof spacing === "number") {
     return css`
-      margin: ${setValue(margin)};
+      ${prop}: ${setValue(spacing)};
     `;
   }
 
-  const { top, right, bottom, left } = margin;
+  const { top, right, bottom, left } = spacing;
 
   return css`
-    margin-top: ${setValue(top)};
-    margin-right: ${setValue(right)};
-    margin-bottom: ${setValue(bottom)};
-    margin-left: ${setValue(left)};
+    ${prop}-top: ${setValue(top)};
+    ${prop}-right: ${setValue(right)};
+    ${prop}-bottom: ${setValue(bottom)};
+    ${prop}-left: ${setValue(left)};
   `;
 };