Merge pull request #118 from sartography/feature/form-styling-fixes

Feature/form styling fixes
2023-01-30 13:47:55 -08:00 · 2023-01-30 13:47:55 -08:00 · 8363bda7c9
parent 15b47b379c 7a17c22ba8
commit 8363bda7c9
10 changed files with 235 additions and 161 deletions
--- 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={5} lg={8}>
          <Form
            formData={taskData}
            onSubmit={handleFormSubmit}
--- 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;
+}
--- 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,57 @@ 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 = 3;
+  const mainColumnWidthMedium = 4;
+  const mainColumnWidthLarge = 7;
  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',
-            }}
-          >
-            {(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>
-      )}
+      <Grid condensed fullWidth>
+        <Column
+          sm={mainColumnWidthSmall}
+          md={mainColumnWidthMedium}
+          lg={mainColumnWidthLarge}
+        >
+          {children}
+        </Column>
+        {hasToolbar && (
+          <Column sm={1} md={1} lg={1}>
+            <div className="array-item-toolbox">
+              <div className="NOT-btn-group">
+                {(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>
+        )}
+      </Grid>
    </div>
  );
 }
--- 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) {
@ -102,7 +107,7 @@ export default function BaseInputTemplate<
        id={id}
        name={id}
        className="input"
-        labelText={labelToUse}
+        helperText={helperText}
        invalid={invalid}
        invalidText={errorMessageForField}
        autoFocus={autofocus}
--- 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;
 }
--- a/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx
+++ b/spiffworkflow-frontend/src/themes/carbon/FieldTemplate/FieldTemplate.tsx
@ -1,64 +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 (
-    <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}>
+    <div className="rjsf-field">
+      <WrapIfAdditionalTemplate {...props}>
+        {displayLabel && <Label label={label} required={required} id={id} />}
+        {displayLabel && description ? description : null}
        {children}
-        {displayLabel && rawDescription ? (
-          <Typography variant="caption" color="textSecondary">
-            {rawDescription}
-          </Typography>
-        ) : null}
        {errors}
        {help}
-      </FormControl>
-    </WrapIfAdditionalTemplate>
+      </WrapIfAdditionalTemplate>
+    </div>
  );
 }
-
-export default FieldTemplate;
--- 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"
    />
  );
 }
--- 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}*`;
  }
@ -49,16 +53,20 @@ 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,
+  // but allowing ui:help to grab that spot seems much more appropriate.
+
  return (
    <Select
      id={id}
      name={id}
-      labelText={labelToUse}
+      labelText=""
      select
-      helperText={placeholder}
+      helperText={helperText}
      value={typeof value === 'undefined' ? emptyValue : value}
      disabled={disabled || readonly}
      autoFocus={autofocus}
--- 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 (
@ -74,7 +74,7 @@ function TextareaWidget<
      name={id}
      className="form-control"
      value={value || ''}
-      labelText={labelToUse}
+      labelText=""
      placeholder={placeholder}
      required={required}
      disabled={disabled}
--- 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,11 @@ 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;
 }
+
+.array-item-toolbox {
+  margin-left: 2em;
+}