move close button back into SideModal

oxidecomputer · Dec 13, 2024 · 7fe3cfe · 7fe3cfe
1 parent 240fce0
commit 7fe3cfe
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/app/components/form/SideModalForm.tsx b/app/components/form/SideModalForm.tsx
@@ -5,13 +5,12 @@
  *
  * Copyright Oxide Computer Company
  */
-import * as Dialog from '@radix-ui/react-dialog'
+
 import { useEffect, useId, useState, type ReactNode } from 'react'
 import type { FieldValues, UseFormReturn } from 'react-hook-form'
 import { NavigationType, useNavigationType } from 'react-router-dom'
 
 import type { ApiError } from '@oxide/api'
-import { Close12Icon } from '@oxide/design-system/icons/react'
 
 import { Button } from '~/ui/lib/Button'
 import { Modal } from '~/ui/lib/Modal'
@@ -147,14 +146,6 @@ export function SideModalForm<TFieldValues extends FieldValues>({
         </SideModal.Footer>
       )}
 
-      {/* Close button is here at the end so we aren't automatically focusing on it when the side modal is opened. Positioned in the safe area at the top */}
-      <Dialog.Close
-        className="absolute right-[var(--content-gutter)] top-10 -m-2 flex rounded p-2 hover:bg-hover"
-        aria-label="Close"
-      >
-        <Close12Icon className="text-default" />
-      </Dialog.Close>
-
       {showNavGuard && (
         <Modal
           isOpen

diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx
@@ -10,7 +10,7 @@ import { animated, useTransition } from '@react-spring/web'
 import cn from 'classnames'
 import React, { useRef, type ReactNode } from 'react'
 
-import { Error12Icon } from '@oxide/design-system/icons/react'
+import { Close12Icon, Error12Icon } from '@oxide/design-system/icons/react'
 
 import { useIsOverflow } from '~/hooks/use-is-overflow'
 import { Message } from '~/ui/lib/Message'
@@ -115,6 +115,14 @@ export function SideModal({
                     </div>
                   )}
                   {children}
+
+                  {/* Close button is here at the end so we aren't automatically focusing on it when the side modal is opened. Positioned in the safe area at the top */}
+                  <Dialog.Close
+                    className="absolute right-[var(--content-gutter)] top-10 -m-2 flex rounded p-2 hover:bg-hover"
+                    aria-label="Close"
+                  >
+                    <Close12Icon className="text-default" />
+                  </Dialog.Close>
                 </AnimatedDialogContent>
               </Dialog.Portal>
             </Dialog.Root>