fix(new-ui): resolve vertical alignment

Author: sajclarke

packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx

@@ -1,10 +1,9 @@
-import React, { FC, useState, Fragment } from 'react';
+import React, { FC, useState } from 'react';
 import { uniqueId } from 'lodash';
 import { InlineFlex } from '~/components/InlineFlex';
 import { SvgCheckmark } from '~/images/icons/Checkmark';
 import { FormikProxy, EnhancedComponentProps } from '../FormikProxy';
 import * as sc from './styles';
-import { Label } from './Label';
 
 interface Props {
   onChange: (e: any) => void;
@@ -38,34 +37,31 @@ export const CheckboxPrimitive: FC<Props> = ({
   }
 
   return (
-    <Fragment>
-      <sc.CheckboxInlineFlex>
-        <sc.Input
-          {...other}
-          {...checkedProps}
-          type="checkbox"
-          id={name || id}
-          name={name || id}
-          onChange={e => {
-            onChange(e.target.checked);
-          }}
-          style={{ border: 'red' }}
+    <sc.CheckboxInlineFlex>
+      <sc.Input
+        {...other}
+        {...checkedProps}
+        type="checkbox"
+        id={name || id}
+        name={name || id}
+        onChange={e => {
+          onChange(e.target.checked);
+        }}
+      />
+      <sc.CheckboxInput htmlFor={name || id}>
+        <sc.CheckIcon
+          Asset={SvgCheckmark}
+          color="white"
+          width="0.85em"
+          height="0.85em"
         />
-        <sc.CheckboxInput htmlFor={name || id}>
-          <sc.CheckIcon
-            Asset={SvgCheckmark}
-            color="white"
-            width="0.85em"
-            height="0.85em"
-          />
-        </sc.CheckboxInput>
-        {label && (
-          <InlineFlex ml={2}>
-            <Label htmlFor={name || id}>{label}</Label>
-          </InlineFlex>
-        )}
-      </sc.CheckboxInlineFlex>
-    </Fragment>
+      </sc.CheckboxInput>
+      {label && (
+        <InlineFlex ml={2}>
+          <sc.CheckboxLabel htmlFor={name || id}>{label}</sc.CheckboxLabel>
+        </InlineFlex>
+      )}
+    </sc.CheckboxInlineFlex>
   );
 };
 

packages/new-polymath-ui/src/components/inputs/Checkbox/styles.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { Icon } from '~/components/Icon';
 import { InlineFlex } from '~/components/InlineFlex';
+import { Label } from './Label';
 
 export const Input = styled.input`
   position: absolute;
@@ -19,6 +20,10 @@ export const CheckboxInlineFlex = styled(InlineFlex)`
   line-height: 18px;
 `;
 
+export const CheckboxLabel = styled(Label)`
+  align-items: flex-start;
+`;
+
 export const CheckIcon = styled(Icon)`
   display: block;
   transition: ${({ theme }) => theme.transitions.hover.ms}ms;
@@ -39,7 +44,7 @@ export const CheckboxInput = styled.label`
   height: 1.125rem;
   background-color: #fff;
   user-select: none;
-  vertical-align: top;
+  align-items: flex-start;
 
   ${Input}:focus + & {
     border-color: ${({ theme }) => theme.colors.secondary};