Add border to label (#104)

* Added border to label

* Updated snapshots

Author: NatLeung96

src/ui/widgets/Label/__snapshots__/label.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`<Label /> > it handles transparent prop`] = `
 exports[`<Label /> > it handles transparent prop 1`] = `
 <DocumentFragment>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-1fe740m-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-4hgpfw-MuiTypography-root"
   >
     hello
   </p>
@@ -23,7 +23,7 @@ exports[`<Label /> > it handles transparent prop 1`] = `
 exports[`<Label /> > it matches the snapshot 1`] = `
 <DocumentFragment>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-1fe740m-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-4hgpfw-MuiTypography-root"
   >
     hello
   </p>

src/ui/widgets/Label/label.tsx

@@ -63,6 +63,7 @@ export const LabelComponent = (
     ? "transparent"
     : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main);
   const font = props.font?.css() ?? diamondTheme.typography;
+  const border = props.border?.css() ?? "0px solid #000000";
 
   // Since display is "flex", use "flex-start" and "flex-end" to align
   // the content.
@@ -93,7 +94,8 @@ export const LabelComponent = (
         color: foregroundColor.toString(),
         backgroundColor: backgroundColor,
         fontFamily: font,
-        transform: `rotate(${rotationStep * -90}deg)`.toString()
+        transform: `rotate(${rotationStep * -90}deg)`.toString(),
+        border: border
       }}
     >
       {text}

src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap

@@ -83,7 +83,7 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
       style="padding: 5%;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-1fe740m-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-4hgpfw-MuiTypography-root"
       >
         Fake value
       </p>