Standardise Some Inspector Sections (#5878)

- Removed some outlines and replaced others with box shadows so they would only exist on one edge. - Uppercased some section titles. - Replaced the use of `FolderLabel` with `InspectorSectionHeader`. - Moved `InspectorSectionHeader` into its own file. - Removed the indentation from `FolderSection`. - Corrected a typo in `EditorContractDropdown`.
concrete-utopia · Jun 11, 2024 · 050e8fe · 050e8fe
1 parent d15fb9d
commit 050e8fe
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 133 deletions.
diff --git a/editor/src/components/inspector/controls/root-element-indicator.tsx b/editor/src/components/inspector/controls/root-element-indicator.tsx
@@ -7,7 +7,6 @@ export const RootElementIndicator = () => {
       style={{
         justifyContent: 'center',
         alignItems: 'center',
-        outline: `1px solid ${colorTheme.seperator.value}`,
         background: colorTheme.inspectorBackground.value,
       }}
     >

diff --git a/editor/src/components/inspector/editor-contract-section.tsx b/editor/src/components/inspector/editor-contract-section.tsx
@@ -349,7 +349,7 @@ export const EditorContractDropdown = React.memo(() => {
         onSubmitValue={onChange}
         controlStyles={simpleControlStyles}
         containerMode={'noBorder'}
-        style={{ borderRadius: 2, width: 'min-wdith', paddingRight: 6 }}
+        style={{ borderRadius: 2, width: 'min-width', paddingRight: 6 }}
       />
       {when(
         groupProblems.length > 0,

diff --git a/editor/src/components/inspector/inspector.tsx b/editor/src/components/inspector/inspector.tsx
@@ -51,15 +51,7 @@ import {
   useKeepReferenceEqualityIfPossible,
   useKeepShallowReferenceEquality,
 } from '../../utils/react-performance'
-import {
-  Icn,
-  useColorTheme,
-  UtopiaTheme,
-  FlexRow,
-  Button,
-  SectionActionSheet,
-  SquareButton,
-} from '../../uuiui'
+import { Icn, useColorTheme, UtopiaTheme, FlexRow, Button } from '../../uuiui'
 import { getElementsToTarget } from './common/inspector-utils'
 import type { ElementPath, PropertyPath } from '../../core/shared/project-file-types'
 import { unless, when } from '../../utils/react-conditionals'
@@ -100,6 +92,7 @@ import { isIntrinsicElementMetadata } from '../../core/model/project-file-utils'
 import { assertNever } from '../../core/shared/utils'
 import { DataReferenceSection } from './sections/data-reference-section'
 import { replaceFirstChildAndDeleteSiblings } from '../editor/element-children'
+import { InspectorSectionHeader } from './section-header'
 
 export interface ElementPathElement {
   name?: string
@@ -180,7 +173,6 @@ const AlignmentButtons = React.memo((props: { numberOfTargets: number }) => {
         justifyContent: 'space-around',
         alignItems: 'center',
         height: UtopiaTheme.layout.rowHeight.normal,
-        outline: `1px solid ${colorTheme.seperator.value}`,
         background: colorTheme.inspectorBackground.value,
         padding: '8px 0',
       }}
@@ -441,6 +433,7 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
             {unless(
               isCodeElement || isDataReference,
               <FlexCol
+                data-testid='inspector-column'
                 css={{
                   overflowY: 'scroll',
                   width: '100%',
@@ -458,6 +451,7 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
                     title='Styles'
                     toggle={toggleStyleSection}
                     open={styleSectionOpen}
+                    uppercase={true}
                   />,
                 )}
                 {when(
@@ -499,6 +493,7 @@ export const Inspector = React.memo<InspectorProps>((props: InspectorProps) => {
                     title='Advanced'
                     toggle={toggleAdvancedSection}
                     open={advancedSectionOpen}
+                    uppercase={true}
                   />,
                 )}
                 {when(
@@ -916,44 +911,6 @@ export const InspectorContextProvider = React.memo<{
   )
 })
 
-function InspectorSectionHeader({
-  title,
-  open,
-  toggle,
-}: {
-  title: string
-  open: boolean
-  toggle: () => void
-}) {
-  return (
-    <FlexRow
-      style={{
-        padding: 8,
-        cursor: 'pointer',
-      }}
-      onClick={toggle}
-      data-testid={`section-header-${title}`}
-    >
-      <div
-        style={{
-          flexGrow: 1,
-          display: 'inline',
-          overflow: 'hidden',
-          fontSize: '11px',
-          fontWeight: 600,
-        }}
-      >
-        {title}
-      </div>
-      <SectionActionSheet className='actionsheet' style={{ gap: 4 }}>
-        <SquareButton highlight style={{ width: 12 }}>
-          <ExpandableIndicator visible collapsed={!open} selected={false} />
-        </SquareButton>
-      </SectionActionSheet>
-    </FlexRow>
-  )
-}
-
 function useBoolean(starting: boolean): {
   value: boolean
   set: (_: boolean) => void

diff --git a/editor/src/components/inspector/section-header.tsx b/editor/src/components/inspector/section-header.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { FlexRow, SectionActionSheet, SquareButton, colorTheme } from '../../uuiui'
+import { ExpandableIndicator } from '../navigator/navigator-item/expandable-indicator'
+
+export function InspectorSectionHeader({
+  title,
+  open,
+  toggle,
+  uppercase = false,
+}: {
+  title: string
+  open: boolean
+  toggle: () => void
+  uppercase?: boolean
+}) {
+  return (
+    <FlexRow
+      style={{
+        padding: 8,
+        cursor: 'pointer',
+      }}
+      onClick={toggle}
+      data-testid={`section-header-${title}`}
+    >
+      <div
+        style={{
+          flexGrow: 1,
+          display: 'inline',
+          overflow: 'hidden',
+          fontSize: '11px',
+          fontWeight: 600,
+          textTransform: uppercase ? 'uppercase' : undefined,
+        }}
+      >
+        {title}
+      </div>
+      <SectionActionSheet className='actionsheet' style={{ gap: 4 }}>
+        <SquareButton highlight style={{ width: 12 }}>
+          <ExpandableIndicator visible collapsed={!open} selected={false} />
+        </SquareButton>
+      </SectionActionSheet>
+    </FlexRow>
+  )
+}
diff --git a/editor/src/components/inspector/sections/component-section/component-section.tsx b/editor/src/components/inspector/sections/component-section/component-section.tsx
@@ -1437,7 +1437,7 @@ export const ComponentSectionInner = React.memo((props: ComponentSectionProps) =
         >
           {componentData != null ? (
             <React.Fragment>
-              <span>{componentData.displayName}</span>
+              <span style={{ textTransform: 'uppercase' }}>{componentData.displayName}</span>
               {when(componentData.isRegisteredComponent, <span style={{ fontSize: 6 }}>◇</span>)}
               {componentData.secondaryName == null ? null : (
                 <span style={{ opacity: 0.5, fontWeight: 'initial' }}>

diff --git a/editor/src/components/inspector/sections/component-section/folder-section.tsx b/editor/src/components/inspector/sections/component-section/folder-section.tsx
@@ -18,6 +18,7 @@ import {
   isAdvancedFolderLabel,
   specialPropertiesToIgnore,
 } from '../../../../core/property-controls/property-controls-utils'
+import { InspectorSectionHeader } from '../../section-header'
 
 interface FolderSectionProps {
   isRoot: boolean
@@ -94,7 +95,7 @@ export const FolderSection = React.memo((props: FolderSectionProps) => {
         controlDescription={controlDescription}
         isScene={false}
         setGlobalCursor={props.setGlobalCursor}
-        indentationLevel={props.indentationLevel + 1}
+        indentationLevel={0}
         visibleEmptyControls={props.visibleEmptyControls}
         unsetPropNames={props.unsetPropNames}
         showHiddenControl={props.showHiddenControl}
@@ -107,13 +108,7 @@ export const FolderSection = React.memo((props: FolderSectionProps) => {
     <div css={cssHoverEffect}>
       {unless(
         props.isRoot,
-        <FolderLabel
-          indentationLevel={1}
-          showIndentation={true}
-          open={open}
-          toggleOpen={toggleOpen}
-          title={props.title ?? ''}
-        />,
+        <InspectorSectionHeader title={props.title ?? ''} toggle={toggleOpen} open={open} />,
       )}
       {when(
         open,
@@ -137,7 +132,7 @@ export const FolderSection = React.memo((props: FolderSectionProps) => {
                 controlDescription={controlDescription}
                 isScene={false}
                 setGlobalCursor={props.setGlobalCursor}
-                indentationLevel={props.indentationLevel + 1}
+                indentationLevel={0}
                 showHiddenControl={props.showHiddenControl}
                 focusOnMount={false}
               />
@@ -154,73 +149,9 @@ export const FolderSection = React.memo((props: FolderSectionProps) => {
         <HiddenControls
           hiddenPropNames={hiddenPropsList}
           showHiddenControl={props.showHiddenControl}
-          indentationLevel={props.indentationLevel + 1}
+          indentationLevel={0}
         />,
       )}
     </div>
   )
 })
-
-interface FolderLabelProps {
-  indentationLevel: number
-  open: boolean
-  toggleOpen: () => void
-  title: string
-  showIndentation: boolean
-}
-
-const FolderLabel = React.memo((props: FolderLabelProps) => {
-  const { toggleOpen } = props
-  const indentation = props.showIndentation ? props.indentationLevel * 8 : 0
-  const handleOnClick = React.useCallback(() => toggleOpen(), [toggleOpen])
-  return (
-    <div
-      style={{
-        paddingLeft: indentation,
-        display: 'flex',
-        alignItems: 'center',
-        height: 34,
-        fontWeight: 500,
-        gap: 4,
-        cursor: 'pointer',
-        transition: 'padding-left 100ms ease-in-out',
-      }}
-      onClick={handleOnClick}
-    >
-      <ExpansionArrowSVG
-        style={{
-          transform: props.open ? 'none' : 'rotate(-90deg)',
-          transition: 'all linear .1s',
-        }}
-      />
-      <span>{props.title}</span>
-    </div>
-  )
-})
-
-interface ExpansionArrowSVGProps {
-  style: React.CSSProperties
-}
-
-const ExpansionArrowSVG = React.memo((props: ExpansionArrowSVGProps) => {
-  const colorTheme = useColorTheme()
-  return (
-    <svg width='7px' height='5px' viewBox='0 0 7 5' version='1.1' style={props.style}>
-      <g
-        strokeWidth='1'
-        fillRule='evenodd'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        id='expansion-triangle-open'
-        transform='translate(-1.000000, 0.000000)'
-        fill={colorTheme.textColor.value}
-        stroke={colorTheme.textColor.value}
-      >
-        <polygon
-          transform='translate(3.828427, 0.828427) rotate(-45.000000) translate(-3.828427, -0.828427) '
-          points='1.82842712 -1.17157288 1.82842712 2.82842712 5.82842712 2.82842712'
-        />
-      </g>
-    </svg>
-  )
-})
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
@@ -129,14 +129,14 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(FlexCol)",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(FlexCol):data-testid='inspector-column'",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(DisableControlsInSubtree)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/div:data-testid='inspector-sections-container'",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/div/UtopiaSpiedFunctionComponent(DisableControlsInSubtree)/UtopiaSpiedExoticType(Symbol(react.provider))",
-  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent(FlexCol)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/Symbol(react.provider)/UtopiaSpiedFunctionComponent(FlexCol)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent(FlexCol)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='inspector-column'",
+  "/Symbol(react.provider)/UtopiaSpiedFunctionComponent(FlexCol)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div:data-testid='inspector-column'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedClass(ComponentSection)/Symbol(react.memo)(ComponentSectionInner)",
   "/div/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/div/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
@@ -154,7 +154,7 @@ Array [
   "/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)()",
+  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorSectionHeader)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.forward_ref)(EmotionCssPropInternal)",
@@ -783,14 +783,14 @@ Array [
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/Symbol(react.memo)()",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))",
-  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(FlexCol)",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(FlexCol):data-testid='inspector-column'",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedFunctionComponent(DisableControlsInSubtree)",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/div:data-testid='inspector-sections-container'",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/Inspector/div",
   "/UtopiaSpiedExoticType(Symbol(react.fragment))/div/UtopiaSpiedFunctionComponent(DisableControlsInSubtree)/UtopiaSpiedExoticType(Symbol(react.provider))",
-  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent(FlexCol)/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/Symbol(react.provider)/UtopiaSpiedFunctionComponent(FlexCol)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div",
+  "/UtopiaSpiedExoticType(Symbol(react.provider))/Symbol(react.provider)/UtopiaSpiedFunctionComponent(FlexCol)/Symbol(react.forward_ref)(EmotionCssPropInternal):data-testid='inspector-column'",
+  "/Symbol(react.provider)/UtopiaSpiedFunctionComponent(FlexCol)/Symbol(react.forward_ref)(EmotionCssPropInternal)/div:data-testid='inspector-column'",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/UtopiaSpiedClass(ComponentSection)/Symbol(react.memo)(ComponentSectionInner)",
   "/div/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
   "/div/UtopiaSpiedClass(ComponentSection)/ComponentSectionInner/span",
@@ -1576,7 +1576,7 @@ Array [
   "/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)()",
+  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorSectionHeader)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.forward_ref)(EmotionCssPropInternal)",