fix: change height to 3.8rem to fit design (#801)

src/Dropdown/__tests__/__snapshots__/Dropdown.test.js.snap

@@ -3,6 +3,7 @@
 exports[`<Dropdown /> should render without a problem 1`] = `
 .c1 {
   display: inline-block;
+  height: inherit;
   width: inherit;
 }
 
@@ -14,7 +15,7 @@ exports[`<Dropdown /> should render without a problem 1`] = `
   height: 100%;
   width: 100%;
   position: relative;
-  padding: 0.8rem 1.2rem;
+  padding: 0 1.2rem;
   cursor: pointer;
   text-align: left;
   font-size: 1.4rem;
@@ -69,7 +70,7 @@ exports[`<Dropdown /> should render without a problem 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  height: 100%;
+  height: 3.8rem;
 }
 
 <div

src/Dropdown/elements.js

@@ -7,7 +7,7 @@ export const Header = styled.button`
   width: 100%;
   position: relative;
 
-  padding: 0.8rem 1.2rem;
+  padding: 0 1.2rem;
 
   cursor: pointer;
   text-align: left;

src/Dropdown/index.js

@@ -262,6 +262,12 @@ Dropdown.propTypes = {
    */
   headerStyle: object,
 
+  /**
+   * CSS height of the component
+   */
+  // eslint-disable-next-line react/no-unused-prop-types
+  height: string,
+
   /**
    * CSS provided to each item of the dropdown. Must use `css` method from styled-components
    */
@@ -309,6 +315,7 @@ Dropdown.propTypes = {
 Dropdown.defaultProps = {
   className: '',
   headerStyle: null,
+  height: '3.8rem',
   itemCss: null,
   modifiers: null,
   noResultLabel: null,
@@ -321,5 +328,5 @@ Dropdown.defaultProps = {
 export default styled(Dropdown)`
   position: relative;
   user-select: none;
-  height: 100%;
+  height: ${({ height }) => height || '3.8rem'};
 `;

src/Input/DatePickerInput/__tests__/__snapshots__/DatePickerInput.test.js.snap

@@ -3,6 +3,7 @@
 exports[`<DatePickerInput /> should render without a problem 1`] = `
 .c2 {
   display: inline-block;
+  height: inherit;
   width: inherit;
 }
 

src/Input/DatePickerInput/elements.js

@@ -5,6 +5,7 @@ export const Container = styled.div`
 `;
 
 export const DatePickerWrapper = styled.div`
+  padding: 1.5rem;
   background: white;
 `;
 

src/Input/DatePickerInput/index.js

@@ -137,6 +137,7 @@ class DatePickerInput extends PureComponent {
               </DatePickerWrapper>
             }
             onClickOutside={this.handleOutsideClick}
+            placement="bottom-start"
           >
             <TextInput
               fluid={fluid}

src/Popover/__tests__/__snapshots__/Popover.test.js.snap

@@ -3,6 +3,7 @@
 exports[`<Popover /> should render without a problem 1`] = `
 .c0 {
   display: inline-block;
+  height: inherit;
   width: inherit;
 }
 

src/Popover/elements.js

@@ -102,5 +102,6 @@ export const PopoverContentWrapper = styled.div`
 
 export const PopoverTriggerWrapper = styled.span`
   display: inline-block;
+  height: inherit;
   width: inherit;
 `;

src/Select/__tests__/__snapshots__/Select.test.js.snap

@@ -3,6 +3,7 @@
 exports[`<Select /> should render without a problem 1`] = `
 .c1 {
   display: inline-block;
+  height: inherit;
   width: inherit;
 }
 
@@ -14,7 +15,7 @@ exports[`<Select /> should render without a problem 1`] = `
   height: 100%;
   width: 100%;
   position: relative;
-  padding: 0.8rem 1.6rem;
+  padding: 0 1.6rem;
   cursor: pointer;
   text-align: left;
   font-size: 1.4rem;
@@ -69,8 +70,8 @@ exports[`<Select /> should render without a problem 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  width: auto;
-  height: 4rem;
+  height: 3.8rem;
+  width: 100%;
 }
 
 <div
@@ -97,6 +98,7 @@ exports[`<Select /> should render without a problem 1`] = `
 exports[`<Select /> should render without a problem when disabled 1`] = `
 .c1 {
   display: inline-block;
+  height: inherit;
   width: inherit;
 }
 
@@ -108,7 +110,7 @@ exports[`<Select /> should render without a problem when disabled 1`] = `
   height: 100%;
   width: 100%;
   position: relative;
-  padding: 0.8rem 1.6rem;
+  padding: 0 1.6rem;
   cursor: pointer;
   text-align: left;
   font-size: 1.4rem;
@@ -163,8 +165,8 @@ exports[`<Select /> should render without a problem when disabled 1`] = `
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  width: auto;
-  height: 4rem;
+  height: 3.8rem;
+  width: 100%;
 }
 
 .c0 .c2 {

src/Select/elements.js

@@ -8,7 +8,7 @@ export const Header = styled.button`
   width: 100%;
   position: relative;
 
-  padding: 0.8rem 1.6rem;
+  padding: 0 1.6rem;
 
   cursor: pointer;
   text-align: left;

src/Select/index.js

@@ -316,6 +316,13 @@ Select.propTypes = {
    */
   disabled: bool,
 
+  /**
+   * CSS height of the component
+   */
+  // https://github.com/yannickcr/eslint-plugin-react/issues/1520
+  // eslint-disable-next-line react/no-unused-prop-types
+  height: string,
+
   /**
    * Customize popper behaviour. Plugins to alter the behaviour of the popper. See https://popper.js.org/popper-documentation.html
    */
@@ -371,6 +378,7 @@ Select.defaultProps = {
   children: null,
   className: '',
   disabled: false,
+  height: '3.8rem',
   resetValue: false,
   triggerWrapperCss: null,
   usePortal: false,
@@ -380,8 +388,8 @@ Select.defaultProps = {
 export default styled(Select)`
   position: relative;
   user-select: none;
-  width: ${({ width }) => (/^\d+(rem|px|%)$/.test(width) ? width : 'auto')};
-  height: 4rem;
+  height: ${({ height }) => height || '3.8rem'};
+  width: ${({ width }) => width || '100%'};
 
   /* Disabled */
   ${({ disabled }) =>