Move the edit pattern save button to the pattern edit actions compone…

…nt. (#172)
GSA-TTS · Jun 6, 2024 · 14d4355 · 14d4355
1 parent 5ac8d88
commit 14d4355
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 
 import { type FormSummaryProps } from '@atj/forms';
@@ -8,7 +9,7 @@ import { PatternEditComponent } from '../types';
 
 import { PatternEditForm } from './common/PatternEditForm';
 import { usePatternEditFormContext } from './common/hooks';
-import classNames from 'classnames';
+import { PatternEditActions } from './common/PatternEditActions';
 
 const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = ({
   focus,
@@ -80,6 +81,9 @@ const EditComponent = ({ pattern }: { pattern: Pattern }) => {
           ></textarea>
         </label>
       </div>
+      <div className="grid-col-12">
+        <PatternEditActions />
+      </div>
     </div>
   );
 };

diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx
@@ -68,6 +68,22 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
             </svg>
           </button>
 
+          <button
+            type="submit"
+            aria-label="Save changes to this pattern"
+            title="Save changes to this pattern"
+            className="usa-button--outline usa-button--unstyled text-success hover:text-success"
+          >
+            <svg
+              className="usa-icon usa-icon--size-3 margin-1 text-middle"
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+            >
+              <use xlinkHref={`${context.uswdsRoot}img/sprite.svg#check`}></use>
+            </svg>
+          </button>
+
           {children ? (
             <span className="margin-left-1 padding-left-2 border-left-1px border-base-lighter">
               {children}

diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditForm.tsx
@@ -51,9 +51,6 @@ export const PatternEditForm = ({
         <div className="border-1 radius-md border-primary-light padding-1">
           {editComponent}
         </div>
-        <button type="submit" className="usa-button margin-y-1">
-          Save
-        </button>
       </form>
     </FormProvider>
   );