Replace Inspector Icons (#5966)

- Added entries for some of the newly added icons. - Updated border radius inspector icons. - Changed `SplitChainedNumberInputProps.labels` type to support `React.ReactChild`. - Updated padding inspector icons. - Added icons for wrap and gap in the flex controls.
concrete-utopia · Jun 17, 2024 · 5eb250f · 5eb250f
1 parent 77480df
commit 5eb250f
Show file tree

Hide file tree

Showing 8 changed files with 292 additions and 35 deletions.
diff --git a/...s/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx b/...s/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
@@ -16,9 +16,17 @@ import type { OptionsType } from 'react-select'
 import { unsetPropertyMenuItem } from '../../../common/context-menu-items'
 import { UIGridRow } from '../../../widgets/ui-grid-row'
 import { PropertyLabel } from '../../../widgets/property-label'
-import { PopupList, useWrappedEmptyOrUnknownOnSubmitValue, NumberInput } from '../../../../../uuiui'
+import {
+  PopupList,
+  useWrappedEmptyOrUnknownOnSubmitValue,
+  NumberInput,
+  Icons,
+} from '../../../../../uuiui'
 import { useContextSelector } from 'use-context-selector'
 import type { FlexDirection } from '../../../common/css-utils'
+import { when } from '../../../../../utils/react-conditionals'
+import { Substores, useEditorState } from '../../../../editor/store/store-hook'
+import { flexDirectionSelector } from '../../../inpector-selectors'
 
 type uglyLabel =
   | 'left'
@@ -169,6 +177,11 @@ export const FlexWrapControl = React.memo((props: FlexWrapControlProps) => {
     },
     [onSubmit],
   )
+  const flexDirection = useEditorState(
+    Substores.metadata,
+    flexDirectionSelector,
+    'FlexWrapControl flexDirection',
+  )
 
   return (
     <InspectorContextMenuWrapper
@@ -181,13 +194,17 @@ export const FlexWrapControl = React.memo((props: FlexWrapControlProps) => {
         width: undefined,
       }}
     >
-      <PopupList
-        value={FlexWrapOptions.find((option) => option.value === props.value)}
-        options={FlexWrapOptions}
-        onSubmitValue={onSubmitValue}
-        controlStyles={props.controlStyles}
-        style={{ background: 'transparent' }}
-      />
+      <UIGridRow padded={false} variant='<-auto-><----------1fr--------->'>
+        {when(flexDirection.startsWith('row'), <Icons.WrapRow />)}
+        {when(flexDirection.startsWith('column'), <Icons.WrapColumn />)}
+        <PopupList
+          value={FlexWrapOptions.find((option) => option.value === props.value)}
+          options={FlexWrapOptions}
+          onSubmitValue={onSubmitValue}
+          controlStyles={props.controlStyles}
+          style={{ background: 'transparent' }}
+        />
+      </UIGridRow>
     </InspectorContextMenuWrapper>
   )
 })
@@ -241,17 +258,17 @@ export const FlexGapControl = React.memo(() => {
     onUnsetValues,
   )
 
-  const targetPath = useContextSelector(InspectorPropsContext, (contextData) => {
-    return contextData.targetPath
-  })
-  const flexGapProp = React.useMemo(() => {
-    return [stylePropPathMappingFn('gap', targetPath)]
-  }, [targetPath])
+  const flexDirection = useEditorState(
+    Substores.metadata,
+    flexDirectionSelector,
+    'FlexGapControl flexDirection',
+  )
 
   return (
     <InspectorContextMenuWrapper id={`gap-context-menu`} items={menuItems} data={{}}>
       <UIGridRow padded={false} variant='<-auto-><----------1fr--------->'>
-        <PropertyLabel target={flexGapProp}>Gap</PropertyLabel>
+        {when(flexDirection.startsWith('row'), <Icons.GapHorizontal />)}
+        {when(flexDirection.startsWith('column'), <Icons.GapVertical />)}
         <NumberInput
           id='flex.container.gap'
           testId='flex.container.gap'

diff --git a/...nts/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx b/...nts/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx
@@ -7,7 +7,7 @@ import { mapArrayToDictionary } from '../../../../../core/shared/array-utils'
 import type { DetectedLayoutSystem } from '../../../../../core/shared/element-template'
 import { SettableLayoutSystem } from '../../../../../core/shared/element-template'
 import type { PropertyPath } from '../../../../../core/shared/project-file-types'
-import { FunctionIcons, SquareButton } from '../../../../../uuiui'
+import { FunctionIcons, Icons, SquareButton } from '../../../../../uuiui'
 import {
   getSizeUpdateCommandsForNewPadding,
   pixelPaddingFromPadding,
@@ -385,6 +385,15 @@ export const PaddingControl = React.memo(() => {
 
   return (
     <SplitChainedNumberInput
+      labels={{
+        oneValue: <Icons.Padding color='on-highlight-secondary' />,
+        horizontal: <Icons.PaddingHorizontal color='on-highlight-secondary' />,
+        vertical: <Icons.PaddingVertical color='on-highlight-secondary' />,
+        top: <Icons.PaddingTop color='on-highlight-secondary' />,
+        left: <Icons.PaddingLeft color='on-highlight-secondary' />,
+        bottom: <Icons.PaddingBottom color='on-highlight-secondary' />,
+        right: <Icons.PaddingRight color='on-highlight-secondary' />,
+      }}
       tooltips={{
         oneValue: 'Padding',
         perDirection: 'Padding per direction',

diff --git a/...inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx b/...inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
@@ -106,13 +106,13 @@ export interface SplitChainedNumberInputProps<T> {
   mode: ControlMode | null
   onCycleMode: () => void
   labels?: {
-    top?: string
-    bottom?: string
-    left?: string
-    right?: string
-    horizontal?: string
-    vertical?: string
-    oneValue?: string
+    top?: React.ReactChild
+    bottom?: React.ReactChild
+    left?: React.ReactChild
+    right?: React.ReactChild
+    horizontal?: React.ReactChild
+    vertical?: React.ReactChild
+    oneValue?: React.ReactChild
   }
   tooltips?: {
     oneValue?: string

diff --git a/editor/src/components/inspector/sections/style-section/container-subsection/radius-row.tsx b/editor/src/components/inspector/sections/style-section/container-subsection/radius-row.tsx
@@ -37,6 +37,7 @@ import {
   longhandShorthandEventHandler,
   SplitChainedNumberInput,
 } from '../../layout-section/layout-system-subsection/split-chained-number-input'
+import { Icons } from '../../../../../uuiui/icons'
 
 export const RadiusRow = React.memo(() => {
   const { value: borderRadiusValue, onUnsetValues } = useInspectorStyleInfo('borderRadius')
@@ -232,7 +233,7 @@ export const BorderRadiusControl = React.memo(() => {
 
   const isCmdPressedRef = useRefEditorState((store) => store.editor.keysPressed.cmd === true)
 
-  const onCylceMode = React.useCallback(
+  const onCycleMode = React.useCallback(
     () => cycleToNextMode(initialMode, isCmdPressedRef.current === true ? 'backward' : 'forward'),
     [cycleToNextMode, initialMode, isCmdPressedRef],
   )
@@ -242,16 +243,17 @@ export const BorderRadiusControl = React.memo(() => {
   return (
     <SplitChainedNumberInput
       labels={{
-        top: '╭',
-        bottom: '╯',
-        left: '╰',
-        right: '╮',
+        top: <Icons.BorderRadiusTopLeft color='on-highlight-secondary' />,
+        bottom: <Icons.BorderRadiusBottomRight color='on-highlight-secondary' />,
+        left: <Icons.BorderRadiusBottomLeft color='on-highlight-secondary' />,
+        right: <Icons.BorderRadiusTopRight color='on-highlight-secondary' />,
+        oneValue: <Icons.BorderRadius color='on-highlight-secondary' />,
       }}
       tooltips={{
         oneValue: 'Radius',
         perSide: 'Radius per corner',
       }}
-      onCycleMode={onCylceMode}
+      onCycleMode={onCycleMode}
       numberType={'LengthPercent'}
       name='radius'
       mode={modeToUse}

diff --git a/editor/src/components/inspector/sections/style-section/text-subsection/text-subsection.tsx b/editor/src/components/inspector/sections/style-section/text-subsection/text-subsection.tsx
@@ -414,7 +414,7 @@ export const TextSubsection = React.memo(() => {
               onSubmitValue={wrappedLetterSpacingOnSubmitValue}
               onTransientSubmitValue={wrappedLetterSpacingOnTransientSubmitValue}
               controlStatus={letterSpacingMetadata.controlStatus}
-              DEPRECATED_labelBelow='letter'
+              DEPRECATED_labelBelow=<Icons.LetterSpacing color='on-highlight-secondary' />
               stepSize={0.01}
               numberType='Length'
               defaultUnitToHide={'px'}
@@ -438,7 +438,7 @@ export const TextSubsection = React.memo(() => {
               controlStatus={lineHeightMetadata.controlStatus}
               onSubmitValue={wrappedLineHeightOnSubmitValue}
               onTransientSubmitValue={wrappedLineHeightOnTransientSubmitValue}
-              DEPRECATED_labelBelow='line'
+              DEPRECATED_labelBelow=<Icons.LineHeight color='on-highlight-secondary' />
               stepSize={0.01}
               numberType='Length'
               defaultUnitToHide={'em'}

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
@@ -365,6 +365,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
   "/div///UtopiaSpiedClass(Tooltip)",
   "/div///Symbol(react.memo)()",
@@ -387,6 +392,13 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='padding-cycle-mode'",
   "/div///UtopiaSpiedClass(Tooltip)",
   "/div///Symbol(react.memo)()",
@@ -530,6 +542,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -553,6 +570,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -951,6 +975,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
   "/div///UtopiaSpiedClass(Tooltip)",
   "/div///Symbol(react.memo)()",
@@ -973,6 +1002,13 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='padding-cycle-mode'",
   "/div///UtopiaSpiedClass(Tooltip)",
   "/div///Symbol(react.memo)()",
@@ -1066,6 +1102,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -1089,6 +1130,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -1311,6 +1359,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -1382,6 +1435,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -1830,6 +1890,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -1901,6 +1966,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -2301,6 +2373,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -2372,6 +2449,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -2714,6 +2798,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -2785,6 +2874,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",