make task show wide, and make repeating form icons match site styles. w/ dfunk

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}

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;
+}

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,23 +38,30 @@ 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}
+          >
+            <div className="array-item-toolbox">
+              <div className="NOT-btn-group">
+                <div>
                   {(hasMoveUp || hasMoveDown) && (
                     <MoveUpButton
                       style={btnStyle}
@@ -59,6 +71,8 @@ export default function ArrayFieldItemTemplate<
                       registry={registry}
                     />
                   )}
+                </div>
+                <div>
                   {(hasMoveUp || hasMoveDown) && (
                     <MoveDownButton
                       style={btnStyle}
@@ -68,6 +82,8 @@ export default function ArrayFieldItemTemplate<
                       registry={registry}
                     />
                   )}
+                </div>
+                <div>
                   {hasRemove && (
                     <RemoveButton
                       style={btnStyle}
@@ -79,7 +95,10 @@ export default function ArrayFieldItemTemplate<
                   )}
                 </div>
               </div>
+            </div>
+          </Column>
         )}
+      </Grid>
     </div>
   );
 }

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"
     />
   );
 }

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;
+}