Add a full screen modal component

packages/components/src/modal/header.js

@@ -40,7 +40,12 @@ const ModalHeader = ( {
 				) }
 			</div>
 			{ isDismissible && (
-				<Button onClick={ onClose } icon={ close } label={ label } />
+				<Button
+					className="components-modal-header__close"
+					onClick={ onClose }
+					icon={ close }
+					label={ label }
+				/>
 			) }
 		</div>
 	);

packages/components/src/modal/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -31,7 +36,7 @@ class Modal extends Component {
 		openModalCount++;
 
 		if ( openModalCount === 1 ) {
-			this.openFirstModal();
+			this.openFirstModal( this.props.isFullscreen );
 		}
 	}
 
@@ -43,7 +48,7 @@ class Modal extends Component {
 		openModalCount--;
 
 		if ( openModalCount === 0 ) {
-			this.closeLastModal();
+			this.closeLastModal( this.props.isFullscreen );
 		}
 
 		this.cleanDOM();
@@ -61,6 +66,7 @@ class Modal extends Component {
 	prepareDOM() {
 		if ( ! parentElement ) {
 			parentElement = document.createElement( 'div' );
+			parentElement.className = 'components-modal__portal';
 			document.body.appendChild( parentElement );
 		}
 		this.node = document.createElement( 'div' );
@@ -80,19 +86,29 @@ class Modal extends Component {
 	 * It appends an additional div to the body for the modals to be rendered in,
 	 * it hides any other elements from screen-readers and adds an additional class
 	 * to the body to prevent scrolling while the modal is open.
+	 *
+	 * @param {boolean} isFullscreen
 	 */
-	openFirstModal() {
+	openFirstModal( isFullscreen ) {
 		ariaHelper.hideApp( parentElement );
 		document.body.classList.add( this.props.bodyOpenClassName );
+		if ( isFullscreen ) {
+			document.body.classList.add( 'is-fullscreen-modal' );
+		}
 	}
 
 	/**
 	 * Cleans up the DOM after the last modal is closed and makes the app available
 	 * for screen-readers again.
+	 *
+	 * @param {boolean} isFullscreen
 	 */
-	closeLastModal() {
+	closeLastModal( isFullscreen ) {
 		document.body.classList.remove( this.props.bodyOpenClassName );
 		ariaHelper.showApp();
+		if ( isFullscreen ) {
+			document.body.classList.remove( 'is-fullscreen-modal' );
+		}
 	}
 
 	/**
@@ -102,13 +118,15 @@ class Modal extends Component {
 	 */
 	render() {
 		const {
+			overlayClassName,
 			onRequestClose,
 			title,
 			icon,
 			closeButtonLabel,
 			children,
 			aria,
 			instanceId,
+			isFullscreen,
 			isDismissible,
 			isDismissable, //Deprecated
 			// Many of the documented props for Modal are passed straight through
@@ -134,9 +152,17 @@ class Modal extends Component {
 					labelledby: title ? headingId : null,
 					describedby: aria.describedby,
 				} }
+				overlayClassName={ classnames(
+					'components-modal__screen-overlay',
+					overlayClassName,
+					{
+						'is-dialog': ! isFullscreen,
+						'is-full-screen': isFullscreen,
+					}
+				) }
 				{ ...otherProps }
 			>
-				<div className={ 'components-modal__content' } role="document">
+				<div className="components-modal__content" role="document">
 					<ModalHeader
 						closeLabel={ closeButtonLabel }
 						headingId={ headingId }

packages/components/src/modal/style.scss

@@ -5,14 +5,12 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
-	background-color: rgba($black, 0.35);
 	z-index: z-index(".components-modal__screen-overlay");
-
-	// This animates the appearance of the white background.
+	background-color: rgba($black, 0.7);
+	// This animates the appearance of the background.
 	@include edit-post__fade-in-animation();
 }
 
-// The modal window element.
 .components-modal__frame {
 	// On small screens the content needs to be full width because of limited
 	// space.
@@ -26,32 +24,30 @@
 	border: $border-width solid $gray-300;
 	background: $white;
 	box-shadow: $shadow-modal;
-	overflow: auto;
-
-	// Show a centered modal on bigger screens.
-	@include break-small() {
-		top: 50%;
-		right: auto;
-		bottom: auto;
-		left: 50%;
-		min-width: $modal-min-width;
-		max-width: calc(100% - #{ $grid-unit-20 } - #{ $grid-unit-20 });
-		max-height: 90%;
-		transform: translate(-50%, -50%);
-
-		// Animate the modal frame/contents appearing on the page.
-		animation: components-modal__appear-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-	}
-}
 
-@keyframes components-modal__appear-animation {
-	from {
-		margin-top: $grid-unit-40;
+	.components-modal__screen-overlay.is-dialog & {
+		// Show a centered modal on bigger screens.
+		@include break-small() {
+			top: 50%;
+			right: auto;
+			bottom: auto;
+			left: 50%;
+			min-width: $modal-min-width;
+			max-width: calc(100% - #{ $grid-unit-20 } - #{ $grid-unit-20 });
+			max-height: 90%;
+			transform: translate(-50%, -50%);
+			// Animate the modal frame/contents appearing on the page.
+			animation: components-modal__appear-slide-animation 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+		}
 	}
-	to {
-		margin-top: 0;
+
+	.components-modal__screen-overlay.is-full-screen & {
+		top: 100%;
+		transform-origin: top center;
+		animation: components-modal__appear-slide-from-bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+		@include reduce-motion("animation");
 	}
 }
 
@@ -60,21 +56,20 @@
 // modal screen).
 .components-modal__header {
 	box-sizing: border-box;
-	border-bottom: $border-width solid $gray-300;
-	padding: 0 $grid-unit-30;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	background: $white;
 	align-items: center;
 	height: $header-height;
-	z-index: z-index(".components-modal__header");
-	// For z-index to take effect, the element must be positioned. A "sticky"
-	// element is positioned, but since this is not supported in IE11,
-	// "relative" is used as a fallback.
+
+	border-bottom: $border-width solid $gray-300;
+	padding: 0 $grid-unit-30;
+
 	position: relative;
 	position: sticky;
 	top: 0;
+	z-index: z-index(".components-modal__header");
 	margin: 0 -#{$grid-unit-30} $grid-unit-30;
 
 	// Rules inside this query are only run by Microsoft Edge.
@@ -85,11 +80,6 @@
 		width: 100%;
 	}
 
-	.components-modal__header-heading {
-		font-size: 1rem;
-		font-weight: 600;
-	}
-
 	h1 {
 		line-height: 1;
 		margin: 0;
@@ -101,6 +91,11 @@
 	}
 }
 
+.components-modal__screen-overlay .components-modal__header-heading {
+	font-size: 1rem;
+	font-weight: 600;
+}
+
 .components-modal__header-heading-container {
 	align-items: center;
 	flex-grow: 1;
@@ -122,12 +117,66 @@
 // Modal contents.
 .components-modal__content {
 	box-sizing: border-box;
-	height: 100%;
 	padding: 0 $grid-unit-30 $grid-unit-30;
 
-	// Rules inside this query are only run by Microsoft Edge.
-	// This is a companion top padding to the fixed rule in line 77.
-	@supports (-ms-ime-align:auto) {
-		padding-top: $header-height;
+	.components-modal__screen-overlay & {
+		height: 100%;
+		overflow: auto;
+
+		// Rules inside this query are only run by Microsoft Edge.
+		// This is a companion top padding to the fixed rule in line 77.
+		@supports (-ms-ime-align:auto) {
+			padding-top: $header-height;
+		}
+	}
+
+}
+
+// Scale down the content of the page.
+body.modal-open.is-fullscreen-modal {
+	background: $gray-900;
+
+	> *:not(.components-modal__portal) {
+		animation: components-modal__content-scale-back 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
+	}
+
+	// Increase full screen modal padding on medium+ screens
+	@include break-medium() {
+		.components-modal__header {
+			margin: 0 -#{$grid-unit-60} $grid-unit-40 * 2;
+			padding: 0 $grid-unit-60;
+			height: $grid-unit-60 * 2;
+		}
+
+		.components-modal__content {
+			padding: 0 $grid-unit-60 $grid-unit-60;
+		}
+	}
+}
+
+@keyframes components-modal__content-scale-back {
+	from {
+		transform: scale(1);
+	}
+	to {
+		transform: scale(0.93);
+	}
+}
+
+@keyframes components-modal__appear-slide-from-bottom {
+	from {
+		top: 100%;
+	}
+	to {
+		top: 7%;
+	}
+}
+
+@keyframes components-modal__appear-slide-animation {
+	from {
+		margin-top: $grid-unit-40;
+	}
+	to {
+		margin-top: 0;
 	}
 }

packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js

@@ -105,6 +105,7 @@ export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
 			title={ __( 'Keyboard shortcuts' ) }
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ toggleModal }
+			isFullscreen
 		>
 			<ShortcutSection
 				className="edit-post-keyboard-shortcut-help-modal__main-shortcuts"