Repository: uber-web/baseui (js)

Issue:
Height of StatefulInput vs. StatefulSelect in Safari
## Current Behavior

I have a simple filtering UI with a `StatefulSelect` and a `StatefulInput` next to each other plugged inside a `Block` grid (I also tried this with the `FlexGrid` with the same result). Noticed that the `StatefulInput` renders 4px taller than the `StatefulSelect` in Safari (latest 12.1.1).

I've created this CodeSandbox, based on the Block demo, to show how this is happening.

Demo: https://codesandbox.io/s/block-with-grid-usage-87gle

## Expected Behavior

UI components should render the same height and be consistent across browsers.

## Your Environment

| Tech    | Version |
| ------- | ------- |
| Base UI | v8.6.1  |
| React   |    16.8.2     |
| browser |    Safari 12.1.1     |
| browser |    Chrome 75.x     |

- [x] I have searched the [issues](https://github.com/uber-web/baseui/issues) of this repository and believe that this is not a duplicate.


Pull request description:
fix: match input height cross browser
#### Description
- Resolves #1576 
- Ensures `input` has no `margin` (was only being applied in Safari)

<!-- Describe your changes below in as much detail as possible -->

#### Scope

- [x] Patch: Bug Fix
- [ ] Minor: New Feature
- [ ] Major: Breaking Change


Patch:
diff --git a/README.md b/README.md
index 7083baa39..eca8d058c 100644
--- a/README.md
+++ b/README.md
@@ -58,10 +58,10 @@ export default function Hello() {
 }
 ```
 
-Both Base Web and Styletron are [flow typed](https://flow.org/) out of the box. **Do you use [TypeScript](https://www.typescriptlang.org/index.html)**? We provide external declarations:
+Both Base Web and Styletron come with [flow types](https://flow.org/) and [TypeScript](https://www.typescriptlang.org/index.html). All our components are typed and examples have Vanilla, Flow and TypeScript versions. For Styletron + TS, you need to add some additional packages: 
 
 ```bash
-yarn add @types/baseui @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic
+yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic
 ```
 
 ## Example
diff --git a/src/input/styled-components.js b/src/input/styled-components.js
index 3e1045b9e..3e1cd13d3 100644
--- a/src/input/styled-components.js
+++ b/src/input/styled-components.js
@@ -331,6 +331,7 @@ export const getInputStyles = (props: SharedPropsT & {$theme: ThemeT}) => {
     width: '100%',
     maxWidth: '100%',
     cursor: $disabled ? 'not-allowed' : 'text',
+    margin: '0',
     paddingTop: '0',
     paddingBottom: '0',
     paddingLeft: '0',


Test patch:
diff --git a/src/input/__tests__/__snapshots__/base-input.test.js.snap b/src/input/__tests__/__snapshots__/base-input.test.js.snap
index 9145dd8f4..e3b47ef63 100644
--- a/src/input/__tests__/__snapshots__/base-input.test.js.snap
+++ b/src/input/__tests__/__snapshots__/base-input.test.js.snap
@@ -63,6 +63,7 @@ Object {
     "fontSize": "$theme.typography.font400.fontSize",
     "fontWeight": "$theme.typography.font400.fontWeight",
     "lineHeight": "$theme.typography.font400.lineHeight",
+    "margin": "0",
     "maxWidth": "100%",
     "outline": "none",
     "paddingBottom": "$theme.sizing.scale400",
diff --git a/src/input/__tests__/__snapshots__/input.test.js.snap b/src/input/__tests__/__snapshots__/input.test.js.snap
index 8a254b333..bfb504dcb 100644
--- a/src/input/__tests__/__snapshots__/input.test.js.snap
+++ b/src/input/__tests__/__snapshots__/input.test.js.snap
@@ -39,6 +39,7 @@ Object {
     "fontSize": "$theme.typography.font400.fontSize",
     "fontWeight": "$theme.typography.font400.fontWeight",
     "lineHeight": "$theme.typography.font400.lineHeight",
+    "margin": "0",
     "maxWidth": "100%",
     "outline": "none",
     "paddingBottom": "$theme.sizing.scale400",
diff --git a/src/input/__tests__/__snapshots__/masked-input.test.js.snap b/src/input/__tests__/__snapshots__/masked-input.test.js.snap
index 85853e28f..9105ba236 100644
--- a/src/input/__tests__/__snapshots__/masked-input.test.js.snap
+++ b/src/input/__tests__/__snapshots__/masked-input.test.js.snap
@@ -94,6 +94,7 @@ Object {
     "fontSize": "$theme.typography.font400.fontSize",
     "fontWeight": "$theme.typography.font400.fontWeight",
     "lineHeight": "$theme.typography.font400.lineHeight",
+    "margin": "0",
     "maxWidth": "100%",
     "outline": "none",
     "paddingBottom": "$theme.sizing.scale400",
diff --git a/src/textarea/__tests__/__snapshots__/textarea.test.js.snap b/src/textarea/__tests__/__snapshots__/textarea.test.js.snap
index 58ceaf7e7..360c97825 100644
--- a/src/textarea/__tests__/__snapshots__/textarea.test.js.snap
+++ b/src/textarea/__tests__/__snapshots__/textarea.test.js.snap
@@ -39,6 +39,7 @@ Object {
     "fontSize": "$theme.typography.font400.fontSize",
     "fontWeight": "$theme.typography.font400.fontWeight",
     "lineHeight": "$theme.typography.font400.lineHeight",
+    "margin": "0",
     "maxWidth": "100%",
     "outline": "none",
     "paddingBottom": "$theme.sizing.scale400",