[Autocomplete] Fix the errors reported by Wave (#18283)

mui · Nov 11, 2019 · 4bfc2e4 · 4bfc2e4
1 parent 3d393bf
commit 4bfc2e4
Show file tree

Hide file tree

Showing 37 changed files with 80 additions and 5 deletions.
diff --git a/docs/src/modules/components/prism-okaidia.css b/docs/src/modules/components/prism-okaidia.css
@@ -145,3 +145,8 @@ pre[class*="language-"] {
 .token.deleted {
   color: rgb(252, 146, 158);
 }
+
+.token.boolean,
+.token.number {
+  color: #b78eff;
+}
diff --git a/docs/src/pages/components/autocomplete/Asynchronous.js b/docs/src/pages/components/autocomplete/Asynchronous.js
@@ -46,6 +46,7 @@ export default function Asynchronous() {
 
   return (
     <Autocomplete
+      id="asynchronous-demo"
       style={{ width: 300 }}
       open={open}
       onOpen={() => {

diff --git a/docs/src/pages/components/autocomplete/Asynchronous.tsx b/docs/src/pages/components/autocomplete/Asynchronous.tsx
@@ -50,6 +50,7 @@ export default function Asynchronous() {
 
   return (
     <Autocomplete
+      id="asynchronous-demo"
       style={{ width: 300 }}
       open={open}
       onOpen={() => {

diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.js b/docs/src/pages/components/autocomplete/CheckboxesTags.js
@@ -14,6 +14,7 @@ export default function CheckboxesTags() {
   return (
     <Autocomplete
       multiple
+      id="checkboxes-tags-demo"
       options={top100Films}
       disableCloseOnSelect
       getOptionLabel={option => option.title}

diff --git a/docs/src/pages/components/autocomplete/CheckboxesTags.tsx b/docs/src/pages/components/autocomplete/CheckboxesTags.tsx
@@ -14,6 +14,7 @@ export default function CheckboxesTags() {
   return (
     <Autocomplete
       multiple
+      id="checkboxes-tags-demo"
       options={top100Films}
       disableCloseOnSelect
       getOptionLabel={(option: FilmOptionType) => option.title}

diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js
@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 export default function ComboBox() {
   return (
     <Autocomplete
+      id="combo-box-demo"
       options={top100Films}
       getOptionLabel={option => option.title}
       style={{ width: 300 }}

diff --git a/docs/src/pages/components/autocomplete/ComboBox.tsx b/docs/src/pages/components/autocomplete/ComboBox.tsx
@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 export default function ComboBox() {
   return (
     <Autocomplete
+      id="combo-box-demo"
       options={top100Films}
       getOptionLabel={(option: FilmOptionType) => option.title}
       style={{ width: 300 }}

diff --git a/docs/src/pages/components/autocomplete/CountrySelect.js b/docs/src/pages/components/autocomplete/CountrySelect.js
@@ -27,6 +27,7 @@ export default function CountrySelect() {
 
   return (
     <Autocomplete
+      id="country-select-demo"
       style={{ width: 300 }}
       options={countries}
       classes={{

diff --git a/docs/src/pages/components/autocomplete/CountrySelect.tsx b/docs/src/pages/components/autocomplete/CountrySelect.tsx
@@ -27,6 +27,7 @@ export default function CountrySelect() {
 
   return (
     <Autocomplete
+      id="country-select-demo"
       style={{ width: 300 }}
       options={countries}
       classes={{

diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.js b/docs/src/pages/components/autocomplete/CustomizedHook.js
@@ -135,6 +135,7 @@ export default function CustomizedHook() {
     focused,
     setAnchorEl,
   } = useAutocomplete({
+    id: 'customized-hook-demo',
     defaultValue: [top100Films[1]],
     multiple: true,
     options: top100Films,

diff --git a/docs/src/pages/components/autocomplete/CustomizedHook.tsx b/docs/src/pages/components/autocomplete/CustomizedHook.tsx
@@ -135,6 +135,7 @@ export default function CustomizedHook() {
     focused,
     setAnchorEl,
   } = useAutocomplete({
+    id: 'customized-hook-demo',
     defaultValue: [top100Films[1]],
     multiple: true,
     options: top100Films,

diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.js b/docs/src/pages/components/autocomplete/DisabledOptions.js
@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 export default function DisabledOptions() {
   return (
     <Autocomplete
+      id="disabled-options-demo"
       options={timeSlots}
       getOptionDisabled={option => option === timeSlots[0] || option === timeSlots[2]}
       style={{ width: 300 }}

diff --git a/docs/src/pages/components/autocomplete/DisabledOptions.tsx b/docs/src/pages/components/autocomplete/DisabledOptions.tsx
@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 export default function DisabledOptions() {
   return (
     <Autocomplete
+      id="disabled-options-demo"
       options={timeSlots}
       getOptionDisabled={(option: TimeSlot) => option === timeSlots[0] || option === timeSlots[2]}
       style={{ width: 300 }}

diff --git a/docs/src/pages/components/autocomplete/Filter.js b/docs/src/pages/components/autocomplete/Filter.js
@@ -11,6 +11,7 @@ const filterOptions = createFilterOptions({
 export default function Filter() {
   return (
     <Autocomplete
+      id="filter-demo"
       options={top100Films}
       getOptionLabel={option => option.title}
       filterOptions={filterOptions}

diff --git a/docs/src/pages/components/autocomplete/Filter.tsx b/docs/src/pages/components/autocomplete/Filter.tsx
@@ -11,6 +11,7 @@ const filterOptions = createFilterOptions({
 export default function Filter() {
   return (
     <Autocomplete
+      id="filter-demo"
       options={top100Films}
       getOptionLabel={(option: FilmOptionType) => option.title}
       filterOptions={filterOptions}

diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js
@@ -8,6 +8,7 @@ export default function FixedTags() {
   return (
     <Autocomplete
       multiple
+      id="fixed-tags-demo"
       options={top100Films}
       getOptionLabel={option => option.title}
       defaultValue={[top100Films[6], top100Films[13]]}

diff --git a/docs/src/pages/components/autocomplete/FixedTags.tsx b/docs/src/pages/components/autocomplete/FixedTags.tsx
@@ -8,6 +8,7 @@ export default function FixedTags() {
   return (
     <Autocomplete
       multiple
+      id="fixed-tags-demo"
       options={top100Films}
       getOptionLabel={(option: FilmOptionType) => option.title}
       defaultValue={[top100Films[6], top100Films[13]]}

diff --git a/docs/src/pages/components/autocomplete/FreeSolo.js b/docs/src/pages/components/autocomplete/FreeSolo.js
@@ -7,6 +7,7 @@ export default function FreeSolo() {
   return (
     <div style={{ width: 300 }}>
       <Autocomplete
+        id="free-solo-demo"
         freeSolo
         options={top100Films.map(option => option.title)}
         renderInput={params => (
@@ -15,6 +16,7 @@ export default function FreeSolo() {
       />
       <Autocomplete
         freeSolo
+        id="free-solo-2-demo"
         disableClearable
         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
@@ -7,6 +7,7 @@ export default function FreeSolo() {
   return (
     <div style={{ width: 300 }}>
       <Autocomplete
+        id="free-solo-demo"
         freeSolo
         options={top100Films.map(option => option.title)}
         renderInput={params => (
@@ -15,6 +16,7 @@ export default function FreeSolo() {
       />
       <Autocomplete
         freeSolo
+        id="free-solo-2-demo"
         disableClearable
         options={top100Films.map(option => option.title)}
         renderInput={params => (

diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.js b/docs/src/pages/components/autocomplete/GoogleMaps.js
@@ -87,6 +87,7 @@ export default function GoogleMaps() {
 
   return (
     <Autocomplete
+      id="google-map-demo"
       style={{ width: 300 }}
       getOptionLabel={option => option.description}
       filterOptions={x => x}

diff --git a/docs/src/pages/components/autocomplete/GoogleMaps.tsx b/docs/src/pages/components/autocomplete/GoogleMaps.tsx
@@ -99,6 +99,7 @@ export default function GoogleMaps() {
 
   return (
     <Autocomplete
+      id="google-map-demo"
       style={{ width: 300 }}
       getOptionLabel={option => option.description}
       filterOptions={x => x}

diff --git a/docs/src/pages/components/autocomplete/Grouped.js b/docs/src/pages/components/autocomplete/Grouped.js
@@ -14,6 +14,7 @@ export default function Grouped() {
 
   return (
     <Autocomplete
+      id="grouped-demo"
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={option => option.firstLetter}
       getOptionLabel={option => option.title}

diff --git a/docs/src/pages/components/autocomplete/Grouped.tsx b/docs/src/pages/components/autocomplete/Grouped.tsx
@@ -14,6 +14,7 @@ export default function Grouped() {
 
   return (
     <Autocomplete
+      id="grouped-demo"
       options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
       groupBy={(option: FilmOptionType) => option.firstLetter}
       getOptionLabel={(option: FilmOptionType) => option.title}

diff --git a/docs/src/pages/components/autocomplete/Highlights.js b/docs/src/pages/components/autocomplete/Highlights.js
@@ -8,6 +8,7 @@ import match from 'autosuggest-highlight/match';
 export default function Highlights() {
   return (
     <Autocomplete
+      id="highlights-demo"
       style={{ width: 300 }}
       options={top100Films}
       getOptionLabel={option => option.title}

diff --git a/docs/src/pages/components/autocomplete/Highlights.tsx b/docs/src/pages/components/autocomplete/Highlights.tsx
@@ -8,6 +8,7 @@ import match from 'autosuggest-highlight/match';
 export default function Highlights() {
   return (
     <Autocomplete
+      id="highlights-demo"
       style={{ width: 300 }}
       options={top100Films}
       getOptionLabel={(option: FilmOptionType) => option.title}

diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js
@@ -19,43 +19,50 @@ export default function Playground() {
     <div style={{ width: 300 }}>
       <Autocomplete
         {...defaultProps}
+        id="debug"
         debug
         renderInput={params => <TextField {...params} label="debug" margin="normal" fullWidth />}
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-close-on-select"
         disableCloseOnSelect
         renderInput={params => (
           <TextField {...params} label="disableCloseOnSelect" margin="normal" fullWidth />
         )}
       />
       <Autocomplete
         {...defaultProps}
+        id="clear-on-escape"
         clearOnEscape
         renderInput={params => (
           <TextField {...params} label="clearOnEscape" margin="normal" fullWidth />
         )}
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-clearable"
         disableClearable
         renderInput={params => (
           <TextField {...params} label="disableClearable" margin="normal" fullWidth />
         )}
       />
       <Autocomplete
         {...defaultProps}
+        id="include-input-in-list"
         includeInputInList
         renderInput={params => (
           <TextField {...params} label="includeInputInList" margin="normal" fullWidth />
         )}
       />
       <Autocomplete
         {...flatProps}
+        id="flat-demo"
         renderInput={params => <TextField {...params} label="flat" margin="normal" fullWidth />}
       />
       <Autocomplete
         {...defaultProps}
+        id="controlled-demo"
         value={value}
         onChange={(event, newValue) => {
           setValue(newValue);
@@ -66,6 +73,7 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="auto-complete"
         autoComplete
         includeInputInList
         renderInput={params => (
@@ -74,39 +82,45 @@ export default function Playground() {
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-list-wrap"
         disableListWrap
         renderInput={params => (
           <TextField {...params} label="disableListWrap" margin="normal" fullWidth />
         )}
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-open-on-focus"
         disableOpenOnFocus
         renderInput={params => (
           <TextField {...params} label="disableOpenOnFocus" margin="normal" fullWidth />
         )}
       />
       <Autocomplete
         {...defaultProps}
+        id="auto-highlight"
         autoHighlight
         renderInput={params => (
           <TextField {...params} label="autoHighlight" margin="normal" fullWidth />
         )}
       />
       <Autocomplete
         {...defaultProps}
+        id="auto-select"
         autoSelect
         renderInput={params => (
           <TextField {...params} label="autoSelect" margin="normal" fullWidth />
         )}
       />
       <Autocomplete
         {...defaultProps}
+        id="disabled"
         disabled
         renderInput={params => <TextField {...params} label="disabled" margin="normal" fullWidth />}
       />
       <Autocomplete
         {...defaultProps}
+        id="disable-portal"
         disablePortal
         renderInput={params => (
           <TextField {...params} label="disablePortal" margin="normal" fullWidth />