push one step further

mui · Jun 7, 2019 · d154bd1 · d154bd1
1 parent 4a5fa6f
commit d154bd1
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 4 deletions.
diff --git a/docs/src/pages/components/text-fields/FilledTextFields.js b/docs/src/pages/components/text-fields/FilledTextFields.js
@@ -136,6 +136,15 @@ function FilledTextFields() {
         margin="dense"
         variant="filled"
       />
+      <TextField
+        id="filled-dense-multiline"
+        label="Dense multiline"
+        className={clsx(classes.textField, classes.dense)}
+        margin="dense"
+        variant="filled"
+        multiline
+        rowsMax="4"
+      />
       <TextField
         id="filled-multiline-flexible"
         label="Multiline"

diff --git a/docs/src/pages/components/text-fields/FilledTextFields.tsx b/docs/src/pages/components/text-fields/FilledTextFields.tsx
@@ -145,6 +145,15 @@ function FilledTextFields() {
         margin="dense"
         variant="filled"
       />
+      <TextField
+        id="filled-dense-multiline"
+        label="Dense multiline"
+        className={clsx(classes.textField, classes.dense)}
+        margin="dense"
+        variant="filled"
+        multiline
+        rowsMax="4"
+      />
       <TextField
         id="filled-multiline-flexible"
         label="Multiline"

diff --git a/docs/src/pages/components/text-fields/OutlinedTextFields.js b/docs/src/pages/components/text-fields/OutlinedTextFields.js
@@ -136,6 +136,15 @@ function OutlinedTextFields() {
         margin="dense"
         variant="outlined"
       />
+      <TextField
+        id="outlined-dense-multiline"
+        label="Dense multiline"
+        className={clsx(classes.textField, classes.dense)}
+        margin="dense"
+        variant="outlined"
+        multiline
+        rowsMax="4"
+      />
       <TextField
         id="outlined-multiline-flexible"
         label="Multiline"

diff --git a/docs/src/pages/components/text-fields/OutlinedTextFields.tsx b/docs/src/pages/components/text-fields/OutlinedTextFields.tsx
@@ -145,6 +145,15 @@ function OutlinedTextFields() {
         margin="dense"
         variant="outlined"
       />
+      <TextField
+        id="outlined-dense-multiline"
+        label="Dense multiline"
+        className={clsx(classes.textField, classes.dense)}
+        margin="dense"
+        variant="outlined"
+        multiline
+        rowsMax="4"
+      />
       <TextField
         id="outlined-multiline-flexible"
         label="Multiline"

diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -92,17 +92,23 @@ export const styles = theme => {
     },
     /* Styles applied to the root element if `error={true}`. */
     error: {},
+    /* Styles applied to the `input` element if `margin="dense"`. */
+    marginDense: {},
     /* Styles applied to the root element if `multiline={true}`. */
     multiline: {
       padding: '27px 12px 10px',
+      '&$marginDense': {
+        paddingTop: 23,
+        paddingBottom: 6,
+      },
     },
     /* Styles applied to the `input` element. */
     input: {
       padding: '27px 12px 10px',
     },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
-      paddingTop: 24,
+      paddingTop: 23,
       paddingBottom: 6,
     },
     /* Styles applied to the `input` element if `multiline={true}`. */

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
@@ -61,6 +61,9 @@ export const styles = theme => {
     /* Styles applied to the root element if `multiline={true}`. */
     multiline: {
       padding: `${8 - 2}px 0 ${8 - 1}px`,
+      '&$marginDense': {
+        paddingTop: 4 - 1,
+      },
     },
     /* Styles applied to the root element if `fullWidth={true}`. */
     fullWidth: {

diff --git a/packages/material-ui/src/InputLabel/InputLabel.js b/packages/material-ui/src/InputLabel/InputLabel.js
@@ -73,7 +73,7 @@ export const styles = theme => ({
     pointerEvents: 'none',
     transform: 'translate(14px, 20px) scale(1)',
     '&$marginDense': {
-      transform: 'translate(14px, 11px) scale(1)',
+      transform: 'translate(14px, 12px) scale(1)',
     },
     '&$shrink': {
       transform: 'translate(14px, -6px) scale(0.75)',

diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -48,9 +48,15 @@ export const styles = theme => {
     },
     /* Styles applied to the root element if `error={true}`. */
     error: {},
+    /* Styles applied to the `input` element if `margin="dense"`. */
+    marginDense: {},
     /* Styles applied to the root element if `multiline={true}`. */
     multiline: {
       padding: '18.5px 14px',
+      '&$marginDense': {
+        paddingTop: 10.5,
+        paddingBottom: 10.5,
+      },
     },
     /* Styles applied to the `NotchedOutline` element. */
     notchedOutline: {},
@@ -60,8 +66,8 @@ export const styles = theme => {
     },
     /* Styles applied to the `input` element if `margin="dense"`. */
     inputMarginDense: {
-      paddingTop: 10,
-      paddingBottom: 11,
+      paddingTop: 10.5,
+      paddingBottom: 10.5,
     },
     /* Styles applied to the `input` element if `multiline={true}`. */
     inputMultiline: {

diff --git a/pages/api/filled-input.md b/pages/api/filled-input.md
@@ -64,6 +64,7 @@ This property accepts the following keys:
 | <span class="prop-name">adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.
 | <span class="prop-name">adornedEnd</span> | Styles applied to the root element if `endAdornment` is provided.
 | <span class="prop-name">error</span> | Styles applied to the root element if `error={true}`.
+| <span class="prop-name">marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
 | <span class="prop-name">multiline</span> | Styles applied to the root element if `multiline={true}`.
 | <span class="prop-name">input</span> | Styles applied to the `input` element.
 | <span class="prop-name">inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.

diff --git a/pages/api/outlined-input.md b/pages/api/outlined-input.md
@@ -64,6 +64,7 @@ This property accepts the following keys:
 | <span class="prop-name">adornedStart</span> | Styles applied to the root element if `startAdornment` is provided.
 | <span class="prop-name">adornedEnd</span> | Styles applied to the root element if `endAdornment` is provided.
 | <span class="prop-name">error</span> | Styles applied to the root element if `error={true}`.
+| <span class="prop-name">marginDense</span> | Styles applied to the `input` element if `margin="dense"`.
 | <span class="prop-name">multiline</span> | Styles applied to the root element if `multiline={true}`.
 | <span class="prop-name">notchedOutline</span> | Styles applied to the `NotchedOutline` element.
 | <span class="prop-name">input</span> | Styles applied to the `input` element.