fix: boxSizing COMPASS-9664 (#106)

Author: paula-stacho

src/components/canvas/canvas.tsx

@@ -32,6 +32,12 @@ const PRO_OPTIONS: ProOptions = {
 const ReactFlowWrapper = styled.div`
   height: 100%;
   background: ${props => props.theme.background};
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 `;
 
 const nodeTypes = {

src/components/edge/floating-edge.test.tsx

@@ -57,7 +57,7 @@ describe('floating-edge', () => {
       expect(path).toHaveAttribute('id', 'orders-to-employees');
       expect(path).toHaveAttribute(
         'd',
-        'M267 197.5L267 217.5L 267,240Q 267,245 272,245L 354,245Q 359,245 359,250L359 272.5L359 292.5',
+        'M263 189.5L263 209.5L 263,236Q 263,241 268,241L 358,241Q 363,241 363,246L363 272.5L363 292.5',
       );
     });
   });

src/components/edge/self-referencing-edge.test.tsx

@@ -53,7 +53,7 @@ describe('self-referencing-edge', () => {
       renderComponent();
       const path = screen.getByTestId('self-referencing-edge-employees-to-employees');
       expect(path).toHaveAttribute('id', 'employees-to-employees');
-      expect(path).toHaveAttribute('d', 'M422,292.5L422,262.5L584,262.5L584,355.5L551.5,355.5');
+      expect(path).toHaveAttribute('d', 'M422,292.5L422,262.5L584,262.5L584,351.5L551.5,351.5');
     });
   });
 

src/utilities/apply-layout.test.ts

@@ -64,14 +64,14 @@ describe('apply-layout', () => {
         ...nodes[1],
         position: {
           x: 12,
-          y: 86, // 12 + 44 (0 fields height) + 2*10 (padding) + 10 (extra padding)
+          y: 78, // 12 + 44 (0 fields height) + 2*10 (padding) + 2 (extra padding)
         },
       }),
       expect.objectContaining({
         ...nodes[2],
         position: {
           x: 12,
-          y: 160, // 86 + 44 (0 fields height) + 2*10 (padding) + 10 (extra padding)
+          y: 144, // 86 + 44 (0 fields height) + 2*10 (padding) + 2 (extra padding)
         },
       }),
     ]);
@@ -94,14 +94,14 @@ describe('apply-layout', () => {
         ...nodesWithOneField[1],
         position: {
           x: 12,
-          y: 104, // 12 + 62 (1 field height) + 2*10 (padding) + 10 (extra padding)
+          y: 96, // 12 + 62 (1 field height) + 2*10 (padding) + 2 (extra padding)
         },
       }),
       expect.objectContaining({
         ...nodesWithOneField[2],
         position: {
           x: 12,
-          y: 196, // 104 + 62 (1 field height) + 2*10 (padding) + 10 (extra padding)
+          y: 180, // 96 + 62 (1 field height) + 2*10 (padding) + 2 (extra padding)
         },
       }),
     ]);
@@ -124,14 +124,14 @@ describe('apply-layout', () => {
         ...baseNodes[1],
         position: {
           x: 12,
-          y: 104, // 12 + 62 (default height) + 2*10 (padding) + 10 (extra padding)
+          y: 96, // 12 + 62 (default height) + 2*10 (padding) + 2 (extra padding)
         },
       }),
       expect.objectContaining({
         ...baseNodes[2],
         position: {
           x: 12,
-          y: 196, // 104 + 62 (default height) + 2*10 (padding) + 10 (extra padding)
+          y: 180, // 96 + 62 (default height) + 2*10 (padding) + 2 (extra padding)
         },
       }),
     ]);
@@ -188,7 +188,7 @@ describe('apply-layout', () => {
         id: '1',
         position: {
           x: 12,
-          y: 86,
+          y: 78,
         },
       }),
       expect.objectContaining({
@@ -208,7 +208,7 @@ describe('apply-layout', () => {
         id: '3',
         position: {
           x: 12,
-          y: 240,
+          y: 224,
         },
       }),
     ]);

src/utilities/get-edge-params.test.ts

@@ -11,10 +11,10 @@ describe('get-edge-params', () => {
       );
       expect(result).toEqual({
         sourcePos: 'bottom',
-        sx: 267,
-        sy: 197.5,
+        sx: 263,
+        sy: 189.5,
         targetPos: 'top',
-        tx: 359,
+        tx: 363,
         ty: 292.5,
       });
     });

src/utilities/node-dimensions.ts

@@ -23,7 +23,7 @@ export const getNodeHeight = <N extends BaseNode | NodeProps | InternalNode>(nod
     }
   }
   const calculatedHeight =
-    DEFAULT_NODE_HEADER_HEIGHT + DEFAULT_FIELD_PADDING * 2 + fieldCount * DEFAULT_FIELD_HEIGHT + 10;
+    DEFAULT_NODE_HEADER_HEIGHT + DEFAULT_FIELD_PADDING * 2 + fieldCount * DEFAULT_FIELD_HEIGHT + 2;
   return calculatedHeight;
 };