84 replace action button with mui button (#85)

* Replaced default html button with MUI Button

* Added border and disabled settings

* Updated file for prettier

* Prettier again

* Prettier still

* Final time

* Refactored code to be compatible with tests

* Updated test snapshot

* Fixed error in snapshot

* Corrected the default grey colour

* Corrected the default text colour

* Added settings to change cursor when button is disabled

* Tidied the colour prop declarations

* Fixed text wrapping

* Addedd transparent to parser test

* Renamed colourscheme file and defaultColours name

* Moved decision making out of the Button declaration and reorganised styling parameters

* Moved ThemeProvider to embeddedDisplay

* Updated the snapshot

* Changed it so that button variant is "text" when transparent, otherwise it's "contained"

* Added rotationStep to bobParser

* Moved static styling components to use styled API

* Set lineHeight to 1

* Updated snapshot

* Fixed text rotation in Button

* Updated snapshot

Author: NatLeung96

src/colourscheme.ts src/diamondTheme.ts

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

src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap

@@ -2,22 +2,30 @@
 
 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-q0v14n-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",
+        "display": "block",
+        "lineHeight": 1,
+        "transform": "rotate(0deg)",
       }
     }
   >

src/ui/widgets/ActionButton/actionButton.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { WidgetActions, executeActions } from "../widgetActions";
-import { commonCss, Widget } from "../widget";
+import { Widget } from "../widget";
 import { PVComponent, PVWidgetPropType } from "../widgetProps";
 import classes from "./actionButton.module.css";
 import { registerWidget } from "../register";
@@ -11,17 +11,22 @@ import {
   ColorPropOpt,
   FontPropOpt,
   BorderPropOpt,
-  BoolPropOpt
+  BoolPropOpt,
+  FuncPropOpt,
+  FloatPropOpt
 } from "../propTypes";
 import { Color } from "../../../types/color";
 import { Font } from "../../../types/font";
-import { Border, BorderStyle } from "../../../types/border";
+import { Border } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
+import { styled, Button as MuiButton } from "@mui/material";
+
+import { diamondTheme } from "../../../diamondTheme";
 
 export interface ActionButtonProps {
   text: string;
-  disabled?: boolean;
+  enabled?: boolean;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   image?: string;
   backgroundColor?: Color;
@@ -30,29 +35,59 @@ export interface ActionButtonProps {
   font?: Font;
   actions?: WidgetActions;
   visible?: boolean;
+  rotationStep?: number;
+  transparent?: boolean;
 }
 
+const Button = styled(MuiButton)({
+  "&.MuiButton-root": {
+    display: "block",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    width: "100%",
+    minWidth: 0,
+    minHeight: 0,
+    padding: 0,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    wordBreak: "break-word",
+    textTransform: "none"
+  },
+  "&.Mui-disabled": {
+    cursor: "not-allowed",
+    pointerEvents: "all !important"
+  }
+});
+
 export const ActionButtonComponent = (
   props: ActionButtonProps
 ): JSX.Element => {
-  const style = commonCss(props);
-  if (props.disabled) {
-    style["cursor"] = "not-allowed";
-  }
-  style["whiteSpace"] = "normal";
-  // Use default button style if no border defined.
-  if (props.border?.style === BorderStyle.None) {
-    style["borderStyle"] = undefined;
-    style["borderWidth"] = undefined;
-    style["borderColor"] = undefined;
-    style["padding"] = "0";
-  }
+  const {
+    enabled = true,
+    foregroundColor = diamondTheme.palette.primary.contrastText,
+    rotationStep = 0,
+    transparent = false
+  } = props;
+
+  const backgroundColor = transparent
+    ? "transparent"
+    : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main);
+  const font = props.font?.css() ?? diamondTheme.typography;
+  const border = props.border?.css() ?? null;
+
   return (
-    <button
-      className={classes.actionbutton}
-      disabled={props.disabled}
+    <Button
+      variant={transparent ? "text" : "contained"}
+      disabled={!enabled}
+      fullWidth={true}
+      sx={{
+        color: foregroundColor.toString(),
+        backgroundColor: backgroundColor,
+        border: border,
+        fontFamily: font
+      }}
       onClick={props.onClick}
-      style={style}
     >
       {props.image !== undefined ? (
         <figure className={classes.figure}>
@@ -64,9 +99,17 @@ export const ActionButtonComponent = (
           <figcaption>{props.text}</figcaption>
         </figure>
       ) : (
-        <span style={{ whiteSpace: "normal" }}>{props.text || ""}</span>
+        <span
+          style={{
+            display: "block",
+            lineHeight: 1,
+            transform: `rotate(${rotationStep * -90}deg)`
+          }}
+        >
+          {props.text ?? ""}
+        </span>
       )}
-    </button>
+    </Button>
   );
 };
 
@@ -78,7 +121,11 @@ const ActionButtonPropType = {
   foregroundColor: ColorPropOpt,
   font: FontPropOpt,
   border: BorderPropOpt,
-  visible: BoolPropOpt
+  visible: BoolPropOpt,
+  enabled: BoolPropOpt,
+  onClick: FuncPropOpt,
+  transparent: BoolPropOpt,
+  rotationStep: FloatPropOpt
 };
 
 const ActionButtonWidgetProps = {
@@ -106,7 +153,7 @@ export const ActionButtonWidget = (
   return (
     <ActionButtonComponent
       text={props.text ?? ""}
-      disabled={props.readonly}
+      enabled={props.enabled}
       onClick={onClick}
       image={props.image}
       backgroundColor={props.backgroundColor}
@@ -115,6 +162,8 @@ export const ActionButtonWidget = (
       border={props.border}
       actions={props.actions as WidgetActions}
       visible={props.visible}
+      transparent={props.transparent}
+      rotationStep={props.rotationStep}
     />
   );
 };

src/ui/widgets/EmbeddedDisplay/bobParser.test.ts

@@ -37,7 +37,9 @@ describe("opi widget parser", (): void => {
     <x>10</x>
     <y>20</y>
     <not_a_property>hello</not_a_property>
+    <transparent>true</transparent>
     <wrap_words>false</wrap_words>
+    <rotation_step>1</rotation_step>
   </widget>
   </display>`;
 
@@ -58,6 +60,7 @@ describe("opi widget parser", (): void => {
     // Unrecognised property not passed on.
     expect(widget.not_a_property).toEqual(undefined);
     expect(widget.wrapWords).toEqual(false);
+    expect(widget.transparent).toEqual(true);
   });
 
   const readbackString = `

src/ui/widgets/EmbeddedDisplay/bobParser.ts

@@ -379,7 +379,8 @@ export function parseBob(
     fallbackSymbol: ["fallback_symbol", opiParseString],
     rotation: ["rotation", bobParseNumber],
     styleOpt: ["style", bobParseNumber],
-    lineColor: ["line_color", opiParseColor]
+    lineColor: ["line_color", opiParseColor],
+    rotationStep: ["rotation_step", bobParseNumber]
   };
 
   const complexParsers = {

src/ui/widgets/EmbeddedDisplay/embeddedDisplay.tsx

@@ -24,6 +24,8 @@ import { GroupBoxComponent } from "../GroupBox/groupBox";
 import { useOpiFile } from "./useOpiFile";
 import { useId } from "react-id-generator";
 import { getOptionalValue, trimFromString } from "../utils";
+import { ThemeProvider } from "@mui/material";
+import { diamondTheme } from "../../../diamondTheme";
 
 const RESIZE_STRINGS = [
   "scroll-widget",
@@ -209,7 +211,7 @@ export const EmbeddedDisplay = (
     return (
       <MacroContext.Provider value={embeddedDisplayMacroContext}>
         <GroupBoxComponent name={resolvedName} styleOpt={0}>
-          {component}
+          <ThemeProvider theme={diamondTheme}>{component}</ThemeProvider>
         </GroupBoxComponent>
       </MacroContext.Provider>
     );