FullscreenMode: remove the is-fullscreen-mode CSS class from body on …

…unmount (#26103)
WordPress · Oct 14, 2020 · 8ff4794 · 8ff4794
1 parent c0e8588
commit 8ff4794
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git a/packages/interface/src/components/fullscreen-mode/index.js b/packages/interface/src/components/fullscreen-mode/index.js
@@ -22,6 +22,10 @@ export class FullscreenMode extends Component {
 		if ( this.isSticky ) {
 			document.body.classList.add( 'sticky-menu' );
 		}
+
+		if ( this.props.isActive ) {
+			document.body.classList.remove( 'is-fullscreen-mode' );
+		}
 	}
 
 	componentDidUpdate( prevProps ) {

diff --git a/packages/interface/src/components/fullscreen-mode/test/index.js b/packages/interface/src/components/fullscreen-mode/test/index.js
@@ -45,4 +45,25 @@ describe( 'FullscreenMode', () => {
 			true
 		);
 	} );
+
+	it( 'fullscreen mode to be removed from document body when component unmounted', () => {
+		// not present initially
+		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
+			false
+		);
+
+		const mode = shallow( <FullscreenMode isActive /> );
+
+		// present after mounting with `isActive`
+		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
+			true
+		);
+
+		mode.unmount();
+
+		// removed after unmounting
+		expect( document.body.classList.contains( 'is-fullscreen-mode' ) ).toBe(
+			false
+		);
+	} );
 } );