fix: allow to disable modal footer buttons

Refs: CDS-207
zextras · Mar 5, 2024 · 1b96d7e · 1b96d7e
1 parent b6f8612
commit 1b96d7e
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 42 deletions.
diff --git a/src/components/feedback/Modal.test.tsx b/src/components/feedback/Modal.test.tsx
@@ -114,4 +114,55 @@ describe('Modal', () => {
 		console.error = originalConsoleError;
 		jest.useFakeTimers();
 	});
+
+	it('should disable secondary action button when secondaryActionDisabled is true', () => {
+		setup(
+			<Modal
+				open
+				secondaryActionDisabled
+				secondaryActionLabel={'secondaryAction'}
+				onSecondaryAction={jest.fn()}
+			/>
+		);
+		const secondaryButton = screen.getByRole('button', { name: /secondaryAction/i });
+		expect(secondaryButton).toBeDisabled();
+	});
+
+	it.each([false, undefined])(
+		'should enable secondary action button when secondaryActionDisabled is %s',
+		(secondaryActionDisabled) => {
+			setup(
+				<Modal
+					open
+					secondaryActionDisabled={secondaryActionDisabled}
+					secondaryActionLabel={'secondaryAction'}
+					onSecondaryAction={jest.fn()}
+				/>
+			);
+			const secondaryButton = screen.getByRole('button', { name: /secondaryAction/i });
+			expect(secondaryButton).toBeEnabled();
+		}
+	);
+
+	it('displays a disabled primary button if the "confirmDisabled" is set to true', async () => {
+		setup(<Modal open confirmLabel={'confirm'} confirmDisabled onConfirm={jest.fn()} />);
+		const confirmButton = screen.getByRole('button', { name: /confirm/i });
+		expect(confirmButton).toBeDisabled();
+	});
+
+	it.each([false, undefined])(
+		'displays an enabled primary button if the "confirmDisabled" is set to %s',
+		async (confirmDisabled) => {
+			setup(
+				<Modal
+					open
+					confirmLabel={'confirm'}
+					confirmDisabled={confirmDisabled}
+					onConfirm={jest.fn()}
+				/>
+			);
+			const confirmButton = screen.getByRole('button', { name: /confirm/i });
+			expect(confirmButton).toBeEnabled();
+		}
+	);
 });
diff --git a/src/components/feedback/Modal.tsx b/src/components/feedback/Modal.tsx
@@ -49,14 +49,16 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function ModalFn(
 		centered = false,
 		onConfirm,
 		confirmLabel = 'OK',
+		confirmDisabled,
 		confirmColor = 'primary',
 		onSecondaryAction,
 		secondaryActionLabel,
+		secondaryActionDisabled,
 		onClose = noop,
 		dismissLabel,
-		copyLabel = 'Copy',
 		optionalFooter,
 		customFooter,
+		copyLabel = 'Copy',
 		hideFooter = false,
 		showCloseIcon = true,
 		children,
@@ -99,12 +101,14 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function ModalFn(
 						type={type}
 						optionalFooter={optionalFooter}
 						confirmLabel={confirmLabel}
+						confirmDisabled={confirmDisabled}
 						confirmColor={confirmColor}
 						dismissLabel={dismissLabel}
 						onConfirm={onConfirm}
 						onClose={onClose}
 						onSecondaryAction={onSecondaryAction}
 						secondaryActionLabel={secondaryActionLabel}
+						secondaryActionDisabled={secondaryActionDisabled}
 						onErrorAction={onCopyClipboard}
 						errorActionLabel={copyLabel}
 					/>

diff --git a/src/components/feedback/modal-components/ModalFooter.test.tsx b/src/components/feedback/modal-components/ModalFooter.test.tsx
@@ -12,20 +12,50 @@ import { setup } from '../../../test-utils';
 
 describe('Modal footer', () => {
 	it('displays a disabled primary button if the "confirmDisabled" is set to true', async () => {
-		setup(<ModalFooter confirmLabel={'confirm'} confirmDisabled onConfirm={jest.fn} />);
+		setup(<ModalFooter confirmLabel={'confirm'} confirmDisabled onConfirm={jest.fn()} />);
 		const confirmButton = screen.getByRole('button', { name: /confirm/i });
 		expect(confirmButton).toBeDisabled();
 	});
 
-	it('displays an enabled primary button if the "confirmDisabled" is set to false', async () => {
-		setup(<ModalFooter confirmLabel={'confirm'} confirmDisabled={false} onConfirm={jest.fn} />);
-		const confirmButton = screen.getByRole('button', { name: /confirm/i });
-		expect(confirmButton).toBeEnabled();
-	});
+	it.each([false, undefined])(
+		'displays an enabled primary button if the "confirmDisabled" is set to %s',
+		async (confirmDisabled) => {
+			setup(
+				<ModalFooter
+					confirmLabel={'confirm'}
+					confirmDisabled={confirmDisabled}
+					onConfirm={jest.fn()}
+				/>
+			);
+			const confirmButton = screen.getByRole('button', { name: /confirm/i });
+			expect(confirmButton).toBeEnabled();
+		}
+	);
 
-	it('displays an enabled primary button if the "confirmDisabled" is not set', async () => {
-		setup(<ModalFooter confirmLabel={'confirm'} onConfirm={jest.fn} />);
-		const confirmButton = screen.getByRole('button', { name: /confirm/i });
-		expect(confirmButton).toBeEnabled();
+	it('should disable secondary action button when secondaryActionDisabled is true', () => {
+		setup(
+			<ModalFooter
+				secondaryActionDisabled
+				secondaryActionLabel={'secondaryAction'}
+				onSecondaryAction={jest.fn()}
+			/>
+		);
+		const secondaryButton = screen.getByRole('button', { name: /secondaryAction/i });
+		expect(secondaryButton).toBeDisabled();
 	});
+
+	it.each([false, undefined])(
+		'should enable secondary action button when secondaryActionDisabled is %s',
+		(secondaryActionDisabled) => {
+			setup(
+				<ModalFooter
+					secondaryActionDisabled={secondaryActionDisabled}
+					secondaryActionLabel={'secondaryAction'}
+					onSecondaryAction={jest.fn()}
+				/>
+			);
+			const secondaryButton = screen.getByRole('button', { name: /secondaryAction/i });
+			expect(secondaryButton).toBeEnabled();
+		}
+	);
 });
diff --git a/src/components/feedback/modal-components/ModalFooter.tsx b/src/components/feedback/modal-components/ModalFooter.tsx
@@ -160,43 +160,15 @@ const ModalFooterContent: React.VFC<ModalFooterContentProps> = ({
 };
 
 const ModalFooter = ({
-	centered,
-	confirmColor,
-	confirmLabel,
-	confirmDisabled,
-	errorActionLabel,
 	customFooter,
-	dismissLabel,
-	onClose,
-	onConfirm,
-	onErrorAction,
-	onSecondaryAction,
-	optionalFooter,
-	secondaryActionLabel,
-	type
+	...modalFooterContentProps
 }: ModalFooterProps): React.JSX.Element => (
 	<Container
-		orientation={centered ? 'vertical' : 'horizontal'}
+		orientation={modalFooterContentProps.centered ? 'vertical' : 'horizontal'}
 		mainAlignment="flex-end"
 		padding={{ top: 'large' }}
 	>
-		{customFooter || (
-			<ModalFooterContent
-				type={type}
-				centered={centered}
-				optionalFooter={optionalFooter}
-				confirmLabel={confirmLabel}
-				confirmColor={confirmColor}
-				confirmDisabled={confirmDisabled}
-				dismissLabel={dismissLabel}
-				onConfirm={onConfirm}
-				onClose={onClose}
-				onSecondaryAction={onSecondaryAction}
-				secondaryActionLabel={secondaryActionLabel}
-				onErrorAction={onErrorAction}
-				errorActionLabel={errorActionLabel}
-			/>
-		)}
+		{customFooter || <ModalFooterContent {...modalFooterContentProps} />}
 	</Container>
 );