91 replace input with mui textfield #99

NatLeung96 · 2025-04-07T13:42:52Z

No description provided.

abigailalexander

Looks good! Most of the issues I'm seeing seem to be existing issues not ones related to your changes, such as:

Multi-line and text wrapping
In Phoebus you can set a border, it would be good to include this

It appears we were doing things quite weirdly in this widget, so your changes are much appreciated. Also don't forget the CSS file ;)

src/ui/widgets/EmbeddedDisplay/bobParser.ts

src/ui/widgets/Input/input.tsx

…m parser

…ements

NatLeung96 · 2025-04-11T14:22:55Z

This has been a wild revision.

PV props
I'm hoping that I got the props type declarations properly set up like the other widgets. This did highlight that there may have been a bug with the definition of PVInputComponent type as pvName was declared twice with different props (one with PvPropOpt - i.e. PV - and the other with string). I took the string definition to be incorrect and changed that to PV. As a result, I had to change some variables and edit some tests. Hopefully that was the correct thing to do.

abigailalexander

The appearance looks really good now! Just the two comments below

abigailalexander · 2025-04-14T10:10:12Z

src/ui/widgets/Input/input.tsx

+  const [inputValue, setInputValue] = useState(
+    props.value?.getStringValue() ?? ""
+  );


It seems like the value from a PV is always set to undefined (since that is what it first loads as). Adding a useEffect hook here which has value.getStringValue() passed in as the dependency value should fix this, as every time the string value is updated it will update inputValue (rather than leaving it stuck at the first value received from a PV, which is always undefined while the connection establishes itself).

Either that or recreate something similar to the old component in components/input/input.tsx with the editing state:

if (!editing && inputValue !== props.value) { setInputValue(props.value); }

abigailalexander · 2025-04-14T10:12:13Z

src/ui/widgets/Input/input.tsx

+  enabled: BoolPropOpt,
+  textAlign: ChoicePropOpt(["left", "center", "right"]),
+  textAlignV: ChoicePropOpt(["top", "center", "bottom"]),
+  border: BorderPropOpt


You added multiLine into the bob parser, but it hasn't been included in this list as a prop or in the component itself.

…lished

abigailalexander

Value from PV shows as expected now, LGTM

* Replaced base input with MUI TextField * Updated theme tokens and changed border colours * Move static styling to styled API * Added alignment props to parser * Handle alignment props * Updated test and created snapshot * Removed redundant input component files * Removed redundant reference to component file * Removed redundant horizontalAlignment and verticalAlignment props from parser * Added textAlignV as ChoicePropOpt and removed unnecessary switch statements * Added if-else for vertical alignment * Changed default background to teal (#80FFFF) * Removed redundant border parsing * Changed color of hover and focussed borders to blue * Added custom border * Added multiLine to parser * Changed default blue border colour * TextField displays existing PV value if available * Reformatted prop type declaration and disabled cursor when disabled * Updated tests, snapshots, and type definitions * Updated slidecontrol test * Updated input snapshot * Corrected writePV function call * Removed redundant CSS file * Added blur on Enter * Removed comment * Got border thicknesses to change on hover and focus * Changed border width values for hover and focussed * Updated snapshot * Reorganised widgetprop definitions and updated test * Added useEffect to set initial text value when PV connection is established * Updated pvName variable in slideControl * Updated slideControl test * Added multiline functionality

* Added styling * Setup placeholder until option is clicked * 86 replace boolean button with mui button (#92) * Replaced base html button with MUI Button * Implemented disabled features and tidied up style parameters * Moved static styling to styled API * Commented out Button styling from tests * Update tests and snapshots * 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 * Replaced Checkbox with MUI Checkbox (#89) * Replaced Checkbox with MUI Checkbox * Removed ThemeProvider and added additional styling to FormControlLabel * Moved static styling to styled API. Not-allowed cursor when widget is disabled. Added font styling. * Removed padding * Removed padding and fixed alignments * Tidied nested for-loop * Tidied up styling and prop definitions * Added DType proptypes * Updated snapshots and tests * Changed menuButton logics and added items as potential list of options * Added useEffect to prevent re-render errors * Updated tests and snapshot * 87 replace choice button with mui button group (#98) * Replaced base react button group with MUI ToggleButtonGroup * Commented out expect statements checking the styling * Removed ThemeProvider * Moved static styling to styled API * Updated tests * Removed redundant height and width for ButtonGroup * Set opacity to 0.6 for hover and selected-hover * Added borders to buttons and fixed text wrapping * Updated snapshots * Deleted redundant CSS file * Removed CSS import * Changed button height/width and hover opacity * Updated snapshots * 95 replace progress bar with mui progress bar (#100) * Replaced divs with LinearProgress * Added width and height to parser * Implemented vertical orientation * Implements default width and height if not provided * Fixed width and height checking * Fixed label and removed redundant css file * Moved default width and height declarations to function head * Removed redundant height and width from bob parser * Corrected percentage calculation * Added transparency option * Added check for out of range values * 91 replace input with mui textfield (#99) * Replaced base input with MUI TextField * Updated theme tokens and changed border colours * Move static styling to styled API * Added alignment props to parser * Handle alignment props * Updated test and created snapshot * Removed redundant input component files * Removed redundant reference to component file * Removed redundant horizontalAlignment and verticalAlignment props from parser * Added textAlignV as ChoicePropOpt and removed unnecessary switch statements * Added if-else for vertical alignment * Changed default background to teal (#80FFFF) * Removed redundant border parsing * Changed color of hover and focussed borders to blue * Added custom border * Added multiLine to parser * Changed default blue border colour * TextField displays existing PV value if available * Reformatted prop type declaration and disabled cursor when disabled * Updated tests, snapshots, and type definitions * Updated slidecontrol test * Updated input snapshot * Corrected writePV function call * Removed redundant CSS file * Added blur on Enter * Removed comment * Got border thicknesses to change on hover and focus * Changed border width values for hover and focussed * Updated snapshot * Reorganised widgetprop definitions and updated test * Added useEffect to set initial text value when PV connection is established * Updated pvName variable in slideControl * Updated slideControl test * Added multiline functionality * Removed unnecessary DTypeProp types * Removed unnecessary props from MenuButtonComponentProps * Removed unnecessary import of DType

NatLeung96 added 8 commits March 31, 2025 08:51

Replaced base input with MUI TextField

5596f23

Updated branch with main-dev branch

f4c0b38

Updated theme tokens and changed border colours

ebdb4b8

Move static styling to styled API

1de8ba7

Added alignment props to parser

338fd16

Handle alignment props

8640e8a

Updated test and created snapshot

6d2c240

Removed redundant input component files

5159245

NatLeung96 requested a review from abigailalexander April 7, 2025 13:42

Removed redundant reference to component file

f106025

abigailalexander requested changes Apr 10, 2025

View reviewed changes

NatLeung96 added 16 commits April 10, 2025 13:28

Removed redundant horizontalAlignment and verticalAlignment props fro…

6572c5c

…m parser

Added textAlignV as ChoicePropOpt and removed unnecessary switch stat…

eacf481

…ements

Added if-else for vertical alignment

94ebd6f

Changed default background to teal (#80FFFF)

0fd8d05

Removed redundant border parsing

5d521d1

Changed color of hover and focussed borders to blue

f455a35

Added custom border

88af1b9

Added multiLine to parser

ecb81aa

Changed default blue border colour

ec9ae54

TextField displays existing PV value if available

02ac247

Reformatted prop type declaration and disabled cursor when disabled

71606cc

Updated tests, snapshots, and type definitions

882d807

Updated slidecontrol test

94a836e

Updated input snapshot

eb34c0b

Corrected writePV function call

4244394

Removed redundant CSS file

960d50f

NatLeung96 requested a review from abigailalexander April 11, 2025 14:23

Added blur on Enter

a67d8f1

NatLeung96 added 5 commits April 11, 2025 15:49

Removed comment

4eeb112

Got border thicknesses to change on hover and focus

1d4fe41

Changed border width values for hover and focussed

a1f1f8f

Updated snapshot

f682060

Reorganised widgetprop definitions and updated test

4c714a3

abigailalexander requested changes Apr 14, 2025

View reviewed changes

NatLeung96 added 4 commits April 14, 2025 16:14

Added useEffect to set initial text value when PV connection is estab…

e756812

…lished

Updated pvName variable in slideControl

cff1723

Updated slideControl test

d9b81b0

Added multiline functionality

60647dd

NatLeung96 requested a review from abigailalexander April 14, 2025 15:30

abigailalexander approved these changes Apr 16, 2025

View reviewed changes

NatLeung96 merged commit 71531e5 into 80-update-widgets-to-use-mui-base Apr 16, 2025
2 checks passed

NatLeung96 deleted the 91-replace-input-with-mui-textfield branch April 16, 2025 14:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

91 replace input with mui textfield #99

91 replace input with mui textfield #99

Uh oh!

NatLeung96 commented Apr 7, 2025

Uh oh!

abigailalexander left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

NatLeung96 commented Apr 11, 2025 •

edited

Loading

Uh oh!

abigailalexander left a comment

Uh oh!

abigailalexander Apr 14, 2025

Uh oh!

abigailalexander Apr 14, 2025

Uh oh!

abigailalexander left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

91 replace input with mui textfield #99

91 replace input with mui textfield #99

Uh oh!

Conversation

NatLeung96 commented Apr 7, 2025

Uh oh!

abigailalexander left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

NatLeung96 commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

abigailalexander left a comment

Choose a reason for hiding this comment

Uh oh!

abigailalexander Apr 14, 2025

Choose a reason for hiding this comment

Uh oh!

abigailalexander Apr 14, 2025

Choose a reason for hiding this comment

Uh oh!

abigailalexander left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

NatLeung96 commented Apr 11, 2025 •

edited

Loading