From 5ef085aaa9f1405a7c951514cf86144d78f79121 Mon Sep 17 00:00:00 2001 From: Paul Alexander Date: Wed, 30 Aug 2017 13:56:01 -0700 Subject: [PATCH] [TextField] Fix label position with dense margins (#7946) Fixes https://github.com/callemall/material-ui/issues/7945 --- src/Input/InputLabel.js | 16 ++++++++++++++++ src/Input/InputLabel.spec.js | 6 ++++++ .../tests/TextField/TextFieldMargin.js | 13 +++++++++++++ 3 files changed, 35 insertions(+) create mode 100644 test/regressions/tests/TextField/TextFieldMargin.js diff --git a/src/Input/InputLabel.js b/src/Input/InputLabel.js index 81c5fabbe6564d..adab58a5d47b17 100644 --- a/src/Input/InputLabel.js +++ b/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,6 +108,11 @@ 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, { @@ -105,6 +120,7 @@ function InputLabel(props: AllProps, context: { muiFormControl: Object }) { [classes.animated]: !disableAnimation, [classes.shrink]: shrink, [classes.disabled]: disabled, + [classes.labelDense]: margin === 'dense', }, classNameProp, ); diff --git a/src/Input/InputLabel.spec.js b/src/Input/InputLabel.spec.js index 82a78f5bee59a2..c780866fd6f5ad 100644 --- a/src/Input/InputLabel.spec.js +++ b/src/Input/InputLabel.spec.js @@ -53,6 +53,12 @@ describe('', () => { 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(() => { diff --git a/test/regressions/tests/TextField/TextFieldMargin.js b/test/regressions/tests/TextField/TextFieldMargin.js new file mode 100644 index 00000000000000..8b80232b584d0e --- /dev/null +++ b/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 ( +
+ + +
+ ); +}