From 2858d237c4d014651a702527f0e007b304969f6c Mon Sep 17 00:00:00 2001
From: Eric Hoff <eric@highfructose.ca>
Date: Mon, 1 Dec 2025 15:41:39 -0700
Subject: [PATCH 1/5] feat(#2685): prettierjs cleanup

---
 src/routes/components/Modal.tsx | 67 ++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 27 deletions(-)

diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx
index ac241e970..c949d1036 100644
--- a/src/routes/components/Modal.tsx
+++ b/src/routes/components/Modal.tsx
@@ -6,7 +6,7 @@ import {
   GoabModal,
   GoabModalProps,
   GoabTab,
-  GoabTabs
+  GoabTabs,
 } from "@abgov/react-components";
 import { ComponentBinding, Sandbox } from "@components/sandbox";
 import { useContext, useEffect, useState } from "react";
@@ -25,7 +25,8 @@ import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty
 
 // == Page props ==
 
-const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13874";
+const FIGMA_LINK =
+  "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13874";
 const componentName = "Modal";
 const description =
   "An overlay that appears in front of all other content, and requires a user to take an action before continuing.";
@@ -41,7 +42,7 @@ type CastingType = {
 };
 
 export default function ModalPage() {
-  const {language} = useContext(LanguageVersionContext);
+  const { language } = useContext(LanguageVersionContext);
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
     heading: "Are you sure you want to exit your application?",
   });
@@ -271,7 +272,9 @@ export default function ModalPage() {
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
         <GoabTabs initialTab={1}>
           <GoabTab heading="Code playground">
-            <h2 id="component" style={{ display: "none" }}>Playground</h2>
+            <h2 id="component" style={{ display: "none" }}>
+              Playground
+            </h2>
             <Sandbox properties={componentBindings} onChange={onSandboxChange} allow={["p"]}>
               <CodeSnippet
                 lang="typescript"
@@ -287,16 +290,18 @@ export default function ModalPage() {
                 `}
               />
 
-              {isClosableChecked(componentBindings) && <CodeSnippet
-                lang="typescript"
-                tags="angular"
-                allowCopy={true}
-                code={`
+              {isClosableChecked(componentBindings) && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="angular"
+                  allowCopy={true}
+                  code={`
                     onClose() {
                       this.open = false;
-                   } 
+                   }
                 `}
-              />}
+                />
+              )}
 
               <CodeSnippet
                 lang="typescript"
@@ -310,24 +315,28 @@ export default function ModalPage() {
                 `}
               />
 
-              {isClosableChecked(componentBindings) && <CodeSnippet
-                lang="typescript"
-                tags="react"
-                allowCopy={true}
-                code={`
+              {isClosableChecked(componentBindings) && (
+                <CodeSnippet
+                  lang="typescript"
+                  tags="react"
+                  allowCopy={true}
+                  code={`
                   function modalOnClose() {
                     setOpen(false);
-                   } 
+                   }
                 `}
-              />}
+                />
+              )}
 
               <GoabButton onClick={() => setOpen(true)}>Show Modal</GoabButton>
 
               {!isClosableChecked(componentBindings) && (
                 <GoabModal {...componentProps} open={open}>
-                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
-                  molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius
-                    laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.</p>
+                  <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
+                    molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi
+                    eius laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.
+                  </p>
                   <GoabButtonGroup alignment="end" mt={"xl"}>
                     <GoabButton type="tertiary" onClick={() => setOpen(false)}>
                       Cancel
@@ -341,13 +350,18 @@ export default function ModalPage() {
 
               {isClosableChecked(componentBindings) && (
                 <GoabModal {...componentProps} open={open} onClose={onClose}>
-                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
-                  molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius
-                    laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.</p>
+                  <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
+                    molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi
+                    eius laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.
+                  </p>
                 </GoabModal>
               )}
             </Sandbox>
-            <ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
+            <ComponentProperties
+              properties={componentProperties}
+              oldProperties={oldComponentProperties}
+            />
           </GoabTab>
 
           <GoabTab
@@ -356,8 +370,7 @@ export default function ModalPage() {
                 Examples
                 <GoabBadge type="information" content="6" />
               </>
-            }
-          >
+            }>
             <ModalExamples />
           </GoabTab>
 

From f7f4e4f04bf3bb9017a210503db945b78f672cc4 Mon Sep 17 00:00:00 2001
From: Eric Hoff <eric@highfructose.ca>
Date: Mon, 1 Dec 2025 15:42:52 -0700
Subject: [PATCH 2/5] feat(#2685): move the buttongroup into the actions

---
 src/routes/components/Modal.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx
index c949d1036..4f5cf91f1 100644
--- a/src/routes/components/Modal.tsx
+++ b/src/routes/components/Modal.tsx
@@ -331,20 +331,24 @@ export default function ModalPage() {
               <GoabButton onClick={() => setOpen(true)}>Show Modal</GoabButton>
 
               {!isClosableChecked(componentBindings) && (
-                <GoabModal {...componentProps} open={open}>
+                <GoabModal
+                  {...componentProps}
+                  open={open}
+                  actions={
+                    <GoabButtonGroup alignment="end" mt={"xl"}>
+                      <GoabButton type="tertiary" onClick={() => setOpen(false)}>
+                        Cancel
+                      </GoabButton>
+                      <GoabButton type="primary" onClick={() => setOpen(false)}>
+                        Exit
+                      </GoabButton>
+                    </GoabButtonGroup>
+                  }>
                   <p>
                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
                     molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi
                     eius laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.
                   </p>
-                  <GoabButtonGroup alignment="end" mt={"xl"}>
-                    <GoabButton type="tertiary" onClick={() => setOpen(false)}>
-                      Cancel
-                    </GoabButton>
-                    <GoabButton type="primary" onClick={() => setOpen(false)}>
-                      Exit
-                    </GoabButton>
-                  </GoabButtonGroup>
                 </GoabModal>
               )}
 

From 1838d91f8543b9a5d221c1bd7b5f7682ee9c88ae Mon Sep 17 00:00:00 2001
From: Eric Hoff <eric@highfructose.ca>
Date: Tue, 2 Dec 2025 09:01:46 -0700
Subject: [PATCH 3/5] feat(#2685): remove buttongroup margins

---
 src/routes/components/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx
index 4f5cf91f1..59807c589 100644
--- a/src/routes/components/Modal.tsx
+++ b/src/routes/components/Modal.tsx
@@ -335,7 +335,7 @@ export default function ModalPage() {
                   {...componentProps}
                   open={open}
                   actions={
-                    <GoabButtonGroup alignment="end" mt={"xl"}>
+                    <GoabButtonGroup alignment="end">
                       <GoabButton type="tertiary" onClick={() => setOpen(false)}>
                         Cancel
                       </GoabButton>

From 8f3f49e1df2794c9969850ac9e6e6225c9acb687 Mon Sep 17 00:00:00 2001
From: Eric Hoff <eric@highfructose.ca>
Date: Wed, 3 Dec 2025 19:16:59 -0700
Subject: [PATCH 4/5] bug(#2685): remove the actions bar from the sandbox demo
 because the compiler gets confused

---
 src/routes/components/Modal.tsx | 86 ++++++---------------------------
 1 file changed, 15 insertions(+), 71 deletions(-)

diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx
index 59807c589..43ff35e4e 100644
--- a/src/routes/components/Modal.tsx
+++ b/src/routes/components/Modal.tsx
@@ -44,7 +44,7 @@ type CastingType = {
 export default function ModalPage() {
   const { language } = useContext(LanguageVersionContext);
   const [componentProps, setComponentProps] = useState<ComponentPropsType>({
-    heading: "Are you sure you want to exit your application?",
+    heading: "This is important information",
   });
 
   useEffect(() => {
@@ -73,7 +73,7 @@ export default function ModalPage() {
       type: "string",
       name: "heading",
       width: "40ch",
-      value: "Are you sure you want to exit your application?",
+      value: "This is important information",
     },
     {
       label: "Max width",
@@ -82,12 +82,6 @@ export default function ModalPage() {
       width: "16ch",
       value: "",
     },
-    {
-      label: "Closable",
-      type: "boolean",
-      name: "closable",
-      value: false,
-    },
     {
       label: "Open",
       type: "boolean",
@@ -281,86 +275,36 @@ export default function ModalPage() {
                 tags="angular"
                 allowCopy={true}
                 code={`
-                  export class SomeOtherComponent {
-                    open = false;
-                    onClick() {
-                      this.open = !this.open;
-                    }
-                  }
-                `}
-              />
-
-              {isClosableChecked(componentBindings) && (
-                <CodeSnippet
-                  lang="typescript"
-                  tags="angular"
-                  allowCopy={true}
-                  code={`
                     onClose() {
                       this.open = false;
                    }
                 `}
-                />
-              )}
+              />
 
               <CodeSnippet
                 lang="typescript"
                 tags="react"
                 allowCopy={true}
                 code={`
-                  const [open, setOpen] = useState(false);
-                   function onClick() {
-                    setOpen(!open);
-                   }
-                `}
-              />
-
-              {isClosableChecked(componentBindings) && (
-                <CodeSnippet
-                  lang="typescript"
-                  tags="react"
-                  allowCopy={true}
-                  code={`
                   function modalOnClose() {
                     setOpen(false);
                    }
                 `}
-                />
-              )}
+              />
 
               <GoabButton onClick={() => setOpen(true)}>Show Modal</GoabButton>
 
-              {!isClosableChecked(componentBindings) && (
-                <GoabModal
-                  {...componentProps}
-                  open={open}
-                  actions={
-                    <GoabButtonGroup alignment="end">
-                      <GoabButton type="tertiary" onClick={() => setOpen(false)}>
-                        Cancel
-                      </GoabButton>
-                      <GoabButton type="primary" onClick={() => setOpen(false)}>
-                        Exit
-                      </GoabButton>
-                    </GoabButtonGroup>
-                  }>
-                  <p>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
-                    molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi
-                    eius laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.
-                  </p>
-                </GoabModal>
-              )}
-
-              {isClosableChecked(componentBindings) && (
-                <GoabModal {...componentProps} open={open} onClose={onClose}>
-                  <p>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
-                    molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi
-                    eius laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.
-                  </p>
-                </GoabModal>
-              )}
+              <GoabModal {...componentProps} open={open} onClose={onClose}>
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
+                  molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius
+                  laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.
+                </p>
+                <p>
+                  See the Examples tab for customized closing buttons and behavior using the
+                  "actions" property.
+                </p>
+              </GoabModal>
             </Sandbox>
             <ComponentProperties
               properties={componentProperties}

From 3dc2f342ebe3257d6d889699599a76dd882703db Mon Sep 17 00:00:00 2001
From: Eric Hoff <eric@highfructose.ca>
Date: Wed, 3 Dec 2025 19:35:14 -0700
Subject: [PATCH 5/5] bug(#2685): fix linting error

---
 src/routes/components/Modal.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/components/Modal.tsx b/src/routes/components/Modal.tsx
index 43ff35e4e..c52f07aa3 100644
--- a/src/routes/components/Modal.tsx
+++ b/src/routes/components/Modal.tsx
@@ -2,7 +2,6 @@ import { Category, ComponentHeader } from "@components/component-header/Componen
 import {
   GoabBadge,
   GoabButton,
-  GoabButtonGroup,
   GoabModal,
   GoabModalProps,
   GoabTab,