Updated the form field focus of edit forms and ui

GSA-TTS · Jun 20, 2024 · eb17898 · eb17898
1 parent e5a01c5
commit eb17898
Show file tree

Hide file tree

Showing 13 changed files with 78 additions and 21 deletions.
diff --git a/packages/design/src/Form/components/Fieldset/index.tsx b/packages/design/src/Form/components/Fieldset/index.tsx
@@ -6,9 +6,9 @@ import { type PatternComponent } from '../../../Form';
 
 const Fieldset: PatternComponent<FieldsetProps> = props => {
   return (
-    <fieldset className="usa-fieldset width-full margin-top-2">
+    <fieldset className="usa-fieldset width-full padding-top-2">
       {props.legend !== '' && props.legend !== undefined && (
-        <legend className="usa-legend text-bold text-uppercase line-height-body-4 margin-top-2 margin-bottom-1">
+        <legend className="usa-legend text-bold text-uppercase line-height-body-4 width-full margin-top-0 padding-top-3 padding-bottom-1">
           {props.legend}
         </legend>
       )}

diff --git a/packages/design/src/Form/components/RadioGroup/RadioGroup.tsx b/packages/design/src/Form/components/RadioGroup/RadioGroup.tsx
@@ -8,8 +8,8 @@ import { type PatternComponent } from '../../../Form';
 export const RadioGroupPattern: PatternComponent<RadioGroupProps> = props => {
   const { register } = useFormContext();
   return (
-    <div className="usa-fieldset">
-      <legend className="usa-legend text-bold">{props.legend}</legend>
+    <div className="usa-fieldset padding-top-2">
+      <legend className="usa-legend text-bold margin-top-0 padding-top-3">{props.legend}</legend>
       {props.options.map((option, index) => {
         return (
           <div key={index} className="usa-radio">

diff --git a/packages/design/src/Form/components/TextInput/index.tsx b/packages/design/src/Form/components/TextInput/index.tsx
@@ -10,7 +10,7 @@ const TextInput: PatternComponent<TextInputProps> = props => {
   return (
     <div className="usa-form-group-wrapper" key={props.inputId}>
       <div
-        className={classNames('usa-form-group', {
+        className={classNames('usa-form-group margin-top-2', {
           'usa-form-group--error': props.error,
         })}
       >

diff --git a/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx
@@ -11,6 +11,7 @@ import { PatternEditActions } from './common/PatternEditActions';
 import { PatternEditForm } from './common/PatternEditForm';
 import { usePatternEditFormContext } from './common/hooks';
 import { en as message } from '@atj/common/src/locales/en/app';
+import styles from '../formEditStyles.module.css';
 
 const CheckboxPatternEdit: PatternEditComponent<CheckboxProps> = ({
   focus,
@@ -24,7 +25,9 @@ const CheckboxPatternEdit: PatternEditComponent<CheckboxProps> = ({
           editComponent={<CheckboxEditComponent pattern={focus.pattern} />}
         ></PatternEditForm>
       ) : (
-        <Checkbox {...previewProps} />
+        <div className="padding-left-3 padding-bottom-3 padding-right-3">
+           <Checkbox {...previewProps} />
+        </div>
       )}
     </>
   );
@@ -37,7 +40,7 @@ const CheckboxEditComponent = ({ pattern }: { pattern: CheckboxPattern }) => {
   const label = getFieldState('label');
 
   return (
-    <div className="grid-row grid-gap">
+    <div className="grid-row grid-gap padding-3">
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
         <label
           className={classnames('usa-label', {
@@ -58,6 +61,7 @@ const CheckboxEditComponent = ({ pattern }: { pattern: CheckboxPattern }) => {
           defaultValue={pattern.data.label}
           {...register('label')}
           type="text"
+          autoFocus
         ></input>
       </div>
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">

diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -12,6 +12,7 @@ import { PatternEditForm } from './common/PatternEditForm';
 import { usePatternEditFormContext } from './common/hooks';
 import { FieldsetPattern } from '@atj/forms/src/patterns/fieldset';
 import classNames from 'classnames';
+import styles from '../formEditStyles.module.css';
 
 const FieldsetEdit: PatternEditComponent<FieldsetProps> = ({
   focus,
@@ -39,8 +40,8 @@ const FieldsetPreview: PatternComponent<FieldsetProps> = props => {
     <>
       <Fieldset {...(props as FieldsetProps)}>
         {pattern && pattern.data.patterns.length === 0 && (
-          <div className="usa-alert usa-alert--warning usa-alert--no-icon margin-bottom-3">
-            <div className="usa-alert__body">
+          <div className={`${styles.usaAlert} usa-alert usa-alert--warning usa-alert--no-icon margin-left-3 margin-right-3 margin-bottom-3`}>
+            <div className={`${styles.usaAlertBody} usa-alert__body`}>
               <p className="usa-alert__text">
                 <span className="alert-text display-inline-block text-top margin-right-2">
                   Empty sections will not display.
@@ -100,6 +101,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
             defaultValue={pattern.data.legend}
             {...register('legend')}
             type="text"
+            autoFocus
           ></input>
         </label>
       </div>

diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
@@ -23,7 +23,9 @@ const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = ({
           editComponent={<EditComponent pattern={focus.pattern} />}
         ></PatternEditForm>
       ) : (
-        <FormSummary {...previewProps} />
+        <div className="padding-left-3 padding-bottom-3 padding-right-3">
+           <FormSummary {...previewProps} />
+        </div>
       )}
     </>
   );
@@ -57,6 +59,7 @@ const EditComponent = ({ pattern }: { pattern: Pattern }) => {
             {...register('title')}
             defaultValue={pattern.data.title}
             type="text"
+            autoFocus
           ></input>
         </label>
       </div>

diff --git a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
@@ -25,7 +25,9 @@ const InputPatternEdit: PatternEditComponent<TextInputProps> = ({
           editComponent={<EditComponent patternId={focus.pattern.id} />}
         ></PatternEditForm>
       ) : (
-        <TextInput {...previewProps} />
+        <div className="padding-left-3 padding-bottom-3 padding-right-3">
+           <TextInput {...previewProps} />
+        </div>
       )}
     </>
   );
@@ -72,6 +74,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
             defaultValue={pattern.data.label}
             {...register('label')}
             type="text"
+            autoFocus
           ></input>
         </label>
       </div>

diff --git a/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx b/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx
@@ -14,6 +14,13 @@ import { PatternPreviewSequence } from './PreviewSequencePattern';
 import styles from '../formEditStyles.module.css';
 
 export const PageEdit: PatternEditComponent<PageProps> = props => {
+  const handleParentClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (event.target === event.currentTarget) {
+      // Trigger focus or any other action you want when the parent div is clicked
+      event.currentTarget.focus();
+    }
+  };
+
   return (
     <>
       {props.focus ? (
@@ -24,6 +31,8 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
       ) : (
         <div
           className={`${styles.titleArea} display-flex flex-justify flex-align-center position-relative margin-bottom-205`}
+          onClick={handleParentClick}
+          tabIndex={0} // Make the div focusable
         >
           <span
             className={`${styles.titleText} padding-right-1 text-uppercase text-ls-1 text-base-darkest bg-primary-lighter`}
@@ -81,11 +90,12 @@ const PageEditComponent = ({ pattern }: { pattern: PagePattern }) => {
           id={fieldId('title')}
           defaultValue={pattern.data.title}
           {...register('title')}
+          autoFocus
         ></input>
       </div>
       <div className="grid-col-12">
         <PatternEditActions />
       </div>
     </div>
   );
-};
+};
diff --git a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
@@ -25,7 +25,9 @@ const ParagraphPatternEdit: PatternEditComponent<ParagraphProps> = ({
           editComponent={<EditComponent patternId={focus.pattern.id} />}
         ></PatternEditForm>
       ) : (
-        <Paragraph {...previewProps} />
+        <div className="padding-left-3 padding-bottom-3 padding-right-3">
+           <Paragraph {...previewProps} />
+        </div>
       )}
     </>
   );
@@ -62,6 +64,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           rows={4}
           {...register('text')}
           defaultValue={pattern.data.text}
+          autoFocus
         ></textarea>
       </div>
       <PatternEditActions />

diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
@@ -84,19 +84,30 @@ const SortableItem = ({
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({ id });
   const context = useFormManagerStore(state => state.context);
+  const { tabIndex, ...restAttributes } = attributes;
+
+  const handleItemClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    // Only focus if the target is the parent div
+    if (event.target === event.currentTarget) {
+      event.currentTarget.focus();
+    }
+  };
+
 
   return (
     <div
-      className={`${styles.draggableListWrapper} draggable-list-item-wrapper bg-white margin-bottom-3 padding-3`}
+      className={`${styles.draggableListWrapper} draggable-list-item-wrapper bg-white margin-bottom-3`}
       ref={setNodeRef}
       style={{
         transform: CSS.Transform.toString(transform),
         transition,
       }}
+      onMouseDown={handleItemClick}
+      tabIndex={tabIndex ?? 0}
     >
-      <div className="grid-row grid-gap draggable-list-item cursor-pointer">
+      <div className="grid-row draggable-list-item cursor-pointer">
         <div
-          className="grid-col-12 width-full draggable-list-button cursor-grab margin-top-2 margin-bottom-2"
+          className="grid-col-12 width-full draggable-list-button cursor-grab padding-2"
           {...listeners}
           {...attributes}
         >

diff --git a/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx
@@ -11,6 +11,7 @@ import { PatternEditActions } from './common/PatternEditActions';
 import { PatternEditForm } from './common/PatternEditForm';
 import { usePatternEditFormContext } from './common/hooks';
 import { en as message } from '@atj/common/src/locales/en/app';
+import styles from '../formEditStyles.module.css';
 
 const RadioGroupPatternEdit: PatternEditComponent<RadioGroupProps> = ({
   focus,
@@ -24,7 +25,9 @@ const RadioGroupPatternEdit: PatternEditComponent<RadioGroupProps> = ({
           editComponent={<EditComponent pattern={focus.pattern} />}
         ></PatternEditForm>
       ) : (
-        <RadioGroup {...previewProps} />
+        <div className={`${styles.radioFormPattern} padding-left-3 padding-bottom-3 padding-right-3`}>
+           <RadioGroup {...previewProps} />
+        </div>   
       )}
     </>
   );
@@ -38,7 +41,7 @@ const EditComponent = ({ pattern }: { pattern: RadioGroupPattern }) => {
 
   return (
     <div className="grid-row grid-gap">
-      <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
+      <div className="tablet:grid-col-6 mobile-lg:grid-col-12 margin-bottom-2">
         <label
           className={classnames('usa-label', {
             'usa-label--error': label.error,
@@ -56,6 +59,7 @@ const EditComponent = ({ pattern }: { pattern: RadioGroupPattern }) => {
             defaultValue={pattern.data.label}
             {...register('label')}
             type="text"
+            autoFocus
           ></input>
         </label>
       </div>
@@ -75,7 +79,7 @@ const EditComponent = ({ pattern }: { pattern: RadioGroupPattern }) => {
                   {optionLabel.error.message}
                 </span>
               ) : null}
-              <div className="display-flex">
+              <div className="display-flex margin-bottom-2">
                 <input
                   className={classnames('hide', 'usa-input', {
                     'usa-label--error': label.error,
@@ -97,7 +101,7 @@ const EditComponent = ({ pattern }: { pattern: RadioGroupPattern }) => {
           );
         })}
         <button
-          className="usa-button usa-button--outline"
+          className="usa-button usa-button--outline margin-top-1"
           type="button"
           onClick={event => {
             event.preventDefault();

diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx
@@ -48,7 +48,7 @@ export const PatternEditForm = ({
           }
         })}
       >
-        <div className="border-1 radius-md border-primary-light padding-1">
+        <div className="border-05 radius-md border-primary-light padding-3">
           {editComponent}
         </div>
       </form>

diff --git a/packages/design/src/FormManager/FormEdit/formEditStyles.module.css b/packages/design/src/FormManager/FormEdit/formEditStyles.module.css
@@ -51,11 +51,28 @@
     background-color: #fff;
 }
 
+.draggableListWrapper legend {
+    padding-left: 1.5rem;
+}
+
+.draggableListWrapper .radioFormPattern legend {
+    padding-left: 0;
+}
+
 /* Configure and Publish Pages */
 .progressPage {
     min-height: 60vh;
 }
 
+/* Fieldset */
+.usaAlert .usaAlertBody {
+    margin-left: 0;
+}
+
+.usaAlert span {
+    background: none;
+}
+
 @media (max-width: 40em) {
     .dropdownMenu {
         bottom: 4.5rem;