[Devtools] Rename Forget badge (#28858)
## Summary The Forget codename needs to be hidden from the UI to avoid confusion. Going forward, we'll be referring to this set of features as part of the larger React compiler. We'll be describing the primary feature that we've built so far as auto-memoization, and this badge helps devs see which components have been automatically memoized by the compiler. ## How did you test this change? - force Forget badge on with and without the presence of other badges - confirm colors/UI in light and dark modes - force badges on for `ElementBadges`, `InspectableElementBadges`, `IndexableElementBadges` - Running yarn start in packages/react-devtools-shell [demo video](https://github.com/facebook/react/assets/973058/fa829018-7644-4425-8395-c5cd84691f3c)
Jason Bonta committed
Apr 18, 2024 at 13:55 UTC
92f5c3ac7bb4b8fa152d69dcecd8d2eec04a7979
5 files changed
+40
-10
packages/react-devtools-shared/src/devtools/constants.js
+9
-5
@@ -77,7 +77,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
77
'--color-error-border': 'hsl(0, 100%, 92%)',
78
'--color-error-text': '#ff0000',
79
'--color-expand-collapse-toggle': '#777d88',
80
- '--color-forget-badge': '#2683E2',
80
+ '--color-forget-badge-background': '#2683e2',
81
+ '--color-forget-badge-background-inverted': '#1a6bbc',
82
+ '--color-forget-text': '#fff',
83
'--color-link': '#0000ff',
84
'--color-modal-background': 'rgba(255, 255, 255, 0.75)',
85
'--color-bridge-version-npm-background': '#eff0f1',
@@ -195,10 +197,10 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
197
'--color-commit-gradient-text': '#000000',
198
'--color-component-name': '#61dafb',
199
'--color-component-name-inverted': '#282828',
198
- '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)',
199
- '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
200
+ '--color-component-badge-background': '#5e6167',
201
+ '--color-component-badge-background-inverted': '#46494e',
202
'--color-component-badge-count': '#8f949d',
201
- '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
203
+ '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.85)',
204
'--color-console-error-badge-text': '#000000',
205
'--color-console-error-background': '#290000',
206
'--color-console-error-border': '#5c0000',
@@ -222,7 +224,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
224
'--color-error-border': '#900',
225
'--color-error-text': '#f55',
226
'--color-expand-collapse-toggle': '#8f949d',
225
- '--color-forget-badge': '#2683E2',
227
+ '--color-forget-badge-background': '#2683e2',
228
+ '--color-forget-badge-background-inverted': '#1a6bbc',
229
+ '--color-forget-text': '#fff',
230
'--color-link': '#61dafb',
231
'--color-modal-background': 'rgba(0, 0, 0, 0.75)',
232
'--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
packages/react-devtools-shared/src/devtools/views/Components/Badge.css
-1
@@ -5,7 +5,6 @@
5
padding: 0.125rem 0.25rem;
6
line-height: normal;
7
border-radius: 0.125rem;
8
- margin-right: 0.25rem;
8
font-family: var(--font-family-monospace);
9
font-size: var(--font-size-monospace-small);
10
}
packages/react-devtools-shared/src/devtools/views/Components/Element.css
+1
@@ -32,6 +32,7 @@
32
--color-component-badge-background: var(
33
--color-component-badge-background-inverted
34
);
35
+ --color-forget-badge-background: var(--color-forget-badge-background-inverted);
36
--color-component-badge-count: var(--color-component-badge-count-inverted);
37
--color-attribute-name: var(--color-attribute-name-inverted);
38
--color-attribute-value: var(--color-attribute-value-inverted);
packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css
+19
-1
@@ -1,3 +1,21 @@
1
.Root {
2
- background-color: var(--color-forget-badge);
2
+ background-color: var(--color-forget-badge-background);
3
+ color: var(--color-forget-text);
4
+ padding-right: 1.75em;
5
+ position: relative;
6
+}
7
+
8
+.Root::after {
9
+ bottom: 0;
10
+ content: '✨';
11
+ position: absolute;
12
+ right: 0.25em;
13
+}
14
+
15
+.ForgetToggle {
16
+ display: flex;
17
+}
18
+
19
+.ForgetToggle > span { /* targets .ToggleContent */
20
+ padding: 0;
21
}
packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js
+11
-3
@@ -11,6 +11,7 @@ import * as React from 'react';
11
12
import Badge from './Badge';
13
import IndexableDisplayName from './IndexableDisplayName';
14
+import Toggle from '../Toggle';
15
16
import styles from './ForgetBadge.css';
17
@@ -34,10 +35,17 @@ export default function ForgetBadge(props: Props): React.Node {
35
const {className = ''} = props;
36
37
const innerView = props.indexable ? (
37
- <IndexableDisplayName displayName="Forget" id={props.elementID} />
38
+ <IndexableDisplayName displayName="Memo" id={props.elementID} />
39
) : (
39
- 'Forget'
40
+ 'Memo'
41
);
42
42
- return <Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>;
43
+ const onChange = () => {};
44
+ const title =
45
+ '✨ This component has been auto-memoized by the React Compiler.';
46
+ return (
47
+ <Toggle onChange={onChange} className={styles.ForgetToggle} title={title}>
48
+ <Badge className={`${styles.Root} ${className}`}>{innerView}</Badge>
49
+ </Toggle>
50
+ );
51
}