From 94fab996baa3ba31d02b5c9e8578f02465cbe631 Mon Sep 17 00:00:00 2001
From: Wahid Rahim <wahidrahim@gmail.com>
Date: Tue, 8 Feb 2022 16:21:05 -0500
Subject: [PATCH 1/4] fix: checkbox label alignments

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

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index baf1a63..4c569e7 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -4,6 +4,7 @@ import { Flex } from '../Flex';
 import { getMargin, visuallyHidden } from '../../theme/utils';
 import { Icon } from '../Icon';
 import { polyIcons } from '../../theme';
+import { Box } from '../Box';
 
 export type CheckboxVariant = 'basic';
 
@@ -135,7 +136,7 @@ export const Checkbox: FC<CheckboxProps> = ({
 
   return (
     <LabelComponent variant={variant} margin={margin}>
-      <Flex variant="raw">
+      <Flex variant="raw" align="center">
         <Input
           {...props}
           {...checkedProps}
@@ -162,9 +163,9 @@ export const Checkbox: FC<CheckboxProps> = ({
         </CheckboxInput>
         <Fragment key={`${name}Label`}>
           {typeof label === 'string' ? (
-            <Label variant="raw">
-              <label htmlFor={name}>{label}</label>
-            </Label>
+            <Box variant="raw" margin="0 0 0 xs">
+              {label}
+            </Box>
           ) : (
             label
           )}

From 2fa516ba057c4f662490212322ca38472eb468b4 Mon Sep 17 00:00:00 2001
From: Wahid Rahim <wahidrahim@gmail.com>
Date: Tue, 8 Feb 2022 16:21:14 -0500
Subject: [PATCH 2/4] feat: add demo for custom labels in checkbox

---
 src/components/Checkbox/Checkbox.stories.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index b9be33a..c690686 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps } from 'react';
 import { Story } from '@storybook/react';
 
+import { Text } from '../Text';
 import { Checkbox } from './Checkbox';
 
 export default {
@@ -9,10 +10,22 @@ export default {
 };
 
 const Template: Story<ComponentProps<typeof Checkbox>> = (props: any) => (
-  <Checkbox {...props} />
+  <>
+    <Checkbox {...props} />
+    <Checkbox
+      {...props}
+      label={
+        <Text as="span" variant="b1m" margin="0 0 0 xs">
+          Custom label component
+        </Text>
+      }
+      margin="s 0 0"
+    />
+  </>
 );
 
 export const Basic = Template.bind({});
+
 Basic.args = {
   name: 'chkbox1',
   label: 'Checkbox label',

From e733080a6697e72abb9795f6afe2f1e5f9998752 Mon Sep 17 00:00:00 2001
From: Wahid Rahim <wahidrahim@gmail.com>
Date: Tue, 8 Feb 2022 18:03:01 -0500
Subject: [PATCH 3/4] fix: input with forward ref

---
 src/components/Input/Input.tsx | 148 +++++++++++++++++----------------
 1 file changed, 78 insertions(+), 70 deletions(-)

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 8c21192..63d9173 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,4 +1,4 @@
-import { FC, WheelEvent, ComponentType } from 'react';
+import { WheelEvent, ComponentType, forwardRef } from 'react';
 import styled from 'styled-components';
 import NumberInput from 'react-number-format';
 
@@ -61,7 +61,7 @@ const InputWrapper = styled(Grid)<InputWrapperProps>(
   }),
 );
 
-const Component = styled.input(({ theme, readOnly }) => ({
+const InputComponent = styled.input(({ theme, readOnly }) => ({
   ...(theme.INPUT || {}),
   margin: 0,
   padding: 0,
@@ -81,75 +81,83 @@ const Unit = styled.div(({ theme }) => ({
   color: theme.COLOR.gray3,
 }));
 
-export const Input: FC<InputProps> = ({
-  variant,
-  margin,
-  type,
-  label,
-  tooltip,
-  icon,
-  unit,
-  error,
-  isDivisible = true,
-  disabled,
-  readOnly,
-  ...props
-}) => {
-  const isBasic = variant === 'basic';
-  const isAmount = variant === 'amount';
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  function ForwardRefInput(inputComponentProps, ref) {
+    const {
+      variant,
+      margin,
+      type,
+      label,
+      tooltip,
+      icon,
+      unit,
+      error,
+      isDivisible = true,
+      disabled,
+      readOnly,
+      ...props
+    } = inputComponentProps;
 
-  const componentProps = {
-    ...props,
-    disabled,
-    readOnly,
-    ...(isBasic ? { type } : {}),
-    ...(isAmount
-      ? {
-          thousandSeparator: true,
-          allowNegative: false,
-          decimalScale: isDivisible ? 6 : 0,
-          onWheel: (e: WheelEvent<HTMLInputElement>) => {
-            e.currentTarget.blur();
-          },
-        }
-      : {}),
-  };
+    const isBasic = variant === 'basic';
+    const isAmount = variant === 'amount';
 
-  return (
-    <Text as="label" variant="b2m" display="block" margin={margin}>
-      {label && tooltip && (
-        <Flex variant="raw" justify={tooltip ? 'spaced' : 'start'}>
-          <Text as="span" variant="b2m" color={disabled ? 'gray4' : 'gray1'}>
-            {label}
-          </Text>
-          {tooltip && <Tooltip variant="icon" content={tooltip} />}
-        </Flex>
-      )}
-      <InputWrapper
-        variant="raw"
-        align="center"
-        cols={`${icon ? 'auto ' : ''}1fr${unit ? ' auto' : ''}`}
-        error={error}
-        disabled={disabled}
-        readOnly={readOnly}
-      >
-        {icon && (
-          <Icon
-            icon={icon}
-            variant="basic"
-            size="24px"
-            color="gray3"
-            margin="0 s 0 0"
+    const componentProps = {
+      ...props,
+      disabled,
+      readOnly,
+      ...(isBasic ? { type } : {}),
+      ...(isAmount
+        ? {
+            thousandSeparator: true,
+            allowNegative: false,
+            decimalScale: isDivisible ? 6 : 0,
+            onWheel: (e: WheelEvent<HTMLInputElement>) => {
+              e.currentTarget.blur();
+            },
+          }
+        : {}),
+    };
+
+    return (
+      <Text as="label" variant="b2m" display="block" margin={margin}>
+        {label && tooltip && (
+          <Flex variant="raw" justify={tooltip ? 'spaced' : 'start'}>
+            <Text as="span" variant="b2m" color={disabled ? 'gray4' : 'gray1'}>
+              {label}
+            </Text>
+            {tooltip && <Tooltip variant="icon" content={tooltip} />}
+          </Flex>
+        )}
+        <InputWrapper
+          variant="raw"
+          align="center"
+          cols={`${icon ? 'auto ' : ''}1fr${unit ? ' auto' : ''}`}
+          error={error}
+          disabled={disabled}
+          readOnly={readOnly}
+        >
+          {icon && (
+            <Icon
+              icon={icon}
+              variant="basic"
+              size="24px"
+              color="gray3"
+              margin="0 s 0 0"
+            />
+          )}
+          <InputComponent
+            ref={ref}
+            as={isAmount ? NumberInput : 'input'}
+            {...componentProps}
           />
+          {unit && <Unit>{unit}</Unit>}
+        </InputWrapper>
+        {error && (
+          <Text as="span" variant="b3" color="danger">
+            {error}
+          </Text>
         )}
-        <Component as={isAmount ? NumberInput : 'input'} {...componentProps} />
-        {unit && <Unit>{unit}</Unit>}
-      </InputWrapper>
-      {error && (
-        <Text as="span" variant="b3" color="danger">
-          {error}
-        </Text>
-      )}
-    </Text>
-  );
-};
+      </Text>
+    );
+  },
+);

From 32a00e7ab639aa34580d7512cfe53f4e332590c6 Mon Sep 17 00:00:00 2001
From: Wahid Rahim <wahidrahim@gmail.com>
Date: Tue, 8 Feb 2022 22:36:21 -0500
Subject: [PATCH 4/4] fix: checkbox to work with react-hook-form

---
 src/components/Checkbox/Checkbox.tsx | 119 +++++++++++++--------------
 src/components/Input/Input.tsx       |   4 +-
 2 files changed, 59 insertions(+), 64 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 4c569e7..1919809 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -1,17 +1,16 @@
-import { FC, Fragment } from 'react';
+import { ChangeEventHandler, forwardRef, Fragment } from 'react';
 import styled from 'styled-components';
 import { Flex } from '../Flex';
 import { getMargin, visuallyHidden } from '../../theme/utils';
 import { Icon } from '../Icon';
 import { polyIcons } from '../../theme';
-import { Box } from '../Box';
 
 export type CheckboxVariant = 'basic';
 
 export type CheckboxProps = {
   variant: CheckboxVariant;
   margin?: string;
-  onChange?: (e: boolean) => void;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
   defaultChecked?: boolean;
   checked?: boolean;
   name?: string;
@@ -112,65 +111,61 @@ const LabelComponent = styled.label<{ variant: string; margin?: string }>(
 
 const Label = styled(Flex)<any>(({ theme }) => ({
   ...(theme.CHECKBOX['labelMargin'] || {}),
+  paddingTop: '1px',
 }));
 
-export const Checkbox: FC<CheckboxProps> = ({
-  variant,
-  margin,
-  name,
-  defaultChecked,
-  checked,
-  onChange,
-  label,
-  indeterminate,
-  ...props
-}) => {
-  const checkedProps =
-    typeof checked !== 'undefined' ? { checked } : { defaultChecked };
-
-  const handleChange = (e: any) => {
-    if (onChange) {
-      onChange(e.currentTarget.checked);
-    }
-  };
-
-  return (
-    <LabelComponent variant={variant} margin={margin}>
-      <Flex variant="raw" align="center">
-        <Input
-          {...props}
-          {...checkedProps}
-          type="checkbox"
-          id={name}
-          name={name}
-          onChange={handleChange}
-        />
-        <CheckboxInput
-          {...(indeterminate ? { className: 'indeterminate' } : {})}
-        >
-          <MinusBoxIcon
-            variant="basic"
-            size="1.5em"
-            icon={polyIcons.MinusBox}
-            className="minusIcon"
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function ForwardRefCheckbox(checkboxProps, ref) {
+    const {
+      variant,
+      margin,
+      defaultChecked,
+      checked,
+      label,
+      indeterminate,
+      name,
+      ...props
+    } = checkboxProps;
+
+    const checkedProps =
+      typeof checked !== 'undefined' ? { checked } : { defaultChecked };
+
+    return (
+      <LabelComponent variant={variant} margin={margin}>
+        <Flex variant="raw" align="center">
+          <Input
+            {...props}
+            {...checkedProps}
+            ref={ref}
+            id={name}
+            name={name}
+            type="checkbox"
           />
-          <CheckStateIcon
-            variant="basic"
-            size="1.5em"
-            icon={polyIcons.CheckboxMarked}
-            className="checkIcon"
-          />
-        </CheckboxInput>
-        <Fragment key={`${name}Label`}>
-          {typeof label === 'string' ? (
-            <Box variant="raw" margin="0 0 0 xs">
-              {label}
-            </Box>
-          ) : (
-            label
-          )}
-        </Fragment>
-      </Flex>
-    </LabelComponent>
-  );
-};
+          <CheckboxInput
+            {...(indeterminate ? { className: 'indeterminate' } : {})}
+          >
+            <MinusBoxIcon
+              variant="basic"
+              size="1.5em"
+              icon={polyIcons.MinusBox}
+              className="minusIcon"
+            />
+            <CheckStateIcon
+              variant="basic"
+              size="1.5em"
+              icon={polyIcons.CheckboxMarked}
+              className="checkIcon"
+            />
+          </CheckboxInput>
+          <Fragment key={`${name}Label`}>
+            {typeof label === 'string' ? (
+              <Label variant="raw">{label}</Label>
+            ) : (
+              label
+            )}
+          </Fragment>
+        </Flex>
+      </LabelComponent>
+    );
+  },
+);
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 63d9173..9a40110 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -82,7 +82,7 @@ const Unit = styled.div(({ theme }) => ({
 }));
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  function ForwardRefInput(inputComponentProps, ref) {
+  function ForwardRefInput(inputProps, ref) {
     const {
       variant,
       margin,
@@ -96,7 +96,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       disabled,
       readOnly,
       ...props
-    } = inputComponentProps;
+    } = inputProps;
 
     const isBasic = variant === 'basic';
     const isAmount = variant === 'amount';