Merge pull request #515 from components-ai/fieldset-passing

Properly name fieldset props

Author: johno

.changeset/cuddly-apples-taste.md

@@ -0,0 +1,5 @@
+---
+'@compai/css-gui': patch
+---
+
+Refactor fieldset passing

packages/gui/src/components/Editor/Controls.tsx

@@ -301,7 +301,7 @@ const ControlSet = ({ field, properties }: ControlSetProps) => {
         const fullField = field ? joinPath(field, property) : property
 
         return isFieldsetGroup(property) ? (
-          <FieldsetControl key={property} property={property} />
+          <FieldsetControl key={property} field={property} />
         ) : (
           <Control key={property} field={fullField} showRemove />
         )
@@ -311,15 +311,13 @@ const ControlSet = ({ field, properties }: ControlSetProps) => {
 }
 
 type FieldsetControlProps = {
-  field?: KeyArg
-  property: string
+  field: string
 }
-const FieldsetControl = ({ field, property }: FieldsetControlProps) => {
+const FieldsetControl = ({ field }: FieldsetControlProps) => {
   const { getField, removeField } = useEditor()
-  const styles = getField(field || property)
+  const styles = getField(field)
   const properties = Object.keys(styles)
-
-  const propertyLabel = addPseudoSyntax(property)
+  const label = addPseudoSyntax(field)
 
   return (
     <section
@@ -343,19 +341,19 @@ const FieldsetControl = ({ field, property }: FieldsetControlProps) => {
             lineHeight: 1,
           }}
         >
-          {removeInternalCSSClassSyntax(propertyLabel)}
+          {removeInternalCSSClassSyntax(label)}
         </h3>
-        <FieldsetDropdown onRemove={() => removeField(field || property)} />
+        <FieldsetDropdown onRemove={() => removeField(field)} />
       </div>
-      <GenericFieldset property={property}>
+      <GenericFieldset field={field}>
         <div sx={{ pb: 3 }}>
           <AddPropertyControl
-            field={field || property}
+            field={field}
             styles={styles}
-            label={`Add property to ${propertyLabel}`}
+            label={`Add property to ${label}`}
           />
         </div>
-        <ControlSet field={field} properties={properties} />
+        <ControlSet properties={properties} />
       </GenericFieldset>
     </section>
   )

packages/gui/src/components/Editor/Fieldset.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { elements } from '../../data/elements'
 import { pseudoClasses } from '../../data/pseudo-classes'
 import { pseudoElements } from '../../data/pseudo-elements'
-import { getFieldsetPropsFromProperty } from './util'
+import { getFieldsetPropsFromName } from './util'
 
 type PseudoElementTypes = typeof pseudoElements[number]
 type PseudoClassTypes = typeof pseudoClasses[number]
@@ -42,14 +42,9 @@ export const Fieldset = ({ type, name, children }: FieldsetProps) => {
 }
 
 type GenericFieldsetProps = {
-  property: string
+  field: string
   children?: React.ReactNode
 }
-export const GenericFieldset = ({
-  property,
-  children,
-}: GenericFieldsetProps) => {
-  return (
-    <Fieldset {...getFieldsetPropsFromProperty(property)}>{children}</Fieldset>
-  )
+export const GenericFieldset = ({ field, children }: GenericFieldsetProps) => {
+  return <Fieldset {...getFieldsetPropsFromName(field)}>{children}</Fieldset>
 }

packages/gui/src/components/Editor/util.ts

@@ -30,9 +30,7 @@ export const isFieldsetGroup = (str: string) => {
   return isPseudo(str) || isElement(str) || isInternalCSSClass(str)
 }
 
-export const getFieldsetPropsFromProperty = (
-  str: string
-): FieldsetContextProps => {
+export const getFieldsetPropsFromName = (str: string): FieldsetContextProps => {
   if (isElement(str)) {
     return {
       type: 'element',