Popovers: Automatically add a close button for mobile popoveres

WordPress · Nov 16, 2017 · 01378bc · 01378bc
1 parent 6ce9f3e
commit 01378bc
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/components/popover/index.js b/components/popover/index.js
@@ -16,6 +16,7 @@ import { focus, keycodes } from '@wordpress/utils';
 import './style.scss';
 import withFocusReturn from '../higher-order/with-focus-return';
 import PopoverDetectOutside from './detect-outside';
+import IconButton from '../icon-button';
 import { Slot, Fill } from '../slot-fill';
 
 const FocusManaged = withFocusReturn( ( { children } ) => children );
@@ -300,6 +301,9 @@ class Popover extends Component {
 						className="components-popover__content"
 						tabIndex="-1"
 					>
+						{ this.state.isMobile &&
+							<IconButton className="components-popover__close" icon="no-alt" onClick={ onClose } />
+						}
 						{ children }
 					</div>
 				</div>

diff --git a/components/popover/style.scss b/components/popover/style.scss
@@ -102,8 +102,14 @@
 	}
 }
 
-
 // The withFocusReturn div
 .components-popover__content > div {
 	height: 100%;
 }
+
+.components-popover__close.components-icon-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: z-index( '.components-popover__close' );
+}
diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
@@ -20,6 +20,7 @@ $z-layers: (
 	'.blocks-format-toolbar__link-modal': 2,
 	'.editor-block-contextual-toolbar': 2,
 	'.editor-block-switcher__menu': 2,
+	'.components-popover__close': 2,
 	'.editor-block-mover': 20,
 	'.blocks-gallery-image__inline-menu': 20,
 	'.editor-block-settings-menu__popover': 20, // Below the header

diff --git a/editor/components/inserter/style.scss b/editor/components/inserter/style.scss
@@ -49,6 +49,10 @@ input[type="search"].editor-inserter__search {
 	&:focus {
 		@include input-style__focus-active;
 	}
+
+	.components-popover.is-mobile & {
+		padding-right: 30px;
+	}
 }
 
 .editor-inserter__category-blocks {
@@ -68,18 +72,6 @@ input[type="search"].editor-inserter__search {
 	}
 }
 
-.editor-inserter__menu.components-popover.is-center .components-popover__content {
-	@media ( max-width: #{ $break-medium - 1 } ) {
-		border-width: 0;
-		position: fixed;
-		left: 0;
-		right: 0;
-		top: $admin-bar-height-big + $header-height;
-		transform: none;
-		width: 100vw;
-	}
-}
-
 .editor-inserter__menu.is-bottom:after {
 	border-bottom-color: $white;
 }