diff --git a/common/changes/office-ui-fabric-react/searchbox-polish_2018-04-10-17-12.json b/common/changes/office-ui-fabric-react/searchbox-polish_2018-04-10-17-12.json new file mode 100644 index 0000000000000..f28ae00aee9d1 --- /dev/null +++ b/common/changes/office-ui-fabric-react/searchbox-polish_2018-04-10-17-12.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "SearchBox: Fix padding left and add padding top and bottom to fix the field overlapping the border.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "lynam.emily@gmail.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx index f345dd315fbe4..17028bade5a3e 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx @@ -20,7 +20,8 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { flexDirection: 'row', flexWrap: 'nowrap', alignItems: 'stretch', - padding: '0 0 0 8px', + // The 1px top and bottom padding ensure the input field does not overlap the border + padding: '1px 0 1px 4px', border: `1px solid ${palette.neutralTertiary}`, height: 32, selectors: { @@ -61,7 +62,9 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles { underlined && [ 'is-underlined', { - borderWidth: '0 0 1px 0' + borderWidth: '0 0 1px 0', + // Underlined SearchBox has a larger padding left to vertically align with the waffle in product + padding: '1px 0 1px 8px' } ], underlined && disabled && { diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap index 300f11b3b61ae..ea8c6904b138f 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap @@ -23,10 +23,10 @@ exports[`SearchBox renders SearchBox correctly 1`] = ` margin-left: 0px; margin-right: 0px; margin-top: 0px; - padding-bottom: 0; - padding-left: 8px; + padding-bottom: 1px; + padding-left: 4px; padding-right: 0; - padding-top: 0; + padding-top: 1px; } @media screen and (-ms-high-contrast: active){& { border: 1px solid WindowText;