Add support for dropdown container to be inline-block (#8559)

packages/components/src/dropdown/README.md

@@ -10,11 +10,12 @@ and uses render props to render the button and the content.
 ```jsx
 import { Button, Dropdown } from '@wordpress/components';
 
-const MyDropdown = () => (
+export const MyDropdown = () => (
 	<Dropdown
 		className="my-container-class-name"
 		contentClassName="my-popover-content-classname"
 		position="bottom right"
+		isInline={ true }
 		renderToggle={ ( { isOpen, onToggle } ) => (
 			<Button isPrimary onClick={ onToggle } aria-expanded={ isOpen }>
 				Toggle Popover!
@@ -91,7 +92,7 @@ Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to
  - Type: `String`
  - Required: No
 
- ### focusOnMount
+### focusOnMount
 
  By default, the *first tabblable element* in the popover will receive focus when it mounts. This is the same as setting `focusOnMount` to `"firstElement"`. If you want to focus the container instead, you can set `focusOnMount` to `"container"`.
 
@@ -101,10 +102,18 @@ Opt-in prop to show popovers fullscreen on mobile, pass `false` in this prop to
  - Required: No
  - Default: `"firstElement"`
 
- ### popoverProps
+### popoverProps
 
 Properties of popoverProps object will be passed as props to the `Popover` component.
 Use this o object to access properties/feature if the `Popover` component that are not already exposed in the `Dropdown`component, e.g.: the hability to have the popover without an arrow. 
 
  - Type: `Object`
  - Required: No
+
+### isInline
+
+A flag that sets the dropdown container to display as an `inline-block` element
+
+ - Type: `Boolean`
+ - Required: No
+ - Default: `false`

packages/components/src/dropdown/index.js

@@ -3,6 +3,11 @@
  */
 import { Component, createRef } from '@wordpress/element';
 
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
@@ -75,12 +80,14 @@ class Dropdown extends Component {
 			headerTitle,
 			focusOnMount,
 			popoverProps,
+			isInline,
 		} = this.props;
 
 		const args = { isOpen, onToggle: this.toggle, onClose: this.close };
+		const containerClasses = classnames( className, { [ `components-dropdown__inline` ]: isInline } );
 
 		return (
-			<div className={ className } ref={ this.containerRef }>
+			<div className={ containerClasses } ref={ this.containerRef }>
 				{ renderToggle( args ) }
 				{ isOpen && (
 					<Popover

packages/components/src/dropdown/style.scss

@@ -0,0 +1,3 @@
+.components-dropdown__inline {
+	display: inline-block;
+}

packages/components/src/style.scss

@@ -12,6 +12,7 @@
 @import "./disabled/style.scss";
 @import "./draggable/style.scss";
 @import "./drop-zone/style.scss";
+@import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./external-link/style.scss";
 @import "./focal-point-picker/style.scss";