{"parents":["99a73ac670ce8d71ae8a690e9795d35cbdfa20b6"],"commit":{"revision":"2db6d6a5a7a2ecf74610d5a55732d6753b15b836","shortRevision":"2db6d6a5a7","authorEmail":"jyash97@gmail.com","authoredAt":"2021-11-09T01:47:22+05:30","authorName":"Yash Joshi","subject":"fix(devtools): expose css vars to reach-ui portal components (#22716)"},"body":"","files":[{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Button.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersStack.js"},{"previousPath":"packages\/react-devtools-shared\/src\/devtools\/views\/Tooltip.css","status":"R100","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/Tooltip.css"},{"status":"A","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/menu-button.js"},{"status":"A","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/tooltip.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/ThemeProvider.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/Toggle.js"},{"status":"M","path":"packages\/react-devtools-shared\/src\/devtools\/views\/root.css"},{"status":"A","path":"packages\/react-devtools-shared\/src\/devtools\/views\/useThemeStyles.js"}],"patch":"diff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Button.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Button.js\nindex 0d706fc2eb..aa006cbbc7 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Button.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Button.js\n@@ -8,10 +8,9 @@\n *\/\n \n import * as React from 'react';\n-import Tooltip from '@reach\/tooltip';\n \n import styles from '.\/Button.css';\n-import tooltipStyles from '.\/Tooltip.css';\n+import Tooltip from '.\/Components\/reach-ui\/tooltip';\n \n type Props = {\n children: React$Node,\n@@ -35,11 +34,7 @@ export default function Button({\n );\n \n if (title) {\n- button = (\n- \n- {button}\n- <\/Tooltip>\n- );\n+ button = {button}<\/Tooltip>;\n }\n \n return button;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersStack.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersStack.js\nindex d7efafee6c..cc9c43fd77 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersStack.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -16,8 +16,6 @@ import {\n useRef,\n useState,\n } from 'react';\n-import Tooltip from '@reach\/tooltip';\n-import {Menu, MenuList, MenuButton, MenuItem} from '@reach\/menu-button';\n import Button from '..\/Button';\n import ButtonIcon from '..\/ButtonIcon';\n import Toggle from '..\/Toggle';\n@@ -26,6 +24,13 @@ import {OwnersListContext} from '.\/OwnersListContext';\n import {TreeDispatcherContext, TreeStateContext} from '.\/TreeContext';\n import {useIsOverflowing} from '..\/hooks';\n import {StoreContext} from '..\/context';\n+import Tooltip from '..\/Components\/reach-ui\/tooltip';\n+import {\n+ Menu,\n+ MenuList,\n+ MenuButton,\n+ MenuItem,\n+} from '..\/Components\/reach-ui\/menu-button';\n \n import type {SerializedElement} from '.\/types';\n \ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Tooltip.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/Tooltip.css\nsimilarity index 100%\nrename from packages\/react-devtools-shared\/src\/devtools\/views\/Tooltip.css\nrename to packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/Tooltip.css\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/menu-button.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/menu-button.js\nnew file mode 100644\nindex 0000000000..cee8021a19\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/menu-button.js\n@@ -0,0 +1,28 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import * as React from 'react';\n+import {\n+ Menu,\n+ MenuList as ReachMenuList,\n+ MenuButton,\n+ MenuItem,\n+} from '@reach\/menu-button';\n+import useThemeStyles from '..\/..\/useThemeStyles';\n+\n+const MenuList = ({children, ...props}: {children: React$Node, ...}) => {\n+ const style = useThemeStyles();\n+ return (\n+ \n+ {children}\n+ <\/ReachMenuList>\n+ );\n+};\n+\n+export {MenuItem, MenuButton, MenuList, Menu};\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/tooltip.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/tooltip.js\nnew file mode 100644\nindex 0000000000..d3f07258c8\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Components\/reach-ui\/tooltip.js\n@@ -0,0 +1,35 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import * as React from 'react';\n+import ReachTooltip from '@reach\/tooltip';\n+import tooltipStyles from '.\/Tooltip.css';\n+import useThemeStyles from '..\/..\/useThemeStyles';\n+\n+const Tooltip = ({\n+ children,\n+ className = '',\n+ ...props\n+}: {\n+ children: React$Node,\n+ className: string,\n+ ...\n+}) => {\n+ const style = useThemeStyles();\n+ return (\n+ \n+ {children}\n+ <\/ReachTooltip>\n+ );\n+};\n+\n+export default Tooltip;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js\nindex 7f8cfe614b..09c815b49b 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Settings\/SettingsContext.js\n@@ -248,28 +248,6 @@ function SettingsContextController({\n );\n }\n \n-function setStyleVariable(\n- name: string,\n- value: string,\n- documentElements: DocumentElements,\n-) {\n- documentElements.forEach(documentElement =>\n- documentElement.style.setProperty(name, value),\n- );\n-}\n-\n-function updateStyleHelper(\n- themeKey: string,\n- style: string,\n- documentElements: DocumentElements,\n-) {\n- setStyleVariable(\n- `--${style}`,\n- `var(--${themeKey}-${style})`,\n- documentElements,\n- );\n-}\n-\n export function updateDisplayDensity(\n displayDensity: DisplayDensity,\n documentElements: DocumentElements,\n@@ -296,12 +274,6 @@ export function updateThemeVariables(\n \/\/ $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration\n documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;\n });\n-\n- \/\/ The ThemeProvider works by writing DOM style variables to an HTMLDivElement.\n- \/\/ Because Portals render in a different DOM subtree, these variables don't propagate.\n- \/\/ So we need to also set @reach\/tooltip specific styles on the root.\n- updateStyleHelper(theme, 'color-tooltip-background', documentElements);\n- updateStyleHelper(theme, 'color-tooltip-text', documentElements);\n }\n \n export {SettingsContext, SettingsContextController};\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js\nindex c195710a42..32bd32827f 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/TabBar.js\n@@ -9,11 +9,10 @@\n \n import * as React from 'react';\n import {Fragment, useCallback} from 'react';\n-import Tooltip from '@reach\/tooltip';\n import Icon from '.\/Icon';\n \n import styles from '.\/TabBar.css';\n-import tooltipStyles from '.\/Tooltip.css';\n+import Tooltip from '.\/Components\/reach-ui\/tooltip';\n \n import type {IconType} from '.\/Icon';\n \n@@ -127,7 +126,7 @@ export default function TabBar({\n \n if (title) {\n button = (\n- \n+ \n {button}\n <\/Tooltip>\n );\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/ThemeProvider.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/ThemeProvider.js\nindex 8fb93469ad..a353b4c6ee 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/ThemeProvider.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/ThemeProvider.js\n@@ -8,22 +8,18 @@\n *\/\n \n import * as React from 'react';\n-import {useContext, useMemo} from 'react';\n-import {SettingsContext} from '.\/Settings\/SettingsContext';\n-import {THEME_STYLES} from '..\/..\/constants';\n+import useThemeStyles from '.\/useThemeStyles';\n \n export default function ThemeProvider({children}: {|children: React$Node|}) {\n- const {theme, displayDensity, browserTheme} = useContext(SettingsContext);\n+ const themeStyle = useThemeStyles();\n \n- const style = useMemo(\n- () => ({\n+ const style = React.useMemo(() => {\n+ return {\n+ ...themeStyle,\n width: '100%',\n height: '100%',\n- ...THEME_STYLES[displayDensity],\n- ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],\n- }),\n- [theme, browserTheme, displayDensity],\n- );\n+ };\n+ }, [themeStyle]);\n \n return

{children}<\/div>;\n }\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Toggle.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Toggle.js\nindex c5961a9bbf..20e78fee77 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Toggle.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Toggle.js\n@@ -9,10 +9,9 @@\n \n import * as React from 'react';\n import {useCallback} from 'react';\n-import Tooltip from '@reach\/tooltip';\n \n import styles from '.\/Toggle.css';\n-import tooltipStyles from '.\/Tooltip.css';\n+import Tooltip from '.\/Components\/reach-ui\/tooltip';\n \n type Props = {\n children: React$Node,\n@@ -58,11 +57,7 @@ export default function Toggle({\n );\n \n if (title) {\n- toggle = (\n- \n- {toggle}\n- <\/Tooltip>\n- );\n+ toggle = {toggle}<\/Tooltip>;\n }\n \n return toggle;\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css b\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\nindex 9bb749ff23..cbf8ece006 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/root.css\n@@ -1,36 +1,10 @@\n :root {\n- \/**\n- * The light and dark theme styles below should be kept in sync with 'react-devtools-shared\/src\/constants'\n- * They are repeated here because they're used by e.g. tooltips or context menus\n- * which get rendered outside of the DOM subtree (where normal theme\/styles are written).\n- *\/\n-\n- \/* Light theme *\/\n- --light-color-scroll-thumb: #c2c2c2;\n- --light-color-scroll-track: #fafafa;\n- --light-color-tooltip-background: rgba(0, 0, 0, 0.9);\n- --light-color-tooltip-text: #ffffff;\n-\n- \/* Dark theme *\/\n- --dark-color-scroll-thumb: #afb3b9;\n- --dark-color-scroll-track: #313640;\n- --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);\n- --dark-color-tooltip-text: #000000;\n-\n \/* Font smoothing *\/\n --font-smoothing: auto;\n \n- \/* Compact density *\/\n- --compact-line-height-data: 18px;\n- --compact-root-font-size: 16px;\n-\n- \/* Comfortable density *\/\n- --comfortable-line-height-data: 22px;\n- --comfortable-root-font-size: 20px;\n-\n \/* GitHub.com system fonts *\/\n --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,\n Courier, monospace;\n --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,\n Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n-}\n\\ No newline at end of file\n+}\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/useThemeStyles.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/useThemeStyles.js\nnew file mode 100644\nindex 0000000000..009cf1a50d\n--- \/dev\/null\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/useThemeStyles.js\n@@ -0,0 +1,28 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import {useContext, useMemo} from 'react';\n+import {SettingsContext} from '.\/Settings\/SettingsContext';\n+import {THEME_STYLES} from '..\/..\/constants';\n+\n+const useThemeStyles = () => {\n+ const {theme, displayDensity, browserTheme} = useContext(SettingsContext);\n+\n+ const style = useMemo(\n+ () => ({\n+ ...THEME_STYLES[displayDensity],\n+ ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],\n+ }),\n+ [theme, browserTheme, displayDensity],\n+ );\n+\n+ return style;\n+};\n+\n+export default useThemeStyles;\n"}

dillon1000/react

Files changed