diff --git a/packages/components/src/BasicModal.test.tsx b/packages/components/src/BasicModal.test.tsx
index eb8b62b74c..419dfd5730 100644
--- a/packages/components/src/BasicModal.test.tsx
+++ b/packages/components/src/BasicModal.test.tsx
@@ -1,26 +1,25 @@
import React from 'react';
import userEvent from '@testing-library/user-event';
import { render } from '@testing-library/react';
-import BasicModal from './BasicModal';
+import BasicModal, { BasicModalProps } from './BasicModal';
const DEFAULT_BODY_TEXT = 'DEFAULT_TEXT';
const DEFAULT_TEST_ID = 'DEFAULT_TEST_ID';
-function makeWrapper(
- isOpen = true,
- bodyText = DEFAULT_BODY_TEXT,
- dataTestId = DEFAULT_TEST_ID,
- onConfirm = jest.fn()
-) {
- return render(
-
- );
+function makeWrapper(partialProps: Partial | undefined = {}) {
+ const props = {
+ 'data-testid': DEFAULT_TEST_ID,
+ bodyText: DEFAULT_BODY_TEXT,
+ headerText: '',
+ isConfirmDanger: false,
+ isOpen: true,
+ onCancel: jest.fn(),
+ onConfirm: jest.fn(),
+ ...partialProps,
+ };
+
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ return render();
}
it('mounts and unmounts without failing', () => {
@@ -32,6 +31,16 @@ it('focuses default button on first render after opening', () => {
expect(getByTestId(`${DEFAULT_TEST_ID}-btn-confirm`)).toHaveFocus();
});
+it.each([true, false])(
+ 'sets button style based on isConfirmDanger value: %s',
+ isConfirmDanger => {
+ const { getByTestId } = makeWrapper({ isConfirmDanger });
+ expect(getByTestId(`${DEFAULT_TEST_ID}-btn-confirm`)).toHaveClass(
+ isConfirmDanger ? 'btn-danger' : 'btn-primary'
+ );
+ }
+);
+
it('does not re-focus default button on re-render', async () => {
const user = userEvent.setup();
const { getByTestId, rerender } = makeWrapper();
diff --git a/packages/components/src/BasicModal.tsx b/packages/components/src/BasicModal.tsx
index 71f1254a9d..58b6bca4c7 100644
--- a/packages/components/src/BasicModal.tsx
+++ b/packages/components/src/BasicModal.tsx
@@ -15,6 +15,7 @@ export interface BasicModalProps {
cancelButtonText?: string;
confirmButtonText?: string;
discardButtonText?: string;
+ isConfirmDanger?: boolean;
children?: React.ReactNode;
'data-testid'?: string;
}
@@ -44,6 +45,7 @@ function BasicModal(props: BasicModalProps) {
cancelButtonText = 'Cancel',
confirmButtonText = 'Okay',
discardButtonText = 'Discard',
+ isConfirmDanger = false,
children,
'data-testid': dataTestId,
} = props;
@@ -126,7 +128,7 @@ function BasicModal(props: BasicModalProps) {
)}