Popover: Making the expandOnMobile prop opt-in

components/dropdown/README.md

@@ -75,3 +75,11 @@ A callback invoked to render the content of the dropdown menu. Its first argumen
 
 - Type: `Function`
 - Required: Yes
+
+## expandOnMobile
+
+Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to avoid this behavior.
+
+ - Type: `Boolean`
+ - Required: No
+ - Default: `false`

components/dropdown/index.js

@@ -61,7 +61,14 @@ class Dropdown extends Component {
 
 	render() {
 		const { isOpen } = this.state;
-		const { renderContent, renderToggle, position = 'bottom', className, contentClassName } = this.props;
+		const {
+			renderContent,
+			renderToggle,
+			position = 'bottom',
+			className,
+			contentClassName,
+			expandOnMobile,
+		} = this.props;
 		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
 		return (
 			<div className={ className } ref={ this.bindContainer }>
@@ -72,6 +79,7 @@ class Dropdown extends Component {
 					position={ position }
 					onClose={ this.close }
 					onClickOutside={ this.clickOutside }
+					expandOnMobile={ expandOnMobile }
 				>
 					<FocusManaged>
 						{ renderContent( args ) }

components/popover/README.md

@@ -100,11 +100,10 @@ A callback invoked when the user clicks outside the opened popover, passing the
 - Type: `Function`
 - Required: No
 
-
 ## expandOnMobile
 
-Popovers automatically shows up fullscreen on mobile, pass `false` in this prop to avoid this behavior.
+Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to avoid this behavior.
 
  - Type: `Boolean`
  - Required: No
- - Default: `true`
+ - Default: `false`

components/popover/index.js

@@ -158,7 +158,7 @@ class Popover extends Component {
 	}
 
 	setOffset() {
-		const { getAnchorRect = this.getAnchorRect, expandOnMobile = true } = this.props;
+		const { getAnchorRect = this.getAnchorRect, expandOnMobile = false } = this.props;
 		const { popover } = this.nodes;
 
 		if ( isMobile() && expandOnMobile ) {

components/popover/test/index.js

@@ -13,7 +13,7 @@ describe( 'Popover', () => {
 		let wrapper, mocks;
 		beforeEach( () => {
 			wrapper = shallow(
-				<Popover expandOnMobile={ false } />,
+				<Popover />,
 				{ lifecycleExperimental: true }
 			);
 
@@ -206,7 +206,7 @@ describe( 'Popover', () => {
 		} );
 
 		function getInstanceWithParentNode() {
-			const instance = new Popover( { expandOnMobile: false } );
+			const instance = new Popover( {} );
 
 			instance.nodes.anchor = {
 				parentNode: {

components/tooltip/index.js

@@ -177,7 +177,6 @@ class Tooltip extends Component {
 					position={ position }
 					className="components-tooltip"
 					aria-hidden="true"
-					expandOnMobile={ false }
 				>
 					{ text }
 				</Popover>,

editor/inserter/index.js

@@ -68,6 +68,7 @@ class Inserter extends Component {
 				className="editor-inserter"
 				position={ position }
 				onToggle={ this.onToggle }
+				expandOnMobile
 				renderToggle={ ( { onToggle, isOpen } ) => (
 					<IconButton
 						icon="insert"