From f9f23726cb9ff8e8693e1eb0a289ad28b2ebf738 Mon Sep 17 00:00:00 2001
From: Adam Rasheed <adam.rasheed@mongodb.com>
Date: Thu, 4 Dec 2025 15:15:31 -0800
Subject: [PATCH 1/7] [LG-5794] chore: Added id prop support for
 ConfirmationModel buttons

---
 .../ConfirmationModal.spec.tsx                | 20 +++++++++++++++++--
 .../ConfirmationModal/ConfirmationModal.tsx   |  2 ++
 .../ConfirmationModal.types.ts                | 18 ++++++++++++++---
 tools/install/src/ALL_PACKAGES.ts             |  2 ++
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
index 4eb5609bdb..d61d60799e 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
@@ -6,7 +6,7 @@ import { axe } from 'jest-axe';
 import { getLgIds as getLgModalIds } from '@leafygreen-ui/modal';
 
 import { getLgIds } from '..';
-import ConfirmationModal from '..';
+import { ConfirmationModal } from '..';
 
 const lgIds = getLgIds();
 
@@ -110,7 +110,7 @@ describe('packages/confirmation-modal', () => {
     });
 
     // TODO: remove - buttonText is deprecated
-    test('overrides "confirmButtonProps"', () => {
+    test('overrides deprecated "buttonText" with "confirmButtonProps"', () => {
       const { getByText } = renderModal({
         open: true,
         buttonText: 'custom button text',
@@ -203,6 +203,22 @@ describe('packages/confirmation-modal', () => {
     });
   });
 
+  describe('button id props', () => {
+    test('propagates to the buttons', () => {
+      const { getByText } = renderModal({
+        open: true,
+        confirmButtonProps: { id: 'my-confirm-btn', children: 'Confirm' },
+        cancelButtonProps: { id: 'my-cancel-btn' },
+      });
+
+      const confirmButton = getByText('Confirm').closest('button');
+      expect(confirmButton).toHaveAttribute('id', 'my-confirm-btn');
+
+      const cancelButton = getByText('Cancel').closest('button');
+      expect(cancelButton).toHaveAttribute('id', 'my-cancel-btn');
+    });
+  });
+
   describe('closes when', () => {
     test('escape key is pressed', async () => {
       const { getByRole } = renderModal({ open: true });
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx
index dbcb5f804a..2983dc4a90 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx
@@ -136,6 +136,7 @@ export const ConfirmationModal = forwardRef<
           <Button
             data-testid={lgIds.confirm}
             {...confirmButtonProps}
+            as="button"
             disabled={!confirmEnabled || isConfirmDisabled}
             className={cx(buttonStyle, confirmButtonProps?.className)}
             variant={variant}
@@ -147,6 +148,7 @@ export const ConfirmationModal = forwardRef<
           <Button
             data-testid={lgIds.cancel}
             {...cancelButtonProps}
+            as="button"
             onClick={handleCancel}
             className={cx(buttonStyle, cancelButtonProps?.className)}
           >
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
index 45722a1df1..5da26afd8d 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
@@ -1,4 +1,4 @@
-import { BaseButtonProps } from '@leafygreen-ui/button';
+import { ButtonProps } from '@leafygreen-ui/button';
 import { ModalProps } from '@leafygreen-ui/modal';
 
 export const Variant = {
@@ -11,9 +11,21 @@ export type Variant = (typeof Variant)[keyof typeof Variant];
 interface CustomButtonOnClick {
   onClick?: () => void;
 }
-type CustomConfirmButtonProps = Omit<BaseButtonProps, 'variant' | 'onClick'> &
+
+// Exclude the anchor branch by removing types that require href
+// InferredPolymorphicProps<'button'> = (InferredAnchorProps | InheritedComponentProps) & BaseButtonProps
+// We exclude types where href is required (the anchor branch)
+type ButtonOnlyProps = Exclude<ButtonProps<'button'>, { href: string }>;
+
+type CustomConfirmButtonProps = Omit<
+  ButtonOnlyProps,
+  'as' | 'variant' | 'onClick'
+> &
   CustomButtonOnClick;
-type CustomCancelButtonProps = Omit<BaseButtonProps, 'onClick' | 'children'> &
+type CustomCancelButtonProps = Omit<
+  ButtonOnlyProps,
+  'as' | 'onClick' | 'children'
+> &
   CustomButtonOnClick;
 
 export interface ConfirmationModalProps extends Omit<ModalProps, 'size'> {
diff --git a/tools/install/src/ALL_PACKAGES.ts b/tools/install/src/ALL_PACKAGES.ts
index c2964f5cfc..c8fe033573 100644
--- a/tools/install/src/ALL_PACKAGES.ts
+++ b/tools/install/src/ALL_PACKAGES.ts
@@ -86,8 +86,10 @@ export const ALL_PACKAGES = [
   '@lg-charts/drag-provider',
   '@lg-charts/legend',
   '@lg-charts/series-provider',
+  '@lg-chat/avatar',
   '@lg-chat/chat-layout',
   '@lg-chat/chat-window',
+  '@lg-chat/fixed-chat-window',
   '@lg-chat/input-bar',
   '@lg-chat/leafygreen-chat-provider',
   '@lg-chat/lg-markdown',

From 389682b20b3c08b6180139be2a120b59104b3d55 Mon Sep 17 00:00:00 2001
From: Adam Rasheed <adam.rasheed@mongodb.com>
Date: Thu, 4 Dec 2025 16:12:05 -0800
Subject: [PATCH 2/7] cleanup

---
 .changeset/itchy-experts-relax.md                            | 5 +++++
 .../src/ConfirmationModal/ConfirmationModal.types.ts         | 4 +---
 tools/install/src/ALL_PACKAGES.ts                            | 2 --
 3 files changed, 6 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/itchy-experts-relax.md

diff --git a/.changeset/itchy-experts-relax.md b/.changeset/itchy-experts-relax.md
new file mode 100644
index 0000000000..5209605b3f
--- /dev/null
+++ b/.changeset/itchy-experts-relax.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/confirmation-modal': minor
+---
+
+Updated Button types to used ButtonProps instead of BaseButtonProps to extend props that can be passed in, such as 'id'
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
index 5da26afd8d..4d42a53474 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
@@ -12,9 +12,7 @@ interface CustomButtonOnClick {
   onClick?: () => void;
 }
 
-// Exclude the anchor branch by removing types that require href
-// InferredPolymorphicProps<'button'> = (InferredAnchorProps | InheritedComponentProps) & BaseButtonProps
-// We exclude types where href is required (the anchor branch)
+// Exclude anchor types (where href is required) to ensure buttons render as buttons
 type ButtonOnlyProps = Exclude<ButtonProps<'button'>, { href: string }>;
 
 type CustomConfirmButtonProps = Omit<
diff --git a/tools/install/src/ALL_PACKAGES.ts b/tools/install/src/ALL_PACKAGES.ts
index c8fe033573..c2964f5cfc 100644
--- a/tools/install/src/ALL_PACKAGES.ts
+++ b/tools/install/src/ALL_PACKAGES.ts
@@ -86,10 +86,8 @@ export const ALL_PACKAGES = [
   '@lg-charts/drag-provider',
   '@lg-charts/legend',
   '@lg-charts/series-provider',
-  '@lg-chat/avatar',
   '@lg-chat/chat-layout',
   '@lg-chat/chat-window',
-  '@lg-chat/fixed-chat-window',
   '@lg-chat/input-bar',
   '@lg-chat/leafygreen-chat-provider',
   '@lg-chat/lg-markdown',

From b0ffb2f2f65c2ac2c65e4be37390d16c66c0945c Mon Sep 17 00:00:00 2001
From: Adam Rasheed <adam.rasheed@mongodb.com>
Date: Thu, 4 Dec 2025 16:13:04 -0800
Subject: [PATCH 3/7] more cleanup

---
 .../src/ConfirmationModal/ConfirmationModal.tsx                 | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx
index 2983dc4a90..dbcb5f804a 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx
@@ -136,7 +136,6 @@ export const ConfirmationModal = forwardRef<
           <Button
             data-testid={lgIds.confirm}
             {...confirmButtonProps}
-            as="button"
             disabled={!confirmEnabled || isConfirmDisabled}
             className={cx(buttonStyle, confirmButtonProps?.className)}
             variant={variant}
@@ -148,7 +147,6 @@ export const ConfirmationModal = forwardRef<
           <Button
             data-testid={lgIds.cancel}
             {...cancelButtonProps}
-            as="button"
             onClick={handleCancel}
             className={cx(buttonStyle, cancelButtonProps?.className)}
           >

From f378852e078049be81caf559ade968e2ad3b9054 Mon Sep 17 00:00:00 2001
From: Adam Rasheed <adam.rasheed@mongodb.com>
Date: Fri, 5 Dec 2025 11:48:40 -0800
Subject: [PATCH 4/7] updated types and added test

---
 .../ConfirmationModal.spec.tsx                | 92 ++++++++++++++++++-
 .../ConfirmationModal.types.ts                |  2 +-
 2 files changed, 92 insertions(+), 2 deletions(-)

diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
index d61d60799e..f3d838fff8 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { act, render, waitFor } from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
@@ -201,6 +201,56 @@ describe('packages/confirmation-modal', () => {
       expect(confirmSpy).not.toHaveBeenCalled();
       expect(cancelSpy).toHaveBeenCalledTimes(1);
     });
+
+    test('closes modal when `handleClose` sets state to false', async () => {
+      const confirmSpy = jest.fn();
+      const handleCloseSpy = jest.fn((_e?: MouseEvent | KeyboardEvent) => {});
+
+      const TestWrapper = () => {
+        const [open, setOpen] = useState(true);
+
+        const handleClose = (e?: MouseEvent | KeyboardEvent) => {
+          handleCloseSpy(e);
+          setOpen(false);
+        };
+
+        return (
+          <ConfirmationModal
+            title="Title text"
+            buttonText="Confirm"
+            open={open}
+            onConfirm={confirmSpy}
+            cancelButtonProps={{
+              onClick: handleClose,
+            }}
+          >
+            Content text
+          </ConfirmationModal>
+        );
+      };
+
+      const { getByText, getByRole } = render(<TestWrapper />);
+
+      const button = getByText('Cancel');
+      const modal = getByRole('dialog');
+      expect(button).toBeVisible();
+      expect(modal).toBeVisible();
+
+      // Click the button - the component's handleCancel doesn't pass the event,
+      // but we verify the function is called
+      fireEvent.click(button);
+      expect(confirmSpy).not.toHaveBeenCalled();
+      expect(handleCloseSpy).toHaveBeenCalledTimes(1);
+      expect(handleCloseSpy).toHaveBeenCalledWith(undefined);
+
+      // Verify that the function signature accepts MouseEvent by calling it directly
+      const mockMouseEvent = new MouseEvent('click', { bubbles: true });
+      handleCloseSpy.mockClear();
+      handleCloseSpy(mockMouseEvent);
+      expect(handleCloseSpy).toHaveBeenCalledWith(mockMouseEvent);
+
+      await waitFor(() => expect(modal).not.toBeVisible());
+    });
   });
 
   describe('button id props', () => {
@@ -219,6 +269,46 @@ describe('packages/confirmation-modal', () => {
     });
   });
 
+  describe('custom  button onClick props', () => {
+    test('fires `onClick` when button is clicked', async () => {
+      const confirmSpy = jest.fn();
+
+      const TestWrapper = () => {
+        const [open, setOpen] = useState(true);
+
+        const handleClose = (_e?: MouseEvent | KeyboardEvent) => {
+          setOpen(false);
+        };
+
+        return (
+          <ConfirmationModal
+            title="Title text"
+            buttonText="Confirm"
+            open={open}
+            onConfirm={confirmSpy}
+            cancelButtonProps={{
+              onClick: handleClose,
+            }}
+          >
+            Content text
+          </ConfirmationModal>
+        );
+      };
+
+      const { getByText, getByRole } = render(<TestWrapper />);
+
+      const button = getByText('Cancel');
+      const modal = getByRole('dialog');
+      expect(button).toBeVisible();
+      expect(modal).toBeVisible();
+
+      userEvent.click(button);
+      expect(confirmSpy).not.toHaveBeenCalled();
+
+      await waitFor(() => expect(modal).not.toBeVisible());
+    });
+  });
+
   describe('closes when', () => {
     test('escape key is pressed', async () => {
       const { getByRole } = renderModal({ open: true });
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
index 4d42a53474..df737fa901 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
@@ -9,7 +9,7 @@ export const Variant = {
 export type Variant = (typeof Variant)[keyof typeof Variant];
 
 interface CustomButtonOnClick {
-  onClick?: () => void;
+  onClick?: (args?: MouseEvent | KeyboardEvent) => void;
 }
 
 // Exclude anchor types (where href is required) to ensure buttons render as buttons

From f3cad9c0042d03af2c7704d2eeb6fcd4ae23143a Mon Sep 17 00:00:00 2001
From: Adam Rasheed <adam.rasheed@mongodb.com>
Date: Tue, 9 Dec 2025 17:38:56 -0800
Subject: [PATCH 5/7] updated changeset, cleaned up types, rm test assertion

---
 .changeset/itchy-experts-relax.md             |  2 +-
 .../ConfirmationModal.spec.tsx                | 44 +------------------
 .../ConfirmationModal.types.ts                | 15 +++----
 3 files changed, 9 insertions(+), 52 deletions(-)

diff --git a/.changeset/itchy-experts-relax.md b/.changeset/itchy-experts-relax.md
index 5209605b3f..d3c15fd34a 100644
--- a/.changeset/itchy-experts-relax.md
+++ b/.changeset/itchy-experts-relax.md
@@ -2,4 +2,4 @@
 '@leafygreen-ui/confirmation-modal': minor
 ---
 
-Updated Button types to used ButtonProps instead of BaseButtonProps to extend props that can be passed in, such as 'id'
+Updated Button types to use ButtonProps instead of BaseButtonProps to extend props that can be passed in, such as 'id'
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
index f3d838fff8..65cc275d18 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import { act, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
@@ -238,7 +238,7 @@ describe('packages/confirmation-modal', () => {
 
       // Click the button - the component's handleCancel doesn't pass the event,
       // but we verify the function is called
-      fireEvent.click(button);
+      userEvent.click(button);
       expect(confirmSpy).not.toHaveBeenCalled();
       expect(handleCloseSpy).toHaveBeenCalledTimes(1);
       expect(handleCloseSpy).toHaveBeenCalledWith(undefined);
@@ -269,46 +269,6 @@ describe('packages/confirmation-modal', () => {
     });
   });
 
-  describe('custom  button onClick props', () => {
-    test('fires `onClick` when button is clicked', async () => {
-      const confirmSpy = jest.fn();
-
-      const TestWrapper = () => {
-        const [open, setOpen] = useState(true);
-
-        const handleClose = (_e?: MouseEvent | KeyboardEvent) => {
-          setOpen(false);
-        };
-
-        return (
-          <ConfirmationModal
-            title="Title text"
-            buttonText="Confirm"
-            open={open}
-            onConfirm={confirmSpy}
-            cancelButtonProps={{
-              onClick: handleClose,
-            }}
-          >
-            Content text
-          </ConfirmationModal>
-        );
-      };
-
-      const { getByText, getByRole } = render(<TestWrapper />);
-
-      const button = getByText('Cancel');
-      const modal = getByRole('dialog');
-      expect(button).toBeVisible();
-      expect(modal).toBeVisible();
-
-      userEvent.click(button);
-      expect(confirmSpy).not.toHaveBeenCalled();
-
-      await waitFor(() => expect(modal).not.toBeVisible());
-    });
-  });
-
   describe('closes when', () => {
     test('escape key is pressed', async () => {
       const { getByRole } = renderModal({ open: true });
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
index df737fa901..77c796948f 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
@@ -13,17 +13,14 @@ interface CustomButtonOnClick {
 }
 
 // Exclude anchor types (where href is required) to ensure buttons render as buttons
-type ButtonOnlyProps = Exclude<ButtonProps<'button'>, { href: string }>;
+type ButtonOnlyProps = Omit<
+  Exclude<ButtonProps<'button'>, { href: string }>,
+  'onClick' | 'as'
+>;
 
-type CustomConfirmButtonProps = Omit<
-  ButtonOnlyProps,
-  'as' | 'variant' | 'onClick'
-> &
+type CustomConfirmButtonProps = Omit<ButtonOnlyProps, 'variant'> &
   CustomButtonOnClick;
-type CustomCancelButtonProps = Omit<
-  ButtonOnlyProps,
-  'as' | 'onClick' | 'children'
-> &
+type CustomCancelButtonProps = Omit<ButtonOnlyProps, 'children'> &
   CustomButtonOnClick;
 
 export interface ConfirmationModalProps extends Omit<ModalProps, 'size'> {

From 98c26bbe90e7225b00d9c3a37f0aea411d2bc2b5 Mon Sep 17 00:00:00 2001
From: Adam Rasheed <adam.rasheed@mongodb.com>
Date: Wed, 10 Dec 2025 10:17:01 -0800
Subject: [PATCH 6/7] cleanup

---
 .../src/ConfirmationModal/ConfirmationModal.spec.tsx            | 2 +-
 .../src/ConfirmationModal/ConfirmationModal.types.ts            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
index 65cc275d18..8aae35538b 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
@@ -236,7 +236,7 @@ describe('packages/confirmation-modal', () => {
       expect(button).toBeVisible();
       expect(modal).toBeVisible();
 
-      // Click the button - the component's handleCancel doesn't pass the event,
+      // Click the button - the event is not passed to the `onCancel` callback
       // but we verify the function is called
       userEvent.click(button);
       expect(confirmSpy).not.toHaveBeenCalled();
diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
index 77c796948f..c8f21804c1 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.types.ts
@@ -9,7 +9,7 @@ export const Variant = {
 export type Variant = (typeof Variant)[keyof typeof Variant];
 
 interface CustomButtonOnClick {
-  onClick?: (args?: MouseEvent | KeyboardEvent) => void;
+  onClick?: () => void;
 }
 
 // Exclude anchor types (where href is required) to ensure buttons render as buttons

From 3c8d334bd859e0c3958829f68cda1095d2fef873 Mon Sep 17 00:00:00 2001
From: Adam Rasheed <adam.rasheed@mongodb.com>
Date: Wed, 10 Dec 2025 11:16:57 -0800
Subject: [PATCH 7/7] added ts assertions

---
 .../ConfirmationModal.spec.tsx                | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
index 8aae35538b..1cda01f2a7 100644
--- a/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
+++ b/packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx
@@ -651,6 +651,29 @@ describe('packages/confirmation-modal', () => {
       >
         Hey
       </ConfirmationModal>
+
+      <ConfirmationModal
+        title="Title text"
+        cancelButtonProps={{
+          variant: 'primary',
+          disabled: true,
+          id: 'my-cancel-btn',
+        }}
+      >
+        Hey
+      </ConfirmationModal>
+
+      <ConfirmationModal
+        title="Title text"
+        // @ts-expect-error - href is not valid on a button
+        href="https://mongodb.design"
+        cancelButtonProps={{
+          variant: 'primary',
+          disabled: true,
+        }}
+      >
+        Hey
+      </ConfirmationModal>
     </>;
   });
 });