[TextField] Fix label position with dense margins (mui#7946)

Fixes mui#7945

src/Input/InputLabel.js

@@ -18,6 +18,10 @@ export const styles = (theme: Object) => ({
     // slight alteration to spec spacing to match visual spec result
     transform: `translate(0, ${theme.spacing.unit * 3 - 1}px) scale(1)`,
   },
+  // Compensation for the `Input.inputDense` style.
+  labelDense: {
+    transform: `translate(0, ${theme.spacing.unit * 2.5 + 1}px) scale(1)`,
+  },
   shrink: {
     transform: 'translate(0, 1.5px) scale(0.75)',
     transformOrigin: 'top left',
@@ -68,6 +72,11 @@ export type Props = {
    * If `true`, the input of this label is focused.
    */
   focused?: boolean,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin?: 'dense',
   /**
    * if `true`, the label will indicate that the input is required.
    */
@@ -88,6 +97,7 @@ function InputLabel(props: AllProps, context: { muiFormControl: Object }) {
     classes,
     className: classNameProp,
     shrink: shrinkProp,
+    margin: marginProp,
     ...other
   } = props;
 
@@ -98,13 +108,19 @@ function InputLabel(props: AllProps, context: { muiFormControl: Object }) {
     shrink = muiFormControl.dirty || muiFormControl.focused;
   }
 
+  let margin = marginProp;
+  if (typeof margin === 'undefined' && muiFormControl) {
+    margin = muiFormControl.margin;
+  }
+
   const className = classNames(
     classes.root,
     {
       [classes.formControl]: muiFormControl,
       [classes.animated]: !disableAnimation,
       [classes.shrink]: shrink,
       [classes.disabled]: disabled,
+      [classes.labelDense]: margin === 'dense',
     },
     classNameProp,
   );

src/Input/InputLabel.spec.js

@@ -53,6 +53,12 @@ describe('<InputLabel />', () => {
       setFormControlContext({});
       assert.strictEqual(wrapper.hasClass(classes.formControl), true);
     });
+
+    it('should have the labelDense class when margin is dense', () => {
+      setFormControlContext({ margin: 'dense' });
+      assert.strictEqual(wrapper.hasClass(classes.labelDense), true);
+    });
+
     ['dirty', 'focused'].forEach(state => {
       describe(state, () => {
         beforeEach(() => {

test/regressions/tests/TextField/TextFieldMargin.js

@@ -0,0 +1,13 @@
+// @flow
+
+import React from 'react';
+import TextField from 'material-ui/TextField';
+
+export default function TextFieldMargin() {
+  return (
+    <div style={{ display: 'flex' }}>
+      <TextField label="Dense" defaultValue="Default Value" margin="dense" />
+      <TextField style={{ position: 'absolute ' }} label="Dense" margin="dense" />
+    </div>
+  );
+}