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 bc5323c638..1736782514 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 370409aeb9..aa0a36fd22 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 ff53776a17..b11e321e2e 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 653a073dea..e80f370833 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 c31fd70ead..00b4f0db13 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} + + ); }