ComboBox: Fixed input overlap rendering issue (microsoft#4102)

* Shorted and centered input field * Added change file * Updated snapshot
chrismohr · Apr 17, 2018 · 50e9197 · 50e9197
1 parent 3972d74
commit 50e9197
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 19 deletions.
diff --git a/common/changes/office-ui-fabric-react/combobox-input-ht_2018-02-26-22-46.json b/common/changes/office-ui-fabric-react/combobox-input-ht_2018-02-26-22-46.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ComboBox: Shortened and centered the input field to account for overlap that appears at some resolutions.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": ""
+}
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts
@@ -214,11 +214,9 @@ export const getStyles = memoizeFunction((
     borderWidth: '2px',
     MsHighContrastAdjust: 'none',
     paddingLeft: '11px',
+    paddingTop: '0',
+    paddingBottom: '0',
     selectors: {
-      '.ms-ComboBox-Input': {
-        // ComboBoxHeight is 32, 28 accounts for the 2px borders
-        height: '28px'
-      },
       '.ms-ComboBox-CaretDown-button': {
         // Negative positioning to account for the 2px border
         right: '-2px',
@@ -237,9 +235,9 @@ export const getStyles = memoizeFunction((
         boxShadow: 'none',
         marginBottom: '10px',
         marginLeft: '0',
-        paddingTop: '0',
+        paddingTop: '1px', // The 1px padding centers the input field, avoiding overlap in the browser
+        paddingBottom: '1px',
         paddingRight: ComboxBoxCaretDownWidth,
-        paddingBottom: '0',
         paddingLeft: '12px',
         color: ComboBoxRootTextColor,
         position: 'relative',
@@ -316,7 +314,7 @@ export const getStyles = memoizeFunction((
     input: {
       boxSizing: 'border-box',
       width: '100%',
-      height: '30px',
+      height: '28px',
       borderStyle: 'none',
       outline: 'none',
       font: 'inherit',

diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -28,10 +28,10 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
           margin-left: 0;
           outline: 0;
           overflow: hidden;
-          padding-bottom: 0;
+          padding-bottom: 1px;
           padding-left: 12px;
           padding-right: 32px;
-          padding-top: 0;
+          padding-top: 1px;
           position: relative;
           text-overflow: ellipsis;
           user-select: none;
@@ -53,10 +53,9 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
           border-color: Highlight;
           border-width: 2px;
           color: HighlightText;
+          padding-bottom: 0;
           padding-left: 11px;
-        }
-        @media screen and (-ms-high-contrast: active){&.is-open .ms-ComboBox-Input {
-          height: 28px;
+          padding-top: 0;
         }
         @media screen and (-ms-high-contrast: active){&.is-open .ms-ComboBox-CaretDown-button {
           right: -2px;
@@ -80,10 +79,9 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
           border-color: Highlight;
           border-width: 2px;
           color: HighlightText;
+          padding-bottom: 0;
           padding-left: 11px;
-        }
-        @media screen and (-ms-high-contrast: active){&:active .ms-ComboBox-Input {
-          height: 28px;
+          padding-top: 0;
         }
         @media screen and (-ms-high-contrast: active){&:active .ms-ComboBox-CaretDown-button {
           right: -2px;
@@ -98,10 +96,9 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
           border-color: Highlight;
           border-width: 2px;
           color: HighlightText;
+          padding-bottom: 0;
           padding-left: 11px;
-        }
-        @media screen and (-ms-high-contrast: active){&:focus .ms-ComboBox-Input {
-          height: 28px;
+          padding-top: 0;
         }
         @media screen and (-ms-high-contrast: active){&:focus .ms-ComboBox-CaretDown-button {
           right: -2px;
@@ -127,7 +124,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
             border-style: none;
             box-sizing: border-box;
             font: inherit;
-            height: 30px;
+            height: 28px;
             outline: none;
             padding-bottom: 0;
             padding-left: 0;