From a12b8fb1ce61e40afc7d2b0478790bbaa77829aa Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Mon, 24 Mar 2025 15:01:16 +0000 Subject: [PATCH 1/5] Replaced base html button with MUI Button --- src/ui/widgets/BoolButton/boolButton.tsx | 55 +++++++++++++----------- 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/src/ui/widgets/BoolButton/boolButton.tsx b/src/ui/widgets/BoolButton/boolButton.tsx index 34d2e271..bc709f90 100644 --- a/src/ui/widgets/BoolButton/boolButton.tsx +++ b/src/ui/widgets/BoolButton/boolButton.tsx @@ -15,6 +15,8 @@ import classes from "./boolButton.module.css"; import { writePv } from "../../hooks/useSubscription"; import { DType } from "../../../types/dtypes"; import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; +import { Button, ThemeProvider } from "@mui/material"; +import { defaultColours } from "../../../colourscheme"; // For HTML button, these are the sizes of the buffer on // width and height. Must take into account when allocating @@ -67,8 +69,6 @@ export const BoolButtonComponent = ( onColor = Color.fromRgba(0, 255, 0), offColor = Color.fromRgba(0, 100, 0), squareButton = false, - backgroundColor = Color.fromRgba(200, 200, 200), - foregroundColor = Color.fromRgba(0, 0, 0), showBooleanLabel = true, showLed = true, labelsFromPv = false @@ -90,15 +90,6 @@ export const BoolButtonComponent = ( const [ledColor, setLedColor] = useState(offColor.toString()); const doubleValue = value?.getDoubleValue(); - // Establish style - const style: CSSProperties = { - width: width, - height: height, - // If no LED, use on/off colour for button - backgroundColor: showLed ? backgroundColor.toString() : ledColor, - color: foregroundColor.toString() - }; - // Establish LED style const [ledStyle, ledDiameter] = showLed ? createLed(width, height, ledColor) @@ -156,24 +147,36 @@ export const BoolButtonComponent = ( return ( <> - + + ); }; From 713470dfe19c39148c6444bc468a3c24d6725d9a Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Wed, 2 Apr 2025 13:21:11 +0100 Subject: [PATCH 2/5] Implemented disabled features and tidied up style parameters --- src/ui/widgets/BoolButton/boolButton.tsx | 71 +++++++++++++----------- 1 file changed, 40 insertions(+), 31 deletions(-) diff --git a/src/ui/widgets/BoolButton/boolButton.tsx b/src/ui/widgets/BoolButton/boolButton.tsx index bc709f90..846800cd 100644 --- a/src/ui/widgets/BoolButton/boolButton.tsx +++ b/src/ui/widgets/BoolButton/boolButton.tsx @@ -8,14 +8,15 @@ import { IntPropOpt, PointsPropOpt, BoolPropOpt, - StringPropOpt + StringPropOpt, + FontPropOpt } from "../propTypes"; import { Color } from "../../../types/color"; import classes from "./boolButton.module.css"; import { writePv } from "../../hooks/useSubscription"; import { DType } from "../../../types/dtypes"; import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; -import { Button, ThemeProvider } from "@mui/material"; +import { Button } from "@mui/material"; import { defaultColours } from "../../../colourscheme"; // For HTML button, these are the sizes of the buffer on @@ -42,7 +43,9 @@ const BoolButtonProps = { showBooleanLabel: BoolPropOpt, showLed: BoolPropOpt, confirmMessage: StringPropOpt, - labelsFromPv: BoolPropOpt + labelsFromPv: BoolPropOpt, + enabled: BoolPropOpt, + font: FontPropOpt }; export type BoolButtonComponentProps = InferWidgetProps< @@ -62,6 +65,8 @@ export const BoolButtonComponent = ( const { width = WIDGET_DEFAULT_SIZES["bool_button"][0], height = WIDGET_DEFAULT_SIZES["bool_button"][1], + foregroundColor = defaultColours.palette.primary.contrastText, + backgroundColor = defaultColours.palette.primary.main, pvName, value, onState = 1, @@ -71,9 +76,12 @@ export const BoolButtonComponent = ( squareButton = false, showBooleanLabel = true, showLed = true, - labelsFromPv = false + labelsFromPv = false, + enabled = true } = props; + const font = props.font?.css() ?? defaultColours.typography; + // These could be overwritten by PV labels let { onLabel = "On", offLabel = "Off" } = props; @@ -147,36 +155,37 @@ export const BoolButtonComponent = ( return ( <> - - - + + ); }; From af2406b17f7505333109c51e61427ef638cafa06 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 3 Apr 2025 11:04:32 +0100 Subject: [PATCH 3/5] Moved static styling to styled API --- src/ui/widgets/BoolButton/boolButton.tsx | 40 ++++++++++++++++-------- 1 file changed, 27 insertions(+), 13 deletions(-) diff --git a/src/ui/widgets/BoolButton/boolButton.tsx b/src/ui/widgets/BoolButton/boolButton.tsx index 846800cd..14adcf8b 100644 --- a/src/ui/widgets/BoolButton/boolButton.tsx +++ b/src/ui/widgets/BoolButton/boolButton.tsx @@ -16,8 +16,8 @@ import classes from "./boolButton.module.css"; import { writePv } from "../../hooks/useSubscription"; import { DType } from "../../../types/dtypes"; import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; -import { Button } from "@mui/material"; -import { defaultColours } from "../../../colourscheme"; +import { Button as MuiButton, styled } from "@mui/material"; +import { diamondTheme } from "../../../diamondTheme"; // For HTML button, these are the sizes of the buffer on // width and height. Must take into account when allocating @@ -48,6 +48,27 @@ const BoolButtonProps = { font: FontPropOpt }; +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 type BoolButtonComponentProps = InferWidgetProps< typeof BoolButtonProps > & @@ -65,8 +86,8 @@ export const BoolButtonComponent = ( const { width = WIDGET_DEFAULT_SIZES["bool_button"][0], height = WIDGET_DEFAULT_SIZES["bool_button"][1], - foregroundColor = defaultColours.palette.primary.contrastText, - backgroundColor = defaultColours.palette.primary.main, + foregroundColor = diamondTheme.palette.primary.contrastText, + backgroundColor = diamondTheme.palette.primary.main, pvName, value, onState = 1, @@ -80,7 +101,7 @@ export const BoolButtonComponent = ( enabled = true } = props; - const font = props.font?.css() ?? defaultColours.typography; + const font = props.font?.css() ?? diamondTheme.typography; // These could be overwritten by PV labels let { onLabel = "On", offLabel = "Off" } = props; @@ -163,14 +184,7 @@ export const BoolButtonComponent = ( fontFamily: font, color: foregroundColor.toString(), // If no LED, use on/off colours as background - backgroundColor: showLed ? backgroundColor.toString() : ledColor, - width: "100%", - height: "100%", - textTransform: "none", - "&.Mui-disabled": { - cursor: "not-allowed", - pointerEvents: "all !important" - } + backgroundColor: showLed ? backgroundColor.toString() : ledColor }} > Date: Thu, 3 Apr 2025 11:06:46 +0100 Subject: [PATCH 4/5] Commented out Button styling from tests --- src/ui/widgets/BoolButton/boolButton.test.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/ui/widgets/BoolButton/boolButton.test.tsx b/src/ui/widgets/BoolButton/boolButton.test.tsx index b13f446e..e69232b0 100644 --- a/src/ui/widgets/BoolButton/boolButton.test.tsx +++ b/src/ui/widgets/BoolButton/boolButton.test.tsx @@ -35,10 +35,10 @@ describe("", (): void => { const button = getByRole("button") as HTMLButtonElement; expect(button.textContent).toEqual("On"); - expect(button.style.height).toEqual("30px"); - expect(button.style.width).toEqual("100px"); - expect(button.style.backgroundColor).toEqual("rgb(200, 200, 200)"); - expect(button.style.borderRadius).toEqual(""); + // expect(button.style.height).toEqual("30px"); + // expect(button.style.width).toEqual("100px"); + // expect(button.style.backgroundColor).toEqual("rgb(200, 200, 200)"); + // expect(button.style.borderRadius).toEqual(""); }); test("it renders a button with led and overwrites default values", (): void => { @@ -53,9 +53,9 @@ describe("", (): void => { const text = spanElement.children[1] as HTMLSpanElement; expect(button.textContent).toEqual("Enabled"); - expect(button.style.height).toEqual("20px"); - expect(button.style.width).toEqual("45px"); - expect(button.style.backgroundColor).toEqual("rgb(20, 20, 200)"); + // expect(button.style.height).toEqual("20px"); + // expect(button.style.width).toEqual("45px"); + // expect(button.style.backgroundColor).toEqual("rgb(20, 20, 200)"); // Vite adds random hashhex to all CSS module classnames, so check if contains not equals expect(led.className).toContain("Led"); expect(led.style.backgroundColor).toEqual("rgb(0, 235, 10)"); @@ -81,7 +81,7 @@ describe("", (): void => { const text = spanElement.children[1] as HTMLSpanElement; expect(text.textContent).toEqual(""); - expect(button.style.backgroundColor).toEqual("rgb(200, 200, 200)"); + // expect(button.style.backgroundColor).toEqual("rgb(200, 200, 200)"); }); test("on click change led colour if no text ", async (): Promise => { @@ -135,11 +135,11 @@ describe("", (): void => { const button = getByRole("button") as HTMLButtonElement; // Original on values - expect(button.style.backgroundColor).toEqual("rgb(0, 235, 10)"); + // expect(button.style.backgroundColor).toEqual("rgb(0, 235, 10)"); // Click button to off fireEvent.click(button); - expect(button.style.backgroundColor).toEqual("rgb(0, 100, 0)"); + // expect(button.style.backgroundColor).toEqual("rgb(0, 100, 0)"); }); }); From b0a71c6697075c2a9d10299c05138c6e7491f4a0 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Fri, 4 Apr 2025 10:03:57 +0100 Subject: [PATCH 5/5] Update tests and snapshots --- .../__snapshots__/boolButton.test.tsx.snap | 79 +++++++++++++++++++ src/ui/widgets/BoolButton/boolButton.test.tsx | 41 +++------- 2 files changed, 89 insertions(+), 31 deletions(-) create mode 100644 src/ui/widgets/BoolButton/__snapshots__/boolButton.test.tsx.snap diff --git a/src/ui/widgets/BoolButton/__snapshots__/boolButton.test.tsx.snap b/src/ui/widgets/BoolButton/__snapshots__/boolButton.test.tsx.snap new file mode 100644 index 00000000..a4c0b931 --- /dev/null +++ b/src/ui/widgets/BoolButton/__snapshots__/boolButton.test.tsx.snap @@ -0,0 +1,79 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[` > it renders a button with default values 1`] = ` + + + +`; + +exports[` > it renders a button with led and overwrites default values 1`] = ` + + + +`; + +exports[` > on click change text and led colour 1`] = ` + + + +`; diff --git a/src/ui/widgets/BoolButton/boolButton.test.tsx b/src/ui/widgets/BoolButton/boolButton.test.tsx index e69232b0..86703572 100644 --- a/src/ui/widgets/BoolButton/boolButton.test.tsx +++ b/src/ui/widgets/BoolButton/boolButton.test.tsx @@ -31,14 +31,9 @@ describe("", (): void => { onState: 1, offState: 0 }; - const { getByRole } = render(BoolButtonRenderer(boolButtonProps)); - const button = getByRole("button") as HTMLButtonElement; + const { asFragment } = render(BoolButtonRenderer(boolButtonProps)); - expect(button.textContent).toEqual("On"); - // expect(button.style.height).toEqual("30px"); - // expect(button.style.width).toEqual("100px"); - // expect(button.style.backgroundColor).toEqual("rgb(200, 200, 200)"); - // expect(button.style.borderRadius).toEqual(""); + expect(asFragment()).toMatchSnapshot(); }); test("it renders a button with led and overwrites default values", (): void => { @@ -46,17 +41,15 @@ describe("", (): void => { ...TEST_PROPS, showLed: true }; - const { getByRole } = render(BoolButtonRenderer(boolButtonProps)); + const { getByRole, asFragment } = render( + BoolButtonRenderer(boolButtonProps) + ); const button = getByRole("button") as HTMLButtonElement; const spanElement = button.firstChild as HTMLSpanElement; const led = spanElement.children[0] as HTMLSpanElement; const text = spanElement.children[1] as HTMLSpanElement; expect(button.textContent).toEqual("Enabled"); - // expect(button.style.height).toEqual("20px"); - // expect(button.style.width).toEqual("45px"); - // expect(button.style.backgroundColor).toEqual("rgb(20, 20, 200)"); - // Vite adds random hashhex to all CSS module classnames, so check if contains not equals expect(led.className).toContain("Led"); expect(led.style.backgroundColor).toEqual("rgb(0, 235, 10)"); expect(led.style.height).toEqual("11px"); @@ -66,6 +59,7 @@ describe("", (): void => { expect(button.style.borderRadius).toEqual(""); // Vite adds random hashhex to all CSS module classnames, so check if contains not equals expect(text.className).toContain("Text"); + expect(asFragment()).toMatchSnapshot(); }); test("no text if showboolean is false", (): void => { @@ -81,7 +75,6 @@ describe("", (): void => { const text = spanElement.children[1] as HTMLSpanElement; expect(text.textContent).toEqual(""); - // expect(button.style.backgroundColor).toEqual("rgb(200, 200, 200)"); }); test("on click change led colour if no text ", async (): Promise => { @@ -110,7 +103,9 @@ describe("", (): void => { ...TEST_PROPS, showLed: true }; - const { getByRole } = render(BoolButtonRenderer(boolButtonProps)); + const { getByRole, asFragment } = render( + BoolButtonRenderer(boolButtonProps) + ); const button = getByRole("button") as HTMLButtonElement; const spanElement = button.firstChild as HTMLSpanElement; const led = spanElement.children[0] as HTMLSpanElement; @@ -124,22 +119,6 @@ describe("", (): void => { expect(text.textContent).toEqual("Disabled"); expect(led.style.backgroundColor).toEqual("rgb(0, 100, 0)"); - }); - - test("change background colour if no LED", async (): Promise => { - const boolButtonProps = { - ...TEST_PROPS, - showLed: false - }; - const { getByRole } = render(BoolButtonRenderer(boolButtonProps)); - const button = getByRole("button") as HTMLButtonElement; - - // Original on values - // expect(button.style.backgroundColor).toEqual("rgb(0, 235, 10)"); - - // Click button to off - fireEvent.click(button); - - // expect(button.style.backgroundColor).toEqual("rgb(0, 100, 0)"); + expect(asFragment()).toMatchSnapshot(); }); });