diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 708accd968aff2..655dfb9c27b234 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -40,10 +40,10 @@ export const styles = theme => ({ inputRoot: { flexWrap: 'wrap', '$hasPopupIcon &, $hasClearIcon &': { - paddingRight: 31, + paddingRight: 26 + 4, }, '$hasPopupIcon$hasClearIcon &': { - paddingRight: 62, + paddingRight: 52 + 4, }, '& $input': { width: 0, @@ -69,10 +69,10 @@ export const styles = theme => ({ '&[class*="MuiOutlinedInput-root"]': { padding: 9, '$hasPopupIcon &, $hasClearIcon &': { - paddingRight: 31, + paddingRight: 26 + 4 + 9, }, '$hasPopupIcon$hasClearIcon &': { - paddingRight: 62, + paddingRight: 52 + 4 + 9, }, '& $input': { padding: '9.5px 4px', @@ -81,17 +81,11 @@ export const styles = theme => ({ paddingLeft: 6, }, '& $endAdornment': { - right: 7, + right: 9, }, }, '&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': { padding: 6, - '$hasPopupIcon &, $hasClearIcon &': { - paddingRight: 31, - }, - '$hasPopupIcon$hasClearIcon &': { - paddingRight: 62, - }, '& $input': { padding: '4.5px 4px', }, @@ -99,11 +93,17 @@ export const styles = theme => ({ '&[class*="MuiFilledInput-root"]': { paddingTop: 19, paddingLeft: 8, + '$hasPopupIcon &, $hasClearIcon &': { + paddingRight: 26 + 4 + 9, + }, + '$hasPopupIcon$hasClearIcon &': { + paddingRight: 52 + 4 + 9, + }, '& $input': { padding: '9px 4px', }, '& $endAdornment': { - right: 7, + right: 9, }, }, '&[class*="MuiFilledInput-root"][class*="MuiFilledInput-marginDense"]': { diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index dbe663303801b1..f73305a3fa11e9 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -40,22 +40,12 @@ describe('', () => { expect(input.value).to.equal(''); }); - it('should apply the hasClearIcon class', () => { + it('should apply the icon classes', () => { const { container } = render( } />, ); - expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class( - classes.hasClearIcon, - ); - }); - - it('should apply the hasPopupIcon class', () => { - const { container } = render( - } />, - ); - expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class( - classes.hasPopupIcon, - ); + expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasClearIcon); + expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon); }); }); @@ -574,28 +564,14 @@ describe('', () => { renderInput={params => } />, ); - expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class( - classes.hasClearIcon, - ); - }); - - it('should still apply the hasPopupIcon class', () => { - const { container } = render( - } - />, - ); - expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class( - classes.hasPopupIcon, - ); + expect(container.querySelector(`.${classes.root}`)).not.to.have.class(classes.hasClearIcon); + expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon); }); }); describe('prop: disableClearable', () => { it('should not render the clear button', () => { - const { queryByTitle } = render( + const { queryByTitle, container } = render( ', () => { />, ); expect(queryByTitle('Clear')).to.be.null; - }); - - it('should still apply the hasPopupIcon class', () => { - const { container } = render( - } - />, - ); - expect(container.querySelector('[class*="MuiAutocomplete-root"]')).to.have.class( - classes.hasPopupIcon, - ); - }); - - it('should not apply the hasClearIcon class', () => { - const { container } = render( - } - />, - ); - expect(container.querySelector('[class*="MuiAutocomplete-root"]')).not.to.have.class( - classes.hasClearIcon, - ); + expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasPopupIcon); + expect(container.querySelector(`.${classes.root}`)).not.to.have.class(classes.hasClearIcon); }); }); }); @@ -918,21 +870,6 @@ describe('', () => { fireEvent.keyDown(document.activeElement, { key: 'Enter' }); expect(container.querySelectorAll('[class*="MuiChip-root"]')).to.have.length(3); }); - - it('should not apply hasPopupIcon class', () => { - const handleChange = spy(); - const options = [{ name: 'foo' }]; - const { container } = render( - option.name} - renderInput={params => } - />, - ); - expect(container).not.to.have.class(classes.hasPopupIcon); - }); }); describe('prop: onInputChange', () => {