From 746dff9e6d23b9986f01f0713f742a693ad4a3fa Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 13 Jun 2023 17:26:26 -0500
Subject: [PATCH] only use modal title prop

---
 app/components/EquivalentCliCommand.tsx | 4 +---
 app/components/form/FullPageForm.tsx    | 8 +++++---
 app/pages/project/images/ImagesPage.tsx | 3 +--
 libs/ui/lib/modal/Modal.stories.tsx     | 8 ++------
 libs/ui/lib/modal/Modal.tsx             | 6 ++++--
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/app/components/EquivalentCliCommand.tsx b/app/components/EquivalentCliCommand.tsx
index 96b45a0585..451a242fec 100644
--- a/app/components/EquivalentCliCommand.tsx
+++ b/app/components/EquivalentCliCommand.tsx
@@ -23,9 +23,7 @@ export default function EquivalentCliCommand({ command }: { command: string }) {
       <Button variant="ghost" size="sm" className="ml-2" onClick={() => setIsOpen(true)}>
         Equivalent CLI Command
       </Button>
-      <Modal isOpen={isOpen} onDismiss={handleDismiss}>
-        <Modal.Title>CLI Command</Modal.Title>
-
+      <Modal isOpen={isOpen} onDismiss={handleDismiss} title="CLI command">
         <Modal.Section>
           {/* todo: fix the token to disable contextual alternates in the mono font */}
           <pre className="flex w-full rounded border px-4 py-3 !normal-case !tracking-normal text-mono-md bg-default border-secondary [font-feature-settings:_'calt'_off]">
diff --git a/app/components/form/FullPageForm.tsx b/app/components/form/FullPageForm.tsx
index 4df3205ba3..0fdb96b304 100644
--- a/app/components/form/FullPageForm.tsx
+++ b/app/components/form/FullPageForm.tsx
@@ -112,9 +112,11 @@ export function FullPageForm<TFieldValues extends FieldValues>({
 }
 
 const ConfirmNavigation = ({ blocker }: { blocker: Blocker }) => (
-  <Modal isOpen={blocker.state === 'blocked'} onDismiss={() => blocker.reset?.()}>
-    <Modal.Title>Confirm Navigation</Modal.Title>
-
+  <Modal
+    isOpen={blocker.state === 'blocked'}
+    onDismiss={() => blocker.reset?.()}
+    title="Confirm navigation"
+  >
     <Modal.Section>
       Are you sure you want to leave this page? <br /> You will lose all progress on this
       form.
diff --git a/app/pages/project/images/ImagesPage.tsx b/app/pages/project/images/ImagesPage.tsx
index a1ebe0cc62..f6094b8be3 100644
--- a/app/pages/project/images/ImagesPage.tsx
+++ b/app/pages/project/images/ImagesPage.tsx
@@ -109,8 +109,7 @@ const PromoteImageModal = ({ onDismiss, imageName }: PromoteModalProps) => {
   }
 
   return (
-    <Modal isOpen onDismiss={onDismiss}>
-      <Modal.Title>Promote image</Modal.Title>
+    <Modal isOpen onDismiss={onDismiss} title="Promote image">
       <Modal.Body>
         <Modal.Section>
           <p>
diff --git a/libs/ui/lib/modal/Modal.stories.tsx b/libs/ui/lib/modal/Modal.stories.tsx
index 3d5aec246a..0f21cb6b4c 100644
--- a/libs/ui/lib/modal/Modal.stories.tsx
+++ b/libs/ui/lib/modal/Modal.stories.tsx
@@ -19,9 +19,7 @@ export function Default() {
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open menu</Button>
-      <Modal isOpen={isOpen} onDismiss={handleDismiss}>
-        <Modal.Title>Title</Modal.Title>
-
+      <Modal isOpen={isOpen} onDismiss={handleDismiss} title="Title">
         <Modal.Body>
           <Modal.Section>
             <p>
@@ -72,9 +70,7 @@ export function Sticky() {
   return (
     <>
       <Button onClick={() => setIsOpen(true)}>Open menu</Button>
-      <Modal isOpen={isOpen} onDismiss={handleDismiss}>
-        <Modal.Title>Title</Modal.Title>
-
+      <Modal isOpen={isOpen} onDismiss={handleDismiss} title="Title">
         <Modal.Body>
           <Modal.Section>
             <div className="space-y-2">
diff --git a/libs/ui/lib/modal/Modal.tsx b/libs/ui/lib/modal/Modal.tsx
index 1db4f81024..6e51faa970 100644
--- a/libs/ui/lib/modal/Modal.tsx
+++ b/libs/ui/lib/modal/Modal.tsx
@@ -64,7 +64,7 @@ export function Modal({ children, onDismiss, title, isOpen }: ModalProps) {
                 >
                   {title && (
                     <Dialog.Title asChild>
-                      <Modal.Title id={titleId}>{title}</Modal.Title>
+                      <ModalTitle id={titleId}>{title}</ModalTitle>
                     </Dialog.Title>
                   )}
                   {children}
@@ -77,7 +77,9 @@ export function Modal({ children, onDismiss, title, isOpen }: ModalProps) {
   )
 }
 
-Modal.Title = ({ children, id }: { children?: React.ReactNode; id?: string }) => (
+// not exported because we want to use the `title` prop on Modal so the aria
+// label gets hooked up properly
+const ModalTitle = ({ children, id }: { children?: React.ReactNode; id?: string }) => (
   <div className="flex items-center justify-between border-b py-4 px-4 bg-secondary border-b-secondary">
     <h2 className="text-sans-semi-lg" id={id}>
       {children}