Components: Modal: Wrap the modal contents in a StyleProvider (#36261)

This ensures that any content inside a modal has the correct styles applied by emotion. Fixes #33735.
WordPress · Nov 7, 2021 · 43a1769 · 43a1769
1 parent 8c598f4
commit 43a1769
Showing 1 changed file with 59 additions and 47 deletions.
diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js
@@ -25,6 +25,7 @@ import { closeSmall } from '@wordpress/icons';
  */
 import * as ariaHelper from './aria-helper';
 import Button from '../button';
+import StyleProvider from '../style-provider';
 
 // Used to count the number of open modals.
 let openModalCount = 0;
@@ -112,57 +113,68 @@ export default function Modal( {
 			) }
 			onKeyDown={ handleEscapeKeyDown }
 		>
-			<div
-				className={ classnames( 'components-modal__frame', className, {
-					'is-full-screen': isFullScreen,
-				} ) }
-				style={ style }
-				ref={ useMergeRefs( [
-					constrainedTabbingRef,
-					focusReturnRef,
-					focusOnMountRef,
-				] ) }
-				role={ role }
-				aria-label={ contentLabel }
-				aria-labelledby={ contentLabel ? null : headingId }
-				aria-describedby={ aria.describedby }
-				tabIndex="-1"
-				{ ...( shouldCloseOnClickOutside ? focusOutsideProps : {} ) }
-				onKeyDown={ onKeyDown }
-			>
-				<div className={ 'components-modal__content' } role="document">
-					<div className="components-modal__header">
-						<div className="components-modal__header-heading-container">
-							{ icon && (
-								<span
-									className="components-modal__icon-container"
-									aria-hidden
-								>
-									{ icon }
-								</span>
-							) }
-							{ title && (
-								<h1
-									id={ headingId }
-									className="components-modal__header-heading"
-								>
-									{ title }
-								</h1>
+			<StyleProvider document={ document }>
+				<div
+					className={ classnames(
+						'components-modal__frame',
+						className,
+						{
+							'is-full-screen': isFullScreen,
+						}
+					) }
+					style={ style }
+					ref={ useMergeRefs( [
+						constrainedTabbingRef,
+						focusReturnRef,
+						focusOnMountRef,
+					] ) }
+					role={ role }
+					aria-label={ contentLabel }
+					aria-labelledby={ contentLabel ? null : headingId }
+					aria-describedby={ aria.describedby }
+					tabIndex="-1"
+					{ ...( shouldCloseOnClickOutside
+						? focusOutsideProps
+						: {} ) }
+					onKeyDown={ onKeyDown }
+				>
+					<div
+						className={ 'components-modal__content' }
+						role="document"
+					>
+						<div className="components-modal__header">
+							<div className="components-modal__header-heading-container">
+								{ icon && (
+									<span
+										className="components-modal__icon-container"
+										aria-hidden
+									>
+										{ icon }
+									</span>
+								) }
+								{ title && (
+									<h1
+										id={ headingId }
+										className="components-modal__header-heading"
+									>
+										{ title }
+									</h1>
+								) }
+							</div>
+							{ isDismissible && (
+								<Button
+									onClick={ onRequestClose }
+									icon={ closeSmall }
+									label={
+										closeButtonLabel || __( 'Close dialog' )
+									}
+								/>
 							) }
 						</div>
-						{ isDismissible && (
-							<Button
-								onClick={ onRequestClose }
-								icon={ closeSmall }
-								label={
-									closeButtonLabel || __( 'Close dialog' )
-								}
-							/>
-						) }
+						{ children }
 					</div>
-					{ children }
 				</div>
-			</div>
+			</StyleProvider>
 		</div>,
 		document.body
 	);