From 56e05c00a14ad49e14e34d11a65f41dcec06edd0 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 30 Apr 2025 14:27:30 +0100
Subject: [PATCH 1/3] Added lineStyle to shape widget

---
 src/ui/widgets/Shape/shape.tsx | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/ui/widgets/Shape/shape.tsx b/src/ui/widgets/Shape/shape.tsx
index 71f3c007..8d3f543c 100644
--- a/src/ui/widgets/Shape/shape.tsx
+++ b/src/ui/widgets/Shape/shape.tsx
@@ -27,6 +27,7 @@ const ShapeProps = {
   backgroundColor: ColorPropOpt,
   lineColor: ColorPropOpt,
   lineWidth: IntPropOpt,
+  lineStyle: IntPropOpt,
   visible: BoolPropOpt
 };
 
@@ -45,11 +46,12 @@ export const ShapeComponent = (
   const cornerRadius = `${props.cornerWidth || 0}px / ${
     props.cornerHeight || 0
   }px`;
-  const borderCss = new Border(1, lineColor, lineWidth).css();
-  borderCss.borderRadius = cornerRadius;
+
   // Use line properties to set border, unless alarm border
   const style: CSSProperties = {
-    ...borderCss,
+    borderColor: lineColor.toString(),
+    borderWidth: lineWidth,
+    borderRadius: cornerRadius,
     width: width,
     height: height,
     backgroundColor: props.transparent
@@ -58,6 +60,20 @@ export const ShapeComponent = (
     transform: props.shapeTransform ?? "",
     visibility: visible ? undefined : "hidden"
   };
+
+  style.borderStyle = (function () {
+    switch (props.lineStyle) {
+      case 1: // Dashed
+      case 3: // Dash-Dot
+        return "dashed";
+      case 2: // Dot
+      case 4: // Dash-Dot-Dot
+        return "dotted";
+      default:
+        return "solid";
+    }
+  })();
+
   return <div style={style} />;
 };
 

From 59874101d69c02dbf344013e748fc32ced6c0322 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 30 Apr 2025 15:26:43 +0100
Subject: [PATCH 2/3] Removed Border import

---
 src/ui/widgets/Shape/shape.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/widgets/Shape/shape.tsx b/src/ui/widgets/Shape/shape.tsx
index 8d3f543c..17801a11 100644
--- a/src/ui/widgets/Shape/shape.tsx
+++ b/src/ui/widgets/Shape/shape.tsx
@@ -12,7 +12,7 @@ import {
   StringOrNumPropOpt,
   MacrosPropOpt
 } from "../propTypes";
-import { Border, Color } from "../../../types";
+import { Color } from "../../../types";
 import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser";
 
 const ShapeProps = {

From 481cd4c17a294b991d148a1ede23ee040e01568b Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Thu, 1 May 2025 09:27:15 +0100
Subject: [PATCH 3/3] Set boxSizing to border-box to match Phoebus behaviour

---
 src/ui/widgets/Shape/shape.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/widgets/Shape/shape.tsx b/src/ui/widgets/Shape/shape.tsx
index 17801a11..ef43d768 100644
--- a/src/ui/widgets/Shape/shape.tsx
+++ b/src/ui/widgets/Shape/shape.tsx
@@ -54,6 +54,7 @@ export const ShapeComponent = (
     borderRadius: cornerRadius,
     width: width,
     height: height,
+    boxSizing: "border-box",
     backgroundColor: props.transparent
       ? "transparent"
       : backgroundColor.toString(),