Use new @reach/tooltip
Brian Vaughn committed
Apr 20, 2019 at 14:20 UTC
403bf49a78c9c1b0ed0ebb919a32f101933f108c
18 files changed
+95
-223
package.json
+2
-4
@@ -66,9 +66,6 @@
66
],
67
"**/*.js": "eslint --max-warnings 0"
68
},
69
- "resolutions": {
70
- "@reach/portal": "file:./vendor/@reach/portal"
71
- },
69
"dependencies": {
70
"@babel/core": "^7.1.6",
71
"@babel/plugin-proposal-class-properties": "^7.1.0",
@@ -76,7 +73,8 @@
73
"@babel/preset-env": "^7.1.6",
74
"@babel/preset-flow": "^7.0.0",
75
"@babel/preset-react": "^7.0.0",
79
- "@reach/menu-button": "^0.1.9",
76
+ "@reach/menu-button": "^0.1.12",
77
+ "@reach/tooltip": "^0.1.1",
78
"adm-zip": "^0.4.7",
79
"babel-core": "^7.0.0-bridge",
80
"babel-eslint": "^9.0.0",
shells/dev/index.html
-1
@@ -13,7 +13,6 @@
13
height: 400px;
14
max-height: 50%;
15
overflow: hidden;
16
- z-index: 10000001;
16
}
17
body {
18
display: flex;
src/devtools/views/Button.css
-1
@@ -6,7 +6,6 @@
6
display: inline-flex;
7
align-items: center;
8
padding: 0.25rem;
9
- cursor: pointer;
9
flex: 0 0 auto;
10
}
11
.Button:hover {
src/devtools/views/Button.js
+16
-2
@@ -1,14 +1,28 @@
1
// @flow
2
3
import React from 'react';
4
+import Tooltip from '@reach/tooltip';
5
6
import styles from './Button.css';
7
+import tooltipStyles from './Tooltip.css';
8
9
type Props = {
10
className?: string,
11
title: string,
12
};
13
12
-export default function Button({ className, ...rest }: Props) {
13
- return <button className={`${styles.Button} ${className || ''}`} {...rest} />;
14
+export default function Button({ className, title, ...rest }: Props) {
15
+ let button = (
16
+ <button className={`${styles.Button} ${className || ''}`} {...rest} />
17
+ );
18
+
19
+ if (title) {
20
+ button = (
21
+ <Tooltip className={tooltipStyles.Tooltip} label={title}>
22
+ {button}
23
+ </Tooltip>
24
+ );
25
+ }
26
+
27
+ return button;
28
}
src/devtools/views/Components/OwnersStack.js
+6
-3
@@ -7,6 +7,7 @@ import React, {
7
useState,
8
} from 'react';
9
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
10
+import Tooltip from '@reach/tooltip';
11
import Button from '../Button';
12
import ButtonIcon from '../ButtonIcon';
13
import { TreeContext } from './TreeContext';
@@ -93,9 +94,11 @@ function ElementsDropdown({
94
95
return (
96
<Menu>
96
- <MenuButton className={styles.MenuButton} title="Open elements dropdown">
97
- <ButtonIcon type="more" />
98
- </MenuButton>
97
+ <Tooltip label="Open elements dropdown">
98
+ <MenuButton className={styles.MenuButton}>
99
+ <ButtonIcon type="more" />
100
+ </MenuButton>
101
+ </Tooltip>
102
<MenuList className={styles.Modal}>
103
{ownerStack.map((id, index) => (
104
<MenuItem
src/devtools/views/DevTools.js
+5
-1
@@ -1,5 +1,10 @@
1
// @flow
2
3
+// Reach styles need to come before any component styles.
4
+// This makes overridding the styles simpler.
5
+import '@reach/menu-button/styles.css';
6
+import '@reach/tooltip/styles.css';
7
+
8
import React, { useEffect, useState } from 'react';
9
import Store from '../store';
10
import { BridgeContext, StoreContext } from './context';
@@ -14,7 +19,6 @@ import ReactLogo from './ReactLogo';
19
20
import styles from './DevTools.css';
21
17
-import '@reach/menu-button/styles.css';
22
import './root.css';
23
24
import type { Bridge } from '../../types';
src/devtools/views/Settings/SettingsContext.js
+2
@@ -247,6 +247,8 @@ function updateThemeVariables(
247
updateStyleHelper(theme, 'color-search-match', documentElements);
248
updateStyleHelper(theme, 'color-search-match-current', documentElements);
249
updateStyleHelper(theme, 'color-text-color', documentElements);
250
+ updateStyleHelper(theme, 'color-tooltip-background', documentElements);
251
+ updateStyleHelper(theme, 'color-tooltip-text', documentElements);
252
253
// Font smoothing varies based on the theme.
254
updateStyleHelper(theme, 'font-smoothing', documentElements);
src/devtools/views/Toggle.css
-1
@@ -5,7 +5,6 @@
5
display: inline-flex;
6
align-items: center;
7
padding: 0.25rem;
8
- cursor: pointer;
8
flex: 0 0 auto;
9
}
10
src/devtools/views/Toggle.js
+14
-2
@@ -1,8 +1,10 @@
1
// @flow
2
3
import React, { useCallback } from 'react';
4
+import Tooltip from '@reach/tooltip';
5
6
import styles from './Toggle.css';
7
+import tooltipStyles from './Tooltip.css';
8
9
type Props = {
10
children: React$Node,
@@ -37,8 +39,8 @@ export default function Toggle({
39
[onChange]
40
);
41
40
- return (
41
- <label className={`${defaultClassName} ${className}`} title={title}>
42
+ let toggle = (
43
+ <label className={`${defaultClassName} ${className}`}>
44
<input
45
type="checkbox"
46
className={styles.Input}
@@ -49,4 +51,14 @@ export default function Toggle({
51
{children}
52
</label>
53
);
54
+
55
+ if (title) {
56
+ toggle = (
57
+ <Tooltip className={tooltipStyles.Tooltip} label={title}>
58
+ {toggle}
59
+ </Tooltip>
60
+ );
61
+ }
62
+
63
+ return toggle;
64
}
src/devtools/views/Tooltip.css
new
+8
@@ -0,0 +1,8 @@
1
+.Tooltip {
2
+ border: none;
3
+ border-radius: 0.25rem;
4
+ padding: 0.25rem 0.5rem;
5
+ font-size: 12px;
6
+ background-color: var(--color-tooltip-background);
7
+ color: var(--color-tooltip-text);
8
+}
src/devtools/views/root.css
+4
@@ -48,6 +48,8 @@
48
--light-color-selected-border: #0088fa;
49
--light-color-selected-foreground: #ffffff;
50
--light-color-text-color: #000000;
51
+ --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
52
+ --light-color-tooltip-text: #ffffff;
53
54
/* Dark theme */
55
--dark-color-attribute-name: #9d87d2;
@@ -94,6 +96,8 @@
96
--dark-color-selected-border: #178fb9;
97
--dark-color-selected-foreground: #ffffff;
98
--dark-color-text-color: #ffffff;
99
+ --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
100
+ --dark-color-tooltip-text: #000000;
101
102
/* Font smoothing */
103
--light-font-smoothing: auto;
vendor/@reach/portal/.eslintignore
deleted
-1
@@ -1 +0,0 @@
1
-index.js
\ No newline at end of file
vendor/@reach/portal/es/index.js
deleted
-44
@@ -1,44 +0,0 @@
1
-import React from "react";
2
-import { createPortal } from "react-dom";
3
-import Component from "@reach/component-component";
4
-
5
-var Portal = function Portal(_ref) {
6
- var children = _ref.children,
7
- _ref$type = _ref.type,
8
- type = _ref$type === undefined ? "reach-portal" : _ref$type;
9
- return React.createElement(Component, {
10
- getRefs: function getRefs() {
11
- return { mountNode: null, portalNode: null };
12
- },
13
- didMount: function didMount(_ref2) {
14
- var refs = _ref2.refs,
15
- forceUpdate = _ref2.forceUpdate;
16
-
17
- // It's possible that the content we are portal has, itself, been portaled.
18
- // In that case, it's important to append to the correct document element.
19
- var ownerDocument = refs.mountNode.ownerDocument;
20
- refs.portalNode = ownerDocument.createElement(type);
21
- ownerDocument.body.appendChild(refs.portalNode);
22
- forceUpdate();
23
- },
24
- willUnmount: function willUnmount(_ref3) {
25
- var portalNode = _ref3.refs.portalNode;
26
-
27
- portalNode.ownerDocument.body.removeChild(portalNode);
28
- },
29
- render: function render(_ref4) {
30
- var refs = _ref4.refs;
31
- var portalNode = refs.portalNode;
32
-
33
- if (!portalNode) {
34
- return React.createElement("div", { ref: function ref(div) {
35
- return refs.mountNode = div;
36
- } });
37
- } else {
38
- return createPortal(children, portalNode);
39
- }
40
- }
41
- });
42
-};
43
-
44
-export default Portal;
\ No newline at end of file
vendor/@reach/portal/examples/basic.example.js
deleted
-35
@@ -1,35 +0,0 @@
1
-import React from "react";
2
-import Portal from "../src/index";
3
-
4
-export let name = "Basic";
5
-
6
-export let Example = () => (
7
- <div
8
- style={{
9
- height: 40,
10
- overflow: "auto"
11
- }}
12
- >
13
- <div style={{ border: "solid 5px", padding: 20, marginLeft: 170 }}>
14
- This is in the normal react root, with an overflow hidden parent, clips
15
- the box.
16
- </div>
17
- <Portal>
18
- <div
19
- style={{
20
- position: "absolute",
21
- top: 0,
22
- left: 20,
23
- width: 100,
24
- border: "solid 5px",
25
- padding: 20,
26
- background: "#f0f0f0"
27
- }}
28
- >
29
- This is in the portal, rendered in the DOM at the document root so the
30
- CSS doesn't screw things up, but we render it in the react hierarchy
31
- where it makes sense.
32
- </div>
33
- </Portal>
34
- </div>
35
-);
vendor/@reach/portal/index.js
deleted
-56
@@ -1,56 +0,0 @@
1
-"use strict";
2
-
3
-exports.__esModule = true;
4
-
5
-var _react = require("react");
6
-
7
-var _react2 = _interopRequireDefault(_react);
8
-
9
-var _reactDom = require("react-dom");
10
-
11
-var _componentComponent = require("@reach/component-component");
12
-
13
-var _componentComponent2 = _interopRequireDefault(_componentComponent);
14
-
15
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
-
17
-var Portal = function Portal(_ref) {
18
- var children = _ref.children,
19
- _ref$type = _ref.type,
20
- type = _ref$type === undefined ? "reach-portal" : _ref$type;
21
- return _react2.default.createElement(_componentComponent2.default, {
22
- getRefs: function getRefs() {
23
- return { mountNode: null, portalNode: null };
24
- },
25
- didMount: function didMount(_ref2) {
26
- var refs = _ref2.refs,
27
- forceUpdate = _ref2.forceUpdate;
28
-
29
- // It's possible that the content we are portal has, itself, been portaled.
30
- // In that case, it's important to append to the correct document element.
31
- var ownerDocument = refs.mountNode.ownerDocument;
32
- refs.portalNode = ownerDocument.createElement(type);
33
- ownerDocument.body.appendChild(refs.portalNode);
34
- forceUpdate();
35
- },
36
- willUnmount: function willUnmount(_ref3) {
37
- var portalNode = _ref3.refs.portalNode;
38
-
39
- portalNode.ownerDocument.body.removeChild(portalNode);
40
- },
41
- render: function render(_ref4) {
42
- var refs = _ref4.refs;
43
- var portalNode = refs.portalNode;
44
-
45
- if (!portalNode) {
46
- return _react2.default.createElement("div", { ref: function ref(div) {
47
- return refs.mountNode = div;
48
- } });
49
- } else {
50
- return (0, _reactDom.createPortal)(children, portalNode);
51
- }
52
- }
53
- });
54
-};
55
-
56
-exports.default = Portal;
\ No newline at end of file
vendor/@reach/portal/package.json
deleted
-28
@@ -1,28 +0,0 @@
1
-{
2
- "name": "@reach/portal",
3
- "version": "0.1.3",
4
- "description": "Declarative portals for React",
5
- "main": "index.js",
6
- "module": "es/index.js",
7
- "scripts": {
8
- "test": "echo \"Write some tests you bum!\"",
9
- "build": "node ../../shared/build-package",
10
- "lint": "eslint . --max-warnings=0"
11
- },
12
- "dependencies": {
13
- "@reach/component-component": "^0.1.3"
14
- },
15
- "peerDependencies": {
16
- "react": "^16.4.0",
17
- "react-dom": "^16.4.0"
18
- },
19
- "author": "",
20
- "license": "MIT",
21
- "files": [
22
- "es",
23
- "src",
24
- "lib",
25
- "index.js",
26
- "styles.css"
27
- ]
28
-}
vendor/@reach/portal/src/index.js
deleted
-30
@@ -1,30 +0,0 @@
1
-import React from "react";
2
-import { createPortal } from "react-dom";
3
-import Component from "@reach/component-component";
4
-
5
-let Portal = ({ children, type = "reach-portal" }) => (
6
- <Component
7
- getRefs={() => ({ mountNode: null, portalNode: null })}
8
- didMount={({ refs, forceUpdate }) => {
9
- // It's possible that the content we are portal has, itself, been portaled.
10
- // In that case, it's important to append to the correct document element.
11
- const ownerDocument = refs.mountNode.ownerDocument;
12
- refs.portalNode = ownerDocument.createElement(type);
13
- ownerDocument.body.appendChild(refs.portalNode);
14
- forceUpdate();
15
- }}
16
- willUnmount={({ refs: { portalNode } }) => {
17
- portalNode.ownerDocument.body.removeChild(portalNode);
18
- }}
19
- render={({ refs }) => {
20
- const { portalNode } = refs;
21
- if (!portalNode) {
22
- return <div ref={div => (refs.mountNode = div)} />;
23
- } else {
24
- return createPortal(children, portalNode);
25
- }
26
- }}
27
- />
28
-);
29
-
30
-export default Portal;
yarn.lock
+38
-14
@@ -998,19 +998,24 @@
998
"@types/istanbul-lib-coverage" "^2.0.0"
999
"@types/yargs" "^12.0.9"
1000
1001
+"@reach/auto-id@0.2.0":
1002
+ version "0.2.0"
1003
+ resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
1004
+ integrity sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg==
1005
+
1006
"@reach/component-component@^0.1.3":
1007
version "0.1.3"
1008
resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
1009
integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==
1010
1006
-"@reach/menu-button@^0.1.9":
1007
- version "0.1.9"
1008
- resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.9.tgz#d5957f69efa51d29beb4239403eabf49f9a4bb3e"
1009
- integrity sha512-894lhzcCpaGJKvmCuUX8AJ7xg0Ov/xRKKR5RRVJUroHYuWNuvgZSluO657Y2fNaMKgG0LPqLrtOGUq2CN0golg==
1011
+"@reach/menu-button@^0.1.12":
1012
+ version "0.1.12"
1013
+ resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.12.tgz#209b52ddf0b329e4c0f6712c4d7fec88c433c344"
1014
+ integrity sha512-16D1K9+NAfGdH4bZ3cJ721BKfp0cVvkv1lMNFLcp125ZcLTSaGXRnpUmpD+F1BJFCgP6g2cP+4MQxfiHMJ9IXg==
1015
dependencies:
1016
"@reach/component-component" "^0.1.3"
1012
- "@reach/portal" "^0.1.3"
1013
- "@reach/rect" "^0.2.0"
1017
+ "@reach/portal" "^0.2.0"
1018
+ "@reach/rect" "^0.2.1"
1019
"@reach/router" "^1.1.0"
1020
"@reach/utils" "^0.2.0"
1021
"@reach/window-size" "^0.1.3"
@@ -1021,15 +1026,17 @@
1026
resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
1027
integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
1028
1024
-"@reach/portal@^0.1.3", "@reach/portal@file:./vendor/@reach/portal":
1025
- version "0.1.3"
1029
+"@reach/portal@^0.2.0":
1030
+ version "0.2.0"
1031
+ resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.2.0.tgz#668a6d47ff749d81c2c6804c58c42323b31ac4fe"
1032
+ integrity sha512-d+4m9LACj3uShSKsMDjKuR1Pw54lzYCh1h6kOvfkpdgLqOZEk/8RvjDCWLvQzvPJIgzCWVAA/Db55xDgOaOYQA==
1033
dependencies:
1034
"@reach/component-component" "^0.1.3"
1035
1029
-"@reach/rect@^0.2.0":
1030
- version "0.2.0"
1031
- resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.0.tgz#3e8dd4e2188294228ea223223a956885a8a33472"
1032
- integrity sha512-/C0r28VC/0dJ7ehKqkiebU7WvyiqXw5ViWC4KUWQRVTwauLENmslJ3jgEDUQZn6M3Ko63owaMZ2/rAivFfpIGQ==
1036
+"@reach/rect@^0.2.1":
1037
+ version "0.2.1"
1038
+ resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.1.tgz#7343020174c90e2290b844d17c03fd9c78e6b601"
1039
+ integrity sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==
1040
dependencies:
1041
"@reach/component-component" "^0.1.3"
1042
"@reach/observe-rect" "^1.0.3"
@@ -1045,11 +1052,28 @@
1052
react-lifecycles-compat "^3.0.4"
1053
warning "^3.0.0"
1054
1048
-"@reach/utils@^0.2.0":
1055
+"@reach/tooltip@^0.1.1":
1056
+ version "0.1.1"
1057
+ resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.1.1.tgz#7f0385624eaffabcd4f075a098ef0fe4b472ce5d"
1058
+ integrity sha512-EawPeRdeajl5HwtM8Q1rz0aNzOgRKnbs4GNW4tUa/6+F8yN93nZGxfYyefYGQgjzVOd0HdgeatUVqDQMgcldYA==
1059
+ dependencies:
1060
+ "@reach/auto-id" "0.2.0"
1061
+ "@reach/portal" "^0.2.0"
1062
+ "@reach/rect" "^0.2.1"
1063
+ "@reach/utils" "0.2.0"
1064
+ "@reach/visually-hidden" "^0.1.3"
1065
+ prop-types "^15.7.2"
1066
+
1067
+"@reach/utils@0.2.0", "@reach/utils@^0.2.0":
1068
version "0.2.0"
1069
resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.0.tgz#504e84613b4aed7adf189aaa6b9d110b282ec523"
1070
integrity sha512-AIfX18Ska78d4SjLt4awYHsgXEIVHhOUxLtxze2XT0D5aPOPx1XJl0seRZfQI0EVod4K1KVvHJnskEYSXqKQQg==
1071
1072
+"@reach/visually-hidden@^0.1.3":
1073
+ version "0.1.3"
1074
+ resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.3.tgz#96f6ac9a0b62723b2f3e7d384b6143d49b45105a"
1075
+ integrity sha512-kOmRRmUnWDsdKg6FIkljWk0Oc5v+SFCD5iVoF4moRRIJN/UvwxS2j6CqtCMlur8pc6KRi+D0mkO91nUzwQTYTg==
1076
+
1077
"@reach/window-size@^0.1.3":
1078
version "0.1.3"
1079
resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.3.tgz#eaf8ed8265cf20321a83037d2ab32dad936e79bd"
@@ -9013,7 +9037,7 @@ prompts@^2.0.1:
9037
kleur "^3.0.2"
9038
sisteransi "^1.0.0"
9039
9016
-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
9040
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
9041
version "15.7.2"
9042
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
9043
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==