[Autocomplete] Built-in fullWidth

mui · Feb 22, 2020 · 9a1d427 · 9a1d427
1 parent deb31c7
commit 9a1d427
Show file tree

Hide file tree

Showing 35 changed files with 65 additions and 248 deletions.
diff --git a/docs/src/pages/components/autocomplete/Asynchronous.js b/docs/src/pages/components/autocomplete/Asynchronous.js
@@ -63,7 +63,6 @@ export default function Asynchronous() {
         <TextField
           {...params}
           label="Asynchronous"
-          fullWidth
           variant="outlined"
           InputProps={{
             ...params.InputProps,

diff --git a/docs/src/pages/components/autocomplete/Asynchronous.tsx b/docs/src/pages/components/autocomplete/Asynchronous.tsx
@@ -67,7 +67,6 @@ export default function Asynchronous() {
         <TextField
           {...params}
           label="Asynchronous"
-          fullWidth
           variant="outlined"
           InputProps={{
             ...params.InputProps,

diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.js b/docs/src/pages/components/autocomplete/CheckboxesTags.js
@@ -31,13 +31,7 @@ export default function CheckboxesTags() {
       )}
       style={{ width: 500 }}
       renderInput={params => (
-        <TextField
-          {...params}
-          variant="outlined"
-          label="Checkboxes"
-          placeholder="Favorites"
-          fullWidth
-        />
+        <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
       )}
     />
   );

diff --git 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 => (
-        <TextField
-          {...params}
-          variant="outlined"
-          label="Checkboxes"
-          placeholder="Favorites"
-          fullWidth
-        />
+        <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
       )}
     />
   );

diff --git 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 => (
-        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Combo box" variant="outlined" />}
     />
   );
 }

diff --git 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 => (
-        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Combo box" variant="outlined" />}
     />
   );
 }

diff --git 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
@@ -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
@@ -10,9 +10,7 @@ export default function DisabledOptions() {
       options={timeSlots}
       getOptionDisabled={option => option === timeSlots[0] || option === timeSlots[2]}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="Disabled options" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Disabled options" variant="outlined" />}
     />
   );
 }

diff --git 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 => (
-        <TextField {...params} label="Disabled options" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Disabled options" variant="outlined" />}
     />
   );
 }

diff --git 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 => (
-        <TextField {...params} label="Custom filter" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Custom filter" variant="outlined" />}
     />
   );
 }

diff --git 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 => (
-        <TextField {...params} label="Custom filter" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="Custom filter" variant="outlined" />}
     />
   );
 }

diff --git 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 => (
-        <TextField
-          {...params}
-          label="Fixed tag"
-          variant="outlined"
-          placeholder="Favorites"
-          fullWidth
-        />
+        <TextField {...params} label="Fixed tag" variant="outlined" placeholder="Favorites" />
       )}
     />
   );

diff --git 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 => (
-        <TextField
-          {...params}
-          label="Fixed tag"
-          variant="outlined"
-          placeholder="Favorites"
-          fullWidth
-        />
+        <TextField {...params} label="Fixed tag" variant="outlined" placeholder="Favorites" />
       )}
     />
   );

diff --git 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 => (
-          <TextField {...params} label="freeSolo" margin="normal" variant="outlined" fullWidth />
+          <TextField {...params} label="freeSolo" margin="normal" variant="outlined" />
         )}
       />
       <Autocomplete
@@ -25,7 +25,6 @@ export default function FreeSolo() {
             label="Search input"
             margin="normal"
             variant="outlined"
-            fullWidth
             InputProps={{ ...params.InputProps, type: 'search' }}
           />
         )}

diff --git 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 => (
-          <TextField {...params} label="freeSolo" margin="normal" variant="outlined" fullWidth />
+          <TextField {...params} label="freeSolo" margin="normal" variant="outlined" />
         )}
       />
       <Autocomplete
@@ -25,7 +25,6 @@ export default function FreeSolo() {
             label="Search input"
             margin="normal"
             variant="outlined"
-            fullWidth
             InputProps={{ ...params.InputProps, type: 'search' }}
           />
         )}

diff --git 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 => (
-        <TextField {...params} label="Free solo with text demo" variant="outlined" fullWidth />
+        <TextField {...params} label="Free solo with text demo" variant="outlined" />
       )}
     />
   );

diff --git 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 => (
-        <TextField {...params} label="Free solo with text demo" variant="outlined" fullWidth />
+        <TextField {...params} label="Free solo with text demo" variant="outlined" />
       )}
     />
   );

diff --git 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 => (
-          <TextField {...params} label="Free solo dialog" variant="outlined" fullWidth />
+          <TextField {...params} label="Free solo dialog" variant="outlined" />
         )}
       />
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
@@ -114,7 +114,6 @@ export default function FreeSoloCreateOptionDialog() {
               onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })}
               label="title"
               type="text"
-              fullWidth
             />
             <TextField
               margin="dense"
@@ -123,7 +122,6 @@ export default function FreeSoloCreateOptionDialog() {
               onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })}
               label="year"
               type="number"
-              fullWidth
             />
           </DialogContent>
           <DialogActions>

diff --git 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 => (
-          <TextField {...params} label="Free solo dialog" variant="outlined" fullWidth />
+          <TextField {...params} label="Free solo dialog" variant="outlined" />
         )}
       />
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
@@ -111,7 +111,6 @@ export default function FreeSoloCreateOptionDialog() {
               onChange={event => setDialogValue({ ...dialogValue, title: event.target.value })}
               label="title"
               type="text"
-              fullWidth
             />
             <TextField
               margin="dense"
@@ -120,7 +119,6 @@ export default function FreeSoloCreateOptionDialog() {
               onChange={event => setDialogValue({ ...dialogValue, year: event.target.value })}
               label="year"
               type="number"
-              fullWidth
             />
           </DialogContent>
           <DialogActions>

diff --git 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 => (
         <TextField

diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.tsx b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
@@ -108,7 +108,6 @@ export default function GoogleMaps() {
       options={options}
       autoComplete
       includeInputInList
-      freeSolo
       disableOpenOnFocus
       renderInput={params => (
         <TextField

diff --git a/docs/src/pages/components/autocomplete/Grouped.js b/docs/src/pages/components/autocomplete/Grouped.js
@@ -19,9 +19,7 @@ export default function Grouped() {
       groupBy={option => option.firstLetter}
       getOptionLabel={option => option.title}
       style={{ width: 300 }}
-      renderInput={params => (
-        <TextField {...params} label="With categories" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="With categories" variant="outlined" />}
     />
   );
 }

diff --git 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 => (
-        <TextField {...params} label="With categories" variant="outlined" fullWidth />
-      )}
+      renderInput={params => <TextField {...params} label="With categories" variant="outlined" />}
     />
   );
 }

diff --git 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 => (
-        <TextField {...params} label="Highlights" variant="outlined" fullWidth margin="normal" />
+        <TextField {...params} label="Highlights" variant="outlined" margin="normal" />
       )}
       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
@@ -13,7 +13,7 @@ export default function Highlights() {
       options={top100Films}
       getOptionLabel={option => option.title}
       renderInput={params => (
-        <TextField {...params} label="Highlights" variant="outlined" fullWidth margin="normal" />
+        <TextField {...params} label="Highlights" variant="outlined" margin="normal" />
       )}
       renderOption={(option, { inputValue }) => {
         const matches = match(option.title, inputValue);