fix gear idea styles

Author: nikitayutanov

idea/gear/frontend/src/features/sails/ui/payload-form/payload-form.tsx

@@ -1,5 +1,6 @@
 import { Fields, ISailsFuncArg } from '@gear-js/sails-payload-form';
 import { InputProps, InputWrapper, Select } from '@gear-js/ui';
+import { ComponentProps } from 'react';
 import { Sails } from 'sails-js';
 
 import { Checkbox, Fieldset, Input, Textarea } from '@/shared/ui';
@@ -24,21 +25,35 @@ type ServiceProps = BaseProps & {
 
 type Props = ConstructorProps | ServiceProps;
 
+function PayloadSelect(props: Omit<ComponentProps<typeof Select>, 'direction' | 'gap'>) {
+  // eslint-disable-next-line react/no-children-prop
+  return <Select {...props} direction="y" children="" />;
+}
+
+function PayloadInput(props: Omit<ComponentProps<typeof Input>, 'direction' | 'gap'>) {
+  return <Input {...props} direction="y" />;
+}
+
+function PayloadTextarea(props: Omit<ComponentProps<typeof Textarea>, 'direction' | 'gap'>) {
+  return <Textarea {...props} direction="y" />;
+}
+
 function PayloadForm({ sails, select, args, gap, direction = 'x', ...props }: Props) {
   const isFunction = 'functionSelect' in props;
 
   return (
     <InputWrapper id="payload" label="Payload" size="normal" gap={gap} direction={direction} className={styles.form}>
-      <Select direction="y" {...select} />
-      {isFunction && <Select direction="y" {...props.functionSelect} />}
+      <PayloadSelect {...select} />
+      {isFunction && <PayloadSelect {...props.functionSelect} />}
 
       <Fields
         sails={sails}
         args={args}
         render={{
-          ui: { fieldset: Fieldset, select: Select },
-          rhf: { input: Input, textarea: Textarea, checkbox: Checkbox },
+          ui: { fieldset: Fieldset, select: PayloadSelect },
+          rhf: { input: PayloadInput, textarea: PayloadTextarea, checkbox: Checkbox },
         }}
+        renderContainer={Fieldset}
       />
     </InputWrapper>
   );

utils/sails-payload-form/src/components/fields.tsx

@@ -1,3 +1,4 @@
+import { JSX, PropsWithChildren } from 'react';
 import { Sails } from 'sails-js';
 import { ISailsTypeDef } from 'sails-js-types';
 
@@ -18,9 +19,10 @@ type Props = {
   sails: Sails;
   args: ISailsFuncArg[];
   render: FieldProps['render'];
+  renderContainer?: (props: PropsWithChildren) => JSX.Element;
 };
 
-function Fields({ sails, args, render }: Props) {
+function Fields({ sails, args, render, renderContainer }: Props) {
   const getFieldComponent = (def: ISailsTypeDef) => {
     if (def.isEnum) return EnumField;
     if (def.isStruct) return StructField;
@@ -45,7 +47,10 @@ function Fields({ sails, args, render }: Props) {
     );
   };
 
-  return args.map(({ typeDef, name }, index) => renderField(typeDef, name, getNestedName('payload', index.toString())));
+  const renderFields = () =>
+    args.map(({ typeDef, name }, index) => renderField(typeDef, name, getNestedName('payload', index.toString())));
+
+  return args.length && renderContainer ? renderContainer({ children: renderFields() }) : renderFields();
 }
 
 export { Fields };

utils/sails-payload-form/src/types/field-props.ts

@@ -6,7 +6,6 @@ import { ISailsTypeDef } from 'sails-js-types';
 type FieldsetProps = PropsWithChildren & { legend: string };
 
 type SelectProps = Pick<SelectHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> & {
-  label?: string;
   options: readonly OptionHTMLAttributes<HTMLOptionElement>[];
 };