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

deephaven · Jul 26, 2024 · a2d5d5f · a2d5d5f
1 parent 0058b18
commit a2d5d5f
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/packages/components/src/modal/Modal.tsx b/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',

diff --git a/packages/components/src/modal/ModalBody.tsx b/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>
  );

diff --git a/packages/components/src/modal/ModalFooter.tsx b/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>
  );

diff --git a/packages/components/src/modal/ModalHeader.tsx b/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