move border radius section (#4416)

* move border radius section * update snapshots * remove padding from radius row * margin-top: 12
concrete-utopia · Oct 24, 2023 · 6417d38 · 6417d38
1 parent 8374614
commit 6417d38
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 39 deletions.
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
@@ -5,6 +5,7 @@ import { FixedHugDropdown } from '../../../fill-hug-fixed-control'
 import { UIGridRow } from '../../../widgets/ui-grid-row'
 import { ClipContentControl } from './clip-content-control'
 import { FrameUpdatingLayoutSection } from './frame-updating-layout-section'
+import { RadiusRow } from '../../style-section/container-subsection/radius-row'
 
 export const SimplifiedLayoutSubsection = React.memo(() => {
   return (
@@ -30,6 +31,9 @@ export const SimplifiedLayoutSubsection = React.memo(() => {
           <FixedHugDropdown dimension='width' />
           <FixedHugDropdown dimension='height' />
         </UIGridRow>
+        <FlexRow style={{ minHeight: undefined, gap: 4 }}>
+          <RadiusRow />
+        </FlexRow>
         <FlexRow style={{ minHeight: undefined, gap: 4 }}>
           <ClipContentControl />
         </FlexRow>

diff --git a/...components/inspector/sections/style-section/container-subsection/container-subsection.tsx b/...components/inspector/sections/style-section/container-subsection/container-subsection.tsx
@@ -5,7 +5,6 @@ import { PaddingRow } from '../../layout-section/layout-system-subsection/layout
 import { BlendModeRow } from './blendmode-row'
 import { OpacityRow } from './opacity-row'
 import { OverflowRow } from './overflow-row'
-import { RadiusRow } from './radius-row'
 
 export const ContainerSubsection = React.memo(() => {
   const [seeMoreVisible, toggleSeeMoreVisible] = useToggle(false)
@@ -29,7 +28,6 @@ export const ContainerSubsection = React.memo(() => {
       </InspectorSubsectionHeader>
       <OpacityRow />
       <OverflowRow />
-      <RadiusRow />
       <PaddingRow />
       <SeeMoreHOC visible={seeMoreVisible}>
         <BlendModeRow />

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
@@ -52,7 +52,12 @@ export const RadiusRow = React.memo(() => {
       items={contextMenuItems}
       data={null}
     >
-      <UIGridRow tall padded={true} variant='<---1fr--->|------172px-------|'>
+      <UIGridRow
+        tall
+        padded={false}
+        variant='<---1fr--->|------172px-------|'
+        style={{ marginTop: 12 }}
+      >
         <PropertyLabel
           target={[]}
           propNamesToUnset={contextMenuLabel}

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
@@ -405,6 +405,12 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/Symbol(react.memo)(NumberInput)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)(PropertyLabel)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(UIGridRow)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/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/UtopiaSpiedFunctionComponent(PinControl)",
@@ -422,12 +428,6 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//div",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
@@ -871,6 +871,12 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/Symbol(react.memo)(NumberInput)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)(PropertyLabel)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(UIGridRow)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/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/UtopiaSpiedFunctionComponent(PinControl)",
@@ -888,12 +894,6 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//div",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
@@ -1115,6 +1115,12 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/Symbol(react.memo)(NumberInput)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)(PropertyLabel)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(UIGridRow)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/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/UtopiaSpiedFunctionComponent(PinControl)",
@@ -1180,12 +1186,6 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//div",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
@@ -1551,6 +1551,12 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/Symbol(react.memo)(NumberInput)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)(PropertyLabel)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(UIGridRow)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/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/UtopiaSpiedFunctionComponent(PinControl)",
@@ -1615,12 +1621,6 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//div",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
@@ -1856,6 +1856,12 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/Symbol(react.memo)(NumberInput)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)(PropertyLabel)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(UIGridRow)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/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/UtopiaSpiedFunctionComponent(PinControl)",
@@ -1921,12 +1927,6 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//div",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
@@ -2260,6 +2260,12 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/Symbol(react.memo)(NumberInput)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/FrameUpdatingLayoutControl/UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)(PropertyLabel)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//Symbol(react.memo)()",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(UIGridRow)",
+  "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedClass(InspectorContextMenuWrapper)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
+  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/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/UtopiaSpiedFunctionComponent(PinControl)",
@@ -2324,12 +2330,6 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedClass(InspectorContextMenuWrapper)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
-  "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div//Symbol(react.memo)()",
-  "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)(PropertyLabel)",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//div",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//Symbol(react.memo)()",
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(UIGridRow)",