fix: DH-17454: Fix Spectrum component theming in modal dialogs

packages/components/src/modal/Modal.tsx

@@ -9,6 +9,7 @@ import React, {
 import ReactDOM from 'react-dom';
 import { CSSTransition } from 'react-transition-group';
 import ThemeExport from '../ThemeExport';
+import { SpectrumThemeProvider } from '../theme/SpectrumThemeProvider';
 
 interface ModalProps {
  className?: string;
@@ -25,7 +26,7 @@ interface ModalProps {
 }
 
 function Modal({
- className = '',
+ className,
  children,
  role = 'role',
  keyboard = true,
@@ -101,7 +102,9 @@ function Modal({
 
  return element.current
  ? ReactDOM.createPortal(
- <>
+ // Without the zIndex and position props
+ // the modal is rendered on top of nested DatePicker popovers
+ <SpectrumThemeProvider isPortal zIndex={0} position="relative">
  <CSSTransition
  appear
  mountOnEnter
@@ -153,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',
@@ -171,7 +174,7 @@ function Modal({
  </div>
  </div>
  </CSSTransition>
- </>,
+ </SpectrumThemeProvider>,
  element.current
  )
  : null;

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

packages/components/src/theme/SpectrumThemeProvider.tsx

@@ -9,6 +9,8 @@ export interface SpectrumThemeProviderProps {
  isPortal?: boolean;
  theme?: Theme;
  colorScheme?: 'light' | 'dark';
+ zIndex?: number;
+ position?: 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky';
 }
 
 /**
@@ -23,6 +25,8 @@ export function SpectrumThemeProvider({
  isPortal = false,
  theme = themeDHDefault,
  colorScheme,
+ zIndex,
+ position,
 }: SpectrumThemeProviderProps): JSX.Element {
  // a unique ID is used per provider to force it to render the theme wrapper element inside portals
  // based on https://github.com/adobe/react-spectrum/issues/1697#issuecomment-999827266
@@ -34,6 +38,8 @@ export function SpectrumThemeProvider({
  UNSAFE_className="spectrum-theme-provider"
  theme={theme}
  colorScheme={colorScheme}
+ zIndex={zIndex}
+ position={position}
  data-unique-id={id}
  >
  {children}