updated a couple form components to work with carbon w/ burnettk cullerton

spiffworkflow-frontend/src/components/ProcessGroupForm.tsx

@@ -165,11 +165,7 @@ export default function ProcessGroupForm({
   };
 
   const formButtons = () => {
-    const buttons = [
+    const buttons = [<Button type="submit">Submit</Button>];
-      <Button kind="secondary" type="submit">
-        Submit
-      </Button>,
-    ];
     if (mode === 'edit') {
       buttons.push(
         <ButtonWithConfirmation

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+// @ts-ignore
+import { TextInput } from '@carbon/react';
 import { getInputProps, WidgetProps } from '@rjsf/utils';
 
 function BaseInputTemplate({
@@ -19,10 +20,9 @@ function BaseInputTemplate({
   schema,
   uiSchema,
   rawErrors = [],
-  formContext,
   registry,
-  ...textFieldProps
+}: // ...textFieldProps
-}: WidgetProps) {
+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;
@@ -35,13 +35,18 @@ function BaseInputTemplate({
     },
     ...rest,
   };
-  const _onChange = ({
+  const localOnChange = ({
+    // eslint-disable-next-line no-shadow
     target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) =>
+  }: React.ChangeEvent<HTMLInputElement>) => {
     onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
+  };
-    onBlur(id, value);
+  const localOnBlur = ({
-  const _onFocus = ({
+    // eslint-disable-next-line no-shadow
+    target: { value },
+  }: React.FocusEvent<HTMLInputElement>) => onBlur(id, value);
+  const localOnFocus = ({
+    // eslint-disable-next-line no-shadow
     target: { value },
   }: React.FocusEvent<HTMLInputElement>) => onFocus(id, value);
 
@@ -50,7 +55,7 @@ function BaseInputTemplate({
 
   return (
     <>
-      <TextField
+      <TextInput
         id={id}
         name={id}
         placeholder={placeholder}
@@ -58,19 +63,20 @@ function BaseInputTemplate({
         autoFocus={autofocus}
         required={required}
         disabled={disabled || readonly}
-        {...otherProps}
         value={value || value === 0 ? value : ''}
         error={rawErrors.length > 0}
-        onChange={_onChange}
+        onChange={localOnChange}
-        onBlur={_onBlur}
+        onBlur={localOnBlur}
-        onFocus={_onFocus}
+        onFocus={localOnFocus}
-        {...(textFieldProps as TextFieldProps)}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...otherProps}
       />
       {schema.examples && (
         <datalist id={`examples_${id}`}>
           {(schema.examples as string[])
             .concat(schema.default ? ([schema.default] as string[]) : [])
             .map((example: any) => {
+              // eslint-disable-next-line jsx-a11y/control-has-associated-label
               return <option key={example} value={example} />;
             })}
         </datalist>

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

@@ -1,29 +1,30 @@
 import React from 'react';
-import Box from '@mui/material/Box';
+// import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+// @ts-ignore
+import { Button } from '@carbon/react';
 import { SubmitButtonProps, getSubmitButtonOptions } from '@rjsf/utils';
 
-const SubmitButton: React.ComponentType<SubmitButtonProps> = (props) => {
+// const SubmitButton: React.ComponentType<SubmitButtonProps> = (props) => {
+function SubmitButton(props: SubmitButtonProps) {
+  const { uiSchema } = props;
   const {
     submitText,
     norender,
     props: submitButtonProps,
-  } = getSubmitButtonOptions(props.uiSchema);
+  } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
   return (
-    <Box marginTop={3}>
     <Button
+      className="react-json-schema-form-submit-button"
       type="submit"
-        variant="contained"
+      // eslint-disable-next-line react/jsx-props-no-spreading
-        color="primary"
       {...submitButtonProps}
     >
       {submitText}
     </Button>
-    </Box>
   );
-};
+}
 
 export default SubmitButton;

spiffworkflow-frontend/src/themes/carbon/index.css

@@ -0,0 +1,3 @@
+button.react-json-schema-form-submit-button {
+  margin-top: 1.5em;
+}

spiffworkflow-frontend/src/themes/carbon/index.ts

@@ -1,4 +1,5 @@
 import MuiForm from './MuiForm/MuiForm';
+import './index.css';
 
 export { default as Form } from './MuiForm';
 export { default as Templates } from './Templates';