@samitouri / QOS-React-2 / commits / 2db6d6a5a7

fix(devtools): expose css vars to reach-ui portal components (#22716)

Yash Joshi committed Nov 9, 2021 at 01:47 UTC 2db6d6a5a7a2ecf74610d5a55732d6753b15b836
11 files changed +112 -85
packages/react-devtools-shared/src/devtools/views/Button.js
+2 -7
@@ -8,10 +8,9 @@
8 */
9
10 import * as React from 'react';
11 -import Tooltip from '@reach/tooltip';
11
12 import styles from './Button.css';
14 -import tooltipStyles from './Tooltip.css';
13 +import Tooltip from './Components/reach-ui/tooltip';
14
15 type Props = {
16 children: React$Node,
@@ -35,11 +34,7 @@ export default function Button({
34 );
35
36 if (title) {
38 - button = (
39 - <Tooltip className={tooltipStyles.Tooltip} label={title}>
40 - {button}
41 - </Tooltip>
42 - );
37 + button = <Tooltip label={title}>{button}</Tooltip>;
38 }
39
40 return button;
packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+7 -2
@@ -16,8 +16,6 @@ import {
16 useRef,
17 useState,
18 } from 'react';
19 -import Tooltip from '@reach/tooltip';
20 -import {Menu, MenuList, MenuButton, MenuItem} from '@reach/menu-button';
19 import Button from '../Button';
20 import ButtonIcon from '../ButtonIcon';
21 import Toggle from '../Toggle';
@@ -26,6 +24,13 @@ import {OwnersListContext} from './OwnersListContext';
24 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
25 import {useIsOverflowing} from '../hooks';
26 import {StoreContext} from '../context';
27 +import Tooltip from '../Components/reach-ui/tooltip';
28 +import {
29 + Menu,
30 + MenuList,
31 + MenuButton,
32 + MenuItem,
33 +} from '../Components/reach-ui/menu-button';
34
35 import type {SerializedElement} from './types';
36
packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css renamed
packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js new
+28
@@ -0,0 +1,28 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +import * as React from 'react';
11 +import {
12 + Menu,
13 + MenuList as ReachMenuList,
14 + MenuButton,
15 + MenuItem,
16 +} from '@reach/menu-button';
17 +import useThemeStyles from '../../useThemeStyles';
18 +
19 +const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
20 + const style = useThemeStyles();
21 + return (
22 + <ReachMenuList style={style} {...props}>
23 + {children}
24 + </ReachMenuList>
25 + );
26 +};
27 +
28 +export {MenuItem, MenuButton, MenuList, Menu};
packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js new
+35
@@ -0,0 +1,35 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +import * as React from 'react';
11 +import ReachTooltip from '@reach/tooltip';
12 +import tooltipStyles from './Tooltip.css';
13 +import useThemeStyles from '../../useThemeStyles';
14 +
15 +const Tooltip = ({
16 + children,
17 + className = '',
18 + ...props
19 +}: {
20 + children: React$Node,
21 + className: string,
22 + ...
23 +}) => {
24 + const style = useThemeStyles();
25 + return (
26 + <ReachTooltip
27 + className={`${tooltipStyles.Tooltip} ${className}`}
28 + style={style}
29 + {...props}>
30 + {children}
31 + </ReachTooltip>
32 + );
33 +};
34 +
35 +export default Tooltip;
packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
-28
@@ -248,28 +248,6 @@ function SettingsContextController({
248 );
249 }
250
251 -function setStyleVariable(
252 - name: string,
253 - value: string,
254 - documentElements: DocumentElements,
255 -) {
256 - documentElements.forEach(documentElement =>
257 - documentElement.style.setProperty(name, value),
258 - );
259 -}
260 -
261 -function updateStyleHelper(
262 - themeKey: string,
263 - style: string,
264 - documentElements: DocumentElements,
265 -) {
266 - setStyleVariable(
267 - `--${style}`,
268 - `var(--${themeKey}-${style})`,
269 - documentElements,
270 - );
271 -}
272 -
251 export function updateDisplayDensity(
252 displayDensity: DisplayDensity,
253 documentElements: DocumentElements,
@@ -296,12 +274,6 @@ export function updateThemeVariables(
274 // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
275 documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
276 });
299 -
300 - // The ThemeProvider works by writing DOM style variables to an HTMLDivElement.
301 - // Because Portals render in a different DOM subtree, these variables don't propagate.
302 - // So we need to also set @reach/tooltip specific styles on the root.
303 - updateStyleHelper(theme, 'color-tooltip-background', documentElements);
304 - updateStyleHelper(theme, 'color-tooltip-text', documentElements);
277 }
278
279 export {SettingsContext, SettingsContextController};
packages/react-devtools-shared/src/devtools/views/TabBar.js
+2 -3
@@ -9,11 +9,10 @@
9
10 import * as React from 'react';
11 import {Fragment, useCallback} from 'react';
12 -import Tooltip from '@reach/tooltip';
12 import Icon from './Icon';
13
14 import styles from './TabBar.css';
16 -import tooltipStyles from './Tooltip.css';
15 +import Tooltip from './Components/reach-ui/tooltip';
16
17 import type {IconType} from './Icon';
18
@@ -127,7 +126,7 @@ export default function TabBar({
126
127 if (title) {
128 button = (
130 - <Tooltip key={id} className={tooltipStyles.Tooltip} label={title}>
129 + <Tooltip key={id} label={title}>
130 {button}
131 </Tooltip>
132 );
packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+7 -11
@@ -8,22 +8,18 @@
8 */
9
10 import * as React from 'react';
11 -import {useContext, useMemo} from 'react';
12 -import {SettingsContext} from './Settings/SettingsContext';
13 -import {THEME_STYLES} from '../../constants';
11 +import useThemeStyles from './useThemeStyles';
12
13 export default function ThemeProvider({children}: {|children: React$Node|}) {
16 - const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
14 + const themeStyle = useThemeStyles();
15
18 - const style = useMemo(
19 - () => ({
16 + const style = React.useMemo(() => {
17 + return {
18 + ...themeStyle,
19 width: '100%',
20 height: '100%',
22 - ...THEME_STYLES[displayDensity],
23 - ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
24 - }),
25 - [theme, browserTheme, displayDensity],
26 - );
21 + };
22 + }, [themeStyle]);
23
24 return <div style={style}>{children}</div>;
25 }
packages/react-devtools-shared/src/devtools/views/Toggle.js
+2 -7
@@ -9,10 +9,9 @@
9
10 import * as React from 'react';
11 import {useCallback} from 'react';
12 -import Tooltip from '@reach/tooltip';
12
13 import styles from './Toggle.css';
15 -import tooltipStyles from './Tooltip.css';
14 +import Tooltip from './Components/reach-ui/tooltip';
15
16 type Props = {
17 children: React$Node,
@@ -58,11 +57,7 @@ export default function Toggle({
57 );
58
59 if (title) {
61 - toggle = (
62 - <Tooltip className={tooltipStyles.Tooltip} label={title}>
63 - {toggle}
64 - </Tooltip>
65 - );
60 + toggle = <Tooltip label={title}>{toggle}</Tooltip>;
61 }
62
63 return toggle;
packages/react-devtools-shared/src/devtools/views/root.css
+1 -27
@@ -1,36 +1,10 @@
1 :root {
2 - /**
3 - * The light and dark theme styles below should be kept in sync with 'react-devtools-shared/src/constants'
4 - * They are repeated here because they're used by e.g. tooltips or context menus
5 - * which get rendered outside of the DOM subtree (where normal theme/styles are written).
6 - */
7 -
8 - /* Light theme */
9 - --light-color-scroll-thumb: #c2c2c2;
10 - --light-color-scroll-track: #fafafa;
11 - --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
12 - --light-color-tooltip-text: #ffffff;
13 -
14 - /* Dark theme */
15 - --dark-color-scroll-thumb: #afb3b9;
16 - --dark-color-scroll-track: #313640;
17 - --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
18 - --dark-color-tooltip-text: #000000;
19 -
2 /* Font smoothing */
3 --font-smoothing: auto;
4
23 - /* Compact density */
24 - --compact-line-height-data: 18px;
25 - --compact-root-font-size: 16px;
26 -
27 - /* Comfortable density */
28 - --comfortable-line-height-data: 22px;
29 - --comfortable-root-font-size: 20px;
30 -
5 /* GitHub.com system fonts */
6 --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
7 Courier, monospace;
8 --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
9 Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
36 -}
\ No newline at end of file
10 +}
packages/react-devtools-shared/src/devtools/views/useThemeStyles.js new
+28
@@ -0,0 +1,28 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +import {useContext, useMemo} from 'react';
11 +import {SettingsContext} from './Settings/SettingsContext';
12 +import {THEME_STYLES} from '../../constants';
13 +
14 +const useThemeStyles = () => {
15 + const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
16 +
17 + const style = useMemo(
18 + () => ({
19 + ...THEME_STYLES[displayDensity],
20 + ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
21 + }),
22 + [theme, browserTheme, displayDensity],
23 + );
24 +
25 + return style;
26 +};
27 +
28 +export default useThemeStyles;