Skip to content

Commit

Permalink
[autocomplete][docs] Fix focus state demo in Base UI (#41104)
Browse files Browse the repository at this point in the history 
Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
  • Loading branch information
@oliviertassinari
oliviertassinari authored Feb 20, 2024
1 parent 47e1cf9 commit 0d7bf95
Show file tree
Hide file tree
Showing 10 changed files with 50 additions and 50 deletions.
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,18 +309,18 @@ function Styles() {
color: ${isDarkMode ? cyan[100] : cyan[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${isDarkMode ? grey[800] : grey[100]};
color: ${isDarkMode ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${isDarkMode ? cyan[900] : cyan[100]};
color: ${isDarkMode ? cyan[100] : cyan[900]};
}
Expand Down
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,18 +283,18 @@ function Styles() {
color: ${isDarkMode ? cyan[100] : cyan[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${isDarkMode ? grey[800] : grey[100]};
color: ${isDarkMode ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${isDarkMode ? cyan[900] : cyan[100]};
color: ${isDarkMode ? cyan[100] : cyan[900]};
}
Expand Down
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,18 +237,18 @@ const StyledOption = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
Expand Down
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,18 +220,18 @@ const StyledOption = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
Expand Down
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/ControlledStates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,18 +171,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
Expand Down
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/ControlledStates.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,18 +171,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
Expand Down
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/UseAutocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,18 +160,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
Expand Down
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/UseAutocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,18 +162,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
Expand Down
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/UseAutocompletePopper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,18 +184,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
Expand Down
10 changes: 5 additions & 5 deletions docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,18 +192,18 @@ const Option = styled('li')(
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
&.base--focused,
&.base--focusVisible {
&.Mui-focused,
&.Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
}
&.base--focusVisible {
&.Mui-focusVisible {
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
}
&[aria-selected=true].base--focused,
&[aria-selected=true].base--focusVisible {
&[aria-selected=true].Mui-focused,
&[aria-selected=true].Mui-focusVisible {
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
}
Expand Down

0 comments on commit 0d7bf95

Please sign in to comment.