factor out style

concrete-utopia · Oct 10, 2024 · 8279ecf · 8279ecf
1 parent c25c954
commit 8279ecf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/editor/src/components/editor/defaults.ts b/editor/src/components/editor/defaults.ts
@@ -12,7 +12,7 @@ import {
   simpleAttribute,
 } from '../../core/shared/element-template'
 import type { NormalisedFrame } from 'utopia-api/core'
-import { defaultImageAttributes } from '../shared/project-components'
+import { defaultImageAttributes, insertableGridStyle } from '../shared/project-components'
 
 export function defaultSceneElement(
   uid: string,
@@ -177,16 +177,7 @@ export function defaultGridElement(uid: string): JSXElement {
     uid,
     jsxAttributesFromMap({
       'data-uid': jsExpressionValue(uid, emptyComments),
-      style: jsExpressionValue(
-        {
-          position: 'absolute',
-          display: 'grid',
-          gridTemplateColumns: '1fr 1fr 1fr',
-          gridTemplateRows: '1fr 1fr 1fr',
-          gap: 10,
-        },
-        emptyComments,
-      ),
+      style: jsExpressionValue(insertableGridStyle(), emptyComments),
     }),
     [],
   )

diff --git a/editor/src/components/shared/project-components.ts b/editor/src/components/shared/project-components.ts
@@ -63,6 +63,7 @@ import { intrinsicHTMLElementNamesThatSupportChildren } from '../../core/shared/
 import { getTopLevelElementByExportsDetail } from '../../core/model/project-file-utils'
 import { type Icon } from 'utopia-api'
 import type { FileRootPath } from '../canvas/ui-jsx-canvas'
+import type { CSSProperties } from 'react'
 
 export type StylePropOption = 'do-not-add' | 'add-size'
 
@@ -474,6 +475,16 @@ const divComponentGroup = {
   ),
 }
 
+export function insertableGridStyle(): CSSProperties {
+  return {
+    position: 'absolute',
+    display: 'grid',
+    gridTemplateColumns: '1fr 1fr 1fr',
+    gridTemplateRows: '1fr 1fr 1fr',
+    gap: 10,
+  }
+}
+
 const gridComponentGroup: ComponentDescriptorsForFile = {
   grid: {
     properties: {},
@@ -489,13 +500,9 @@ const gridComponentGroup: ComponentDescriptorsForFile = {
             jsxAttributesFromMap({
               style: jsExpressionValue(
                 {
-                  display: 'grid',
-                  gridTemplateRows: '1fr 1fr 1fr',
-                  gridTemplateColumns: '1fr 1fr 1fr',
-                  gap: 10,
-                  position: 'absolute',
-                  width: 200,
-                  height: 200,
+                  ...insertableGridStyle(),
+                  width: 150,
+                  height: 150,
                 },
                 emptyComments,
               ),