90 replace label with mui typography (#93)

* Replaced div with MUI Typography

* Added styling props to Typography

* Updated the tests for label

* Updated symbols test

* Removed ThemeProvider and tidied styling parameters

* Updated tokens and fixed rotation

* Updated snapshots

* Removed redundant css file

* Moved static styling to styled API

* Updated tests and snapshots

* Set display to flex

* Updated snapshots

* Updated snapshot

Author: NatLeung96

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

@@ -1,14 +1,31 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`<Label /> > it handles transparent prop`] = `
+<DocumentFragment>
+  <p
+    class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-k3pvii-MuiTypography-root"
+  >
+    hello
+  </p>
+</DocumentFragment>
+`;
+
+exports[`<Label /> > it handles transparent prop 1`] = `
+<DocumentFragment>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-1fe740m-MuiTypography-root"
+  >
+    hello
+  </p>
+</DocumentFragment>
+`;
+
 exports[`<Label /> > it matches the snapshot 1`] = `
 <DocumentFragment>
-  <div
-    class="Label _Label_c35983"
-    style="background-color: transparent; cursor: default; justify-content: flex-start; align-items: flex-start;"
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-1fe740m-MuiTypography-root"
   >
-    <span>
-       hello 
-    </span>
-  </div>
+    hello
+  </p>
 </DocumentFragment>
 `;

src/ui/widgets/Label/label.module.css

@@ -14,15 +14,9 @@ describe("<Label />", (): void => {
   });
 
   test("it handles transparent prop", (): void => {
-    render(<LabelComponent text="hello" transparent={true} />);
-    const label = screen.getByText("hello");
-    // The text is in the span, not the parent div.
-    if (label.parentElement && "style" in label.parentElement) {
-      expect(label.parentElement.style).toHaveProperty(
-        "backgroundColor",
-        "transparent"
-      );
-    }
-    expect.assertions(1);
+    const { asFragment } = render(
+      <LabelComponent text="hello" transparent={true} />
+    );
+    expect(asFragment()).toMatchSnapshot();
   });
 });

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

@@ -1,7 +1,6 @@
-import React, { CSSProperties } from "react";
+import React from "react";
 
-import classes from "./label.module.css";
-import { Widget, commonCss } from "../widget";
+import { Widget } from "../widget";
 import { WidgetPropType } from "../widgetProps";
 import { registerWidget } from "../register";
 import {
@@ -15,6 +14,8 @@ import {
   FloatPropOpt,
   MacrosPropOpt
 } from "../propTypes";
+import { Typography as MuiTypography, styled } from "@mui/material";
+import { diamondTheme } from "../../../diamondTheme";
 
 const LabelProps = {
   macros: MacrosPropOpt,
@@ -28,7 +29,7 @@ const LabelProps = {
   foregroundColor: ColorPropOpt,
   backgroundColor: ColorPropOpt,
   border: BorderPropOpt,
-  rotationAngle: FloatPropOpt,
+  rotationStep: FloatPropOpt,
   wrapWords: BoolPropOpt
 };
 
@@ -37,65 +38,66 @@ const LabelWidgetProps = {
   ...WidgetPropType
 };
 
+const Typography = styled(MuiTypography)({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  overflow: "hidden",
+  padding: 0
+});
+
 export const LabelComponent = (
   props: InferWidgetProps<typeof LabelProps>
 ): JSX.Element => {
   // Default labels to transparent.
-  const editedProps = {
-    ...props,
-    transparent: props.transparent ?? true
-  };
-  const style: CSSProperties = commonCss(editedProps);
   const {
+    transparent = true,
+    foregroundColor = diamondTheme.palette.primary.contrastText,
     textAlign = "left",
     textAlignV = "top",
     text = "",
-    rotationAngle,
-    wrapWords
+    rotationStep = 0,
+    wrapWords = true
   } = props;
-  const className = props.className ?? `Label ${classes.Label}`;
+  const backgroundColor = transparent
+    ? "transparent"
+    : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main);
+  const font = props.font?.css() ?? diamondTheme.typography;
+
   // Since display is "flex", use "flex-start" and "flex-end" to align
   // the content.
   let alignment = "center";
   if (textAlign === "left") {
     alignment = "flex-start";
-    if (wrapWords) {
-      style["textAlign"] = "left";
-    }
   } else if (textAlign === "right") {
     alignment = "flex-end";
-    if (wrapWords) {
-      style["textAlign"] = "right";
-    }
-  } else {
-    if (wrapWords) {
-      style["textAlign"] = "center";
-    }
   }
-  style["justifyContent"] = alignment;
-  style["cursor"] = "default";
+
   let alignmentV = "center";
   if (textAlignV === "top") {
     alignmentV = "flex-start";
   } else if (textAlignV === "bottom") {
     alignmentV = "flex-end";
   }
-  style["alignItems"] = alignmentV;
-  let transform = undefined;
-  if (rotationAngle) {
-    transform = `rotate(${rotationAngle}deg)`;
-  }
-
-  if (wrapWords) {
-    style["wordBreak"] = "break-word";
-    style["whiteSpace"] = "break-spaces";
-  }
 
   // Simple component to display text - defaults to black text and dark grey background
   return (
-    <div className={className} style={style}>
-      <span style={{ transform }}> {text} </span>
-    </div>
+    <Typography
+      noWrap={!wrapWords}
+      sx={{
+        justifyContent: alignment,
+        alignItems: alignmentV,
+        textAlign: textAlign,
+        wordBreak: wrapWords ? "break-word" : null,
+        whiteSpace: wrapWords ? "break-spaces" : null,
+        color: foregroundColor.toString(),
+        backgroundColor: backgroundColor,
+        fontFamily: font,
+        transform: `rotate(${rotationStep * -90}deg)`.toString()
+      }}
+    >
+      {text}
+    </Typography>
   );
 };
 

src/ui/widgets/Label/label.tsx

@@ -34,7 +34,7 @@ const ReadbackProps = {
   foregroundColor: ColorPropOpt,
   backgroundColor: ColorPropOpt,
   border: BorderPropOpt,
-  rotationAngle: FloatPropOpt,
+  rotationStep: FloatPropOpt,
   visible: BoolPropOpt,
   wrapWords: BoolPropOpt
 };
@@ -60,7 +60,7 @@ export const ReadbackComponent = (
     textAlignV = "top",
     showUnits = false,
     precisionFromPv = false,
-    rotationAngle,
+    rotationStep,
     visible,
     wrapWords = false
   } = props;
@@ -140,7 +140,7 @@ export const ReadbackComponent = (
       foregroundColor={foregroundColor}
       backgroundColor={backgroundColor}
       border={border}
-      rotationAngle={rotationAngle}
+      rotationStep={rotationStep}
       visible={visible}
       wrapWords={wrapWords}
     ></LabelComponent>

src/ui/widgets/Readback/readback.tsx

@@ -82,14 +82,11 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
     <div
       style="padding: 5%;"
     >
-      <div
-        class="Label _Label_c35983"
-        style="background-color: transparent; cursor: default; justify-content: flex-start; align-items: flex-start;"
+      <p
+        class="MuiTypography-root MuiTypography-body1 css-1fe740m-MuiTypography-root"
       >
-        <span>
-           Fake value 
-        </span>
-      </div>
+        Fake value
+      </p>
     </div>
   </div>
 </DocumentFragment>