From 625afeeaddb738397ea5f6258f7ea7febb99f5b9 Mon Sep 17 00:00:00 2001
From: Michael Adlfinger <4804412+mic-web@users.noreply.github.com>
Date: Wed, 10 Aug 2022 11:27:56 +0200
Subject: [PATCH 1/5] feat: accept children for checkbox

---
 src/Fields/CheckboxField.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/Fields/CheckboxField.tsx b/src/Fields/CheckboxField.tsx
index b6042543..75044c11 100644
--- a/src/Fields/CheckboxField.tsx
+++ b/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,9 +16,9 @@ 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,
@@ -26,6 +26,7 @@ export function CheckboxField<
 >({
   formItem,
   component,
+  children,
   ...controller
 }: CheckboxFieldProps<TFieldValues, TName>) {
   const { field } = useController<TFieldValues, TName>(controller);
@@ -42,7 +43,7 @@ export function CheckboxField<
         checked={field.value}
         disabled={disabled}
         {...component}
-      />
+      >{children}</Checkbox>
     </FieldWrapper>
   );
 }

From 7518c8989553da6cf3697febae094cace243bef1 Mon Sep 17 00:00:00 2001
From: mic-web <mic-web@users.noreply.github.com>
Date: Wed, 10 Aug 2022 09:30:04 +0000
Subject: [PATCH 2/5] refactor: Apply eslint fix

---
 src/Fields/CheckboxField.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/Fields/CheckboxField.tsx b/src/Fields/CheckboxField.tsx
index 75044c11..9d0653ff 100644
--- a/src/Fields/CheckboxField.tsx
+++ b/src/Fields/CheckboxField.tsx
@@ -1,5 +1,5 @@
 import { omit } from 'lodash';
-import React, { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from 'react';
 import {
   useController,
   FieldValues,
@@ -16,7 +16,8 @@ type CheckboxFieldProps<
   TFieldValues extends FieldValues,
   TName extends FieldPath<TFieldValues>,
 > = UseControllerProps<TFieldValues, TName> &
-  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & PropsWithChildren<{
+  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> &
+  PropsWithChildren<{
     component?: CheckboxProps;
   }>;
 
@@ -43,7 +44,9 @@ export function CheckboxField<
         checked={field.value}
         disabled={disabled}
         {...component}
-      >{children}</Checkbox>
+      >
+        {children}
+      </Checkbox>
     </FieldWrapper>
   );
 }

From c1ab9c09bf7f47203cc7b88ae5db8a6e5ba46b50 Mon Sep 17 00:00:00 2001
From: Michael Adlfinger <4804412+mic-web@users.noreply.github.com>
Date: Wed, 10 Aug 2022 11:46:03 +0200
Subject: [PATCH 3/5] test: checkbox children in story

---
 src/Fields/index.stories.tsx | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/Fields/index.stories.tsx b/src/Fields/index.stories.tsx
index 00bd4ff5..595533a9 100644
--- a/src/Fields/index.stories.tsx
+++ b/src/Fields/index.stories.tsx
@@ -128,23 +128,19 @@ 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
@@ -152,8 +148,6 @@ function AllFields() {
         control={formMethods.control}
         formItem={{
           label: 'InputNumber Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
       />
       <RadioGroupField
@@ -161,8 +155,6 @@ function AllFields() {
         control={formMethods.control}
         formItem={{
           label: 'InputNumber Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
         component={{
           options: [1, 2],
@@ -173,8 +165,6 @@ function AllFields() {
         control={formMethods.control}
         formItem={{
           label: 'Select Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
         component={{
           options: ['a', 'b'].map(toFormInputOption),
@@ -185,8 +175,6 @@ function AllFields() {
         control={formMethods.control}
         formItem={{
           label: 'TextArea Label',
-          labelCol: { span: 10 },
-          wrapperCol: { span: 14 },
         }}
       />
     </Form>

From adfe500a5d2b503334fbef9d314ed92b778b9c31 Mon Sep 17 00:00:00 2001
From: mic-web <mic-web@users.noreply.github.com>
Date: Wed, 10 Aug 2022 09:47:40 +0000
Subject: [PATCH 4/5] refactor: Apply eslint fix

---
 src/Fields/index.stories.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Fields/index.stories.tsx b/src/Fields/index.stories.tsx
index 595533a9..6902b07b 100644
--- a/src/Fields/index.stories.tsx
+++ b/src/Fields/index.stories.tsx
@@ -128,14 +128,16 @@ export const NestedProviders: Story<
 function AllFields() {
   const formMethods = useFormContext<FormType>();
   return (
-    <Form labelCol={{span: 10}} wrapperCol={{span: 14}}>
+    <Form labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
       <CheckboxField
         name="checkbox"
         control={formMethods.control}
         formItem={{
           label: 'Checkbox Label',
         }}
-      >Checkbox children</CheckboxField>
+      >
+        Checkbox children
+      </CheckboxField>
       <InputField
         name="input"
         control={formMethods.control}

From 2191f0dcc2ad7ae7c719eca008d87c17c296e3a4 Mon Sep 17 00:00:00 2001
From: Michael Adlfinger <4804412+mic-web@users.noreply.github.com>
Date: Mon, 12 Sep 2022 16:52:00 +0200
Subject: [PATCH 5/5] fix: adapt steps to font size and center icon vertically

---
 src/Provider/index.stories.tsx |  2 ++
 src/Steps/index.tsx            | 12 +++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Provider/index.stories.tsx b/src/Provider/index.stories.tsx
index 84574de2..32683c13 100644
--- a/src/Provider/index.stories.tsx
+++ b/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>
   );
 }
diff --git a/src/Steps/index.tsx b/src/Steps/index.tsx
index 462d4ce6..d4419511 100644
--- a/src/Steps/index.tsx
+++ b/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%;
+  }
+`;