Display fixes for the edit UI

packages/design/sass/styles.scss

@@ -264,6 +264,11 @@ iframe:focus {
   fieldset {
     border: none;
     padding: 0;
+    margin-bottom: 2em;
+  }
+
+  h1 {
+    margin-top: 0;
   }
 
   .form-group-row {
@@ -290,6 +295,8 @@ iframe:focus {
       flex: 1;
       text-align: center;
       padding: 30px 0 0;
+      align-self: flex-end;
+      margin: 0 0 14px 7px;
     }
 
     label {
@@ -317,6 +324,17 @@ iframe:focus {
     margin-top: 0;
   }
 
+  .editFormContentWrapper {
+    .preview {
+      .grid-col-9 {
+        width: 100%;
+      }
+
+      .usa-form--large {
+        max-width: 46rem;
+      }
+    }
+  }
 }
 
 .editFormWrapper {
@@ -356,7 +374,7 @@ iframe:focus {
   position: -webkit-sticky; /* Safari */
   top: 10px;
 
-  h2 {
+  h3 {
     margin-top: 0;
     font-size: 1.2em;
     overflow-wrap: break-word;
@@ -383,6 +401,10 @@ iframe:focus {
       }
     }
   }
+
+  .usa-checkbox {
+    margin-top: 1.5rem;
+  }
 }
 
 .usa-step-indicator__segment {
@@ -430,30 +452,44 @@ iframe:focus {
 }
 
 @media screen and (max-width: 879px) {
-  .editFormContentWrapper {
-    .grid-col {
-      width: 100%;
-    }
 
-    .usa-button{
-      margin-left: 0;
-    }
+  .editFormPage {
 
-    .grid-col-4 {
-      position: static;
+    .usa-intro {
+      margin-bottom: 20px;
     }
 
-    .settingsContainer {
-      position: fixed;
-      top: 15%;
-      left: 50%;
-      transform: translate(-50%, 0);
-      width: 90%;
-      margin: 0 auto;
-      height: auto;
-      box-shadow: 1px 4px 12px #76766a;
+    .editFormContentWrapper {
+      .grid-col,
+      .grid-col-8 {
+        width: 100%;
+      }
+
+      .usa-button{
+        margin-left: 0;
+      }
+
+      .grid-col-4 {
+        position: static;
+      }
+
+      .form-group-row {
+        padding: 0 0 1rem;
+      }
+
+      .settingsContainer {
+        position: fixed;
+        top: 10%;
+        left: 50%;
+        transform: translate(-50%, 0);
+        width: 90%;
+        margin: 0 auto;
+        height: auto;
+        box-shadow: 1px 4px 12px #76766a;
+      }
     }
   }
+
 }
 
 

packages/design/src/FormManager/FormEdit/FormElementEdit.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 import {
@@ -14,8 +14,17 @@ export const FormElementEdit = ({
 }: {
   context: FormEditUIContext;
 }) => {
-  const { form, selectedElement, setCurrentForm } = usePreviewContext();
-  if (!selectedElement) {
+  const { form, selectedElement, setCurrentForm, setSelectedElement, isSettingsVisible } = usePreviewContext();
+  const handleClose = () => {
+    setSelectedElement(undefined);
+  };
+
+  if (!selectedElement || !isSettingsVisible) {
+    return;
+  }
+
+  //TODO: Add the following to the if statement below if we decide to hide the edit form on page load: || !isSettingsVisible 
+  if (!selectedElement || !isSettingsVisible) {
     return;
   }
 
@@ -24,14 +33,40 @@ export const FormElementEdit = ({
       [selectedElement.id]: selectedElement,
     },
   });
+  const settingsContainerRef = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     methods.setValue(selectedElement.id, selectedElement);
   }, [selectedElement]);
 
+  //Updates the scroll position of the edit form when it's visible
+  useEffect(() => {
+    let frameId: number;
+
+    const updatePosition = () => {
+      if (window.innerWidth > 879) {
+        if (selectedElement) {
+          const element = document.querySelector(`[data-id="${selectedElement.id}"]`);
+          if (element && settingsContainerRef.current) {
+            const rect = element.getBoundingClientRect();
+            settingsContainerRef.current.style.top = `${rect.top}px`;
+          }
+        }
+      }
+      frameId = requestAnimationFrame(updatePosition);
+    };
+
+    frameId = requestAnimationFrame(updatePosition);
+
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [selectedElement]);
+
   const SelectedEditComponent = context.editComponents[selectedElement.type];
   return (
     <FormProvider {...methods}>
-      <div className="settingsContainer">
+      <div ref={settingsContainerRef} className="settingsContainer position-sticky">
         <form
           className="editForm"
           onSubmit={methods.handleSubmit(formData => {
@@ -51,13 +86,15 @@ export const FormElementEdit = ({
             setCurrentForm(updatedForm);
           })}
         >
+          <h3>Editing &quot;{selectedElement.data.label}&quot;...</h3>
           <SelectedEditComponent
             context={context}
             form={form}
             element={selectedElement}
           />
           <p>
             <input className="usa-button" type="submit" value="Save" />
+            <input onClick={handleClose} className="usa-button close-button" type="submit" value="Cancel" />
           </p>
         </form>
       </div>

packages/design/src/FormManager/FormEdit/Preview.tsx

@@ -102,18 +102,26 @@ const createPatternPreviewComponent = (
   }: {
     pattern: Pattern;
   }) => {
-    const { form, selectedElement, setSelectedElement } = usePreviewContext();
+    const { form, selectedElement, setSelectedElement, setSelectedElementTop, setIsSettingsVisible } = usePreviewContext();
 
+    //Handles the positioning of the edit form
     const handleEditClick = () => {
-      if (selectedElement.id === pattern._elementId) {
-        //setSelectedElement(null);
+      if (selectedElement?.id === pattern._elementId) {
+        setSelectedElement(undefined);
       } else {
-        const element = getFormElement(form, pattern._elementId);
-        setSelectedElement(element);
+        const element = document.querySelector(`[data-id="${pattern._elementId}"]`);
+        if (element) {
+          const rect = element.getBoundingClientRect();
+          setSelectedElementTop(rect.top);
+        }
+        const elementToSet = getFormElement(form, pattern._elementId);
+        setSelectedElement(elementToSet);
       }
-    };
 
-    const isSelected = selectedElement.id === pattern._elementId;
+      setIsSettingsVisible(true);
+    };
+
+    const isSelected = selectedElement?.id === pattern._elementId;
     const divClassNames = isSelected
       ? 'form-group-row field-selected'
       : 'form-group-row';

packages/design/src/FormManager/FormEdit/context.tsx

@@ -10,8 +10,12 @@ import {
 type PreviewContextValue = {
   form: FormDefinition;
   setCurrentForm: (form: FormDefinition) => void;
-  selectedElement: FormElement;
-  setSelectedElement: (element: FormElement) => void;
+  selectedElement?: FormElement;
+  setSelectedElement: (element?: FormElement | undefined) => void;
+  selectedElementTop: number;
+  setSelectedElementTop: (top: number) => void;
+  isSettingsVisible: boolean;
+  setIsSettingsVisible: (isVisible: boolean) => void;
 };
 
 export const PreviewContext = createContext<PreviewContextValue>(
@@ -29,17 +33,27 @@ export const PreviewContextProvider = ({
 }) => {
   const [form, setCurrentForm] = useState(initialForm);
   const element = getFirstFormElement(config, form);
+  //TODO: replace '(undefined)' with '(element)' if we decide to make first field selected on page load
+  const [selectedElement, setSelectedElement] = useState<FormElement | undefined>(undefined); 
+  const [selectedElementTop, setSelectedElementTop] = useState(0);
+  const [isSettingsVisible, setIsSettingsVisible] = useState(false);
+
+
   if (!element) {
     throw new Error('Form has no elements');
   }
-  const [selectedElement, setSelectedElement] = useState<FormElement>(element);
+
   return (
     <PreviewContext.Provider
       value={{
         form,
         setCurrentForm,
         selectedElement,
         setSelectedElement,
+        selectedElementTop,
+        setSelectedElementTop,
+        isSettingsVisible,
+        setIsSettingsVisible,
       }}
     >
       {children}

packages/design/src/FormManager/FormEdit/index.tsx

@@ -28,10 +28,6 @@ export default function FormEdit({
       <h1>Edit form</h1>
       <p className="usa-intro">Your form has been imported for web delivery.</p>
       <PreviewContextProvider config={context.config} initialForm={form}>
-        <EditForm
-          context={context}
-          saveForm={form => formService.saveForm(formId, form)}
-        />{' '}
         <EditForm
           context={context}
           saveForm={form => formService.saveForm(formId, form)}