fix(atoms): add stretch prop to the dropdown palte

src/atoms/Dropdown/Dropdown.js

@@ -5,6 +5,7 @@ import { DropdownHead as Head } from './DropdownHead';
 import { DropdownBody as Body } from './DropdownBody';
 import { theme as dropdownHeadTheme } from './DropdownHead.theme';
 import { theme as dropdownBodyTheme } from './DropdownBody.theme';
+import { theme as dropdownPlateTheme } from './DropdownPlate.theme';
 
 const Dropdown = {
   Head,
@@ -15,6 +16,7 @@ const Dropdown = {
 const theme = {
   ...dropdownHeadTheme,
   ...dropdownBodyTheme,
+  ...dropdownPlateTheme,
 };
 
 export {

src/atoms/Dropdown/DropdownBody.js

@@ -108,7 +108,7 @@ const DropdownBody = dropdownBodyEnhancer(
 
     return stretch
       ? targetWidth
-      : width && `${width}rem`;
+      : width && `${width}px`;
   }
 
   getBodyChildren = () => {

src/atoms/Dropdown/DropdownHead.theme.js

@@ -16,7 +16,7 @@ const theme = createTheme(name, {
 
 const DropdownHeadTag = createStyledTag(name, {
   cursor: 'pointer',
-  display: 'inline-flex',
+  display: 'flex',
   flexWrap: 'nowrap',
   height: 'auto',
   width: 'auto',
@@ -25,7 +25,7 @@ const DropdownHeadTag = createStyledTag(name, {
 
 
 const DropdownPopperTarget = createStyledTag(name, {
-  display: 'inline-flex',
+  display: 'flex',
   width: '100%',
   height: ' 100%',
 });

src/atoms/Dropdown/DropdownPlate.js

@@ -6,10 +6,13 @@ import { compose, withStateHandlers, branch, setDisplayName } from 'recompose';
 import { Manager } from 'react-popper';
 
 import { DropdownContext } from './DropdownContext';
+import { DropdownPlateTag } from './DropdownPlate.theme';
 
 type DropdownControlledProps = {|
   /** Open state of the dropdown */
   isOpen: boolean,
+  /** When true then  plate */
+  stretch?: boolean,
   /** Callback to close dropdown */
   onCloseDropdown?: () => void,
   /** Callback to open dropdown */
@@ -20,6 +23,8 @@ type DropdownControlledProps = {|
 type DropdownUncontroledProps = {|
   /** Default opened state for the uncontorlled mode */
   defaultOpen?: boolean,
+  /** When true then  plate */
+  stretch?: boolean,
   children: React$Node,
 |}
 
@@ -81,7 +86,7 @@ const DropdownPlate = dropDownEnhancer(
   getIgnoreClickOutsideClass = () => `ignore-react-onclickoutside-${this.instanceIndex}`;
 
   render() {
-      const { children, onCloseDropdown, isOpen } = this.props;
+      const { children, onCloseDropdown, isOpen, ...rest } = this.props;
 
       const contextData: DropdownContextData = {
         isOpen,
@@ -93,11 +98,11 @@ const DropdownPlate = dropDownEnhancer(
 
       return (
         <DropdownContext.Provider value={ contextData }>
-          <div ref={ this.setDropdownRef }>
+          <DropdownPlateTag { ...rest } tag="div" ref={ this.setDropdownRef }>
             <Manager tag={ false }>
               { children }
             </Manager>
-          </div>
+          </DropdownPlateTag>
         </DropdownContext.Provider>
       );
     }

src/atoms/Dropdown/DropdownPlate.theme.js

@@ -0,0 +1,23 @@
+// @flow
+
+import { createStyledTag, createTheme } from '../../utils';
+
+const name = 'dropdownHead';
+
+const theme = createTheme(name, {
+  modifiers: {
+    stretch: {
+      height: '100%',
+      width: '100%',
+    },
+  },
+  defaults: {},
+});
+
+const DropdownPlateTag = createStyledTag(name, {});
+
+export {
+  theme,
+  DropdownPlateTag,
+};
+