From fc123dda01795fbd4703362dd2688c5ac1940728 Mon Sep 17 00:00:00 2001
From: Eliad Moosavi <theiliad@users.noreply.github.com>
Date: Mon, 13 Sep 2021 15:48:21 -0400
Subject: [PATCH] fix(core): diagram rendering issues in safari (#1150)

* fix(core): diagram stroke-dasharray issues in safari

* fix react network components

* fix angular network components

* update storybook styling
---
 .../diagrams/card-node/card-node.component.ts | 138 +++++++-------
 .../shape-node/shape-node.component.ts        | 179 ++++++++++--------
 .../stories/diagrams/0_diagram.stories.ts     |   6 +-
 .../stories/diagrams/shape-node.stories.ts    |   4 +-
 .../src/styles/components/diagrams/_edge.scss |   8 +-
 .../react/src/diagrams/CardNode/CardNode.tsx  |   3 +-
 .../src/diagrams/ShapeNode/ShapeNode.tsx      |   8 +-
 .../stories/diagrams/0_Diagrams.stories.js    |  11 +-
 .../stories/diagrams/ShapeNode.stories.js     |   9 +-
 9 files changed, 203 insertions(+), 163 deletions(-)

diff --git a/packages/angular/src/diagrams/card-node/card-node.component.ts b/packages/angular/src/diagrams/card-node/card-node.component.ts
index 018bf6d537..06229cd46c 100644
--- a/packages/angular/src/diagrams/card-node/card-node.component.ts
+++ b/packages/angular/src/diagrams/card-node/card-node.component.ts
@@ -1,79 +1,85 @@
-import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
-import settings from "carbon-components/src/globals/js/settings";
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import settings from 'carbon-components/src/globals/js/settings';
 
 const { prefix } = settings;
 
 @Component({
-	selector: "ibm-diagram-card-node",
+	selector: 'ibm-diagram-card-node',
 	template: `
-	<ng-container [ngSwitch]="component">
-		<xhtml:div
-			*ngSwitchCase="'div'"
-			[ngClass]="[
-				namespace,
-				stacked ? namespace + '--stacked' : '',
-				namespace + '--' + component
-			]"
-			[ngStyle]="{'border-color': color}"
-			(mouseenter)="mouseEnter.emit($event)"
-			(mouseover)="mouseOver.emit($event)"
-			(mouseout)="mouseOut.emit($event)"
-			(mouseleave)="mouseLeave.emit($event)"
-			(mousemove)="mouseMove.emit($event)"
-			tabindex="0"
-		>
-			<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-		</xhtml:div>
+		<ng-container [ngSwitch]="component">
+			<xhtml:div
+				*ngSwitchCase="'div'"
+				[ngClass]="[
+					namespace,
+					stacked ? namespace + '--stacked' : '',
+					namespace + '--' + component
+				]"
+				[ngStyle]="{
+					'border-color': color,
+					position: position
+				}"
+				(mouseenter)="mouseEnter.emit($event)"
+				(mouseover)="mouseOver.emit($event)"
+				(mouseout)="mouseOut.emit($event)"
+				(mouseleave)="mouseLeave.emit($event)"
+				(mousemove)="mouseMove.emit($event)"
+				tabindex="0"
+			>
+				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
+			</xhtml:div>
 
-		<xhtml:button
-			*ngSwitchCase="'button'"
-			[ngClass]="[
-				namespace,
-				stacked ? namespace + '--stacked' : '',
-				namespace + '--' + component
-			]"
-			[ngStyle]="{'border-color': color}"
-			(click)="click.emit($event)"
-			(mouseenter)="mouseEnter.emit($event)"
-			(mouseover)="mouseOver.emit($event)"
-			(mouseout)="mouseOut.emit($event)"
-			(mouseleave)="mouseLeave.emit($event)"
-			(mousemove)="mouseMove.emit($event)"
-			tabindex="0"
-		>
-			<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-		</xhtml:button>
+			<xhtml:button
+				*ngSwitchCase="'button'"
+				[ngClass]="[
+					namespace,
+					stacked ? namespace + '--stacked' : '',
+					namespace + '--' + component
+				]"
+				[ngStyle]="{
+					'border-color': color,
+					position: position
+				}"
+				(click)="click.emit($event)"
+				(mouseenter)="mouseEnter.emit($event)"
+				(mouseover)="mouseOver.emit($event)"
+				(mouseout)="mouseOut.emit($event)"
+				(mouseleave)="mouseLeave.emit($event)"
+				(mousemove)="mouseMove.emit($event)"
+				tabindex="0"
+			>
+				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
+			</xhtml:button>
 
-		<xhtml:a
-			*ngSwitchCase="'a'"
-			[ngClass]="[
-				namespace,
-				stacked ? namespace + '--stacked' : '',
-				namespace + '--' + component
-			]"
-			[attr.href]="href"
-			[ngStyle]="{'border-color': color}"
-			(mouseenter)="mouseEnter.emit($event)"
-			(mouseover)="mouseOver.emit($event)"
-			(mouseout)="mouseOut.emit($event)"
-			(mouseleave)="mouseLeave.emit($event)"
-			(mousemove)="mouseMove.emit($event)"
-			tabindex="0"
-		>
-			<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-		</xhtml:a>
-	</ng-container>
-	<ng-template #nodeTemplate>
-		<ng-content></ng-content>
-	</ng-template>
-	`
+			<xhtml:a
+				*ngSwitchCase="'a'"
+				[ngClass]="[
+					namespace,
+					stacked ? namespace + '--stacked' : '',
+					namespace + '--' + component
+				]"
+				[attr.href]="href"
+				[ngStyle]="{ 'border-color': color, position: position }"
+				(mouseenter)="mouseEnter.emit($event)"
+				(mouseover)="mouseOver.emit($event)"
+				(mouseout)="mouseOut.emit($event)"
+				(mouseleave)="mouseLeave.emit($event)"
+				(mousemove)="mouseMove.emit($event)"
+				tabindex="0"
+			>
+				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
+			</xhtml:a>
+		</ng-container>
+		<ng-template #nodeTemplate>
+			<ng-content></ng-content>
+		</ng-template>
+	`,
 })
-
 export class CardNodeComponent implements OnInit {
-	@Input() as = "div";
+	@Input() as = 'div';
 	@Input() href: string = null;
 	@Input() color;
 	@Input() stacked;
+	@Input() position: string = 'static';
 
 	@Output() click: EventEmitter<any> = new EventEmitter<any>();
 	@Output() mouseEnter: EventEmitter<any> = new EventEmitter<any>();
@@ -84,11 +90,11 @@ export class CardNodeComponent implements OnInit {
 
 	namespace = `${prefix}--cc--card-node`;
 
-	component = "div";
+	component = 'div';
 
 	ngOnInit() {
 		if (this.href) {
-			this.component = "a";
+			this.component = 'a';
 		} else {
 			this.component = this.as;
 		}
diff --git a/packages/angular/src/diagrams/shape-node/shape-node.component.ts b/packages/angular/src/diagrams/shape-node/shape-node.component.ts
index de5318be98..f5a0952705 100644
--- a/packages/angular/src/diagrams/shape-node/shape-node.component.ts
+++ b/packages/angular/src/diagrams/shape-node/shape-node.component.ts
@@ -1,94 +1,118 @@
-import { Component, Input, Output, EventEmitter, TemplateRef, OnInit } from "@angular/core";
-import settings from "carbon-components/src/globals/js/settings";
+import {
+	Component,
+	Input,
+	Output,
+	EventEmitter,
+	TemplateRef,
+	OnInit,
+} from '@angular/core';
+import settings from 'carbon-components/src/globals/js/settings';
 
 const { prefix } = settings;
 
 @Component({
-	selector: "ibm-diagram-shape-node",
+	selector: 'ibm-diagram-shape-node',
 	template: `
-	<ng-container [ngSwitch]="component">
+		<ng-container [ngSwitch]="component">
+			<xhtml:div
+				*ngSwitchCase="'div'"
+				[ngClass]="[
+					namespace,
+					stacked ? namespace + '--stacked' : '',
+					shape ? namespace + '--' + shape : '',
+					namespace + '--' + component
+				]"
+				[ngStyle]="{
+					'height.px': size,
+					'width.px': size,
+					position: position
+				}"
+				(mouseenter)="mouseEnter.emit($event)"
+				(mouseover)="mouseOver.emit($event)"
+				(mouseout)="mouseOut.emit($event)"
+				(mouseleave)="mouseLeave.emit($event)"
+				(mousemove)="mouseMove.emit($event)"
+				tabindex="0"
+			>
+				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
+			</xhtml:div>
 
-		<xhtml:div
-			*ngSwitchCase="'div'"
-			[ngClass]="[
-				namespace,
-				stacked ? namespace + '--stacked' : '',
-				shape ? namespace + '--' + shape : '',
-				namespace + '--' + component
-			]"
-			[ngStyle]="{'height.px': size, 'width.px': size}"
-			(mouseenter)="mouseEnter.emit($event)"
-			(mouseover)="mouseOver.emit($event)"
-			(mouseout)="mouseOut.emit($event)"
-			(mouseleave)="mouseLeave.emit($event)"
-			(mousemove)="mouseMove.emit($event)"
-			tabindex="0"
-		>
-			<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-		</xhtml:div>
+			<xhtml:button
+				*ngSwitchCase="'button'"
+				[ngClass]="[
+					namespace,
+					stacked ? namespace + '--stacked' : '',
+					shape ? namespace + '--' + shape : '',
+					namespace + '--' + component
+				]"
+				[ngStyle]="{
+					'height.px': size,
+					'width.px': size,
+					position: position
+				}"
+				(click)="click.emit($event)"
+				(mouseenter)="mouseEnter.emit($event)"
+				(mouseover)="mouseOver.emit($event)"
+				(mouseout)="mouseOut.emit($event)"
+				(mouseleave)="mouseLeave.emit($event)"
+				(mousemove)="mouseMove.emit($event)"
+				tabindex="0"
+			>
+				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
+			</xhtml:button>
 
-		<xhtml:button
-			*ngSwitchCase="'button'"
-			[ngClass]="[
-				namespace,
-				stacked ? namespace + '--stacked' : '',
-				shape ? namespace + '--' + shape : '',
-				namespace + '--' + component
-			]"
-			[ngStyle]="{'height.px': size, 'width.px': size}"
-			(click)="click.emit($event)"
-			(mouseenter)="mouseEnter.emit($event)"
-			(mouseover)="mouseOver.emit($event)"
-			(mouseout)="mouseOut.emit($event)"
-			(mouseleave)="mouseLeave.emit($event)"
-			(mousemove)="mouseMove.emit($event)"
-			tabindex="0"
-		>
-			<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-		</xhtml:button>
+			<xhtml:a
+				*ngSwitchCase="'a'"
+				[ngClass]="[
+					namespace,
+					stacked ? namespace + '--stacked' : '',
+					shape ? namespace + '--' + shape : '',
+					namespace + '--' + component
+				]"
+				[attr.href]="href"
+				[ngStyle]="{
+					'height.px': size,
+					'width.px': size,
+					position: position
+				}"
+				(mouseenter)="mouseEnter.emit($event)"
+				(mouseover)="mouseOver.emit($event)"
+				(mouseout)="mouseOut.emit($event)"
+				(mouseleave)="mouseLeave.emit($event)"
+				(mousemove)="mouseMove.emit($event)"
+				tabindex="0"
+			>
+				<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
+			</xhtml:a>
+		</ng-container>
 
-		<xhtml:a
-			*ngSwitchCase="'a'"
-			[ngClass]="[
-				namespace,
-				stacked ? namespace + '--stacked' : '',
-				shape ? namespace + '--' + shape : '',
-				namespace + '--' + component
-			]"
-			[attr.href]="href"
-			[ngStyle]="{'height.px': size, 'width.px': size}"
-			(mouseenter)="mouseEnter.emit($event)"
-			(mouseover)="mouseOver.emit($event)"
-			(mouseout)="mouseOut.emit($event)"
-			(mouseleave)="mouseLeave.emit($event)"
-			(mousemove)="mouseMove.emit($event)"
-			tabindex="0"
-		>
-			<ng-container *ngTemplateOutlet="nodeTemplate"></ng-container>
-		</xhtml:a>
-	</ng-container>
-
-	<ng-template #nodeTemplate>
-		<div *ngIf="renderIcon" attr.class="{{ namespace + '__icon' }}" >
-			<ng-container *ngTemplateOutlet="renderIcon"></ng-container>
-		</div>
-		<div attr.class="{{ namespace + '__body' }}">
-            <div attr.class="{{ namespace + '__title' }}">{{title}}</div>
-            <div attr.class="{{ namespace + '__subtitle' }}">{{subtitle}}</div>
-        </div>
-	</ng-template>
-	`
+		<ng-template #nodeTemplate>
+			<div *ngIf="renderIcon" attr.class="{{ namespace + '__icon' }}">
+				<ng-container *ngTemplateOutlet="renderIcon"></ng-container>
+			</div>
+			<div
+				attr.class="{{ namespace + '__body' }}"
+				[ngStyle]="{ position: bodyPosition }"
+			>
+				<div attr.class="{{ namespace + '__title' }}">{{ title }}</div>
+				<div attr.class="{{ namespace + '__subtitle' }}">
+					{{ subtitle }}
+				</div>
+			</div>
+		</ng-template>
+	`,
 })
-
 export class ShapeNodeComponent implements OnInit {
-	@Input() as = "div";
+	@Input() as = 'div';
 	@Input() href: string = null;
 	@Input() renderIcon: TemplateRef<any>;
 	@Input() size = 48;
 	@Input() stacked: boolean;
-	@Input() shape: "circle" | "square" | "rounded-square" = "circle";
+	@Input() shape: 'circle' | 'square' | 'rounded-square' = 'circle';
 	@Input() subtitle: string;
 	@Input() title: string;
+	@Input() position: string = 'fixed';
+	@Input() bodyPosition: string = 'absolute';
 
 	@Output() click: EventEmitter<any> = new EventEmitter<any>();
 	@Output() mouseEnter: EventEmitter<any> = new EventEmitter<any>();
@@ -98,14 +122,13 @@ export class ShapeNodeComponent implements OnInit {
 	@Output() mouseMove: EventEmitter<any> = new EventEmitter<any>();
 
 	namespace = `${prefix}--cc--shape-node`;
-	component = "div";
+	component = 'div';
 
 	ngOnInit() {
 		if (this.href) {
-			this.component = "a";
+			this.component = 'a';
 		} else {
 			this.component = this.as;
 		}
 	}
-
 }
diff --git a/packages/angular/stories/diagrams/0_diagram.stories.ts b/packages/angular/stories/diagrams/0_diagram.stories.ts
index d9ca85b83f..e3e76475e3 100644
--- a/packages/angular/stories/diagrams/0_diagram.stories.ts
+++ b/packages/angular/stories/diagrams/0_diagram.stories.ts
@@ -78,7 +78,7 @@ stories.add('Start here', () => ({
 
 			<iframe
 				src="https://codesandbox.io/embed/carbon-charts-react-elkjs-diagram-b9xyp?fontsize=14&hidenavigation=1&theme=dark&view=preview"
-				style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;"
+				style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden; margin-top: 2em;"
 				title="carbon-charts-react-elkjs-diagram"
 				allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
 				sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"></iframe>
@@ -100,7 +100,7 @@ const SimpleStatic = `
 	<div class="demo-desktop-only">
 		<div class="cp-message">This is a desktop-only example</div>
 
-		<svg height="124" width="600" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+		<svg height="124" width="600" style="margin-top: 1em;" xmlns:xhtml="http://www.w3.org/1999/xhtml">
 			<svg:defs>
 				<svg:marker ibm-graph-marker-arrow-right [id]="markerEnd"></svg:marker>
 			</svg:defs>
@@ -189,7 +189,7 @@ const ProgrammaticStatic = `
 	<div class="demo-desktop-only">
 		<div class="cp-message">This is a desktop-only example</div>
 
-		<svg height="320" width="800" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+		<svg height="320" width="800" style="margin-top: 1.5em;" xmlns:xhtml="http://www.w3.org/1999/xhtml">
 			<svg:g ibm-graph-edge *ngFor="let edge of edgeMapped" [source]="edge.source" [target]="edge.target" [path]="edge.path && edge.path(edge.source, edge.target)" [variant]="edge.variant"></svg:g>
 			<svg:foreignObject *ngFor="let node of nodeData" style="overflow: visible" [attr.height]="node.nodeHeight" [attr.width]="node.nodeWidth" attr.transform="translate({{node.x}},{{node.y}})">
 				<xhtml:div *ngIf="node.circle">
diff --git a/packages/angular/stories/diagrams/shape-node.stories.ts b/packages/angular/stories/diagrams/shape-node.stories.ts
index f820ed9c35..ee5c5c3111 100644
--- a/packages/angular/stories/diagrams/shape-node.stories.ts
+++ b/packages/angular/stories/diagrams/shape-node.stories.ts
@@ -85,8 +85,8 @@ storiesOf('Diagrams|Nodes/Shape', module)
 	}))
 	.add('Inherited dimensions', () => ({
 		template: getTemplate(`
-		<div style="height: 64px; width: 64px">
-			<ibm-diagram-shape-node [title]="title" [renderIcon]="iconTemplate" [size]="'100%'"></ibm-diagram-shape-node>
+		<div style="height: 64px; width: 64px; position: relative;">
+			<ibm-diagram-shape-node [title]="title" [renderIcon]="iconTemplate" [size]="'100%'" position="static"></ibm-diagram-shape-node>
 			<ng-template #iconTemplate>
 				<svg ibmIconScreen size="16"></svg>
 			</ng-template>
diff --git a/packages/core/src/styles/components/diagrams/_edge.scss b/packages/core/src/styles/components/diagrams/_edge.scss
index 770dc20792..2297bc6b49 100644
--- a/packages/core/src/styles/components/diagrams/_edge.scss
+++ b/packages/core/src/styles/components/diagrams/_edge.scss
@@ -32,19 +32,19 @@
 	}
 
 	.#{$prefix}--#{$charts-prefix}--edge--dash-sm {
-		stroke-dasharray: carbon--mini-units(0.25) carbon--mini-units(0.5);
+		stroke-dasharray: 2 4;
 	}
 
 	.#{$prefix}--#{$charts-prefix}--edge--dash-md {
-		stroke-dasharray: carbon--mini-units(0.5) carbon--mini-units(0.5);
+		stroke-dasharray: 4 4;
 	}
 
 	.#{$prefix}--#{$charts-prefix}--edge--dash-lg {
-		stroke-dasharray: carbon--mini-units(1) carbon--mini-units(0.5);
+		stroke-dasharray: 8 4;
 	}
 
 	.#{$prefix}--#{$charts-prefix}--edge--dash-xl {
-		stroke-dasharray: carbon--mini-units(2) carbon--mini-units(0.5);
+		stroke-dasharray: 16 4;
 	}
 
 	.#{$prefix}--#{$charts-prefix}--edge--tunnel {
diff --git a/packages/react/src/diagrams/CardNode/CardNode.tsx b/packages/react/src/diagrams/CardNode/CardNode.tsx
index c7db79c2ea..4d54ca8a38 100644
--- a/packages/react/src/diagrams/CardNode/CardNode.tsx
+++ b/packages/react/src/diagrams/CardNode/CardNode.tsx
@@ -21,6 +21,7 @@ const CardNode = ({
 	onMouseLeave = null,
 	onMouseMove = null,
 	onClick = null,
+	position = 'static',
 	stacked,
 }: any) => {
 	let Component = 'div';
@@ -48,7 +49,7 @@ const CardNode = ({
 			onMouseOut={onMouseOut}
 			onMouseLeave={onMouseLeave}
 			onMouseMove={onMouseMove}
-			style={{ borderColor: color }}
+			style={{ borderColor: color, position }}
 			tabIndex={0}>
 			{children}
 		</Component>
diff --git a/packages/react/src/diagrams/ShapeNode/ShapeNode.tsx b/packages/react/src/diagrams/ShapeNode/ShapeNode.tsx
index 66c43a1dbb..a0c4cbc69c 100644
--- a/packages/react/src/diagrams/ShapeNode/ShapeNode.tsx
+++ b/packages/react/src/diagrams/ShapeNode/ShapeNode.tsx
@@ -18,6 +18,8 @@ const ShapeNode = ({
 	onMouseOut = null,
 	onMouseLeave = null,
 	onMouseMove = null,
+	position = 'fixed',
+	bodyPosition = 'absolute',
 	renderIcon,
 	size = 48,
 	stacked,
@@ -58,10 +60,12 @@ const ShapeNode = ({
 			onMouseOut={onMouseOut}
 			onMouseLeave={onMouseLeave}
 			onMouseMove={onMouseMove}
-			style={{ height: size, width: size }}
+			style={{ height: size, width: size, position }}
 			tabIndex={0}>
 			<div className={`${namespace}__icon`}>{renderIcon}</div>
-			<div className={`${namespace}__body`}>
+			<div
+				className={`${namespace}__body`}
+				style={{ position: bodyPosition }}>
 				{titleElement}
 				{subtitleElement}
 			</div>
diff --git a/packages/react/stories/diagrams/0_Diagrams.stories.js b/packages/react/stories/diagrams/0_Diagrams.stories.js
index cc6b858630..43f9413f8e 100644
--- a/packages/react/stories/diagrams/0_Diagrams.stories.js
+++ b/packages/react/stories/diagrams/0_Diagrams.stories.js
@@ -100,6 +100,7 @@ stories.add('Start here', () => {
 				style={{
 					width: '100%',
 					height: '500px',
+					marginTop: '2em',
 					border: 0,
 					borderRadius: '4px',
 					overflow: 'hidden',
@@ -119,7 +120,7 @@ const SimpleStatic = () => (
 	<div className="demo-desktop-only">
 		<DesktopOnlyMessage />
 
-		<svg height="124" width="600">
+		<svg height="124" width="600" style={{ marginTop: '1em' }}>
 			<defs>
 				<ArrowRightMarker id={'marker'} />
 			</defs>
@@ -133,7 +134,7 @@ const SimpleStatic = () => (
 
 			<foreignObject
 				style={{ overflow: 'visible' }}
-				transform={`translate(${0},${16})`}
+				transform={`translate(0, 16)`}
 				height={nodeHeight}
 				width={nodeWidth}>
 				<CardNode onClick={() => {}}>
@@ -149,7 +150,7 @@ const SimpleStatic = () => (
 
 			<foreignObject
 				style={{ overflow: 'visible' }}
-				transform={`translate(${400},${16})`}>
+				transform={`translate(400, 16)`}>
 				<ShapeNode
 					title={'Title'}
 					size={ShapeNodeSize}
@@ -213,7 +214,7 @@ const ProgrammaticStatic = () => {
 		<foreignObject
 			style={{ overflow: 'visible' }}
 			key={`node_${i}`}
-			transform={`translate(${node.x},${node.y})`}
+			transform={`translate(${node.x}, ${node.y})`}
 			height={node.nodeHeight}
 			width={node.nodeWidth}>
 			{node.ShapeNode ? (
@@ -249,7 +250,7 @@ const ProgrammaticStatic = () => {
 		<div className="demo-desktop-only">
 			<DesktopOnlyMessage />
 
-			<svg height="300" width="800">
+			<svg height="300" width="800" style={{ marginTop: '1.5em' }}>
 				{edges}
 				{nodes}
 			</svg>
diff --git a/packages/react/stories/diagrams/ShapeNode.stories.js b/packages/react/stories/diagrams/ShapeNode.stories.js
index 2f9329e261..3732aa5df5 100644
--- a/packages/react/stories/diagrams/ShapeNode.stories.js
+++ b/packages/react/stories/diagrams/ShapeNode.stories.js
@@ -31,7 +31,12 @@ stories.add('As link', () => (
 ));
 
 stories.add('Inherited dimensions', () => (
-	<div style={{ height: 64, width: 64 }}>
-		<ShapeNode title={'Title'} renderIcon={<User20 />} size={'100%'} />
+	<div style={{ height: 64, width: 64, position: 'relative' }}>
+		<ShapeNode
+			title={'Title'}
+			renderIcon={<User20 />}
+			size={'100%'}
+			position="static"
+		/>
 	</div>
 ));