From 92f5c3ac7bb4b8fa152d69dcecd8d2eec04a7979 Mon Sep 17 00:00:00 2001 From: Jason Bonta Date: Thu, 18 Apr 2024 13:55:53 -0700 Subject: [PATCH] [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) --- .../src/devtools/constants.js | 14 ++++++++----- .../src/devtools/views/Components/Badge.css | 1 - .../src/devtools/views/Components/Element.css | 1 + .../devtools/views/Components/ForgetBadge.css | 20 ++++++++++++++++++- .../devtools/views/Components/ForgetBadge.js | 14 ++++++++++--- 5 files changed, 40 insertions(+), 10 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/constants.js b/packages/react-devtools-shared/src/devtools/constants.js index bc5323c6389de..173678251411f 100644 --- a/packages/react-devtools-shared/src/devtools/constants.js +++ b/packages/react-devtools-shared/src/devtools/constants.js @@ -77,7 +77,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-error-border': 'hsl(0, 100%, 92%)', '--color-error-text': '#ff0000', '--color-expand-collapse-toggle': '#777d88', - '--color-forget-badge': '#2683E2', + '--color-forget-badge-background': '#2683e2', + '--color-forget-badge-background-inverted': '#1a6bbc', + '--color-forget-text': '#fff', '--color-link': '#0000ff', '--color-modal-background': 'rgba(255, 255, 255, 0.75)', '--color-bridge-version-npm-background': '#eff0f1', @@ -195,10 +197,10 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-commit-gradient-text': '#000000', '--color-component-name': '#61dafb', '--color-component-name-inverted': '#282828', - '--color-component-badge-background': 'rgba(255, 255, 255, 0.25)', - '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)', + '--color-component-badge-background': '#5e6167', + '--color-component-badge-background-inverted': '#46494e', '--color-component-badge-count': '#8f949d', - '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)', + '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.85)', '--color-console-error-badge-text': '#000000', '--color-console-error-background': '#290000', '--color-console-error-border': '#5c0000', @@ -222,7 +224,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = { '--color-error-border': '#900', '--color-error-text': '#f55', '--color-expand-collapse-toggle': '#8f949d', - '--color-forget-badge': '#2683E2', + '--color-forget-badge-background': '#2683e2', + '--color-forget-badge-background-inverted': '#1a6bbc', + '--color-forget-text': '#fff', '--color-link': '#61dafb', '--color-modal-background': 'rgba(0, 0, 0, 0.75)', '--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)', diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.css b/packages/react-devtools-shared/src/devtools/views/Components/Badge.css index 370409aeb9afe..aa0a36fd22762 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.css @@ -5,7 +5,6 @@ padding: 0.125rem 0.25rem; line-height: normal; border-radius: 0.125rem; - margin-right: 0.25rem; font-family: var(--font-family-monospace); font-size: var(--font-size-monospace-small); } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.css b/packages/react-devtools-shared/src/devtools/views/Components/Element.css index ff53776a17597..b11e321e2e6d5 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Element.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.css @@ -32,6 +32,7 @@ --color-component-badge-background: var( --color-component-badge-background-inverted ); + --color-forget-badge-background: var(--color-forget-badge-background-inverted); --color-component-badge-count: var(--color-component-badge-count-inverted); --color-attribute-name: var(--color-attribute-name-inverted); --color-attribute-value: var(--color-attribute-value-inverted); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css index 653a073deaeb3..e80f37083345e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.css @@ -1,3 +1,21 @@ .Root { - background-color: var(--color-forget-badge); + background-color: var(--color-forget-badge-background); + color: var(--color-forget-text); + padding-right: 1.75em; + position: relative; +} + +.Root::after { + bottom: 0; + content: '✨'; + position: absolute; + right: 0.25em; +} + +.ForgetToggle { + display: flex; +} + +.ForgetToggle > span { /* targets .ToggleContent */ + padding: 0; } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js index c31fd70eade2f..00b4f0db13f9b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/ForgetBadge.js @@ -11,6 +11,7 @@ import * as React from 'react'; import Badge from './Badge'; import IndexableDisplayName from './IndexableDisplayName'; +import Toggle from '../Toggle'; import styles from './ForgetBadge.css'; @@ -34,10 +35,17 @@ export default function ForgetBadge(props: Props): React.Node { const {className = ''} = props; const innerView = props.indexable ? ( - + ) : ( - 'Forget' + 'Memo' ); - return {innerView}; + const onChange = () => {}; + const title = + '✨ This component has been auto-memoized by the React Compiler.'; + return ( + + {innerView} + + ); }