diff --git a/e2e/__tests__/__image_snapshots__/select-field-test-js-components-select-field-common-1-snap.png b/e2e/__tests__/__image_snapshots__/select-field-test-js-components-select-field-common-1-snap.png index 3d8dbcdd..607b4b1d 100644 Binary files a/e2e/__tests__/__image_snapshots__/select-field-test-js-components-select-field-common-1-snap.png and b/e2e/__tests__/__image_snapshots__/select-field-test-js-components-select-field-common-1-snap.png differ diff --git a/e2e/__tests__/__image_snapshots__/select-test-js-components-select-common-1-snap.png b/e2e/__tests__/__image_snapshots__/select-test-js-components-select-common-1-snap.png index 087cd822..7547943a 100644 Binary files a/e2e/__tests__/__image_snapshots__/select-test-js-components-select-common-1-snap.png and b/e2e/__tests__/__image_snapshots__/select-test-js-components-select-common-1-snap.png differ diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js index a4d78e4c..3a444894 100644 --- 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 index 30871f37..2cdc2bb5 100644 --- 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) => { +