fix(components): Force consistent height of Select across browsers (#444

)
sumup-oss · Jul 23, 2019 · 9f31e5a · 9f31e5a
1 parent bb7c269
commit 9f31e5a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
@@ -28,6 +28,11 @@ import { textMega, disableVisually } from '../../styles/style-helpers';
 
 import { ReactComponent as ArrowsIcon } from './arrows.svg';
 
+// HACK: Firefox includes the border-width in the overall height of the element
+//       (despite box-sizing: border-box), so we have to force the height.
+//       line-height + 2px + (vertical padding * 2) + (border-width * 2)
+const MAX_HEIGHT = '42px';
+
 const selectBaseStyles = ({ theme }) => css`
   label: select;
   appearance: none;
@@ -40,6 +45,7 @@ const selectBaseStyles = ({ theme }) => css`
   color: ${theme.colors.n900};
   padding: ${theme.spacings.byte} ${theme.spacings.tera} ${theme.spacings.byte}
     ${theme.spacings.kilo};
+  max-height: ${MAX_HEIGHT};
   position: relative;
   width: 100%;
   z-index: ${theme.zIndex.select};

diff --git a/src/components/Select/__snapshots__/Select.spec.js.snap b/src/components/Select/__snapshots__/Select.spec.js.snap
@@ -13,6 +13,7 @@ exports[`Select should not render with invalid styles when also passed the disab
   box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
   color: #212933;
   padding: 8px 32px 8px 12px;
+  max-height: 42px;
   position: relative;
   width: 100%;
   z-index: 20;
@@ -103,6 +104,7 @@ exports[`Select should render with a prefix when passed the prefix prop 1`] = `
   box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
   color: #212933;
   padding: 8px 32px 8px 12px;
+  max-height: 42px;
   position: relative;
   width: 100%;
   z-index: 20;
@@ -192,6 +194,7 @@ exports[`Select should render with default styles 1`] = `
   box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
   color: #212933;
   padding: 8px 32px 8px 12px;
+  max-height: 42px;
   position: relative;
   width: 100%;
   z-index: 20;
@@ -265,6 +268,7 @@ exports[`Select should render with disabled styles when passed the disabled prop
   box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
   color: #212933;
   padding: 8px 32px 8px 12px;
+  max-height: 42px;
   position: relative;
   width: 100%;
   z-index: 20;
@@ -348,6 +352,7 @@ exports[`Select should render with inline styles when passed the inline prop 1`]
   box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
   color: #212933;
   padding: 8px 32px 8px 12px;
+  max-height: 42px;
   position: relative;
   width: 100%;
   z-index: 20;
@@ -437,6 +442,7 @@ exports[`Select should render with invalid styles when passed the invalid prop 1
   box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
   color: #212933;
   padding: 8px 32px 8px 12px;
+  max-height: 42px;
   position: relative;
   width: 100%;
   z-index: 20;
@@ -511,6 +517,7 @@ exports[`Select should render with no margin styles when passed the noMargin pro
   box-shadow: inset 0 1px 2px 0 rgba(102,113,123,0.12);
   color: #212933;
   padding: 8px 32px 8px 12px;
+  max-height: 42px;
   position: relative;
   width: 100%;
   z-index: 20;