From 799ea492dded2c02578a72784c4f23cc0a4d1165 Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Mon, 30 Jan 2023 11:53:35 -0500
Subject: [PATCH 1/7] new mechanism to handle help more in line with how carbon
 works

---
 .../carbon/BaseInputTemplate/BaseInputTemplate.tsx     |  6 ++++++
 .../carbon/FieldHelpTemplate/FieldHelpTemplate.tsx     | 10 ++++------
 .../src/themes/carbon/SelectWidget/SelectWidget.tsx    |  9 ++++++++-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
index 7954a0ac..c6f677d2 100644
--- a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
@@ -85,6 +85,11 @@ export default function BaseInputTemplate<
     labelToUse = `${labelToUse}*`;
   }
 
+  let helperText = null;
+  if (uiSchema && uiSchema['ui:help']) {
+    helperText = uiSchema['ui:help'];
+  }
+
   let invalid = false;
   let errorMessageForField = null;
   if (rawErrors && rawErrors.length > 0) {
@@ -103,6 +108,7 @@ export default function BaseInputTemplate<
         name={id}
         className="input"
         labelText={labelToUse}
+        helperText={helperText}
         invalid={invalid}
         invalidText={errorMessageForField}
         autoFocus={autofocus}
diff --git a/spiffworkflow-frontend/src/themes/carbon/FieldHelpTemplate/FieldHelpTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/FieldHelpTemplate/FieldHelpTemplate.tsx
index 08a61aeb..da4543f2 100644
--- a/spiffworkflow-frontend/src/themes/carbon/FieldHelpTemplate/FieldHelpTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/FieldHelpTemplate/FieldHelpTemplate.tsx
@@ -7,10 +7,8 @@ import FormHelperText from '@mui/material/FormHelperText';
  * @param props - The `FieldHelpProps` to be rendered
  */
 export default function FieldHelpTemplate(props: FieldHelpProps) {
-  const { idSchema, help } = props;
-  if (!help) {
-    return null;
-  }
-  const id = `${idSchema.$id}__help`;
-  return <FormHelperText id={id}>{help}</FormHelperText>;
+  // ui:help is handled by helperText in all carbon widgets.
+  // see BaseInputTemplate/BaseInputTemplate.tsx and
+  // SelectWidget/SelectWidget.tsx
+  return null;
 }
diff --git a/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx b/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx
index 616b11a7..d74b9b7b 100644
--- a/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx
@@ -41,6 +41,10 @@ function SelectWidget({
   } else if (schema && schema.title) {
     labelToUse = schema.title;
   }
+  let helperText = null;
+  if (uiSchema && uiSchema['ui:help']) {
+    helperText = uiSchema['ui:help'];
+  }
   if (required) {
     labelToUse = `${labelToUse}*`;
   }
@@ -52,13 +56,16 @@ function SelectWidget({
     errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
   }
 
+  // maybe use placeholder somehow. it was previously jammed into the helperText field,
+  // but allowing ui:help to grab that spot seems much more appropriate.
+
   return (
     <Select
       id={id}
       name={id}
       labelText={labelToUse}
       select
-      helperText={placeholder}
+      helperText={helperText}
       value={typeof value === 'undefined' ? emptyValue : value}
       disabled={disabled || readonly}
       autoFocus={autofocus}

From 4aaf05d9353363174d8ac42e41cbaf985dc6e9a4 Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Mon, 30 Jan 2023 12:37:08 -0500
Subject: [PATCH 2/7] wrap field template so we can style with margin bottom

---
 .../carbon/FieldTemplate/FieldTemplate.tsx    | 50 ++++++++++---------
 .../src/themes/carbon/index.css               |  7 +--
 2 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx
index 44b687ea..b105e3ed 100644
--- a/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx
@@ -34,30 +34,32 @@ function FieldTemplate({
     return <div style={{ display: 'none' }}>{children}</div>;
   }
   return (
-    <WrapIfAdditionalTemplate
-      classNames={classNames}
-      disabled={disabled}
-      id={id}
-      label={label}
-      onDropPropertyClick={onDropPropertyClick}
-      onKeyChange={onKeyChange}
-      readonly={readonly}
-      required={required}
-      schema={schema}
-      uiSchema={uiSchema}
-      registry={registry}
-    >
-      <FormControl fullWidth error={!!rawErrors.length} required={required}>
-        {children}
-        {displayLabel && rawDescription ? (
-          <Typography variant="caption" color="textSecondary">
-            {rawDescription}
-          </Typography>
-        ) : null}
-        {errors}
-        {help}
-      </FormControl>
-    </WrapIfAdditionalTemplate>
+    <div className="rjsf-field">
+      <WrapIfAdditionalTemplate
+        classNames={classNames}
+        disabled={disabled}
+        id={id}
+        label={label}
+        onDropPropertyClick={onDropPropertyClick}
+        onKeyChange={onKeyChange}
+        readonly={readonly}
+        required={required}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      >
+        <FormControl fullWidth error={!!rawErrors.length} required={required}>
+          {children}
+          {displayLabel && rawDescription ? (
+            <Typography variant="caption" color="textSecondary">
+              {rawDescription}
+            </Typography>
+          ) : null}
+          {errors}
+          {help}
+        </FormControl>
+      </WrapIfAdditionalTemplate>
+    </div>
   );
 }
 
diff --git a/spiffworkflow-frontend/src/themes/carbon/index.css b/spiffworkflow-frontend/src/themes/carbon/index.css
index 329bc33f..72cdbb84 100644
--- a/spiffworkflow-frontend/src/themes/carbon/index.css
+++ b/spiffworkflow-frontend/src/themes/carbon/index.css
@@ -1,7 +1,3 @@
-button.react-json-schema-form-submit-button {
-  margin-top: 1.5em;
-}
-
 .rjsf .header {
   font-weight: 400;
   font-size: 20px;
@@ -17,6 +13,7 @@ button.react-json-schema-form-submit-button {
   margin-bottom: 1em;
 }
 
-.rjsf .input {
+/* for some reason it wraps the entire form using FieldTemplate.jsx, which is where we added the rjsf-field thing (which is only intended for fields, not entire forms. hence the double rjsf-field reference, only for rjsf-fields inside rjsf-fields, so we don't get double margin after the last field */
+.rjsf .rjsf-field .rjsf-field {
   margin-bottom: 2em;
 }

From 035588120b2b90403fcaffe4f107d3833af5d79c Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Mon, 30 Jan 2023 14:06:41 -0500
Subject: [PATCH 3/7] replace fieldTemplate with unthemed core version and
 remove labels since that is handled in there

---
 .../BaseInputTemplate/BaseInputTemplate.tsx   |   1 -
 .../carbon/FieldTemplate/FieldTemplate.tsx    | 101 ++++++++----------
 .../carbon/SelectWidget/SelectWidget.tsx      |   5 +-
 .../carbon/TextareaWidget/TextareaWidget.tsx  |   2 +-
 4 files changed, 50 insertions(+), 59 deletions(-)

diff --git a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
index c6f677d2..699ffeb9 100644
--- a/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/BaseInputTemplate/BaseInputTemplate.tsx
@@ -107,7 +107,6 @@ export default function BaseInputTemplate<
         id={id}
         name={id}
         className="input"
-        labelText={labelToUse}
         helperText={helperText}
         invalid={invalid}
         invalidText={errorMessageForField}
diff --git a/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx
index b105e3ed..a1cccb06 100644
--- a/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx
@@ -1,66 +1,57 @@
 import React from 'react';
-import FormControl from '@mui/material/FormControl';
-import Typography from '@mui/material/Typography';
-import { FieldTemplateProps, getTemplate, getUiOptions } from '@rjsf/utils';
+import {
+  FieldTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getTemplate,
+  getUiOptions,
+} from '@rjsf/utils';
 
-function FieldTemplate({
-  id,
-  children,
-  classNames,
-  disabled,
-  displayLabel,
-  hidden,
-  label,
-  onDropPropertyClick,
-  onKeyChange,
-  readonly,
-  required,
-  rawErrors = [],
-  errors,
-  help,
-  rawDescription,
-  schema,
-  uiSchema,
-  registry,
-}: FieldTemplateProps) {
-  const uiOptions = getUiOptions(uiSchema);
-  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate'>(
-    'WrapIfAdditionalTemplate',
+import Label from './Label';
+
+/** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+ * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+ *
+ * @param props - The `FieldTemplateProps` for this component
+ */
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldTemplateProps<T, S, F>) {
+  const {
+    id,
+    label,
+    children,
+    errors,
+    help,
+    description,
+    hidden,
+    required,
+    displayLabel,
     registry,
-    uiOptions
-  );
-
+    uiSchema,
+  } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<
+    'WrapIfAdditionalTemplate',
+    T,
+    S,
+    F
+  >('WrapIfAdditionalTemplate', registry, uiOptions);
   if (hidden) {
-    return <div style={{ display: 'none' }}>{children}</div>;
+    return <div className="hidden">{children}</div>;
   }
   return (
     <div className="rjsf-field">
-      <WrapIfAdditionalTemplate
-        classNames={classNames}
-        disabled={disabled}
-        id={id}
-        label={label}
-        onDropPropertyClick={onDropPropertyClick}
-        onKeyChange={onKeyChange}
-        readonly={readonly}
-        required={required}
-        schema={schema}
-        uiSchema={uiSchema}
-        registry={registry}
-      >
-        <FormControl fullWidth error={!!rawErrors.length} required={required}>
-          {children}
-          {displayLabel && rawDescription ? (
-            <Typography variant="caption" color="textSecondary">
-              {rawDescription}
-            </Typography>
-          ) : null}
-          {errors}
-          {help}
-        </FormControl>
+      <WrapIfAdditionalTemplate {...props}>
+        {displayLabel && <Label label={label} required={required} id={id} />}
+        {displayLabel && description ? description : null}
+        {children}
+        {errors}
+        {help}
       </WrapIfAdditionalTemplate>
     </div>
   );
 }
-
-export default FieldTemplate;
diff --git a/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx b/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx
index d74b9b7b..eaae4eb6 100644
--- a/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/SelectWidget/SelectWidget.tsx
@@ -53,7 +53,8 @@ function SelectWidget({
   let errorMessageForField = null;
   if (rawErrors && rawErrors.length > 0) {
     invalid = true;
-    errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+    // errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+    errorMessageForField = rawErrors[0];
   }
 
   // maybe use placeholder somehow. it was previously jammed into the helperText field,
@@ -63,7 +64,7 @@ function SelectWidget({
     <Select
       id={id}
       name={id}
-      labelText={labelToUse}
+      labelText=""
       select
       helperText={helperText}
       value={typeof value === 'undefined' ? emptyValue : value}
diff --git a/spiffworkflow-frontend/src/themes/carbon/TextareaWidget/TextareaWidget.tsx b/spiffworkflow-frontend/src/themes/carbon/TextareaWidget/TextareaWidget.tsx
index b3a72796..beb1934e 100644
--- a/spiffworkflow-frontend/src/themes/carbon/TextareaWidget/TextareaWidget.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/TextareaWidget/TextareaWidget.tsx
@@ -65,7 +65,7 @@ function TextareaWidget<
   let errorMessageForField = null;
   if (rawErrors && rawErrors.length > 0) {
     invalid = true;
-    errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
+    errorMessageForField = rawErrors[0];
   }
 
   return (

From de607ded0f10c02b295ff5226faa7a242a54f822 Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Mon, 30 Jan 2023 14:21:02 -0500
Subject: [PATCH 4/7] even textareas need to have blank labels since labels are
 in FieldTemplate

---
 .../src/themes/carbon/TextareaWidget/TextareaWidget.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spiffworkflow-frontend/src/themes/carbon/TextareaWidget/TextareaWidget.tsx b/spiffworkflow-frontend/src/themes/carbon/TextareaWidget/TextareaWidget.tsx
index beb1934e..d6c8dd72 100644
--- a/spiffworkflow-frontend/src/themes/carbon/TextareaWidget/TextareaWidget.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/TextareaWidget/TextareaWidget.tsx
@@ -74,7 +74,7 @@ function TextareaWidget<
       name={id}
       className="form-control"
       value={value || ''}
-      labelText={labelToUse}
+      labelText=""
       placeholder={placeholder}
       required={required}
       disabled={disabled}

From b43f7b6cf5a73ae91c20a9320f5f3069adae0d06 Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Mon, 30 Jan 2023 15:51:48 -0500
Subject: [PATCH 5/7] make task show wide, and make repeating form icons match
 site styles. w/ dfunk

---
 .../src/routes/TaskShow.tsx                   |   2 +-
 .../src/themes/carbon/AddButton/AddButton.tsx |  45 +++++---
 .../ArrayFieldItemTemplate.tsx                | 105 ++++++++++-------
 .../themes/carbon/IconButton/IconButton.tsx   | 107 ++++++++++++------
 .../src/themes/carbon/index.css               |   4 +
 5 files changed, 173 insertions(+), 90 deletions(-)

diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx
index f08bf904..de7141a1 100644
--- a/spiffworkflow-frontend/src/routes/TaskShow.tsx
+++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx
@@ -217,7 +217,7 @@ export default function TaskShow() {
 
     return (
       <Grid fullWidth condensed>
-        <Column md={5} lg={8} sm={4}>
+        <Column sm={4} md={8} lg={16}>
           <Form
             formData={taskData}
             onSubmit={handleFormSubmit}
diff --git a/spiffworkflow-frontend/src/themes/carbon/AddButton/AddButton.tsx b/spiffworkflow-frontend/src/themes/carbon/AddButton/AddButton.tsx
index d145a4c4..f01d08fa 100644
--- a/spiffworkflow-frontend/src/themes/carbon/AddButton/AddButton.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/AddButton/AddButton.tsx
@@ -1,17 +1,36 @@
 import React from 'react';
-import AddIcon from '@mui/icons-material/Add';
-import IconButton from '@mui/material/IconButton';
-import { IconButtonProps } from '@rjsf/utils';
+import {
+  FormContextType,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
-const AddButton: React.ComponentType<IconButtonProps> = ({
-  uiSchema,
-  ...props
-}) => {
+// @ts-ignore
+import { AddAlt } from '@carbon/icons-react';
+
+import IconButton from '../IconButton/IconButton';
+
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
+export default function AddButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ className, onClick, disabled, registry }: IconButtonProps<T, S, F>) {
   return (
-    <IconButton title="Add Item" {...props} color="primary">
-      <AddIcon />
-    </IconButton>
+    <div className="row">
+      <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
+        <IconButton
+          iconType="info"
+          icon="plus"
+          className="btn-add col-xs-12"
+          title="Add"
+          onClick={onClick}
+          disabled={disabled}
+          registry={registry}
+        />
+      </p>
+    </div>
   );
-};
-
-export default AddButton;
+}
diff --git a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index cf596f98..df8896bf 100644
--- a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -5,6 +5,11 @@ import {
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
+import {
+  Grid,
+  Column,
+  // @ts-ignore
+} from '@carbon/react';
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
@@ -33,53 +38,67 @@ export default function ArrayFieldItemTemplate<
   const { MoveDownButton, MoveUpButton, RemoveButton } =
     registry.templates.ButtonTemplates;
   const btnStyle: CSSProperties = {
-    flex: 1,
-    paddingLeft: 6,
-    paddingRight: 6,
-    fontWeight: 'bold',
+    marginBottom: '0.5em',
   };
+  const mainColumnWidthSmall = hasToolbar ? 3 : 4;
+  const mainColumnWidthMedium = hasToolbar ? 6 : 8;
+  const mainColumnWidthLarge = hasToolbar ? 12 : 16;
   return (
     <div className={className}>
-      <div className={hasToolbar ? 'col-xs-9' : 'col-xs-12'}>{children}</div>
-      {hasToolbar && (
-        <div className="col-xs-3 array-item-toolbox">
-          <div
-            className="btn-group"
-            style={{
-              display: 'flex',
-              justifyContent: 'space-around',
-            }}
+      <Grid condensed fullWidth>
+        <Column
+          sm={mainColumnWidthSmall}
+          md={mainColumnWidthMedium}
+          lg={mainColumnWidthLarge}
+        >
+          {children}
+        </Column>
+        {hasToolbar && (
+          <Column
+            sm={4 - mainColumnWidthSmall}
+            md={8 - mainColumnWidthMedium}
+            lg={16 - mainColumnWidthLarge}
           >
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveUpButton
-                style={btnStyle}
-                disabled={disabled || readonly || !hasMoveUp}
-                onClick={onReorderClick(index, index - 1)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {(hasMoveUp || hasMoveDown) && (
-              <MoveDownButton
-                style={btnStyle}
-                disabled={disabled || readonly || !hasMoveDown}
-                onClick={onReorderClick(index, index + 1)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-            {hasRemove && (
-              <RemoveButton
-                style={btnStyle}
-                disabled={disabled || readonly}
-                onClick={onDropIndexClick(index)}
-                uiSchema={uiSchema}
-                registry={registry}
-              />
-            )}
-          </div>
-        </div>
-      )}
+            <div className="array-item-toolbox">
+              <div className="NOT-btn-group">
+                <div>
+                  {(hasMoveUp || hasMoveDown) && (
+                    <MoveUpButton
+                      style={btnStyle}
+                      disabled={disabled || readonly || !hasMoveUp}
+                      onClick={onReorderClick(index, index - 1)}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  )}
+                </div>
+                <div>
+                  {(hasMoveUp || hasMoveDown) && (
+                    <MoveDownButton
+                      style={btnStyle}
+                      disabled={disabled || readonly || !hasMoveDown}
+                      onClick={onReorderClick(index, index + 1)}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  )}
+                </div>
+                <div>
+                  {hasRemove && (
+                    <RemoveButton
+                      style={btnStyle}
+                      disabled={disabled || readonly}
+                      onClick={onDropIndexClick(index)}
+                      uiSchema={uiSchema}
+                      registry={registry}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          </Column>
+        )}
+      </Grid>
     </div>
   );
 }
diff --git a/spiffworkflow-frontend/src/themes/carbon/IconButton/IconButton.tsx b/spiffworkflow-frontend/src/themes/carbon/IconButton/IconButton.tsx
index 82559106..64eb883d 100644
--- a/spiffworkflow-frontend/src/themes/carbon/IconButton/IconButton.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/IconButton/IconButton.tsx
@@ -1,55 +1,96 @@
 import React from 'react';
-import IconButton, {
-  IconButtonProps as MuiIconButtonProps,
-} from '@mui/material/IconButton';
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import RemoveIcon from '@mui/icons-material/Remove';
-import { IconButtonProps } from '@rjsf/utils';
+import {
+  FormContextType,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
 
-export default function MuiIconButton(props: IconButtonProps) {
-  const { icon, color, uiSchema, ...otherProps } = props;
+// @ts-ignore
+import { Add, TrashCan, ArrowUp, ArrowDown } from '@carbon/icons-react';
+
+export default function IconButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
+  const {
+    iconType = 'default',
+    icon,
+    className,
+    uiSchema,
+    registry,
+    ...otherProps
+  } = props;
+  // icon string optios: plus, remove, arrow-up, arrow-down
+  let carbonIcon = (
+    <p>
+      Add new <Add />
+    </p>
+  );
+  if (icon === 'remove') {
+    carbonIcon = <TrashCan />;
+  }
+  if (icon === 'arrow-up') {
+    carbonIcon = <ArrowUp />;
+  }
+  if (icon === 'arrow-down') {
+    carbonIcon = <ArrowDown />;
+  }
+
+  return (
+    <button
+      type="button"
+      className={`btn btn-${iconType} ${className}`}
+      {...otherProps}
+    >
+      {carbonIcon}
+    </button>
+  );
+}
+
+export function MoveDownButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   return (
     <IconButton
-      {...otherProps}
-      size="small"
-      color={color as MuiIconButtonProps['color']}
-    >
-      {icon}
-    </IconButton>
-  );
-}
-
-export function MoveDownButton(props: IconButtonProps) {
-  return (
-    <MuiIconButton
       title="Move down"
+      className="array-item-move-down"
       {...props}
-      icon={<ArrowDownwardIcon fontSize="small" />}
+      icon="arrow-down"
     />
   );
 }
 
-export function MoveUpButton(props: IconButtonProps) {
+export function MoveUpButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   return (
-    <MuiIconButton
+    <IconButton
       title="Move up"
+      className="array-item-move-up"
       {...props}
-      icon={<ArrowUpwardIcon fontSize="small" />}
+      icon="arrow-up"
     />
   );
 }
 
-export function RemoveButton(props: IconButtonProps) {
-  const { iconType, ...otherProps } = props;
+export function RemoveButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: IconButtonProps<T, S, F>) {
   return (
-    <MuiIconButton
+    <IconButton
       title="Remove"
-      {...otherProps}
-      color="error"
-      icon={
-        <RemoveIcon fontSize={iconType === 'default' ? undefined : 'small'} />
-      }
+      className="array-item-remove"
+      {...props}
+      iconType="danger"
+      icon="remove"
     />
   );
 }
diff --git a/spiffworkflow-frontend/src/themes/carbon/index.css b/spiffworkflow-frontend/src/themes/carbon/index.css
index 72cdbb84..b536e7d2 100644
--- a/spiffworkflow-frontend/src/themes/carbon/index.css
+++ b/spiffworkflow-frontend/src/themes/carbon/index.css
@@ -17,3 +17,7 @@
 .rjsf .rjsf-field .rjsf-field {
   margin-bottom: 2em;
 }
+
+.array-item-toolbox {
+  margin-left: 2em;
+}

From a4e4fdbd44e614df4bd01d3731c940466ccacf2a Mon Sep 17 00:00:00 2001
From: Dan <daniel.h.funk@gmail.com>
Date: Mon, 30 Jan 2023 16:43:47 -0500
Subject: [PATCH 6/7] IBM says you can't have more columns than your parents,
 even if you try to start another grid, with kburnett

---
 spiffworkflow-frontend/src/routes/TaskShow.tsx       |  2 +-
 .../ArrayFieldItemTemplate.tsx                       | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx
index de7141a1..83e5df3f 100644
--- a/spiffworkflow-frontend/src/routes/TaskShow.tsx
+++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx
@@ -217,7 +217,7 @@ export default function TaskShow() {
 
     return (
       <Grid fullWidth condensed>
-        <Column sm={4} md={8} lg={16}>
+        <Column sm={4} md={5} lg={8}>
           <Form
             formData={taskData}
             onSubmit={handleFormSubmit}
diff --git a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index df8896bf..1a732a1c 100644
--- a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -40,9 +40,9 @@ export default function ArrayFieldItemTemplate<
   const btnStyle: CSSProperties = {
     marginBottom: '0.5em',
   };
-  const mainColumnWidthSmall = hasToolbar ? 3 : 4;
-  const mainColumnWidthMedium = hasToolbar ? 6 : 8;
-  const mainColumnWidthLarge = hasToolbar ? 12 : 16;
+  const mainColumnWidthSmall = 3;
+  const mainColumnWidthMedium = 4;
+  const mainColumnWidthLarge = 7;
   return (
     <div className={className}>
       <Grid condensed fullWidth>
@@ -55,9 +55,9 @@ export default function ArrayFieldItemTemplate<
         </Column>
         {hasToolbar && (
           <Column
-            sm={4 - mainColumnWidthSmall}
-            md={8 - mainColumnWidthMedium}
-            lg={16 - mainColumnWidthLarge}
+            sm={1}
+            md={1}
+            lg={1}
           >
             <div className="array-item-toolbox">
               <div className="NOT-btn-group">

From 797ccbad5f656efdc9ff2d3dddcf47f8d554a985 Mon Sep 17 00:00:00 2001
From: burnettk <burnettk@users.noreply.github.com>
Date: Mon, 30 Jan 2023 16:47:20 -0500
Subject: [PATCH 7/7] remove unneeded divs

---
 .../ArrayFieldItemTemplate.tsx                | 66 ++++++++-----------
 1 file changed, 28 insertions(+), 38 deletions(-)

diff --git a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
index 1a732a1c..cf1d2e35 100644
--- a/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -54,46 +54,36 @@ export default function ArrayFieldItemTemplate<
           {children}
         </Column>
         {hasToolbar && (
-          <Column
-            sm={1}
-            md={1}
-            lg={1}
-          >
+          <Column sm={1} md={1} lg={1}>
             <div className="array-item-toolbox">
               <div className="NOT-btn-group">
-                <div>
-                  {(hasMoveUp || hasMoveDown) && (
-                    <MoveUpButton
-                      style={btnStyle}
-                      disabled={disabled || readonly || !hasMoveUp}
-                      onClick={onReorderClick(index, index - 1)}
-                      uiSchema={uiSchema}
-                      registry={registry}
-                    />
-                  )}
-                </div>
-                <div>
-                  {(hasMoveUp || hasMoveDown) && (
-                    <MoveDownButton
-                      style={btnStyle}
-                      disabled={disabled || readonly || !hasMoveDown}
-                      onClick={onReorderClick(index, index + 1)}
-                      uiSchema={uiSchema}
-                      registry={registry}
-                    />
-                  )}
-                </div>
-                <div>
-                  {hasRemove && (
-                    <RemoveButton
-                      style={btnStyle}
-                      disabled={disabled || readonly}
-                      onClick={onDropIndexClick(index)}
-                      uiSchema={uiSchema}
-                      registry={registry}
-                    />
-                  )}
-                </div>
+                {(hasMoveUp || hasMoveDown) && (
+                  <MoveUpButton
+                    style={btnStyle}
+                    disabled={disabled || readonly || !hasMoveUp}
+                    onClick={onReorderClick(index, index - 1)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                )}
+                {(hasMoveUp || hasMoveDown) && (
+                  <MoveDownButton
+                    style={btnStyle}
+                    disabled={disabled || readonly || !hasMoveDown}
+                    onClick={onReorderClick(index, index + 1)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                )}
+                {hasRemove && (
+                  <RemoveButton
+                    style={btnStyle}
+                    disabled={disabled || readonly}
+                    onClick={onDropIndexClick(index)}
+                    uiSchema={uiSchema}
+                    registry={registry}
+                  />
+                )}
               </div>
             </div>
           </Column>