[LG-5593] fix(modal) revert change in order of data-testid and ...rest in ModalView (#3183)

* Add explicit type for "data-testid"

* Add tests for data-testid propagation

* Revert order of data-testid and ...rest in ModalView

* Fix propagation of data-testid to buttons

* chore: changesets

---------

Co-authored-by: Stephen Lee <[email protected]>

Author: kraenhansen

.changeset/eager-mails-lie.md

@@ -0,0 +1,6 @@
+---
+'@leafygreen-ui/confirmation-modal': patch
+'@leafygreen-ui/modal': patch
+---
+
+Fix data-testid attributes to allow consumer override

.changeset/great-ears-obey.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/lib': patch
+---
+
+Add data-testid documentation in `LgIdProps`

packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx

@@ -497,6 +497,32 @@ describe('packages/confirmation-modal', () => {
     });
   });
 
+  describe('testid attribute', () => {
+    it('propagates to the dom element', () => {
+      const { getByTestId } = renderModal({
+        open: true,
+        'data-testid': 'my-modal',
+      });
+
+      const modal = getByTestId('my-modal');
+      expect(modal).toBeInTheDocument();
+    });
+
+    it('propagates to the buttons', () => {
+      const { getByTestId } = renderModal({
+        open: true,
+        confirmButtonProps: { 'data-testid': 'my-confirm-btn' },
+        cancelButtonProps: { 'data-testid': 'my-cancel-btn' },
+      });
+
+      const confirmButton = getByTestId('my-confirm-btn');
+      expect(confirmButton).toBeInTheDocument();
+
+      const cancelButton = getByTestId('my-cancel-btn');
+      expect(cancelButton).toBeInTheDocument();
+    });
+  });
+
   // eslint-disable-next-line jest/no-disabled-tests
   test.skip('types behave as expected', () => {
     <>

packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx

@@ -134,8 +134,8 @@ export const ConfirmationModal = forwardRef<
         </div>
         <Footer>
           <Button
-            {...confirmButtonProps}
             data-testid={lgIds.confirm}
+            {...confirmButtonProps}
             disabled={!confirmEnabled || isConfirmDisabled}
             className={cx(buttonStyle, confirmButtonProps?.className)}
             variant={variant}
@@ -145,10 +145,10 @@ export const ConfirmationModal = forwardRef<
             {buttonText || confirmButtonProps?.children || 'Confirm'}
           </Button>
           <Button
+            data-testid={lgIds.cancel}
             {...cancelButtonProps}
             onClick={handleCancel}
             className={cx(buttonStyle, cancelButtonProps?.className)}
-            data-testid={lgIds.cancel}
           >
             Cancel
           </Button>

packages/lib/src/LgIdProps/index.ts

@@ -10,4 +10,9 @@ export interface LgIdProps {
    * LG test id passed to the component wrapper.
    */
   ['data-lgid']?: LgIdString;
+
+  /**
+   * An additional test id passed to the component wrapper, meant for use by consumers of the library.
+   */
+  ['data-testid']?: string;
 }

packages/modal/src/Modal/Modal.spec.tsx

@@ -260,6 +260,18 @@ describe('packages/modal', () => {
       expect(modal).not.toBeVisible();
     });
   });
+
+  describe('testid attribute', () => {
+    it('propagates to the dom element', () => {
+      const { getByTestId } = renderModal({
+        open: true,
+        'data-testid': 'my-modal',
+      });
+
+      const modal = getByTestId('my-modal');
+      expect(modal).toBeInTheDocument();
+    });
+  });
 });
 
 async function expectElementToNotBeRemoved(element: HTMLElement) {

packages/modal/src/Modal/ModalView.tsx

@@ -90,11 +90,11 @@ const ModalView = React.forwardRef<HTMLDialogElement, ModalProps>(
         }}
       >
         <dialog
+          data-testid={lgIds.root}
+          data-lgid={lgIds.root}
           {...rest}
           ref={dialogRef}
           id={id}
-          data-testid={lgIds.root}
-          data-lgid={lgIds.root}
           className={getDialogStyles({
             backdropClassName,
             className,