chore: alert respond to pr comments

Author: S-unya

src/components/AerAlertDialog/AerAlertDialog.spec.tsx

@@ -21,14 +21,14 @@ describe("AlertDialog", () => {
             <button>Open the dialog</button>
           </AerAlertDialogTrigger>
         }
-        dialogTitle={<>This is important!</>}
-        dialogFooter={
+        title={<>This is important!</>}
+        footer={
           <AerAlertDialogFooter
-            dialogCancel={<button>Cancel</button>}
-            dialogAction={<button>Yes, do it!</button>}
+            cancel={<button>Cancel</button>}
+            action={<button>Yes, do it!</button>}
           />
         }
-        dialogContent={<p>Are you sure about all of that stuff?</p>}
+        content={<p>Are you sure about all of that stuff?</p>}
       />
     );
 
@@ -50,14 +50,14 @@ describe("AlertDialog", () => {
             <button>Open the dialog</button>
           </AerAlertDialogTrigger>
         }
-        dialogTitle={{ title: <>This is important!</>, hideTitle: true }}
-        dialogFooter={
+        title={{ title: <>This is important!</>, hideTitle: true }}
+        footer={
           <AerAlertDialogFooter
-            dialogCancel={<button>Cancel</button>}
-            dialogAction={<button>Yes, do it!</button>}
+            cancel={<button>Cancel</button>}
+            action={<button>Yes, do it!</button>}
           />
         }
-        dialogContent={<p>Are you sure about all of that stuff?</p>}
+        content={<p>Are you sure about all of that stuff?</p>}
       />
     );
 
@@ -79,14 +79,14 @@ describe("AlertDialog", () => {
             <button>Open the dialog</button>
           </AerAlertDialogTrigger>
         }
-        dialogTitle={<>This is important!</>}
-        dialogFooter={
+        title={<>This is important!</>}
+        footer={
           <AerAlertDialogFooter
-            dialogCancel={<button onClick={cancelCb}>Cancel</button>}
-            dialogAction={<button>Yes, do it!</button>}
+            cancel={<button onClick={cancelCb}>Cancel</button>}
+            action={<button>Yes, do it!</button>}
           />
         }
-        dialogContent={<p>Are you sure about all of that stuff?</p>}
+        content={<p>Are you sure about all of that stuff?</p>}
       />
     );
 
@@ -109,14 +109,14 @@ describe("AlertDialog", () => {
             <button>Open the dialog</button>
           </AerAlertDialogTrigger>
         }
-        dialogTitle={<>This is important!</>}
-        dialogFooter={
+        title={<>This is important!</>}
+        footer={
           <AerAlertDialogFooter
-            dialogCancel={<button>Cancel</button>}
-            dialogAction={<button onClick={actionCb}>Yes, do it!</button>}
+            cancel={<button>Cancel</button>}
+            action={<button onClick={actionCb}>Yes, do it!</button>}
           />
         }
-        dialogContent={<p>Are you sure about all of that stuff?</p>}
+        content={<p>Are you sure about all of that stuff?</p>}
       />
     );
 

src/components/AerAlertDialog/AerAlertDialog.stories.tsx

@@ -26,13 +26,13 @@ Default.args = {
       <AerButton>Open the dialog</AerButton>
     </AerAlertDialogTrigger>
   ),
-  dialogTitle: <>This is important!</>,
-  dialogContent: <p>Are you sure about all of that stuff?</p>,
-  dialogFooter: (
+  title: <>This is important!</>,
+  content: <p>Are you sure about all of that stuff?</p>,
+  footer: (
     <AerAlertDialogFooter
       style={{ justifyContent: "space-between", display: "flex" }}
-      dialogCancel={<AerButton variant="important">Cancel</AerButton>}
-      dialogAction={<AerButton variant="primary">Yes, do it!</AerButton>}
+      cancel={<AerButton variant="important">Cancel</AerButton>}
+      action={<AerButton variant="primary">Yes, do it!</AerButton>}
     />
   ),
 };
@@ -61,4 +61,21 @@ export const LocalTheme: ComponentStory<any> = () => (
   </>
 );
 
-// todo make hidden title version
+export const VisuallyHiddenTitle = Template.bind({});
+
+VisuallyHiddenTitle.args = {
+  trigger: (
+    <AerAlertDialogTrigger>
+      <AerButton>Open the dialog</AerButton>
+    </AerAlertDialogTrigger>
+  ),
+  title: { title: <>This is important!</>, hideTitle: true },
+  content: <p>Are you sure about all of that stuff?</p>,
+  footer: (
+    <AerAlertDialogFooter
+      style={{ justifyContent: "space-between", display: "flex" }}
+      cancel={<AerButton variant="important">Cancel</AerButton>}
+      action={<AerButton variant="primary">Yes, do it!</AerButton>}
+    />
+  ),
+};

src/components/AerAlertDialog/AerAlertDialog.tsx

@@ -10,72 +10,81 @@ export const AerAlertDialogTrigger = ({ children }: DefaultProps<"button">) => (
 
 export interface AlertDialogFooterProps extends DefaultProps<"footer"> {
   // An element (ideally a button) to cancel the alert dialog
-  dialogCancel?: ReactElement;
+  cancel?: ReactElement;
   // An element (ideally a button) to trigger the alert dialog action
-  dialogAction: ReactElement;
+  action: ReactElement;
 }
 
 export const AerAlertDialogFooter = ({
-  dialogCancel,
-  dialogAction,
+  cancel,
+  action,
   ...rest
 }: AlertDialogFooterProps) => (
   <footer {...rest}>
-    {dialogCancel ? (
-      <AlertDialog.Cancel asChild>{dialogCancel}</AlertDialog.Cancel>
-    ) : null}
-    <AlertDialog.Action asChild>{dialogAction}</AlertDialog.Action>
+    {cancel ? <AlertDialog.Cancel asChild>{cancel}</AlertDialog.Cancel> : null}
+    <AlertDialog.Action asChild>{action}</AlertDialog.Action>
   </footer>
 );
 
-const elementIsReactElement = (element: any): element is ReactElement => {
-  return "props" in element;
+type TitleShape = {
+  title: React.ReactElement | string;
+  hideTitle: boolean;
+};
+
+const elementIsTitleShape = (element: any): element is TitleShape => {
+  return (
+    typeof element === "object" &&
+    !Array.isArray(element) &&
+    "hideTitle" in element
+  );
 };
 
 export interface AerAlertDialogProps extends DefaultProps<"div"> {
   // The trigger should be an `AlertDialogTrigger`
   trigger: ReactElement;
   // `dialogTitle` is an object of the title and whether to hide the title (this defaults to true). NOTE: This is placed in an `<h2>`.
-  dialogTitle: ReactElement | { title: ReactElement; hideTitle?: boolean };
+  title: ReactElement | TitleShape;
   // The body content of the alert. NOTE: This will take the form of the element that you pass in.
-  dialogContent: ReactElement;
+  content: ReactElement;
   // An element that displays in the dialog footer that contains an action and an optional cancel button
-  dialogFooter: ReactElement;
+  footer: ReactElement;
 }
 /**
  * The AlertDialog interrupts a user's workflow to communicate an important message that requires a response. *NOTE:* This is different from the Dialog component
  */
 export const AerAlertDialog = ({
   className,
   trigger,
-  dialogTitle,
-  dialogFooter,
-  dialogContent,
+  title,
+  footer,
+  content,
 }: AerAlertDialogProps) => {
+  console.log({ dialogTitle: title });
+
   return (
     <AlertDialog.Root>
       {trigger}
       <AlertDialog.Portal>
         <div className={className}>
           <AlertDialog.Overlay className={styles.overlay} />
           <AlertDialog.Content className={cx(styles.content)}>
-            {elementIsReactElement(dialogTitle) ? (
+            {!elementIsTitleShape(title) ? (
               <AlertDialog.Title className={cx(styles.title)}>
-                {dialogTitle}
+                {title}
               </AlertDialog.Title>
             ) : (
               <AlertDialog.Title
                 className={cx(styles.title, {
-                  [styles.visuallyHidden]: dialogTitle.hideTitle === false,
+                  [styles.visuallyHidden]: title.hideTitle,
                 })}
               >
-                {dialogTitle.title}
+                {title.title}
               </AlertDialog.Title>
             )}
             <AlertDialog.Description className={styles.description} asChild>
-              {dialogContent}
+              {content}
             </AlertDialog.Description>
-            {dialogFooter}
+            {footer}
           </AlertDialog.Content>
         </div>
       </AlertDialog.Portal>

src/main.tsx

@@ -23,15 +23,15 @@ root.render(
           <AerButton>Open the dialog</AerButton>
         </AerAlertDialogTrigger>
       }
-      dialogTitle={<>This is important!</>}
-      dialogFooter={
+      title={<>This is important!</>}
+      footer={
         <AerAlertDialogFooter
           className={styles.footer}
-          dialogCancel={<AerButton variant="important">Cancel</AerButton>}
-          dialogAction={<AerButton variant="primary">Yes, do it!</AerButton>}
+          cancel={<AerButton variant="important">Cancel</AerButton>}
+          action={<AerButton variant="primary">Yes, do it!</AerButton>}
         />
       }
-      dialogContent={<p>Are you sure about all of that stuff?</p>}
+      content={<p>Are you sure about all of that stuff?</p>}
     />
   </React.StrictMode>
 );