feat(styled-components): fix select field ellipsis

Ian Wensink · Ian Wensink · commit 8ad79e1d8851 · 2017-11-12T23:27:20.000+01:00
diff --git a/src/SelectField/styled/wrapper.js b/src/SelectField/styled/wrapper.js
@@ -6,7 +6,7 @@ export default styled.div`
   padding-right: 20px;
 
   @media (min-width: 768px) {
-    width: calc(${p => p.theme.inlineLabelWidth} + ${p => p.theme.inputWidth} + 20px);
+    width: calc(${p => p.theme.inputWidth} * 1.3);
   }
 
   ${p => p.labelDisplay === 'inline' && `
@@ -17,9 +17,10 @@ export default styled.div`
       display: inline-block;
     }
 
-    & :global .Select-placeholder,
-    & :global .Select--single > .Select-control .Select-value {
+    & .Select-placeholder,
+    & .Select--single > .Select-control .Select-value {
       max-width: calc(${p.theme.inputWidth} - 25px);
+      overflow: hidden;
     }
   `}
   

Original file line number	Diff line number	Diff line change
@@ -6,7 +6,7 @@ export default styled.div`
`6`	`6`	`padding-right: 20px;`
`7`	`7`
`8`	`8`	`@media (min-width: 768px) {`
`9`		`- width: calc(${p => p.theme.inlineLabelWidth} + ${p => p.theme.inputWidth} + 20px);`
	`9`	`+ width: calc(${p => p.theme.inputWidth} * 1.3);`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	${p => p.labelDisplay === 'inline' && `
@@ -17,9 +17,10 @@ export default styled.div`
`17`	`17`	`display: inline-block;`
`18`	`18`	`}`
`19`	`19`
`20`		`- & :global .Select-placeholder,`
`21`		`- & :global .Select--single > .Select-control .Select-value {`
	`20`	`+ & .Select-placeholder,`
	`21`	`+ & .Select--single > .Select-control .Select-value {`
`22`	`22`	`max-width: calc(${p.theme.inputWidth} - 25px);`
	`23`	`+ overflow: hidden;`
`23`	`24`	`}`
`24`	`25`	`}
`25`	`26`