[Tooltip] Add support for CSS variables (mui#32594)

tooppaaa · Oct 25, 2023 · 2b17934 · 2b17934
1 parent d07cabc
commit 2b17934
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 7 deletions.
diff --git a/docs/pages/experiments/material-ui/tooltip.tsx b/docs/pages/experiments/material-ui/tooltip.tsx
@@ -0,0 +1,92 @@
+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 Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+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>
+  );
+};
+
+export default function TooltipCssVars() {
+  return (
+    <CssVarsProvider>
+      <CssBaseline />
+      <Container sx={{ my: 5 }}>
+        <Box sx={{ pb: 2 }}>
+          <ColorSchemePicker />
+        </Box>
+        <Box
+          sx={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(256px, 1fr))',
+            gridAutoRows: 'minmax(160px, auto)',
+            gap: 2,
+            '& > div': {
+              placeSelf: 'center',
+            },
+          }}
+        >
+          <Box>
+            <Tooltip title="Delete">
+              <IconButton>
+                <DeleteIcon />
+              </IconButton>
+            </Tooltip>
+          </Box>
+          <Box>
+            <Tooltip title="With Arrow" arrow>
+              <Button>With Arrow</Button>
+            </Tooltip>
+          </Box>
+          <Box>
+            <Tooltip title="Top Start" placement="top-start">
+              <Button>top-start</Button>
+            </Tooltip>
+          </Box>
+          <Box>
+            <Tooltip title="Top" placement="top" open>
+              <Button>top</Button>
+            </Tooltip>
+          </Box>
+          <Box>
+            <Tooltip title="Top End" placement="top-end" open>
+              <Button>top-end</Button>
+            </Tooltip>
+          </Box>
+        </Box>
+      </Container>
+    </CssVarsProvider>
+  );
+}
diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -52,7 +52,7 @@ const TooltipPopper = styled(Popper, {
     ];
   },
 })(({ theme, ownerState, open }) => ({
-  zIndex: theme.zIndex.tooltip,
+  zIndex: (theme.vars || theme).zIndex.tooltip,
   pointerEvents: 'none', // disable jss-rtl plugin
   ...(!ownerState.disableInteractive && {
     pointerEvents: 'auto',
@@ -118,9 +118,11 @@ const TooltipTooltip = styled('div', {
     ];
   },
 })(({ theme, ownerState }) => ({
-  backgroundColor: alpha(theme.palette.grey[700], 0.92),
-  borderRadius: theme.shape.borderRadius,
-  color: theme.palette.common.white,
+  backgroundColor: theme.vars
+    ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.92)`
+    : alpha(theme.palette.grey[700], 0.92),
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  color: (theme.vars || theme).palette.common.white,
   fontFamily: theme.typography.fontFamily,
   padding: '4px 8px',
   fontSize: theme.typography.pxToRem(11),
@@ -196,7 +198,9 @@ const TooltipArrow = styled('span', {
   width: '1em',
   height: '0.71em' /* = width / sqrt(2) = (length of the hypotenuse) */,
   boxSizing: 'border-box',
-  color: alpha(theme.palette.grey[700], 0.9),
+  color: theme.vars
+    ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.9)`
+    : alpha(theme.palette.grey[700], 0.9),
   '&::before': {
     content: '""',
     margin: 'auto',

diff --git a/packages/mui-material/src/styles/createPalette.d.ts b/packages/mui-material/src/styles/createPalette.d.ts
@@ -121,7 +121,7 @@ export interface PaletteWithChannels {
   warning: PaletteColor & Channels;
   info: PaletteColor & Channels;
   success: PaletteColor & Channels;
-  grey: Color;
+  grey: Color & { darkChannel: string };
   text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string };
   divider: TypeDivider;
   dividerChannel: TypeDivider;

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.js b/packages/mui-material/src/styles/experimental_extendTheme.js
@@ -45,7 +45,6 @@ export default function extendTheme(options = {}, ...args) {
     if (key === 'dark') {
       palette.common.background = palette.common.background || '#000';
       palette.common.onBackground = palette.common.onBackground || '#fff';
-      // console.log(palette.common);
     } else {
       palette.common.background = palette.common.background || '#fff';
       palette.common.onBackground = palette.common.onBackground || '#000';
@@ -56,6 +55,12 @@ export default function extendTheme(options = {}, ...args) {
 
     palette.dividerChannel = colorChannel(palette.divider);
 
+    // special token for Tooltip
+    // TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
+    if (!palette.grey.dark) {
+      palette.grey.dark = palette.grey[700];
+    }
+
     Object.keys(palette).forEach((color) => {
       const colors = palette[color];
 

diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js
@@ -82,6 +82,32 @@ describe('experimental_extendTheme', () => {
     expect(theme.colorSchemes.dark.palette.dividerChannel).to.equal('255 255 255');
 
     expect(theme.colorSchemes.light.palette.dividerChannel).to.equal('0 0 0');
+
+    expect(theme.colorSchemes.light.palette.grey.darkChannel).to.equal('97 97 97');
+    expect(theme.colorSchemes.dark.palette.grey.darkChannel).to.equal('97 97 97');
+  });
+
+  it('should change grey darkChannel', () => {
+    const theme = extendTheme({
+      colorSchemes: {
+        light: {
+          palette: {
+            grey: {
+              dark: '#888',
+            },
+          },
+        },
+        dark: {
+          palette: {
+            grey: {
+              dark: '#999',
+            },
+          },
+        },
+      },
+    });
+    expect(theme.colorSchemes.light.palette.grey.darkChannel).to.equal('136 136 136');
+    expect(theme.colorSchemes.dark.palette.grey.darkChannel).to.equal('153 153 153');
   });
 
   it('should generate common background, onBackground channels', () => {