fix: propagate props to field property (#243)

Author: Jaryt

src/components/atoms/form/MatrixProperty.tsx

@@ -78,9 +78,10 @@ export const MatrixProperty = ({
           }
           render={(arrayHelper) => (
             <FieldlessListProperty
+              {...props}
               description={props.description}
               label={label}
-              titleFont='font-medium text-sm'
+              titleFont="font-medium text-sm"
               name={
                 namePrefix
                   ? `${namePrefix}.matrix.parameters.${name}`
@@ -97,6 +98,7 @@ export const MatrixProperty = ({
         />
       ) : (
         <FieldlessInspectorProperty
+          {...props}
           label={label}
           labelClassName="h-8"
           description={props.description}

src/components/containers/CollapsibleList.tsx

@@ -35,6 +35,7 @@ const CollapsibleList = ({ titleFont, ...props }: CollapsibleListProps) => {
                 props.onChange && props.onChange(newExpanded);
               }}
               type="button"
+              style={{ width: 22, height: 22 }}
               className={`flex hover:bg-circle-gray-250 border-white border rounded px-1`}
             >
               <ExpandIcon className="w-3 h-5 mx-auto" expanded={expanded} />

src/components/containers/ParamListContainer.tsx

@@ -1,5 +1,6 @@
 import { parameters } from '@circleci/circleci-config-sdk';
 import { AnyParameterLiteral } from '@circleci/circleci-config-sdk/dist/src/lib/Components/Parameters/types/CustomParameterLiterals.types';
+import { Fragment } from 'react';
 import InspectorProperty from '../atoms/form/InspectorProperty';
 import { MatrixProperty } from '../atoms/form/MatrixProperty';
 
@@ -68,13 +69,13 @@ const ParamListContainer = ({
   return (
     <>
       {paramList.parameters.map((parameter, index) => {
+        console.log(subtypes[parameter.type](parameter));
         return (
-          <>
+          <Fragment key={index}>
             {matrix ? (
               <MatrixProperty
                 {...props}
                 label={parameter.name}
-                key={index}
                 values={values}
                 namePrefix={parent}
                 description={parameter.description}
@@ -87,12 +88,11 @@ const ParamListContainer = ({
                 label={parameter.name}
                 description={parameter.description}
                 values={values}
-                key={index}
                 name={parent ? `${parent}.${parameter.name}` : parameter.name}
                 {...subtypes[parameter.type](parameter)}
               />
             )}
-          </>
+          </Fragment>
         );
       })}
     </>

src/components/menus/definitions/OrbDefinitionsMenu.tsx

@@ -93,11 +93,16 @@ const OrbDefinitionContainer = (props: {
         title={props.dataMapping.name.plural || ''}
       >
         <>
-          <div className="p-2">
+          <div className="p-2 mb-2">
             <ComponentInfo type={props.dataMapping} />
           </div>
           {Object.entries(props.data).map(([name, ref]) => (
-            <Definition key={name} type={props.dataMapping} data={ref} index={-1} />
+            <Definition
+              key={name}
+              type={props.dataMapping}
+              data={ref}
+              index={-1}
+            />
           ))}
         </>
       </CollapsibleList>