Cartouche inspector input-like wrapper (#5861)

Part of #5840 This PR adds a wrapper around cartouches in the inspector so they look like individual pills. The wrapper shows a blue outline when hovered. The `x` button is also removed, although the delete wrapper callback is kept for now since this is still in flux. https://github.com/concrete-utopia/utopia/assets/1081051/913fe852-13e5-4d4b-a6c4-e0f9d5ee541f **Manual Tests:** I hereby swear that: - [x] I opened a hydrogen project and it loaded - [x] I could navigate to various routes in Preview mode
concrete-utopia · Jun 7, 2024 · d58937c · d58937c
1 parent d06b6c3
commit d58937c
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 104 deletions.
diff --git a/editor/src/components/inspector/sections/component-section/cartouche-control.tsx b/editor/src/components/inspector/sections/component-section/cartouche-control.tsx
@@ -1,11 +1,15 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React from 'react'
+import { jsx } from '@emotion/react'
 import { DataCartoucheInner } from './data-reference-cartouche'
 import { NO_OP } from '../../../../core/shared/utils'
 import type { ElementPath, PropertyPath } from '../../../../core/shared/project-file-types'
 import * as EPP from '../../../template-property-path'
 import { dataPathSuccess, traceDataFromProp } from '../../../../core/data-tracing/data-tracing'
 import { Substores, useEditorState } from '../../../editor/store/store-hook'
 import type { CartoucheDataType } from './cartouche-ui'
+import { useColorTheme } from '../../../../uuiui'
 
 interface IdentifierExpressionCartoucheControlProps {
   contents: string
@@ -36,17 +40,47 @@ export const IdentifierExpressionCartoucheControl = React.memo(
     )
 
     return (
-      <DataCartoucheInner
-        contentsToDisplay={{ label: props.contents, type: 'reference' }}
-        onClick={NO_OP}
-        selected={false}
-        onDoubleClick={onOpenDataPicker}
-        safeToDelete={safeToDelete}
-        onDelete={onDeleteCartouche}
-        testId={testId}
-        contentIsComingFromServer={isDataComingFromHookResult}
-        datatype={props.datatype}
-      />
+      <CartoucheInspectorWrapper>
+        <DataCartoucheInner
+          contentsToDisplay={{ label: props.contents, type: 'reference' }}
+          onClick={NO_OP}
+          selected={false}
+          onDoubleClick={onOpenDataPicker}
+          safeToDelete={safeToDelete}
+          onDelete={onDeleteCartouche}
+          testId={testId}
+          contentIsComingFromServer={isDataComingFromHookResult}
+          datatype={props.datatype}
+        />
+      </CartoucheInspectorWrapper>
     )
   },
 )
+
+export const CartoucheInspectorWrapper = React.memo((props: { children: React.ReactNode }) => {
+  const colorTheme = useColorTheme()
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        minWidth: 0,
+        padding: 1,
+        borderRadius: 4,
+        gap: 4,
+      }}
+      css={{
+        border: '1px solid transparent',
+        ':hover': {
+          border: `1px solid ${colorTheme.primary.value}`,
+        },
+      }}
+    >
+      {props.children}
+    </div>
+  )
+})
+CartoucheInspectorWrapper.displayName = 'CartoucheInspectorWrapper'
diff --git a/editor/src/components/inspector/sections/component-section/cartouche-ui.tsx b/editor/src/components/inspector/sections/component-section/cartouche-ui.tsx
@@ -53,6 +53,8 @@ export const CartoucheUI = React.forwardRef(
 
     const wrappedOnClick = useStopPropagation(onClick)
     const wrappedOnDoubleClick = useStopPropagation(onDoubleClick)
+
+    // NOTE: this is currently unused, we should decide if we want to keep allowing deletion of the cartouches from here or not
     const wrappedOnDelete = useStopPropagation(onDelete)
 
     return (
@@ -79,6 +81,7 @@ export const CartoucheUI = React.forwardRef(
               flex: 1,
               gap: 4,
               opacity: preview ? 0.5 : 1,
+              width: 'max-content',
             }}
             css={{
               color: selected || highlight === 'strong' ? colors.fg.selected : colors.fg.default,
@@ -124,20 +127,6 @@ export const CartoucheUI = React.forwardRef(
               // a trailing ellipsis is added to indicate that the object can be traversed
               <span>…</span>,
             )}
-            {when(
-              onDelete != null,
-              <Icn
-                category='semantic'
-                type='cross'
-                color={
-                  selected || highlight === 'strong' ? colors.icon.selected : colors.icon.default
-                }
-                width={12}
-                height={12}
-                data-testid={`delete-${props.testId}`}
-                onClick={wrappedOnDelete}
-              />,
-            )}
           </FlexRow>
         </Tooltip>
       </div>

diff --git a/editor/src/components/inspector/sections/data-reference-section.tsx b/editor/src/components/inspector/sections/data-reference-section.tsx
@@ -25,6 +25,7 @@ import {
   useVariablesInScopeForSelectedElement,
 } from './component-section/variables-in-scope-utils'
 import { jsxElementChildToValuePath } from './component-section/data-picker-utils'
+import { CartoucheInspectorWrapper } from './component-section/cartouche-control'
 
 export const DataReferenceSectionId = 'code-element-section-test-id'
 
@@ -165,18 +166,19 @@ export const DataReferenceSection = React.memo(({ paths }: { paths: ElementPath[
             key={`inspector-data-reference-row-${EP.toString(element.path)}`}
           >
             <span>Value</span>
-
-            <DataCartoucheInner
-              onClick={NO_OP}
-              onDoubleClick={openPicker(element.path)}
-              selected={false}
-              contentsToDisplay={element.textContent}
-              safeToDelete={false}
-              onDelete={NO_OP}
-              testId={`inspector-data-cartouche-${EP.toString(element.path)}`}
-              contentIsComingFromServer={element.contentIsComingFromServer}
-              datatype={element.datatype}
-            />
+            <CartoucheInspectorWrapper>
+              <DataCartoucheInner
+                onClick={NO_OP}
+                onDoubleClick={openPicker(element.path)}
+                selected={false}
+                contentsToDisplay={element.textContent}
+                safeToDelete={false}
+                onDelete={NO_OP}
+                testId={`inspector-data-cartouche-${EP.toString(element.path)}`}
+                contentIsComingFromServer={element.contentIsComingFromServer}
+                datatype={element.datatype}
+              />
+            </CartoucheInspectorWrapper>
           </UIGridRow>
         )
       })}

diff --git a/editor/src/components/inspector/sections/layout-section/list-section.tsx b/editor/src/components/inspector/sections/layout-section/list-section.tsx
@@ -20,7 +20,8 @@ import type { MetadataSubstate } from '../../../editor/store/store-hook-substore
 import { UIGridRow } from '../../widgets/ui-grid-row'
 import { getTextContentOfElement } from '../component-section/data-reference-cartouche'
 import { JSXPropertyControlForListSection } from '../component-section/property-control-controls'
-import { MapListSourceCartouche } from './list-source-cartouche'
+import { MapListSourceCartoucheInspector } from './list-source-cartouche'
+import { CartoucheInspectorWrapper } from '../component-section/cartouche-control'
 
 type MapExpression = JSXMapExpression | 'multiselect' | 'not-a-mapexpression'
 
@@ -141,18 +142,11 @@ export const ListSection = React.memo(({ paths }: { paths: ElementPath[] }) => {
       </FlexRow>
       <UIGridRow padded variant='<--1fr--><--1fr-->'>
         List Source
-        <MapListSourceCartouche target={target} openOn='double-click' selected={false} />
+        <MapListSourceCartoucheInspector target={target} openOn='double-click' selected={false} />
       </UIGridRow>
       <UIGridRow padded variant='<--1fr--><--1fr-->'>
         Contents
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'flex-end',
-            minWidth: 0,
-          }}
-        >
+        <CartoucheInspectorWrapper>
           <JSXPropertyControlForListSection
             value={
               {
@@ -161,7 +155,7 @@ export const ListSection = React.memo(({ paths }: { paths: ElementPath[] }) => {
               } as JSXParsedValue
             }
           />
-        </div>
+        </CartoucheInspectorWrapper>
       </UIGridRow>
     </div>
   )

diff --git a/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx b/editor/src/components/inspector/sections/layout-section/list-source-cartouche.tsx
@@ -27,6 +27,7 @@ import {
 import { mapDropNulls } from '../../../../core/shared/array-utils'
 import { traceDataFromElement, dataPathSuccess } from '../../../../core/data-tracing/data-tracing'
 import type { CartoucheDataType } from '../component-section/cartouche-ui'
+import { CartoucheInspectorWrapper } from '../component-section/cartouche-control'
 
 function filterVariableOption(option: DataPickerOption): DataPickerOption | null {
   switch (option.type) {
@@ -65,7 +66,32 @@ interface MapListSourceCartoucheProps {
   openOn: 'single-click' | 'double-click'
 }
 
-export const MapListSourceCartouche = React.memo((props: MapListSourceCartoucheProps) => {
+export const MapListSourceCartoucheNavigator = React.memo((props: MapListSourceCartoucheProps) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        minWidth: 0,
+      }}
+    >
+      <MapListSourceCartoucheInner {...props} />
+    </div>
+  )
+})
+MapListSourceCartoucheNavigator.displayName = 'MapListSourceCartoucheNavigator'
+
+export const MapListSourceCartoucheInspector = React.memo((props: MapListSourceCartoucheProps) => {
+  return (
+    <CartoucheInspectorWrapper>
+      <MapListSourceCartoucheInner {...props} />
+    </CartoucheInspectorWrapper>
+  )
+})
+MapListSourceCartoucheInspector.displayName = 'MapListSourceCartoucheInspector'
+
+const MapListSourceCartoucheInner = React.memo((props: MapListSourceCartoucheProps) => {
   const { target, openOn } = props
 
   const originalMapExpression = useEditorState(
@@ -184,14 +210,7 @@ export const MapListSourceCartouche = React.memo((props: MapListSourceCartoucheP
   )
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'flex-end',
-        minWidth: 0,
-      }}
-    >
+    <React.Fragment>
       {popupIsOpen ? DataPickerComponent : null}
       <DataCartoucheInner
         ref={setReferenceElement}
@@ -205,6 +224,6 @@ export const MapListSourceCartouche = React.memo((props: MapListSourceCartoucheP
         contentIsComingFromServer={isDataComingFromHookResult}
         datatype={cartoucheDataType}
       />
-    </div>
+    </React.Fragment>
   )
 })
diff --git a/editor/src/components/navigator/navigator-item/navigator-item.tsx b/editor/src/components/navigator/navigator-item/navigator-item.tsx
@@ -79,7 +79,7 @@ import { toVSCodeExtensionMessage } from 'utopia-vscode-common'
 import type { Emphasis, Icon } from 'utopia-api'
 import { contextMenu } from 'react-contexify'
 import { DataReferenceCartoucheControl } from '../../inspector/sections/component-section/data-reference-cartouche'
-import { MapListSourceCartouche } from '../../inspector/sections/layout-section/list-source-cartouche'
+import { MapListSourceCartoucheNavigator } from '../../inspector/sections/layout-section/list-source-cartouche'
 
 export function getItemHeight(navigatorEntry: NavigatorEntry): number {
   if (isConditionalClauseNavigatorEntry(navigatorEntry)) {
@@ -1260,7 +1260,7 @@ export const NavigatorRowLabel = React.memo((props: NavigatorRowLabelProps) => {
         dispatch={props.dispatch}
         selected={props.selected}
       />
-      <MapListSourceCartouche
+      <MapListSourceCartoucheNavigator
         target={props.navigatorEntry.elementPath}
         selected={props.selected}
         openOn='double-click'