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) => {
+
+
+