fix: change default menu height (#624)

* fix: change default menu in selects

Author: montezume

src/components/fields/async-creatable-select-field/async-creatable-select-field.story.js

@@ -138,7 +138,7 @@ storiesOf('Components|Fields', module)
               isMulti={isMulti}
               placeholder={text('placeholder', 'Select...')}
               title={text('title', 'Favourite animal')}
-              maxMenuHeight={number('maxMenuHeight', 200)}
+              maxMenuHeight={number('maxMenuHeight', 220)}
               isSearchable={boolean('isSearchable', false)}
               isClearable={boolean('isClearable', false)}
               tabIndex={text('tabIndex', '0')}

src/components/fields/async-select-field/async-select-field.story.js

@@ -138,7 +138,7 @@ storiesOf('Components|Fields', module)
               isMulti={isMulti}
               placeholder={text('placeholder', 'Select...')}
               title={text('title', 'Favourite animal')}
-              maxMenuHeight={number('maxMenuHeight', 200)}
+              maxMenuHeight={number('maxMenuHeight', 220)}
               isSearchable={boolean('isSearchable', true)}
               isClearable={boolean('isClearable', false)}
               tabIndex={text('tabIndex', '0')}

src/components/fields/creatable-select-field/creatable-select-field.story.js

@@ -124,7 +124,7 @@ storiesOf('Components|Fields', module)
               isMulti={isMulti}
               placeholder={text('placeholder', 'Select...')}
               title={text('title', 'Favourite animal')}
-              maxMenuHeight={number('maxMenuHeight', 200)}
+              maxMenuHeight={number('maxMenuHeight', 220)}
               isSearchable={boolean('isSearchable', true)}
               isClearable={boolean('isClearable', false)}
               options={options}

src/components/fields/select-field/select-field.story.js

@@ -124,7 +124,7 @@ storiesOf('Components|Fields', module)
               isMulti={isMulti}
               placeholder={text('placeholder', 'Select...')}
               title={text('title', 'Favourite animal')}
-              maxMenuHeight={number('maxMenuHeight', 200)}
+              maxMenuHeight={number('maxMenuHeight', 220)}
               isSearchable={boolean('isSearchable', false)}
               isClearable={boolean('isClearable', false)}
               options={options}

src/components/inputs/async-creatable-select-input/async-creatable-select-input.story.js

@@ -79,7 +79,7 @@ class SelectStory extends React.Component {
                   isDisabled={boolean('isDisabled', false)}
                   isMulti={isMulti}
                   isSearchable={boolean('isSearchable', true)}
-                  maxMenuHeight={number('maxMenuHeight', 200)}
+                  maxMenuHeight={number('maxMenuHeight', 220)}
                   name={text('name', 'form-field-name')}
                   onBlur={action('onBlur')}
                   onChange={(event, info) => {

src/components/inputs/async-select-input/async-select-input.story.js

@@ -79,7 +79,7 @@ class SelectStory extends React.Component {
                   isDisabled={boolean('isDisabled', false)}
                   isMulti={isMulti}
                   isSearchable={boolean('isSearchable', true)}
-                  maxMenuHeight={number('maxMenuHeight', 200)}
+                  maxMenuHeight={number('maxMenuHeight', 220)}
                   name={text('name', 'form-field-name')}
                   onBlur={action('onBlur')}
                   onChange={(event, info) => {

src/components/inputs/creatable-select-input/creatable-select-input.story.js

@@ -111,7 +111,7 @@ storiesOf('Components|Inputs', module)
                 isDisabled={boolean('isDisabled', false)}
                 isMulti={isMulti}
                 isSearchable={boolean('isSearchable', true)}
-                maxMenuHeight={number('maxMenuHeight', 200)}
+                maxMenuHeight={number('maxMenuHeight', 220)}
                 name={text('name', 'form-field-name')}
                 onBlur={action('onBlur')}
                 onChange={(event, ...args) => {

src/components/inputs/select-input/select-input.js

@@ -27,7 +27,7 @@ export class SelectInput extends React.Component {
   static isTouched = touched => Boolean(touched);
 
   static defaultProps = {
-    maxMenuHeight: 200,
+    maxMenuHeight: 220,
   };
 
   static propTypes = {

src/components/inputs/select-input/select-input.story.js

@@ -114,7 +114,7 @@ storiesOf('Components|Inputs', module)
                 isDisabled={boolean('isDisabled', false)}
                 isMulti={isMulti}
                 isSearchable={boolean('isSearchable', false)}
-                maxMenuHeight={number('maxMenuHeight', 200)}
+                maxMenuHeight={number('maxMenuHeight', 220)}
                 name={text('name', 'form-field-name')}
                 onBlur={action('onBlur')}
                 onChange={(event, ...args) => {

src/components/inputs/select-input/select-input.visualroute.js

@@ -3,14 +3,25 @@ import { Route, Switch } from 'react-router-dom';
 import { SelectInput } from 'ui-kit';
 import { Suite, Spec } from '../../../../test/percy';
 
-const options = [
+const defaultOptions = [
   { value: 'one', label: 'One' },
   { value: 'two', label: 'Two' },
 ];
 
+const longOptions = defaultOptions.concat([
+  { value: 'three', label: 'Three' },
+  { value: 'four', label: 'Four' },
+  { value: 'five', label: 'Five' },
+  { value: 'six', label: 'Six' },
+  { value: 'seven', label: 'Seven' },
+  { value: 'eight', label: 'Eight' },
+]);
+
+const options = defaultOptions;
+
 const optionsWithGroups = [
-  { label: 'one', options: [{ value: 'one', label: 'One' }] },
-  { options: [{ value: 'two', label: 'Two' }] },
+  { label: 'animals', options: [{ value: 'cats', label: 'Cats' }] },
+  { options: longOptions },
 ];
 
 const value = 'one';
@@ -102,7 +113,7 @@ const OpenRoute = () => (
         id="select-input"
         value={value}
         onChange={() => {}}
-        options={options}
+        options={longOptions}
         horizontalConstraint="m"
       />
     </Spec>

src/components/internals/create-select-styles.js

@@ -178,7 +178,7 @@ const groupHeadingStyles = () => base => ({
   textTransform: 'none',
   fontWeight: 'bold',
   margin: `0 ${vars.spacing4}`,
-  padding: `${vars.spacing8} ${vars.spacing4} ${vars.spacing4}`,
+  padding: `${vars.spacing8} ${vars.spacing4}`,
   '&:empty': {
     padding: 0,
   },