diff --git a/components/dropdown/README.md b/components/dropdown/README.md index 1985439b564c1..05d8c37ff2e02 100644 --- a/components/dropdown/README.md +++ b/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` diff --git a/components/dropdown/index.js b/components/dropdown/index.js index 1989f101de78a..8f9edc451ae74 100644 --- a/components/dropdown/index.js +++ b/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 (
@@ -72,6 +79,7 @@ class Dropdown extends Component { position={ position } onClose={ this.close } onClickOutside={ this.clickOutside } + expandOnMobile={ expandOnMobile } > { renderContent( args ) } diff --git a/components/popover/README.md b/components/popover/README.md index 919f9eecb1311..53a0ef352d21f 100644 --- a/components/popover/README.md +++ b/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` diff --git a/components/popover/index.js b/components/popover/index.js index 5e29b3d7c63e8..bb1c73afea054 100644 --- a/components/popover/index.js +++ b/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 ) { diff --git a/components/popover/test/index.js b/components/popover/test/index.js index 644a229760b34..0a30f0aa65760 100644 --- a/components/popover/test/index.js +++ b/components/popover/test/index.js @@ -13,7 +13,7 @@ describe( 'Popover', () => { let wrapper, mocks; beforeEach( () => { wrapper = shallow( - , + , { lifecycleExperimental: true } ); @@ -206,7 +206,7 @@ describe( 'Popover', () => { } ); function getInstanceWithParentNode() { - const instance = new Popover( { expandOnMobile: false } ); + const instance = new Popover( {} ); instance.nodes.anchor = { parentNode: { diff --git a/components/tooltip/index.js b/components/tooltip/index.js index d036e4c6b4949..bfe8542c9f70a 100644 --- a/components/tooltip/index.js +++ b/components/tooltip/index.js @@ -177,7 +177,6 @@ class Tooltip extends Component { position={ position } className="components-tooltip" aria-hidden="true" - expandOnMobile={ false } > { text } , diff --git a/editor/inserter/index.js b/editor/inserter/index.js index e04300bc1a360..cea1f67948846 100644 --- a/editor/inserter/index.js +++ b/editor/inserter/index.js @@ -68,6 +68,7 @@ class Inserter extends Component { className="editor-inserter" position={ position } onToggle={ this.onToggle } + expandOnMobile renderToggle={ ( { onToggle, isOpen } ) => (