feat: accept children for checkbox

src/Fields/CheckboxField.tsx

@@ -1,5 +1,5 @@
 import { omit } from 'lodash';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import {
   useController,
   FieldValues,
@@ -16,16 +16,18 @@ type CheckboxFieldProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
 > = UseControllerProps<TFieldValues, TName> &
-  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
+  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> &
+  PropsWithChildren<{
     component?: CheckboxProps;
-  };
+  }>;
 
 export function CheckboxField<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   formItem,
   component,
+  children,
   ...controller
 }: CheckboxFieldProps<TFieldValues, TName>) {
   const { field } = useController<TFieldValues, TName>(controller);
@@ -42,7 +44,9 @@ export function CheckboxField<
         checked={field.value}
         disabled={disabled}
         {...component}
-      />
+      >
+        {children}
+      </Checkbox>
     </FieldWrapper>
   );
 }

src/Fields/index.stories.tsx

@@ -128,41 +128,35 @@ export const NestedProviders: Story<
 function AllFields() {
   const formMethods = useFormContext<FormType>();
   return (
-    <Form>
+    <Form labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
       <CheckboxField
         name="checkbox"
         control={formMethods.control}
         formItem={{
           label: 'Checkbox Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
-      />
+      >
+        Checkbox children
+      </CheckboxField>
       <InputField
         name="input"
         control={formMethods.control}
         formItem={{
           label: 'Input Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
       />
       <InputNumberField
         name="input_number"
         control={formMethods.control}
         formItem={{
           label: 'InputNumber Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
       />
       <RadioGroupField
         name="radio_group"
         control={formMethods.control}
         formItem={{
           label: 'InputNumber Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
         component={{
           options: [1, 2],
@@ -173,8 +167,6 @@ function AllFields() {
         control={formMethods.control}
         formItem={{
           label: 'Select Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
         component={{
           options: ['a', 'b'].map(toFormInputOption),
@@ -185,8 +177,6 @@ function AllFields() {
         control={formMethods.control}
         formItem={{
           label: 'TextArea Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
       />
     </Form>

src/Provider/index.stories.tsx

@@ -38,6 +38,7 @@ import {
   CustomDropdown as SelectCustomDropdownStory,
 } from '../Select/index.stories';
 import { Space } from '../Space';
+import { Simple as SimpleStepsStory } from '../Steps/index.stories';
 import { Table } from '../Table';
 import { Tag } from '../Tag';
 import { Typography } from '../Typography';
@@ -199,6 +200,7 @@ function SupportedComponents() {
       <TabsCardStory />
       <CardsGridStory />
       <CardMetaStory />
+      <SimpleStepsStory />
     </Space>
   );
 }

src/Steps/index.tsx

@@ -3,7 +3,17 @@ import {
   StepsProps as AntdStepsProps,
   StepProps as AntdStepProps,
 } from 'antd';
+import styled from 'styled-components';
+
+import { fontSizeFromTheme } from '../styled-utils';
 
-export const Steps: typeof AntdSteps = AntdSteps;
 export type StepsProps = AntdStepsProps;
 export type StepProps = AntdStepProps;
+
+export const Steps: typeof AntdSteps = styled(AntdSteps)`
+  font-size: ${fontSizeFromTheme};
+
+  .mll-ant-steps-icon {
+    top: -5%;
+  }
+`;