feature(grid) Size Label Tweaks (#6672)

- Added `controlForStrategy` so memoized controls can be used.
- Added `StrategySizeLabel` to every strategy that included
`AbsoluteResizeControl`.
- Include `SizeLabel` in `NewCanvasControlsInner` if `StrategySizeLabel`
  hasn't been included in the strategy controls.
- Extracted out `SizeLabel` into its own file.
- `sizeLabel` function now supports `CSSNumber` for the `state`
parameter.
- `sizeLabelContents` now tries to present the unit values for the
dimensions.

Author: seanparsons

editor/src/components/canvas/canvas-strategies/canvas-strategy-types.ts

@@ -85,8 +85,12 @@ export interface ControlForStrategy<P> {
   control: React.FC<P>
 }
 
+export function controlForStrategy<P>(control: React.FC<P>): ControlForStrategy<P> {
+  return { type: 'ControlForStrategy', control: control }
+}
+
 export function controlForStrategyMemoized<P>(control: React.FC<P>): ControlForStrategy<P> {
-  return { type: 'ControlForStrategy', control: React.memo<any>(control) }
+  return controlForStrategy(React.memo<any>(control))
 }
 
 export type WhenToShowControl =

editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx

@@ -55,7 +55,6 @@ import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import type { CSSProperties } from 'react'
 import { MaxContent } from '../../../inspector/inspector-common'
 import {
-  SizeLabelTestId,
   ResizePointTestId,
   AbsoluteResizeControlTestId,
 } from '../../controls/select-mode/absolute-resize-control'
@@ -78,6 +77,7 @@ import {
 } from '../../controls/bounding-box-hooks'
 import { act } from 'react-dom/test-utils'
 import { ComponentsHonouringPropsStylesProject } from './common-projects.test-utils'
+import { SizeLabelTestId } from '../../controls/select-mode/size-label'
 
 // no mouseup here! it starts the interaction and resizes with drag delta
 async function startDragUsingActions(
@@ -678,7 +678,7 @@ describe('Absolute Resize Strategy', () => {
       EP.appendNewElementPath(TestScenePath, ['root', 'sizeless']),
     ])
     const sizeLabel = await editor.renderedDOM.findByTestId(SizeLabelTestId)
-    expect(sizeLabel.textContent).toEqual('(Children) 188 x 161')
+    expect(sizeLabel.textContent).toEqual('(Children) 188 × 161')
   })
   it('resizes component instances that honour the size properties', async () => {
     const renderResult = await renderTestEditorWithCode(

editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx

@@ -36,6 +36,7 @@ import { gatherParentAndSiblingTargets } from '../../controls/guideline-helpers'
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
 import { AbsoluteResizeControl } from '../../controls/select-mode/absolute-resize-control'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 import { ZeroSizeResizeControlWrapper } from '../../controls/zero-sized-element-controls'
 import {
   getDescriptiveStrategyLabelWithRetargetedPaths,
@@ -122,6 +123,13 @@ export function absoluteResizeBoundingBoxStrategy(
         show: 'visible-except-when-other-strategy-is-active',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: originalTargets, pathsWereReplaced: pathsWereReplaced },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
         props: { targets: originalTargets },

editor/src/components/canvas/canvas-strategies/strategies/basic-resize-strategy.tsx

@@ -40,6 +40,7 @@ import { controlsForGridPlaceholders } from '../../controls/grid-controls-for-st
 import { ImmediateParentBounds } from '../../controls/parent-bounds'
 import { ImmediateParentOutlines } from '../../controls/parent-outlines'
 import { AbsoluteResizeControl } from '../../controls/select-mode/absolute-resize-control'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 import { ZeroSizeResizeControlWrapper } from '../../controls/zero-sized-element-controls'
 import type {
   CanvasStrategy,
@@ -104,6 +105,13 @@ export function basicResizeStrategy(
         show: 'always-visible',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: selectedElements, pathsWereReplaced: false },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
         props: { targets: selectedElements },

editor/src/components/canvas/canvas-strategies/strategies/flex-resize-basic-strategy.tsx

@@ -38,6 +38,7 @@ import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-
 import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { treatElementAsGroupLike } from './group-helpers'
 import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 
 export function flexResizeBasicStrategy(
   canvasState: InteractionCanvasState,
@@ -109,6 +110,13 @@ export function flexResizeBasicStrategy(
         show: 'always-visible',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: selectedElements, pathsWereReplaced: false },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
         props: { targets: selectedElements },

editor/src/components/canvas/canvas-strategies/strategies/flex-resize-strategy.tsx

@@ -67,6 +67,7 @@ import { treatElementAsGroupLike } from './group-helpers'
 import { queueTrueUpElement } from '../../commands/queue-true-up-command'
 import { pushIntendedBoundsAndUpdateGroups } from '../../commands/push-intended-bounds-and-update-groups-command'
 import { trueUpGroupElementChanged } from '../../../editor/store/editor-state'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 
 export const FLEX_RESIZE_STRATEGY_ID = 'FLEX_RESIZE'
 
@@ -129,6 +130,13 @@ export function flexResizeStrategy(
         show: 'always-visible',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: selectedElements, pathsWereReplaced: false },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
       controlWithProps({
         control: ZeroSizeResizeControlWrapper,
         props: { targets: selectedElements },

editor/src/components/canvas/canvas-strategies/strategies/keyboard-absolute-resize-strategy.tsx

@@ -44,6 +44,7 @@ import type { ElementInstanceMetadataMap } from '../../../../core/shared/element
 import type { AllElementProps } from '../../../editor/store/editor-state'
 import { getDescriptiveStrategyLabelWithRetargetedPaths } from '../canvas-strategies'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
+import { StrategySizeLabel } from '../../controls/select-mode/size-label'
 
 interface VectorAndEdge {
   movement: CanvasVector
@@ -168,6 +169,13 @@ export function keyboardAbsoluteResizeStrategy(
         show: 'visible-except-when-other-strategy-is-active',
         priority: 'top',
       }),
+      controlWithProps({
+        control: StrategySizeLabel,
+        props: { targets: selectedElements, pathsWereReplaced: pathsWereReplaced },
+        key: 'size-label',
+        show: 'visible-except-when-other-strategy-is-active',
+        priority: 'top',
+      }),
     ],
     fitness: getFitness(interactionSession),
     apply: () => {

editor/src/components/canvas/controls/new-canvas-controls.tsx

@@ -80,6 +80,7 @@ import {
   GridHelperControls,
   GridMeasurementHelpers,
 } from './grid-controls'
+import { SizeLabel, StrategySizeLabel } from './select-mode/size-label'
 
 export const CanvasControlsContainerID = 'new-canvas-controls-container'
 
@@ -291,6 +292,16 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
   const colorTheme = useColorTheme()
   const { bottomStrategyControls, middleStrategyControls, topStrategyControls } =
     useGetApplicableStrategyControls(localSelectedViews)
+  const sizeLabelInStrategyControls =
+    topStrategyControls.some((control) => {
+      return control.control === StrategySizeLabel
+    }) ||
+    middleStrategyControls.some((control) => {
+      return control.control === StrategySizeLabel
+    }) ||
+    bottomStrategyControls.some((control) => {
+      return control.control === StrategySizeLabel
+    })
   const [inspectorHoveredControls] = useAtom(InspectorHoveredCanvasControls)
   const [inspectorFocusedControls] = useAtom(InspectorFocusedCanvasControls)
 
@@ -640,6 +651,10 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
                   </>,
                 )}
                 {when(isSelectMode(editorMode), <DistanceGuidelineControl />)}
+                {unless(
+                  sizeLabelInStrategyControls,
+                  <SizeLabel targets={localSelectedViews} pathsWereReplaced={false} />,
+                )}
                 <GuidelineControls />
               </>,
             )}