Skip to content

Commit

Permalink
Remove height reset on selectMenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@esseswann @oliviertassinari
esseswann authored and oliviertassinari committed May 7, 2020
1 parent 78c3969 commit 13de805
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 61 deletions.
48 changes: 24 additions & 24 deletions packages/material-ui-lab/src/Autocomplete/Autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,19 @@ export const styles = (theme) => ({
focused: {},
/* Styles applied to the tag elements, e.g. the chips. */
tag: {
margin: 3,
margin: '4px 4px 4px 0',
maxWidth: 'calc(100% - 6px)',
'& + .MuiAutocomplete-input': {
paddingLeft: '4px !important',
},
},
/* Styles applied to the tag elements, e.g. the chips if `size="small"`. */
tagSizeSmall: {
margin: 2,
margin: '2px 2px 2px 0',
maxWidth: 'calc(100% - 4px)',
'& + .MuiAutocomplete-input': {
paddingLeft: '4px !important',
},
},
/* Styles applied when the popup icon is rendered. */
hasPopupIcon: {},
Expand All @@ -54,66 +60,60 @@ export const styles = (theme) => ({
minWidth: 30,
},
'&[class*="MuiInput-root"]': {
paddingBottom: 1,
padding: theme.spacing(0.5, 0),
'& $input': {
padding: 4,
},
'& $input:first-child': {
padding: '6px 0',
padding: 0,
},
},
'&[class*="MuiInput-root"][class*="MuiInput-marginDense"]': {
'&[class*="MuiInput-root"][class*="MuiInputBase-marginDense"]': {
paddingTop: 0,
paddingBottom: 2,
marginTop: '14px',
'& $input': {
padding: '4px 4px 5px',
},
'& $input:first-child': {
padding: '3px 0 6px',
padding: '2px 0',
},
},
'&[class*="MuiOutlinedInput-root"]': {
padding: 9,
padding: theme.spacing(1, 1.75),
'$hasPopupIcon &, $hasClearIcon &': {
paddingRight: 26 + 4 + 9,
},
'$hasPopupIcon$hasClearIcon &': {
paddingRight: 52 + 4 + 9,
},
'& $input': {
padding: '9.5px 4px',
},
'& $input:first-child': {
paddingLeft: 6,
padding: theme.spacing(1, 1, 1, 0),
},
'& $endAdornment': {
right: 9,
},
},
'&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': {
padding: 6,
padding: '6px',
'& $input': {
padding: '4.5px 4px',
padding: '2px 8px',
},
},
'&[class*="MuiFilledInput-root"]': {
paddingTop: 19,
paddingLeft: 8,
padding: theme.spacing(2, 2, 0, 1),
'$hasPopupIcon &, $hasClearIcon &': {
paddingRight: 26 + 4 + 9,
},
'$hasPopupIcon$hasClearIcon &': {
paddingRight: 52 + 4 + 9,
},
'& $input': {
padding: '9px 4px',
padding: theme.spacing(1, 0.5),
},
'& $endAdornment': {
right: 9,
},
},
'&[class*="MuiFilledInput-root"][class*="MuiFilledInput-marginDense"]': {
paddingBottom: 1,
paddingTop: '19px',
paddingBottom: '1px',
'& $input': {
padding: '4.5px 4px',
padding: '2px 4px',
},
},
},
Expand Down
25 changes: 11 additions & 14 deletions packages/material-ui/src/FilledInput/FilledInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ export const styles = (theme) => {
const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
const backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';

const padding = theme.spacing(3, 1.5, 1);
const densePadding = {
padding: theme.spacing(2.5, 1.5, 0.5),
};

return {
/* Styles applied to the root element. */
root: {
Expand Down Expand Up @@ -103,15 +108,12 @@ export const styles = (theme) => {
marginDense: {},
/* Styles applied to the root element if `multiline={true}`. */
multiline: {
padding: '27px 12px 10px',
'&$marginDense': {
paddingTop: 23,
paddingBottom: 6,
},
padding,
'&$marginDense': densePadding,
},
/* Styles applied to the `input` element. */
input: {
padding: '27px 12px 10px',
padding,
'&:-webkit-autofill': {
WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null,
WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null,
Expand All @@ -121,17 +123,12 @@ export const styles = (theme) => {
},
},
/* Styles applied to the `input` element if `margin="dense"`. */
inputMarginDense: {
paddingTop: 23,
paddingBottom: 6,
},
inputMarginDense: densePadding,
/* Styles applied to the `input` if in `<FormControl hiddenLabel />`. */
inputHiddenLabel: {
paddingTop: 18,
paddingBottom: 19,
padding: theme.spacing(2, 1.5),
'&$inputMarginDense': {
paddingTop: 10,
paddingBottom: 11,
padding: theme.spacing(1, 1.5),
},
},
/* Styles applied to the `input` element if `multiline={true}`. */
Expand Down
36 changes: 23 additions & 13 deletions packages/material-ui/src/InputBase/InputBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,24 @@ import { isFilled } from './utils';

export const styles = (theme) => {
const light = theme.palette.type === 'light';
const placeholder = {

const font = {
font: 'inherit',
color: 'currentColor',
letterSpacing: 'inherit',
lineHeight: 'inherit',
textIndent: 'inherit',
textRendering: 'inherit',
fontSmoothing: 'inherit',
};

const padding = theme.spacing(0.5, 0);
const densePadding = {
padding: theme.spacing(0, 0, 0.5),
};

const placeholder = {
...font,
opacity: light ? 0.42 : 0.5,
transition: theme.transitions.create('opacity', {
duration: theme.transitions.duration.shorter,
Expand Down Expand Up @@ -43,7 +59,7 @@ export const styles = (theme) => {
// Mimics the default input display property used by browsers for an input.
...theme.typography.body1,
color: theme.palette.text.primary,
lineHeight: '1.1876em', // Reset (19px), match the native input line-height
// lineHeight: '1.1876em', // Reset (19px), match the native input line-height
boxSizing: 'border-box', // Prevent padding issue with fullWidth.
position: 'relative',
cursor: 'text',
Expand All @@ -70,10 +86,8 @@ export const styles = (theme) => {
marginDense: {},
/* Styles applied to the root element if `multiline={true}`. */
multiline: {
padding: `${8 - 2}px 0 ${8 - 1}px`,
'&$marginDense': {
paddingTop: 4 - 1,
},
padding,
'&$marginDense': densePadding,
},
/* Styles applied to the root element if the color is secondary. */
colorSecondary: {},
Expand All @@ -83,13 +97,11 @@ export const styles = (theme) => {
},
/* Styles applied to the `input` element. */
input: {
font: 'inherit',
color: 'currentColor',
padding: `${8 - 2}px 0 ${8 - 1}px`,
...font,
padding,
border: 0,
boxSizing: 'content-box',
background: 'none',
height: '1.1876em', // Reset (19px), match the native input line-height
margin: 0, // Reset for Safari
WebkitTapHighlightColor: 'transparent',
display: 'block',
Expand Down Expand Up @@ -132,9 +144,7 @@ export const styles = (theme) => {
},
},
/* Styles applied to the `input` element if `margin="dense"`. */
inputMarginDense: {
paddingTop: 4 - 1,
},
inputMarginDense: densePadding,
/* Styles applied to the `input` element if `multiline={true}`. */
inputMultiline: {
height: 'auto',
Expand Down
1 change: 1 addition & 0 deletions packages/material-ui/src/NativeSelect/NativeSelect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export const styles = (theme) => ({
},
/* Styles applied to the select component `selectMenu` class. */
selectMenu: {

height: 'auto', // Resets for multpile select with chips
minHeight: '1.1876em', // Required for select\text-field height consistency
textOverflow: 'ellipsis',
Expand Down
19 changes: 9 additions & 10 deletions packages/material-ui/src/OutlinedInput/OutlinedInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ export const styles = (theme) => {
const borderColor =
theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';

const padding = theme.spacing(2, 1.75);
const densePadding = {
padding: theme.spacing(1, 1.75),
};

return {
/* Styles applied to the root element. */
root: {
Expand Down Expand Up @@ -59,19 +64,16 @@ export const styles = (theme) => {
marginDense: {},
/* Styles applied to the root element if `multiline={true}`. */
multiline: {
padding: '18.5px 14px',
'&$marginDense': {
paddingTop: 10.5,
paddingBottom: 10.5,
},
padding,
'&$marginDense': densePadding,
},
/* Styles applied to the `NotchedOutline` element. */
notchedOutline: {
borderColor,
},
/* Styles applied to the `input` element. */
input: {
padding: '18.5px 14px',
padding,
'&:-webkit-autofill': {
WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null,
WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null,
Expand All @@ -80,10 +82,7 @@ export const styles = (theme) => {
},
},
/* Styles applied to the `input` element if `margin="dense"`. */
inputMarginDense: {
paddingTop: 10.5,
paddingBottom: 10.5,
},
inputMarginDense: densePadding,
/* Styles applied to the `input` element if `multiline={true}`. */
inputMultiline: {
padding: 0,
Expand Down

0 comments on commit 13de805

Please sign in to comment.