added radio buttons w/ burnettk cullerton

spiffworkflow-frontend/src/index.css

@@ -31,7 +31,7 @@ h1{
   border: 1px solid #393939;
 }
 .cds--btn.button-white-background:hover {
-  background: #525252;
+  background: lightgrey;
 }
 
 .cds--breadcrumb-item a.cds--link:hover {

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -388,6 +388,7 @@ export default function ProcessModelShow() {
 
   const handleFileUploadCancel = () => {
     setShowFileUploadModal(false);
+    setFilesToUpload(null);
   };
 
   const handleFileUpload = (event: any) => {
@@ -405,6 +406,7 @@ export default function ProcessModelShow() {
       });
     }
     setShowFileUploadModal(false);
+    setFilesToUpload(null);
   };
 
   const fileUploadModal = () => {
@@ -432,6 +434,7 @@ export default function ProcessModelShow() {
           iconDescription="Delete file"
           name=""
           multiple={false}
+          onDelete={() => setFilesToUpload(null)}
           onChange={(event: any) => setFilesToUpload(event.target.files)}
         />
       </Modal>

spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx

@@ -21,8 +21,8 @@ function BaseInputTemplate({
   uiSchema,
   rawErrors = [],
   registry,
-}: // ...textFieldProps
-WidgetProps) {
+  ...textFieldProps
+}: WidgetProps) {
   const inputProps = getInputProps(schema, type, options);
   // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
   const { step, min, max, ...rest } = inputProps;
@@ -52,6 +52,12 @@ WidgetProps) {
 
   const { schemaUtils } = registry;
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
+  let labelToUse = label;
+  if (uiSchema && uiSchema['ui:title']) {
+    labelToUse = uiSchema['ui:title'];
+  } else if (schema && schema.title) {
+    labelToUse = schema.title;
+  }
 
   return (
     <>
@@ -59,7 +65,7 @@ WidgetProps) {
         id={id}
         name={id}
         placeholder={placeholder}
-        label={displayLabel ? label || schema.title : false}
+        labelText={displayLabel ? labelToUse : false}
         autoFocus={autofocus}
         required={required}
         disabled={disabled || readonly}

spiffworkflow-frontend/src/themes/carbon/RadioWidget/RadioWidget.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormLabel from '@mui/material/FormLabel';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
+// @ts-ignore
+import { RadioButtonGroup, RadioButton } from '@carbon/react';
 import { WidgetProps } from '@rjsf/utils';
 
 function RadioWidget({
@@ -20,7 +18,7 @@ function RadioWidget({
 }: WidgetProps) {
   const { enumOptions, enumDisabled } = options;
 
-  const _onChange = (_: any, value: any) =>
+  const localOnChange = (_: any, value: any) =>
     onChange(schema.type == 'boolean' ? value !== 'false' : value);
   const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
     onBlur(id, value);
@@ -31,42 +29,33 @@ function RadioWidget({
   const row = options ? options.inline : false;
 
   return (
-    <>
-      <FormLabel required={required} htmlFor={id}>
-        {label || schema.title}
-      </FormLabel>
-      <RadioGroup
-        id={id}
-        name={id}
-        value={`${value}`}
-        row={row as boolean}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
-      >
-        {Array.isArray(enumOptions) &&
-          enumOptions.map((option) => {
-            const itemDisabled =
-              Array.isArray(enumDisabled) &&
-              enumDisabled.indexOf(option.value) !== -1;
-            return (
-              <FormControlLabel
-                control={
-                  <Radio
-                    name={id}
-                    id={`${id}-${option.value}`}
-                    color="primary"
-                  />
-                }
-                label={`${option.label}`}
-                value={`${option.value}`}
-                key={option.value}
-                disabled={disabled || itemDisabled || readonly}
-              />
-            );
-          })}
-      </RadioGroup>
-    </>
+    <RadioButtonGroup
+      orientation="vertical"
+      id={id}
+      name={id}
+      value={`${value}`}
+      row={row as boolean}
+      legendText={label || schema.title}
+      onChange={localOnChange}
+      onBlur={_onBlur}
+      onFocus={_onFocus}
+    >
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option) => {
+          const itemDisabled =
+            Array.isArray(enumDisabled) &&
+            enumDisabled.indexOf(option.value) !== -1;
+          return (
+            <RadioButton
+              labelText={`${option.label}`}
+              value={`${option.value}`}
+              id={`${id}-${option.value}`}
+              key={option.value}
+              disabled={disabled || itemDisabled || readonly}
+            />
+          );
+        })}
+    </RadioButtonGroup>
   );
 }