fix(Select): handle long select options

8base · Jan 28, 2019 · 8f458e1 · 8f458e1
1 parent 8b57783
commit 8f458e1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/...mage_snapshots__/select-field-test-js-components-select-field-common-1-snap.png b/...mage_snapshots__/select-field-test-js-components-select-field-common-1-snap.png
diff --git a/..._tests__/__image_snapshots__/select-test-js-components-select-common-1-snap.png b/..._tests__/__image_snapshots__/select-test-js-components-select-common-1-snap.png
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -24,7 +24,6 @@ type SelectProps = {|
 const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN }) => ({
   control: (style, { isFocused }) => ({
     ...style,
-    maxHeight: '36px',
     minHeight: '36px',
     backgroundColor: PALETTE.WHITE,
     borderColor: hasError ? PALETTE.DANGER : (isFocused ? PALETTE.PRIMARY : PALETTE.LIGHT_GRAY1),
@@ -44,7 +43,7 @@ const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN }) => ({
   }),
   indicatorSeparator: (style) => ({
     ...style,
-    backgroundColor: PALETTE.WHITE,
+    display: 'none',
   }),
   multiValue: (style) => ({
     ...style,
@@ -53,6 +52,7 @@ const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN }) => ({
     color: '#878c93',
     border: '1px solid #d0d7dd',
     backgroundColor: '#fff',
+    height: 26,
   }),
   multiValueLabel: (style) => ({
     ...style,
@@ -67,6 +67,14 @@ const customStyles = ({ hasError, zIndex = Z_INDEX.DROPDOWN }) => ({
       cursor: 'pointer',
     },
   }),
+  dropdownIndicator: (style) => ({
+    ...style,
+    padding: '0 8px',
+  }),
+  clearIndicator: (style) => ({
+    ...style,
+    padding: '0 8px',
+  }),
 });
 
 const Select = ({

diff --git a/src/components/Select/Select.stories.js b/src/components/Select/Select.stories.js
@@ -11,6 +11,17 @@ const OPTIONS = [{
   value: 'wiseheartedly',
 }];
 
+const LONG_OPTIONS = [{
+  label: 'Geoglossaceae nontransportation laemodipodiform gluttonously spaework ankylorrhinia zain carlet ironheartedness topia antiorthodox cerebropedal Sothis whispered basilica idealizer outvalue thwacking unafraid coining nak friskily renishly stringsman',
+  value: 'ovenlike',
+}, {
+  label: 'backhander unpersecuted platch antisymmetrical fumaroid chromitite Microthelyphonida epigraphically myope supramechanical pageant ankle camphory nitronaphthalene thieve umquhile mornings gynomonoecism unvulgarize rickmatic saltless sternoglossal pungi pronumber',
+  value: 'serjeant',
+}, {
+  label: 'juju tattlery nonperpetual nonexternal vocabularied umber lichenological repressure unpoled blepharosynechia peragration reduplicature acarid citizenism nongelatinizing splenoptosia unpoisoned tympanic tachogram unhardness dovetail transonic cuinage tributariness',
+  value: 'wiseheartedly',
+}];
+
 export default (asStory) => {
   asStory('Components/Select', module, (story, { Select, StateContainer, Column, Icon, Row }) => {
     story
@@ -25,6 +36,9 @@ export default (asStory) => {
           <StateContainer value={ [OPTIONS[1], OPTIONS[2]] }>
             <Select name="name" placeholder="Select an option" options={ OPTIONS } multiple />
           </StateContainer>
+          <StateContainer value={ [LONG_OPTIONS[1], LONG_OPTIONS[2]] }>
+            <Select name="name" placeholder="Select an option" options={ LONG_OPTIONS } multiple />
+          </StateContainer>
           <StateContainer value={ [OPTIONS[1], OPTIONS[2]] }>
             <Select
               name="name"