Use the component label in the component section (#5670)

* wip * wip - css * remove unused uigridrow variant * update snapshots
concrete-utopia · May 14, 2024 · 0263d64 · 0263d64
1 parent 878b707
commit 0263d64
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 42 deletions.
diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -1205,47 +1205,60 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
         propertyControlsInfo,
       )
 
+      if (registeredComponent?.label == null) {
+        return {
+          displayName: elementName,
+          isRegisteredComponent: registeredComponent != null,
+        }
+      }
+
       return {
-        name: elementName,
+        displayName: registeredComponent.label,
         isRegisteredComponent: registeredComponent != null,
+        secondaryName: elementName,
       }
     },
     'ComponentSectionInner componentName',
   )
 
   return (
     <React.Fragment>
-      <FlexRow
+      <UIGridRow
+        padded={false}
+        variant='<----------1fr---------><-auto->'
         style={{
           borderTop: `1px solid ${colorTheme.seperator.value}`,
           padding: `0 ${UtopiaTheme.layout.inspectorXPadding}px`,
+          alignItems: 'center',
+          gap: 8,
         }}
       >
         <FlexRow
+          onClick={OpenFile}
           style={{
             flexGrow: 1,
             height: UtopiaTheme.layout.rowHeight.large,
+            fontWeight: 600,
+            cursor: 'pointer',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            gap: 8,
           }}
         >
-          <div
-            onClick={OpenFile}
-            style={{
-              fontWeight: 600,
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              gap: 8,
-            }}
-          >
-            {componentData != null ? (
-              <React.Fragment>
-                <span>{componentData.name}</span>
-                {when(componentData.isRegisteredComponent, <span style={{ fontSize: 6 }}>◇</span>)}
-              </React.Fragment>
-            ) : (
-              <span>Component</span>
-            )}
-          </div>
+          {componentData != null ? (
+            <React.Fragment>
+              <span>{componentData.displayName}</span>
+              {when(componentData.isRegisteredComponent, <span style={{ fontSize: 6 }}>◇</span>)}
+              {componentData.secondaryName == null ? null : (
+                <span style={{ opacity: 0.5, fontWeight: 'initial' }}>
+                  {componentData.secondaryName}
+                </span>
+              )}
+            </React.Fragment>
+          ) : (
+            <span>Component</span>
+          )}
         </FlexRow>
         <SquareButton highlight onClick={toggleSection}>
           <ExpandableIndicator
@@ -1255,7 +1268,7 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
             selected={false}
           />
         </SquareButton>
-      </FlexRow>
+      </UIGridRow>
       {when(
         sectionExpanded,
         <React.Fragment>

diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -133,17 +133,17 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedFunctionComponent(UIGridRow)",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
+  "/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
@@ -761,17 +761,17 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedFunctionComponent(UIGridRow)",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
+  "/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
@@ -1525,17 +1525,17 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedFunctionComponent(UIGridRow)",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
+  "/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
@@ -2378,17 +2378,17 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
-  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.forward_ref)(Styled(div))",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedFunctionComponent(UIGridRow)",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
-  "/Symbol(react.forward_ref)(Styled(div))/div/Symbol(react.forward_ref)(Styled(div))/div",
+  "/ComponentSectionInner/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedFunctionComponent(UIGridRow)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/Symbol(react.forward_ref)(Styled(div))/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",