From 9a1d427d5ac62dbad1df41cd5e35bb23028281e9 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 22 Feb 2020 21:58:07 +0100 Subject: [PATCH] [Autocomplete] Built-in fullWidth --- .../components/autocomplete/Asynchronous.js | 1 - .../components/autocomplete/Asynchronous.tsx | 1 - .../components/autocomplete/CheckboxesTags.js | 8 +--- .../autocomplete/CheckboxesTags.tsx | 8 +--- .../pages/components/autocomplete/ComboBox.js | 4 +- .../components/autocomplete/ComboBox.tsx | 4 +- .../components/autocomplete/CountrySelect.js | 1 - .../components/autocomplete/CountrySelect.tsx | 1 - .../autocomplete/DisabledOptions.js | 4 +- .../autocomplete/DisabledOptions.tsx | 4 +- .../pages/components/autocomplete/Filter.js | 4 +- .../pages/components/autocomplete/Filter.tsx | 4 +- .../components/autocomplete/FixedTags.js | 8 +--- .../components/autocomplete/FixedTags.tsx | 8 +--- .../pages/components/autocomplete/FreeSolo.js | 3 +- .../components/autocomplete/FreeSolo.tsx | 3 +- .../autocomplete/FreeSoloCreateOption.js | 2 +- .../autocomplete/FreeSoloCreateOption.tsx | 2 +- .../FreeSoloCreateOptionDialog.js | 4 +- .../FreeSoloCreateOptionDialog.tsx | 4 +- .../components/autocomplete/GoogleMaps.js | 1 - .../components/autocomplete/GoogleMaps.tsx | 1 - .../pages/components/autocomplete/Grouped.js | 4 +- .../pages/components/autocomplete/Grouped.tsx | 4 +- .../components/autocomplete/Highlights.js | 2 +- .../components/autocomplete/Highlights.tsx | 2 +- .../components/autocomplete/Playground.js | 48 ++++++------------- .../components/autocomplete/Playground.tsx | 48 ++++++------------- .../pages/components/autocomplete/Sizes.js | 48 +++---------------- .../pages/components/autocomplete/Sizes.tsx | 48 +++---------------- .../src/pages/components/autocomplete/Tags.js | 10 +--- .../pages/components/autocomplete/Tags.tsx | 10 +--- .../components/autocomplete/Virtualize.js | 4 +- .../components/autocomplete/Virtualize.tsx | 4 +- .../src/Autocomplete/Autocomplete.js | 1 + 35 files changed, 65 insertions(+), 248 deletions(-) diff --git a/docs/src/pages/components/autocomplete/Asynchronous.js b/docs/src/pages/components/autocomplete/Asynchronous.js index d94c421d9d9be9..6c65770f44ab20 100644 --- a/docs/src/pages/components/autocomplete/Asynchronous.js +++ b/docs/src/pages/components/autocomplete/Asynchronous.js @@ -63,7 +63,6 @@ export default function Asynchronous() { ( - + )} /> ); diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx index 81f00eb8c8e78a..e6661e77dda655 100644 --- a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx +++ b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx @@ -31,13 +31,7 @@ export default function CheckboxesTags() { )} style={{ width: 500 }} renderInput={params => ( - + )} /> ); diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js index eb607b0311571b..d861ea76e0860d 100644 --- a/docs/src/pages/components/autocomplete/ComboBox.js +++ b/docs/src/pages/components/autocomplete/ComboBox.js @@ -10,9 +10,7 @@ export default function ComboBox() { options={top100Films} getOptionLabel={option => option.title} style={{ width: 300 }} - renderInput={params => ( - - )} + renderInput={params => } /> ); } diff --git a/docs/src/pages/components/autocomplete/ComboBox.tsx b/docs/src/pages/components/autocomplete/ComboBox.tsx index eb607b0311571b..d861ea76e0860d 100644 --- a/docs/src/pages/components/autocomplete/ComboBox.tsx +++ b/docs/src/pages/components/autocomplete/ComboBox.tsx @@ -10,9 +10,7 @@ export default function ComboBox() { options={top100Films} getOptionLabel={option => option.title} style={{ width: 300 }} - renderInput={params => ( - - )} + renderInput={params => } /> ); } diff --git a/docs/src/pages/components/autocomplete/CountrySelect.js b/docs/src/pages/components/autocomplete/CountrySelect.js index 891fc807ea2416..a0aa56ee139394 100644 --- a/docs/src/pages/components/autocomplete/CountrySelect.js +++ b/docs/src/pages/components/autocomplete/CountrySelect.js @@ -46,7 +46,6 @@ export default function CountrySelect() { {...params} label="Choose a country" variant="outlined" - fullWidth inputProps={{ ...params.inputProps, autoComplete: 'new-password', // disable autocomplete and autofill diff --git a/docs/src/pages/components/autocomplete/CountrySelect.tsx b/docs/src/pages/components/autocomplete/CountrySelect.tsx index 8408005380686b..97310d9f11f8e7 100644 --- a/docs/src/pages/components/autocomplete/CountrySelect.tsx +++ b/docs/src/pages/components/autocomplete/CountrySelect.tsx @@ -46,7 +46,6 @@ export default function CountrySelect() { {...params} label="Choose a country" variant="outlined" - fullWidth inputProps={{ ...params.inputProps, autoComplete: 'new-password', // disable autocomplete and autofill diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.js b/docs/src/pages/components/autocomplete/DisabledOptions.js index 268e2e28969452..b40312041fa0bb 100644 --- a/docs/src/pages/components/autocomplete/DisabledOptions.js +++ b/docs/src/pages/components/autocomplete/DisabledOptions.js @@ -10,9 +10,7 @@ export default function DisabledOptions() { options={timeSlots} getOptionDisabled={option => option === timeSlots[0] || option === timeSlots[2]} style={{ width: 300 }} - renderInput={params => ( - - )} + renderInput={params => } /> ); } diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.tsx b/docs/src/pages/components/autocomplete/DisabledOptions.tsx index 268e2e28969452..b40312041fa0bb 100644 --- a/docs/src/pages/components/autocomplete/DisabledOptions.tsx +++ b/docs/src/pages/components/autocomplete/DisabledOptions.tsx @@ -10,9 +10,7 @@ export default function DisabledOptions() { options={timeSlots} getOptionDisabled={option => option === timeSlots[0] || option === timeSlots[2]} style={{ width: 300 }} - renderInput={params => ( - - )} + renderInput={params => } /> ); } diff --git a/docs/src/pages/components/autocomplete/Filter.js b/docs/src/pages/components/autocomplete/Filter.js index 2c3c5d6f5d595d..3ceccae605bf1b 100644 --- a/docs/src/pages/components/autocomplete/Filter.js +++ b/docs/src/pages/components/autocomplete/Filter.js @@ -16,9 +16,7 @@ export default function Filter() { getOptionLabel={option => option.title} filterOptions={filterOptions} style={{ width: 300 }} - renderInput={params => ( - - )} + renderInput={params => } /> ); } diff --git a/docs/src/pages/components/autocomplete/Filter.tsx b/docs/src/pages/components/autocomplete/Filter.tsx index 7c6112708dc2b0..86fb696811b5f2 100644 --- a/docs/src/pages/components/autocomplete/Filter.tsx +++ b/docs/src/pages/components/autocomplete/Filter.tsx @@ -16,9 +16,7 @@ export default function Filter() { getOptionLabel={option => option.title} filterOptions={filterOptions} style={{ width: 300 }} - renderInput={params => ( - - )} + renderInput={params => } /> ); } diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js index a76eaaa5a4bcd6..7398159fc8173e 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.js +++ b/docs/src/pages/components/autocomplete/FixedTags.js @@ -19,13 +19,7 @@ export default function FixedTags() { } style={{ width: 500 }} renderInput={params => ( - + )} /> ); diff --git a/docs/src/pages/components/autocomplete/FixedTags.tsx b/docs/src/pages/components/autocomplete/FixedTags.tsx index a76eaaa5a4bcd6..7398159fc8173e 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.tsx +++ b/docs/src/pages/components/autocomplete/FixedTags.tsx @@ -19,13 +19,7 @@ export default function FixedTags() { } style={{ width: 500 }} renderInput={params => ( - + )} /> ); diff --git a/docs/src/pages/components/autocomplete/FreeSolo.js b/docs/src/pages/components/autocomplete/FreeSolo.js index eca97faea0a224..e6efaa351bb37f 100644 --- a/docs/src/pages/components/autocomplete/FreeSolo.js +++ b/docs/src/pages/components/autocomplete/FreeSolo.js @@ -11,7 +11,7 @@ export default function FreeSolo() { freeSolo options={top100Films.map(option => option.title)} renderInput={params => ( - + )} /> )} diff --git a/docs/src/pages/components/autocomplete/FreeSolo.tsx b/docs/src/pages/components/autocomplete/FreeSolo.tsx index eca97faea0a224..e6efaa351bb37f 100644 --- a/docs/src/pages/components/autocomplete/FreeSolo.tsx +++ b/docs/src/pages/components/autocomplete/FreeSolo.tsx @@ -11,7 +11,7 @@ export default function FreeSolo() { freeSolo options={top100Films.map(option => option.title)} renderInput={params => ( - + )} /> )} diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js index 3aa9a6b2bfa1c1..1234471bfe9c43 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js +++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.js @@ -50,7 +50,7 @@ export default function FreeSoloCreateOption() { style={{ width: 300 }} freeSolo renderInput={params => ( - + )} /> ); diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx index 0323feffd3559d..448d3fddc936b2 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx +++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOption.tsx @@ -49,7 +49,7 @@ export default function FreeSoloCreateOption() { style={{ width: 300 }} freeSolo renderInput={params => ( - + )} /> ); diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js index bc1586c2bb865d..9ac3158273f9be 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js +++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.js @@ -96,7 +96,7 @@ export default function FreeSoloCreateOptionDialog() { style={{ width: 300 }} freeSolo renderInput={params => ( - + )} /> @@ -114,7 +114,6 @@ export default function FreeSoloCreateOptionDialog() { onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })} label="title" type="text" - fullWidth /> setDialogValue({ ...dialogValue, year: event.target.value })} label="year" type="number" - fullWidth /> diff --git a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx index caa7b3f415097a..112c3da00513fb 100644 --- a/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx +++ b/docs/src/pages/components/autocomplete/FreeSoloCreateOptionDialog.tsx @@ -93,7 +93,7 @@ export default function FreeSoloCreateOptionDialog() { style={{ width: 300 }} freeSolo renderInput={params => ( - + )} /> @@ -111,7 +111,6 @@ export default function FreeSoloCreateOptionDialog() { onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })} label="title" type="text" - fullWidth /> setDialogValue({ ...dialogValue, year: event.target.value })} label="year" type="number" - fullWidth /> diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.js b/docs/src/pages/components/autocomplete/GoogleMaps.js index 23b342b0a93786..ac259a418f0e3e 100644 --- a/docs/src/pages/components/autocomplete/GoogleMaps.js +++ b/docs/src/pages/components/autocomplete/GoogleMaps.js @@ -94,7 +94,6 @@ export default function GoogleMaps() { options={options} autoComplete includeInputInList - freeSolo disableOpenOnFocus renderInput={params => ( ( option.firstLetter} getOptionLabel={option => option.title} style={{ width: 300 }} - renderInput={params => ( - - )} + renderInput={params => } /> ); } diff --git a/docs/src/pages/components/autocomplete/Grouped.tsx b/docs/src/pages/components/autocomplete/Grouped.tsx index cf233d53353b0f..e9d2b1f28264ad 100644 --- a/docs/src/pages/components/autocomplete/Grouped.tsx +++ b/docs/src/pages/components/autocomplete/Grouped.tsx @@ -19,9 +19,7 @@ export default function Grouped() { groupBy={option => option.firstLetter} getOptionLabel={option => option.title} style={{ width: 300 }} - renderInput={params => ( - - )} + renderInput={params => } /> ); } diff --git a/docs/src/pages/components/autocomplete/Highlights.js b/docs/src/pages/components/autocomplete/Highlights.js index a886cd6ecc3f4e..77cfdacffdfdb2 100644 --- a/docs/src/pages/components/autocomplete/Highlights.js +++ b/docs/src/pages/components/autocomplete/Highlights.js @@ -13,7 +13,7 @@ export default function Highlights() { options={top100Films} getOptionLabel={option => option.title} renderInput={params => ( - + )} renderOption={(option, { inputValue }) => { const matches = match(option.title, inputValue); diff --git a/docs/src/pages/components/autocomplete/Highlights.tsx b/docs/src/pages/components/autocomplete/Highlights.tsx index a886cd6ecc3f4e..77cfdacffdfdb2 100644 --- a/docs/src/pages/components/autocomplete/Highlights.tsx +++ b/docs/src/pages/components/autocomplete/Highlights.tsx @@ -13,7 +13,7 @@ export default function Highlights() { options={top100Films} getOptionLabel={option => option.title} renderInput={params => ( - + )} renderOption={(option, { inputValue }) => { const matches = match(option.title, inputValue); diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js index 66a39f1b0be2cd..0b25dc1a48b29a 100644 --- a/docs/src/pages/components/autocomplete/Playground.js +++ b/docs/src/pages/components/autocomplete/Playground.js @@ -21,44 +21,38 @@ export default function Playground() { {...defaultProps} id="debug" debug - renderInput={params => } + renderInput={params => } /> ( - + )} /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> } + renderInput={params => } /> { setValue(newValue); }} - renderInput={params => ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> } + renderInput={params => } /> ( - - )} + renderInput={params => } /> ); diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx index c3cae2e6f196b8..fffa508655ecd9 100644 --- a/docs/src/pages/components/autocomplete/Playground.tsx +++ b/docs/src/pages/components/autocomplete/Playground.tsx @@ -19,44 +19,38 @@ export default function Playground() { {...defaultProps} id="debug" debug - renderInput={params => } + renderInput={params => } /> ( - + )} /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> } + renderInput={params => } /> { setValue(newValue); }} - renderInput={params => ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> ( - - )} + renderInput={params => } /> } + renderInput={params => } /> ( - - )} + renderInput={params => } /> ); diff --git a/docs/src/pages/components/autocomplete/Sizes.js b/docs/src/pages/components/autocomplete/Sizes.js index 001e22db9b64af..7d43095461ea88 100644 --- a/docs/src/pages/components/autocomplete/Sizes.js +++ b/docs/src/pages/components/autocomplete/Sizes.js @@ -26,13 +26,7 @@ export default function Sizes() { getOptionLabel={option => option.title} defaultValue={top100Films[13]} renderInput={params => ( - + )} /> option.title} defaultValue={[top100Films[13]]} renderInput={params => ( - + )} /> option.title} defaultValue={top100Films[13]} renderInput={params => ( - + )} /> option.title} defaultValue={[top100Films[13]]} renderInput={params => ( - + )} /> ( - + )} /> ( - + )} /> diff --git a/docs/src/pages/components/autocomplete/Sizes.tsx b/docs/src/pages/components/autocomplete/Sizes.tsx index 5ade96cf2438b5..00ccb066e74b4a 100644 --- a/docs/src/pages/components/autocomplete/Sizes.tsx +++ b/docs/src/pages/components/autocomplete/Sizes.tsx @@ -28,13 +28,7 @@ export default function Sizes() { getOptionLabel={option => option.title} defaultValue={top100Films[13]} renderInput={params => ( - + )} /> option.title} defaultValue={[top100Films[13]]} renderInput={params => ( - + )} /> option.title} defaultValue={top100Films[13]} renderInput={params => ( - + )} /> option.title} defaultValue={[top100Films[13]]} renderInput={params => ( - + )} /> ( - + )} /> ( - + )} /> diff --git a/docs/src/pages/components/autocomplete/Tags.js b/docs/src/pages/components/autocomplete/Tags.js index e7b95e471d21b6..1b2ba569a145c1 100644 --- a/docs/src/pages/components/autocomplete/Tags.js +++ b/docs/src/pages/components/autocomplete/Tags.js @@ -31,7 +31,6 @@ export default function Tags() { variant="standard" label="Multiple values" placeholder="Favorites" - fullWidth /> )} /> @@ -48,7 +47,6 @@ export default function Tags() { variant="outlined" label="filterSelectedOptions" placeholder="Favorites" - fullWidth /> )} /> @@ -64,13 +62,7 @@ export default function Tags() { )) } renderInput={params => ( - + )} /> diff --git a/docs/src/pages/components/autocomplete/Tags.tsx b/docs/src/pages/components/autocomplete/Tags.tsx index 922ee2a64b0f9c..ea8fe3e72d3805 100644 --- a/docs/src/pages/components/autocomplete/Tags.tsx +++ b/docs/src/pages/components/autocomplete/Tags.tsx @@ -33,7 +33,6 @@ export default function Tags() { variant="standard" label="Multiple values" placeholder="Favorites" - fullWidth /> )} /> @@ -50,7 +49,6 @@ export default function Tags() { variant="outlined" label="filterSelectedOptions" placeholder="Favorites" - fullWidth /> )} /> @@ -66,13 +64,7 @@ export default function Tags() { )) } renderInput={params => ( - + )} /> diff --git a/docs/src/pages/components/autocomplete/Virtualize.js b/docs/src/pages/components/autocomplete/Virtualize.js index 8a46534e5b4079..b925891a168879 100644 --- a/docs/src/pages/components/autocomplete/Virtualize.js +++ b/docs/src/pages/components/autocomplete/Virtualize.js @@ -120,9 +120,7 @@ export default function Virtualize() { renderGroup={renderGroup} options={OPTIONS} groupBy={option => option[0].toUpperCase()} - renderInput={params => ( - - )} + renderInput={params => } renderOption={option => {option}} /> ); diff --git a/docs/src/pages/components/autocomplete/Virtualize.tsx b/docs/src/pages/components/autocomplete/Virtualize.tsx index 17cd5e086d46a8..84aecff0ce08fc 100644 --- a/docs/src/pages/components/autocomplete/Virtualize.tsx +++ b/docs/src/pages/components/autocomplete/Virtualize.tsx @@ -115,9 +115,7 @@ export default function Virtualize() { renderGroup={renderGroup} options={OPTIONS} groupBy={option => option[0].toUpperCase()} - renderInput={params => ( - - )} + renderInput={params => } renderOption={option => {option}} /> ); diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 463ff0f2f7c529..b4ad82ef741d8f 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -386,6 +386,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { {renderInput({ id, disabled, + fullWidth: true, size: size === 'small' ? 'small' : undefined, InputLabelProps: getInputLabelProps(), InputProps: {