Merge pull request #122 from DiamondLightSource/80-update-widgets-to-use-mui-base

80 Update widgets to use MUI base

Author: abigailalexander

src/index.ts

@@ -1,7 +1,6 @@
 export * from "./redux";
 export * from "./misc";
 export * from "./connection";
-export * from "./ui/components";
 export * from "./ui/widgets";
 export * from "./ui/hooks";
 export * from "./types";

src/phoebusTheme.ts

@@ -0,0 +1,19 @@
+import { createTheme } from "@mui/material/styles";
+
+export const phoebusTheme = createTheme({
+  palette: {
+    primary: {
+      main: "#D2D2D2",
+      // light: currently calculated automatically by MUI
+      // dark: currently calculated automatically by MUI
+      contrastText: "#000000"
+    }
+  },
+  typography: {
+    fontFamily: "Liberation Sans",
+    fontSize: 14,
+    button: {
+      textTransform: "none"
+    }
+  }
+});

src/types/border.test.ts

@@ -7,15 +7,15 @@ describe("Border", () => {
     expect(border.css()).toEqual({
       borderStyle: "solid",
       borderWidth: "1px",
-      borderColor: "rgba(255,0,0,255)"
+      borderColor: "rgba(255,0,0,1)"
     });
   });
   it("sets border radius if defined", (): void => {
     const border = new Border(BorderStyle.Line, Color.RED, 1, 2);
     expect(border.css()).toEqual({
       borderStyle: "solid",
       borderWidth: "1px",
-      borderColor: "rgba(255,0,0,255)",
+      borderColor: "rgba(255,0,0,1)",
       borderRadius: "2px"
     });
   });

src/types/color.ts

@@ -21,7 +21,7 @@ export class Color {
   public static CHANGING = new Color("var(--changing)");
   public static UNDEFINED = new Color("var(--undefined)");
 
-  public static fromRgba(r: number, g: number, b: number, a = 255): Color {
+  public static fromRgba(r: number, g: number, b: number, a = 1): Color {
     if (r < 0 || r > 255) {
       throw new Error(`r value ${r} out of range`);
     } else if (g < 0 || g > 255) {

src/ui/components/index.ts

@@ -2,22 +2,34 @@
 
 exports[`<ActionButton /> > it matches the snapshot 1`] = `
 <button
-  className="_actionbutton_b413d3"
+  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-fcc9ak-MuiButtonBase-root-MuiButton-root"
+  disabled={false}
+  onBlur={[Function]}
   onClick={[MockFunction spy]}
-  style={
-    {
-      "backgroundColor": undefined,
-      "color": undefined,
-      "cursor": undefined,
-      "visibility": undefined,
-      "whiteSpace": "normal",
-    }
-  }
+  onContextMenu={[Function]}
+  onDragLeave={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+  tabIndex={0}
+  type="button"
 >
   <span
     style={
       {
-        "whiteSpace": "normal",
+        "alignItems": "center",
+        "display": "flex",
+        "height": "100%",
+        "justifyContent": "center",
+        "whiteSpace": "pre-wrap",
+        "width": "100%",
+        "wordBreak": "break-word",
       }
     }
   >

src/ui/components/input/input.tsx

@@ -1,26 +1,85 @@
 import React from "react";
 import { ActionButtonComponent } from "./actionButton";
-import { create } from "react-test-renderer";
+import renderer from "react-test-renderer";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import { vi } from "vitest";
+import { contextRender } from "../../../testResources";
+import { ThemeProvider } from "@mui/material";
+import { phoebusTheme } from "../../../phoebusTheme";
+import { Color } from "../../../types";
 
+// Pass the theme in with the component to access default values
 const mock = vi.fn();
-const actionButton = <ActionButtonComponent text={"hello"} onClick={mock} />;
+const actionButton = (props: any) => (
+  <ThemeProvider theme={phoebusTheme}>
+    <ActionButtonComponent text={"hello"} onClick={mock} {...props} />
+  </ThemeProvider>
+);
 
 describe("<ActionButton />", (): void => {
   test("it matches the snapshot", (): void => {
-    const snapshot = create(actionButton);
+    const snapshot = renderer.create(actionButton({}));
     expect(snapshot.toJSON()).toMatchSnapshot();
   });
 
-  test("it renders a button", (): void => {
-    const { getByRole } = render(actionButton);
-    const button = getByRole("button") as HTMLButtonElement;
+  test("it renders a button with default style from theme", (): void => {
+    const { getByRole } = contextRender(actionButton({}));
+    const button = getByRole("button");
+    expect(button).toHaveStyle({
+      "background-color": "rgb(210, 210, 210)",
+      color: "rgb(0, 0, 0)",
+      width: "100px",
+      height: "30px"
+    });
+    // For some reason, background colour doesn't like to be passed as an object so pass as string
     expect(button.textContent).toEqual("hello");
   });
 
+  test("it renders a button with style from props", (): void => {
+    const { getByRole } = render(
+      actionButton({
+        foregroundColor: Color.fromRgba(155, 160, 209),
+        backgroundColor: Color.fromRgba(10, 200, 1),
+        height: 40,
+        width: 60
+      })
+    );
+    const button = getByRole("button");
+    expect(button).toHaveStyle({
+      "background-color": "rgb(10, 200, 1)",
+      color: "rgb(155, 160, 209)",
+      width: "60px",
+      height: "40px"
+    });
+    // For some reason, background colour doesn't like to be passed as an object so pass as string
+  });
+
+  test("button variation changes if transparent", (): void => {
+    const { getByRole } = render(actionButton({ transparent: true }));
+    const button = getByRole("button");
+    expect(button).toHaveStyle("background-color: rgba(0, 0, 0, 0)");
+  });
+
+  test("button is rotated correctly when rotationStep is set", async () => {
+    const { getByRole } = render(
+      actionButton({ rotationStep: 1, height: 40, width: 60 })
+    );
+    const button = await getByRole("button");
+    expect(button).toHaveStyle({
+      transform: "rotate(-90deg) translateY(10px) translateX(10px)",
+      height: "60px",
+      width: "40px"
+    });
+  });
+
+  test("whether button is disabled", async () => {
+    const { getByRole } = render(actionButton({ enabled: false }));
+    const button = await getByRole("button");
+    expect(button).toBeDisabled();
+  });
+
   test("function called on click", async (): Promise<void> => {
-    const { getByRole } = render(actionButton);
+    const { getByRole } = render(actionButton({}));
     const button = getByRole("button") as HTMLButtonElement;
     fireEvent.click(button);
     await waitFor(() => expect(mock).toHaveBeenCalled());