More Inspector UI updates (#6229)

Reorganizing the layout of the inputs in the upper simplified layout section of the inspector: - put the Top and Left inputs, Width and Height inputs, and Fill/Hug/Fixed control input rows into the `UIGridRow` of `<--1fr--><--1fr-->|22px|` so they don't expand into the right-most area - changed the labels of those dropdowns from "fill container" to "fill", and "hug contents" to "hug" - moved the Frame/Fragment/Group control slightly to the left to align with the other inputs - tweaked the spacing between the icon labels and the text/numbers Other things: - made the alignment/distribute buttons use `SquareButton` so they could get a hover state - put the constraints section popups into a `UIGridRow` so they don't become too wide - fixed the dropdown arrow for the grid sections combobox | Before | After | | ------------- | ------------- | | ![13-30-sb7yp-uc5jg](https://github.com/user-attachments/assets/182005f0-2e8b-47e1-8334-a8832a7568a3) | ![13-27-y4avq-ajv9y](https://github.com/user-attachments/assets/523d2778-100b-4e6b-a805-34298b472dca) | | <img width="284" alt="Screenshot 2024-08-13 at 12 32 50 PM" src="https://github.com/user-attachments/assets/03a22517-f093-4c7f-854e-c2838a70b3d7"> | <img width="278" alt="Screenshot 2024-08-13 at 12 34 58 PM" src="https://github.com/user-attachments/assets/06d90a56-e3d4-4b47-a2bf-d04f4c33ee60"> | | <img width="286" alt="Screenshot 2024-08-13 at 3 55 54 PM" src="https://github.com/user-attachments/assets/d5b62268-1898-41ea-bda9-ffe6bbdf735b"> | <img width="279" alt="Screenshot 2024-08-13 at 3 54 51 PM" src="https://github.com/user-attachments/assets/b2c163c9-a558-4371-9c9d-eb9dff0cfed1"> | **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 · Aug 14, 2024 · da31010 · da31010
1 parent 58bb813
commit da31010
Show file tree

Hide file tree

Showing 14 changed files with 102 additions and 97 deletions.
diff --git a/editor/src/components/inspector/constraints-section.tsx b/editor/src/components/inspector/constraints-section.tsx
@@ -125,7 +125,7 @@ const GroupChildConstraintsSection = React.memo(() => {
 
   return (
     <FlexColumn css={{ paddingBottom: UtopiaTheme.layout.rowHorizontalPadding }}>
-      <UIGridRow padded variant='<-auto-><----------1fr--------->'>
+      <UIGridRow padded variant='<--auto--><--1fr-->|22px|'>
         <ChildPinControl
           key={selectedViews.map(EP.toString).join('-')}
           isGroupChild='group-child'
@@ -148,7 +148,7 @@ const FrameChildConstraintsSection = React.memo(() => {
 
   return (
     <FlexColumn css={{ paddingBottom: UtopiaTheme.layout.rowHorizontalPadding }}>
-      <UIGridRow padded variant='<-auto-><----------1fr--------->'>
+      <UIGridRow padded variant='<--auto--><--1fr-->|22px|'>
         <ChildPinControl isGroupChild='frame-child' pins={pins} framePinsInfo={framePinsInfo} />
         <FlexColumn css={{ gap: 8 }}>
           <ChildConstraintSelect isGroupChild='frame-child' dimension={'width'} />

diff --git a/editor/src/components/inspector/fill-hug-fixed-control.tsx b/editor/src/components/inspector/fill-hug-fixed-control.tsx
@@ -71,13 +71,13 @@ import type { ElementPathTrees } from '../../core/shared/element-path-tree'
 export const FillFixedHugControlId = (segment: 'width' | 'height'): string =>
   `hug-fixed-fill-${segment}`
 
-export const FillContainerLabel = 'Fill container' as const
+export const FillContainerLabel = 'Fill' as const
 export const FixedLabel = 'Fixed' as const
 export const ScaledLabel = 'Scaled' as const
-export const HugContentsLabel = 'Hug contents' as const
+export const HugContentsLabel = 'Hug' as const
 export const SqueezeContentsLabel = 'Squeeze' as const
 export const CollapsedLabel = 'Collapsed' as const
-export const HugGroupContentsLabel = 'Hug contents' as const
+export const HugGroupContentsLabel = 'Hug' as const
 export const ComputedLabel = 'Computed' as const
 export const DetectedLabel = 'Detected' as const
 

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
@@ -523,7 +523,6 @@ function AxisDimensionControl({
           {value.areaName ?? index + 1}
         </Subdued>
         <NumberOrKeywordControl
-          style={{ flex: 1 }}
           testId={testId}
           value={value.value}
           keywords={gridDimensionDropdownKeywords}

diff --git a/editor/src/components/inspector/inspector.tsx b/editor/src/components/inspector/inspector.tsx
@@ -51,7 +51,7 @@ import {
   useKeepReferenceEqualityIfPossible,
   useKeepShallowReferenceEquality,
 } from '../../utils/react-performance'
-import { Icn, useColorTheme, UtopiaTheme, FlexRow, Button } from '../../uuiui'
+import { Icn, useColorTheme, UtopiaTheme, FlexRow, Button, SquareButton } 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'
@@ -122,15 +122,15 @@ interface AlignDistributeButtonProps {
 const AlignDistributeButton = React.memo<AlignDistributeButtonProps>(
   (props: AlignDistributeButtonProps) => {
     return (
-      <Button disabled={props.disabled} onMouseUp={props.onMouseUp}>
+      <SquareButton highlight disabled={props.disabled} onMouseUp={props.onMouseUp}>
         <Icn
           tooltipText={props.toolTip}
           category='layout/commands'
           type={props.iconType}
           width={16}
           height={16}
         />
-      </Button>
+      </SquareButton>
     )
   },
 )
@@ -177,7 +177,6 @@ const AlignmentButtons = React.memo((props: { numberOfTargets: number }) => {
         justifyContent: 'space-around',
         alignItems: 'center',
         height: UtopiaTheme.layout.rowHeight.normal,
-        background: colorTheme.inspectorBackground.value,
         padding: '8px 0px',
         flexShrink: 0,
       }}

diff --git a/...ponents/inspector/sections/layout-section/self-layout-subsection/clip-content-control.tsx b/...ponents/inspector/sections/layout-section/self-layout-subsection/clip-content-control.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { useInspectorStyleInfo, useIsSubSectionVisible } from '../../../common/property-path-hooks'
 import { BooleanControl } from '../../../controls/boolean-control'
 import { FlexRow } from 'utopia-api'
+import { UtopiaTheme } from '../../../../../uuiui'
 
 export const ClipContentControl = React.memo(() => {
   const isVisible = useIsSubSectionVisible('overflow')
@@ -20,7 +21,15 @@ export const ClipContentControl = React.memo(() => {
   }
 
   return (
-    <FlexRow style={{ paddingBottom: 8, alignItems: 'center', gap: 8 }} css={undefined}>
+    <FlexRow
+      style={{
+        minHeight: UtopiaTheme.layout.rowHeight.normal,
+        paddingBottom: 8,
+        alignItems: 'center',
+        gap: 8,
+      }}
+      css={undefined}
+    >
       <BooleanControl
         key='clip-content-control'
         id='clip-content-control'

diff --git a/...ons/layout-section/self-layout-subsection/frame-updating-layout-section.spec.browser2.tsx b/...ons/layout-section/self-layout-subsection/frame-updating-layout-section.spec.browser2.tsx
@@ -540,8 +540,8 @@ describe('Frame updating layout section', () => {
               </Group>
             </Group>
           </div>`,
-        expectedFixedHugDropdownWidthValue: 'Hug contents',
-        expectedFixedHugDropdownHeightValue: 'Hug contents',
+        expectedFixedHugDropdownWidthValue: 'Hug',
+        expectedFixedHugDropdownHeightValue: 'Hug',
       }),
     )
 
@@ -710,8 +710,8 @@ describe('Frame updating layout section', () => {
               </Group>
             </Group>
           </div>`,
-        expectedFixedHugDropdownWidthValue: 'Hug contents',
-        expectedFixedHugDropdownHeightValue: 'Hug contents',
+        expectedFixedHugDropdownWidthValue: 'Hug',
+        expectedFixedHugDropdownHeightValue: 'Hug',
       }),
     )
   })
@@ -1113,8 +1113,8 @@ describe('Frame updating layout section', () => {
               </Group>
             </Group>
           </div>`,
-        expectedFixedHugDropdownWidthValue: 'Hug contents',
-        expectedFixedHugDropdownHeightValue: 'Hug contents',
+        expectedFixedHugDropdownWidthValue: 'Hug',
+        expectedFixedHugDropdownHeightValue: 'Hug',
       }),
     )
 
@@ -1427,7 +1427,7 @@ describe('Frame updating layout section', () => {
             />
           </div>`,
         expectedFixedHugDropdownWidthValue: 'Scaled',
-        expectedFixedHugDropdownHeightValue: 'Fill container',
+        expectedFixedHugDropdownHeightValue: 'Fill',
       }),
     )
 
@@ -1693,8 +1693,8 @@ describe('Frame updating layout section', () => {
           </Group>
         </Group>
       </div>`,
-        expectedFixedHugDropdownWidthValue: 'Hug contents',
-        expectedFixedHugDropdownHeightValue: 'Hug contents',
+        expectedFixedHugDropdownWidthValue: 'Hug',
+        expectedFixedHugDropdownHeightValue: 'Hug',
       }),
     )
 
@@ -1863,8 +1863,8 @@ describe('Frame updating layout section', () => {
           </Group>
         </Group>
       </div>`,
-        expectedFixedHugDropdownWidthValue: 'Hug contents',
-        expectedFixedHugDropdownHeightValue: 'Hug contents',
+        expectedFixedHugDropdownWidthValue: 'Hug',
+        expectedFixedHugDropdownHeightValue: 'Hug',
       }),
     )
 
@@ -2033,8 +2033,8 @@ describe('Frame updating layout section', () => {
           </Group>
         </Group>
       </div>`,
-        expectedFixedHugDropdownWidthValue: 'Hug contents',
-        expectedFixedHugDropdownHeightValue: 'Hug contents',
+        expectedFixedHugDropdownWidthValue: 'Hug',
+        expectedFixedHugDropdownHeightValue: 'Hug',
       }),
     )
 
@@ -2203,8 +2203,8 @@ describe('Frame updating layout section', () => {
           </Group>
         </Group>
       </div>`,
-        expectedFixedHugDropdownWidthValue: 'Hug contents',
-        expectedFixedHugDropdownHeightValue: 'Hug contents',
+        expectedFixedHugDropdownWidthValue: 'Hug',
+        expectedFixedHugDropdownHeightValue: 'Hug',
       }),
     )
   })
@@ -2407,7 +2407,7 @@ describe('Frame updating layout section', () => {
               }}
             />
           </div>`,
-        expectedFixedHugDropdownWidthValue: 'Fill container',
+        expectedFixedHugDropdownWidthValue: 'Fill',
         expectedFixedHugDropdownHeightValue: 'Scaled',
       }),
     )

diff --git a/...nspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx b/...nspector/sections/layout-section/self-layout-subsection/frame-updating-layout-section.tsx
@@ -273,11 +273,7 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
 
   return (
     <>
-      <UIGridRow
-        padded={false}
-        variant='<--1fr--><--1fr-->'
-        style={{ minHeight: undefined, gap: 4 }}
-      >
+      <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
         <FrameUpdatingLayoutControl
           property='left'
           label='L'
@@ -293,11 +289,7 @@ export const FrameUpdatingLayoutSection = React.memo(() => {
           invalid={invalidPins.top || invalidPins.bottom} // currently showing red for BOTH directions
         />
       </UIGridRow>
-      <UIGridRow
-        padded={false}
-        variant='<--1fr--><--1fr-->'
-        style={{ minHeight: undefined, gap: 4 }}
-      >
+      <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
         <FrameUpdatingLayoutControl
           property='width'
           label='W'

diff --git a/...inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx b/...inspector/sections/layout-section/self-layout-subsection/simplified-layout-subsection.tsx
@@ -1,6 +1,12 @@
 import React from 'react'
 import { when } from '../../../../../utils/react-conditionals'
-import { FlexColumn, FlexRow, InspectorSubsectionHeader, Tooltip } from '../../../../../uuiui'
+import {
+  FlexColumn,
+  FlexRow,
+  InspectorSubsectionHeader,
+  Tooltip,
+  UtopiaTheme,
+} from '../../../../../uuiui'
 import { Link } from '../../../../../uuiui/link'
 import { useConvertWrapperToFrame } from '../../../../canvas/canvas-strategies/strategies/group-conversion-helpers'
 import { Substores, useEditorState } from '../../../../editor/store/store-hook'
@@ -29,38 +35,34 @@ export const SimplifiedLayoutSubsection = React.memo(() => {
 
   return (
     <FlexColumn>
-      <InspectorSubsectionHeader style={{ border: 'none' }}>
-        <FlexRow
-          style={{
-            flexGrow: 1,
-            gap: 8,
-            height: 42,
-          }}
-        >
-          <EditorContractDropdown />
-          <ResizeToFitControl />
-        </FlexRow>
-      </InspectorSubsectionHeader>
+      <FlexRow
+        style={{
+          flexGrow: 1,
+          gap: 8,
+          height: UtopiaTheme.layout.rowHeight.normal,
+          padding: `0 ${UtopiaTheme.layout.inspectorXPadding}px 0 4px`,
+          fontWeight: 600,
+        }}
+      >
+        <EditorContractDropdown />
+        <ResizeToFitControl />
+      </FlexRow>
       {when(showWrapperSectionWarning, <WrapperElementDisclosureBox />)}
-      <FlexColumn style={{ gap: 8, paddingLeft: 8, paddingRight: 8 }}>
+      <FlexColumn style={{ paddingLeft: 8, paddingRight: 8 }}>
         {when(
           showLayoutSection,
           <>
             <FrameUpdatingLayoutSection />
-            <UIGridRow
-              padded={false}
-              variant='<--1fr--><--1fr-->'
-              style={{ minHeight: undefined, gap: 4 }}
-            >
+            <UIGridRow padded={false} variant='<--1fr--><--1fr-->|22px|'>
               <FixedHugDropdown dimension='width' />
               <FixedHugDropdown dimension='height' />
             </UIGridRow>
-            <FlexRow style={{ minHeight: undefined, gap: 4 }}>
+            <UIGridRow padded={false} variant='<-------------1fr------------->'>
               <RadiusRow />
-            </FlexRow>
-            <FlexRow style={{ minHeight: undefined, gap: 4 }}>
+            </UIGridRow>
+            <UIGridRow padded={false} variant='<-------------1fr------------->'>
               <ClipContentControl />
-            </FlexRow>
+            </UIGridRow>
           </>,
         )}
       </FlexColumn>

diff --git a/...rc/components/inspector/sections/style-section/text-subsection/text-shadow-subsection.tsx b/...rc/components/inspector/sections/style-section/text-subsection/text-shadow-subsection.tsx
@@ -176,8 +176,7 @@ const TextShadowItem = React.memo<TextShadowItemProps>((props) => {
     <PropertyRow
       key={props.index}
       style={{
-        gridTemplateColumns: `12px 28px repeat(3, 1fr) ${UtopiaTheme.layout.inputHeight.default}`,
-        gridColumnGap: 8,
+        gridTemplateColumns: `12px 28px 1fr 1fr 1fr ${UtopiaTheme.layout.inputHeight.default}px`,
       }}
     >
       <BooleanControl

diff --git a/editor/src/components/inspector/widgets/ui-grid-row.tsx b/editor/src/components/inspector/widgets/ui-grid-row.tsx
@@ -67,9 +67,13 @@ const gridTemplates = {
     gridTemplateColumns: '1fr 1fr',
   },
   '<--1fr--><--1fr-->|22px|': {
-    gridColumnGap: 4,
+    gridColumnGap: 8,
     gridTemplateColumns: '1fr 1fr 22px',
   },
+  '<--auto--><--1fr-->|22px|': {
+    gridColumnGap: 8,
+    gridTemplateColumns: 'auto 1fr 22px',
+  },
   '<--1fr--><--1fr-->|-18px-|': {
     gridColumnGap: 4,
     // multiple columns with 1fr don't actually resize evenly as expected,