From 1edbe9d9b321bef562f3bede9c5254dd96277dcd Mon Sep 17 00:00:00 2001 From: Igor Bykov Date: Tue, 14 Apr 2020 00:20:55 +0200 Subject: [PATCH] Add fullWidth prop to Autocomplete --- docs/pages/api-docs/autocomplete.md | 2 ++ .../src/Autocomplete/Autocomplete.d.ts | 4 ++++ .../src/Autocomplete/Autocomplete.js | 10 ++++++++++ .../src/Autocomplete/Autocomplete.test.js | 16 ++++++++++++++++ 4 files changed, 32 insertions(+) diff --git a/docs/pages/api-docs/autocomplete.md b/docs/pages/api-docs/autocomplete.md index cada927311c2c0..2b7dc58e2a14d5 100644 --- a/docs/pages/api-docs/autocomplete.md +++ b/docs/pages/api-docs/autocomplete.md @@ -50,6 +50,7 @@ The `MuiAutocomplete` name can be used for providing [default props](/customizat | filterSelectedOptions | bool | false | If `true`, hide the selected options from the list box. | | forcePopupIcon | 'auto'
| bool | 'auto' | Force the visibility display of the popup icon. | | freeSolo | bool | false | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. | +| fullWidth | bool | false | If `true`, the input will take up the full width of its container. | | getLimitTagsText | func | (more) => `+${more}` | The label to display when the tags are truncated (`limitTags`).

**Signature:**
`function(more: number) => ReactNode`
*more:* The number of truncated tags. | | getOptionDisabled | func | | Used to determine the disabled state for a given option. | | getOptionLabel | func | (x) => x | Used to determine the string value for a given option. It's used to fill the input (and the list box options if `renderOption` is not provided). | @@ -93,6 +94,7 @@ Any other props supplied will be provided to the root element (native element). | Rule name | Global class | Description | |:-----|:-------------|:------------| | root | .MuiAutocomplete-root | Styles applied to the root element. +| fullWidth | .MuiAutocomplete-fullWidth | Styles applied to the root element if `fullWidth={true}`. | focused | .Mui-focused | Pseudo-class applied to the root element if focused. | tag | .MuiAutocomplete-tag | Styles applied to the tag elements, e.g. the chips. | tagSizeSmall | .MuiAutocomplete-tagSizeSmall | Styles applied to the tag elements, e.g. the chips if `size="small"`. diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index d5a61410dd626a..c49a4a584fb993 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -84,6 +84,10 @@ export interface AutocompleteProps * Force the visibility display of the popup icon. */ forcePopupIcon?: true | false | 'auto'; + /** + * If `true`, the input will take up the full width of its container. + */ + fullWidth?: boolean; /** * The label to display when the tags are truncated (`limitTags`). * diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 1c024954e11522..6234cba2f21941 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -20,6 +20,10 @@ export const styles = (theme) => ({ visibility: 'visible', }, }, + /* Styles applied to the root element if `fullWidth={true}`. */ + fullWidth: { + width: '100%', + }, /* Pseudo-class applied to the root element if focused. */ focused: {}, /* Styles applied to the tag elements, e.g. the chips. */ @@ -256,6 +260,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { filterSelectedOptions = false, forcePopupIcon = 'auto', freeSolo = false, + fullWidth = false, getLimitTagsText = (more) => `+${more}`, getOptionDisabled, getOptionLabel = (x) => x, @@ -389,6 +394,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { classes.root, { [classes.focused]: focused, + [classes.fullWidth]: fullWidth, [classes.hasClearIcon]: hasClearIcon, [classes.hasPopupIcon]: hasPopupIcon, }, @@ -610,6 +616,10 @@ Autocomplete.propTypes = { * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. */ freeSolo: PropTypes.bool, + /** + * If `true`, the input will take up the full width of its container. + */ + fullWidth: PropTypes.bool, /** * The label to display when the tags are truncated (`limitTags`). * diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index a2370f367739ed..4c5ef3ae40633e 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -1512,4 +1512,20 @@ describe('', () => { expect(options).to.have.length(3); }); }); + + describe('prop: fullWidth', () => { + it('should have the fullWidth class', () => { + const { container } = render( + } + value={null} + />, + ); + + expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.fullWidth); + }); + }); });