Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Autocomplete] Add support for CSS variables #32598

Merged
merged 2 commits into from
May 4, 2022
+231 −17
Merged

[Autocomplete] Add support for CSS variables #32598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
44fdf60
feat(Autocomplete): add support for CSS vars
ZeeshanTamboli May 4, 2022
9d9e2b5
docs: add autocomplete experimental docs for CSS vars
ZeeshanTamboli May 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
208 changes: 208 additions & 0 deletions docs/pages/experiments/material-ui/autocomplete.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
import * as React from 'react';
import {
Experimental_CssVarsProvider as CssVarsProvider,
useColorScheme,
} from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import Moon from '@mui/icons-material/DarkMode';
import Sun from '@mui/icons-material/LightMode';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Autocomplete from '@mui/material/Autocomplete';

const ColorSchemePicker = () => {
const { mode, setMode } = useColorScheme();
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
if (!mounted) {
return null;
}

return (
<Button
variant="outlined"
onClick={() => {
if (mode === 'light') {
setMode('dark');
} else {
setMode('light');
}
}}
>
{mode === 'light' ? <Moon /> : <Sun />}
</Button>
);
};

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ label: 'The Shawshank Redemption', year: 1994 },
{ label: 'The Godfather', year: 1972 },
{ label: 'The Godfather: Part II', year: 1974 },
{ label: 'The Dark Knight', year: 2008 },
{ label: '12 Angry Men', year: 1957 },
{ label: "Schindler's List", year: 1993 },
{ label: 'Pulp Fiction', year: 1994 },
{
label: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ label: 'The Good, the Bad and the Ugly', year: 1966 },
{ label: 'Fight Club', year: 1999 },
{
label: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
label: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ label: 'Forrest Gump', year: 1994 },
{ label: 'Inception', year: 2010 },
{
label: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ label: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ label: 'Goodfellas', year: 1990 },
{ label: 'The Matrix', year: 1999 },
{ label: 'Seven Samurai', year: 1954 },
{
label: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ label: 'City of God', year: 2002 },
{ label: 'Se7en', year: 1995 },
{ label: 'The Silence of the Lambs', year: 1991 },
{ label: "It's a Wonderful Life", year: 1946 },
{ label: 'Life Is Beautiful', year: 1997 },
{ label: 'The Usual Suspects', year: 1995 },
{ label: 'Léon: The Professional', year: 1994 },
{ label: 'Spirited Away', year: 2001 },
{ label: 'Saving Private Ryan', year: 1998 },
{ label: 'Once Upon a Time in the West', year: 1968 },
{ label: 'American History X', year: 1998 },
{ label: 'Interstellar', year: 2014 },
{ label: 'Casablanca', year: 1942 },
{ label: 'City Lights', year: 1931 },
{ label: 'Psycho', year: 1960 },
{ label: 'The Green Mile', year: 1999 },
{ label: 'The Intouchables', year: 2011 },
{ label: 'Modern Times', year: 1936 },
{ label: 'Raiders of the Lost Ark', year: 1981 },
{ label: 'Rear Window', year: 1954 },
{ label: 'The Pianist', year: 2002 },
{ label: 'The Departed', year: 2006 },
{ label: 'Terminator 2: Judgment Day', year: 1991 },
{ label: 'Back to the Future', year: 1985 },
{ label: 'Whiplash', year: 2014 },
{ label: 'Gladiator', year: 2000 },
{ label: 'Memento', year: 2000 },
{ label: 'The Prestige', year: 2006 },
{ label: 'The Lion King', year: 1994 },
{ label: 'Apocalypse Now', year: 1979 },
{ label: 'Alien', year: 1979 },
{ label: 'Sunset Boulevard', year: 1950 },
{
label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ label: 'The Great Dictator', year: 1940 },
{ label: 'Cinema Paradiso', year: 1988 },
{ label: 'The Lives of Others', year: 2006 },
{ label: 'Grave of the Fireflies', year: 1988 },
{ label: 'Paths of Glory', year: 1957 },
{ label: 'Django Unchained', year: 2012 },
{ label: 'The Shining', year: 1980 },
{ label: 'WALL·E', year: 2008 },
{ label: 'American Beauty', year: 1999 },
{ label: 'The Dark Knight Rises', year: 2012 },
{ label: 'Princess Mononoke', year: 1997 },
{ label: 'Aliens', year: 1986 },
{ label: 'Oldboy', year: 2003 },
{ label: 'Once Upon a Time in America', year: 1984 },
{ label: 'Witness for the Prosecution', year: 1957 },
{ label: 'Das Boot', year: 1981 },
{ label: 'Citizen Kane', year: 1941 },
{ label: 'North by Northwest', year: 1959 },
{ label: 'Vertigo', year: 1958 },
{
label: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ label: 'Reservoir Dogs', year: 1992 },
{ label: 'Braveheart', year: 1995 },
{ label: 'M', year: 1931 },
{ label: 'Requiem for a Dream', year: 2000 },
{ label: 'Amélie', year: 2001 },
{ label: 'A Clockwork Orange', year: 1971 },
{ label: 'Like Stars on Earth', year: 2007 },
{ label: 'Taxi Driver', year: 1976 },
{ label: 'Lawrence of Arabia', year: 1962 },
{ label: 'Double Indemnity', year: 1944 },
{
label: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ label: 'Amadeus', year: 1984 },
{ label: 'To Kill a Mockingbird', year: 1962 },
{ label: 'Toy Story 3', year: 2010 },
{ label: 'Logan', year: 2017 },
{ label: 'Full Metal Jacket', year: 1987 },
{ label: 'Dangal', year: 2016 },
{ label: 'The Sting', year: 1973 },
{ label: '2001: A Space Odyssey', year: 1968 },
{ label: "Singin' in the Rain", year: 1952 },
{ label: 'Toy Story', year: 1995 },
{ label: 'Bicycle Thieves', year: 1948 },
{ label: 'The Kid', year: 1921 },
{ label: 'Inglourious Basterds', year: 2009 },
{ label: 'Snatch', year: 2000 },
{ label: '3 Idiots', year: 2009 },
{ label: 'Monty Python and the Holy Grail', year: 1975 },
];

export default function CssVarsTemplate() {
return (
<CssVarsProvider>
<CssBaseline />
<Container sx={{ my: 5 }}>
<Box sx={{ pb: 2 }}>
<ColorSchemePicker />
</Box>
<Stack spacing={6} direction="row">
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
sx={{ width: 300 }}
open
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
<Autocomplete
disablePortal
id="combo-box-demo"
options={[]}
sx={{ width: 300 }}
open
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
<Autocomplete
disablePortal
id="combo-box-demo"
options={[]}
sx={{ width: 300 }}
loading
open
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
</Stack>
</Container>
</CssVarsProvider>
);
}
40 changes: 23 additions & 17 deletions packages/mui-material/src/Autocomplete/Autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ const AutocompletePopper = styled(Popper, {
];
},
})(({ theme, ownerState }) => ({
zIndex: theme.zIndex.modal,
zIndex: (theme.vars || theme).zIndex.modal,
...(ownerState.disablePortal && {
position: 'absolute',
}),
Expand All @@ -253,7 +253,7 @@ const AutocompleteLoading = styled('div', {
slot: 'Loading',
overridesResolver: (props, styles) => styles.loading,
})(({ theme }) => ({
color: theme.palette.text.secondary,
color: (theme.vars || theme).palette.text.secondary,
padding: '14px 16px',
}));

Expand All @@ -262,7 +262,7 @@ const AutocompleteNoOptions = styled('div', {
slot: 'NoOptions',
overridesResolver: (props, styles) => styles.noOptions,
})(({ theme }) => ({
color: theme.palette.text.secondary,
color: (theme.vars || theme).palette.text.secondary,
padding: '14px 16px',
}));

Expand Down Expand Up @@ -294,36 +294,42 @@ const AutocompleteListbox = styled('div', {
minHeight: 'auto',
},
[`&.${autocompleteClasses.focused}`]: {
backgroundColor: theme.palette.action.hover,
backgroundColor: (theme.vars || theme).palette.action.hover,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
},
},
'&[aria-disabled="true"]': {
opacity: theme.palette.action.disabledOpacity,
opacity: (theme.vars || theme).palette.action.disabledOpacity,
pointerEvents: 'none',
},
[`&.${autocompleteClasses.focusVisible}`]: {
backgroundColor: theme.palette.action.focus,
backgroundColor: (theme.vars || theme).palette.action.focus,
},
'&[aria-selected="true"]': {
backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
[`&.${autocompleteClasses.focused}`]: {
backgroundColor: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.palette.action.selected,
backgroundColor: (theme.vars || theme).palette.action.selected,
},
},
[`&.${autocompleteClasses.focusVisible}`]: {
backgroundColor: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
),
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))`
: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity,
),
},
},
},
Expand All @@ -334,7 +340,7 @@ const AutocompleteGroupLabel = styled(ListSubheader, {
slot: 'GroupLabel',
overridesResolver: (props, styles) => styles.groupLabel,
})(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
backgroundColor: (theme.vars || theme).palette.background.paper,
top: -8,
}));

Expand Down