Support custom styles for menu content

This can be used to set a custom minimum width for a particular menu for
example.

src/sidebar/components/menu.js

@@ -45,6 +45,7 @@ let ignoreNextClick = false;
 function Menu({
   align = 'left',
   children,
+  contentClass,
   defaultOpen = false,
   label,
   menuIndicator = true,
@@ -128,7 +129,8 @@ function Menu({
           <div
             className={classnames(
               'menu__content',
-              `menu__content--align-${align}`
+              `menu__content--align-${align}`,
+              contentClass
             )}
             role="menu"
           >
@@ -166,6 +168,11 @@ Menu.propTypes = {
     propTypes.arrayOf(propTypes.object),
   ]),
 
+  /**
+   * Additional CSS classes to apply to the menu.
+   */
+  contentClass: propTypes.string,
+
   /**
    * Whether the menu is open or closed when initially rendered.
    */

src/sidebar/components/test/menu-test.js

@@ -126,4 +126,13 @@ describe('Menu', () => {
     wrapper.setProps({ align: 'right' });
     assert.isTrue(wrapper.exists('.menu__content--align-right'));
   });
+
+  it('applies custom content class', () => {
+    const wrapper = createMenu({
+      defaultOpen: true,
+      contentClass: 'special-menu',
+    });
+    const content = wrapper.find('.menu__content');
+    assert.isTrue(content.hasClass('special-menu'));
+  });
 });