From 32955df3d66da4952bd3a02a459c0079e1ac2dc1 Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Wed, 4 May 2022 14:29:54 +0530 Subject: [PATCH] [Autocomplete] Add support for CSS variables (#32598) --- .../experiments/material-ui/autocomplete.tsx | 208 ++++++++++++++++++ .../src/Autocomplete/Autocomplete.js | 40 ++-- 2 files changed, 231 insertions(+), 17 deletions(-) create mode 100644 docs/pages/experiments/material-ui/autocomplete.tsx diff --git a/docs/pages/experiments/material-ui/autocomplete.tsx b/docs/pages/experiments/material-ui/autocomplete.tsx new file mode 100644 index 00000000000000..2776a8c84bf74b --- /dev/null +++ b/docs/pages/experiments/material-ui/autocomplete.tsx @@ -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 ( + + ); +}; + +// 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 ( + + + + + + + + } + /> + } + /> + } + /> + + + + ); +} diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 2e7d1bf693160c..11766965696f6b 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -233,7 +233,7 @@ const AutocompletePopper = styled(Popper, { ]; }, })(({ theme, ownerState }) => ({ - zIndex: theme.zIndex.modal, + zIndex: (theme.vars || theme).zIndex.modal, ...(ownerState.disablePortal && { position: 'absolute', }), @@ -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', })); @@ -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', })); @@ -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, + ), }, }, }, @@ -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, }));