fix: DH-17454: Combine modal classes instead of replacing (#2173)

Author: vbabich

packages/components/src/modal/Modal.tsx

@@ -26,7 +26,7 @@ interface ModalProps {
 }
 
 function Modal({
-  className = '',
+  className,
   children,
   role = 'role',
   keyboard = true,
@@ -156,7 +156,7 @@ function Modal({
               style={{ display: 'block' }}
             >
               <div
-                className={classNames(`modal-dialog ${className}`, {
+                className={classNames('modal-dialog', className, {
                   'modal-lg': size === 'lg',
                   'modal-sm': size === 'sm',
                   'modal-xl': size === 'xl',

packages/components/src/modal/ModalBody.tsx

@@ -1,4 +1,5 @@
 import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
 
 interface ModalBodyProps {
   className?: string;
@@ -8,13 +9,17 @@ interface ModalBodyProps {
 }
 
 function ModalBody({
-  className = 'modal-body',
+  className,
   style,
   children,
   'data-testid': dataTestId,
 }: ModalBodyProps): ReactElement {
   return (
-    <div className={className} data-testid={dataTestId} style={style}>
+    <div
+      className={classNames('modal-body', className)}
+      data-testid={dataTestId}
+      style={style}
+    >
       {children}
     </div>
   );

packages/components/src/modal/ModalFooter.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
 
 interface ModalFooterProps {
   className?: string;
@@ -7,12 +8,15 @@ interface ModalFooterProps {
 }
 
 function ModalFooter({
-  className = 'modal-footer',
+  className,
   children,
   'data-testid': dataTestId,
 }: ModalFooterProps): ReactElement {
   return (
-    <div className={className} data-testid={dataTestId}>
+    <div
+      className={classNames('modal-footer', className)}
+      data-testid={dataTestId}
+    >
       {children}
     </div>
   );

packages/components/src/modal/ModalHeader.tsx

@@ -1,4 +1,5 @@
 import React, { CSSProperties, ReactElement, ReactNode } from 'react';
+import classNames from 'classnames';
 
 interface ModalHeaderProps {
   className?: string;
@@ -18,7 +19,7 @@ function ModalHeader({
   'data-testid': dataTestId,
 }: ModalHeaderProps): ReactElement {
   return (
-    <div className={`modal-header ${className}`} style={style}>
+    <div className={classNames('modal-header', className)} style={style}>
       <h5 className="modal-title">{children}</h5>
       {closeButton && (
         <button