From b17cf5ad88f19297a6e55242d52f39fe13567da2 Mon Sep 17 00:00:00 2001 From: Shannon Clarke Date: Fri, 22 Mar 2019 08:39:12 -0400 Subject: [PATCH 1/4] chore(new-ui): change line height of form item --- packages/new-polymath-ui/src/components/FormItem/FormItem.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/new-polymath-ui/src/components/FormItem/FormItem.tsx b/packages/new-polymath-ui/src/components/FormItem/FormItem.tsx index 0c24c6567..ca573e526 100644 --- a/packages/new-polymath-ui/src/components/FormItem/FormItem.tsx +++ b/packages/new-polymath-ui/src/components/FormItem/FormItem.tsx @@ -8,7 +8,9 @@ import { Context } from './Context'; interface Props { name: string; } -const Wrapper = styled.div``; +const Wrapper = styled.div` + line-height: 18px; +`; const FormItemBase: FC = ({ name, children, ...props }) => { return ( From 62775d29f9566281e65d562b904f6212acb8b8a0 Mon Sep 17 00:00:00 2001 From: Shannon Clarke Date: Wed, 27 Mar 2019 10:00:01 -0400 Subject: [PATCH 2/4] chore(new-ui): apply line-height changes to checkbox component --- .../new-polymath-ui/src/components/FormItem/FormItem.tsx | 4 +--- .../src/components/inputs/Checkbox/Checkbox.tsx | 5 +++-- .../src/components/inputs/Checkbox/styles.ts | 6 ++++++ 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/new-polymath-ui/src/components/FormItem/FormItem.tsx b/packages/new-polymath-ui/src/components/FormItem/FormItem.tsx index ca573e526..0c24c6567 100644 --- a/packages/new-polymath-ui/src/components/FormItem/FormItem.tsx +++ b/packages/new-polymath-ui/src/components/FormItem/FormItem.tsx @@ -8,9 +8,7 @@ import { Context } from './Context'; interface Props { name: string; } -const Wrapper = styled.div` - line-height: 18px; -`; +const Wrapper = styled.div``; const FormItemBase: FC = ({ name, children, ...props }) => { return ( diff --git a/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx b/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx index 7cfb86782..ff8390266 100644 --- a/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx +++ b/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx @@ -39,7 +39,7 @@ export const CheckboxPrimitive: FC = ({ return ( - + = ({ onChange={e => { onChange(e.target.checked); }} + style={{ border: 'red' }} /> = ({ )} - + ); }; diff --git a/packages/new-polymath-ui/src/components/inputs/Checkbox/styles.ts b/packages/new-polymath-ui/src/components/inputs/Checkbox/styles.ts index 2d340182a..14bec58ac 100644 --- a/packages/new-polymath-ui/src/components/inputs/Checkbox/styles.ts +++ b/packages/new-polymath-ui/src/components/inputs/Checkbox/styles.ts @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { Icon } from '~/components/Icon'; +import { InlineFlex } from '~/components/InlineFlex'; export const Input = styled.input` position: absolute; @@ -14,6 +15,10 @@ export const Input = styled.input` white-space: nowrap; `; +export const CheckboxInlineFlex = styled(InlineFlex)` + line-height: 18px; +`; + export const CheckIcon = styled(Icon)` display: block; transition: ${({ theme }) => theme.transitions.hover.ms}ms; @@ -34,6 +39,7 @@ export const CheckboxInput = styled.label` height: 1.125rem; background-color: #fff; user-select: none; + vertical-align: top; ${Input}:focus + & { border-color: ${({ theme }) => theme.colors.secondary}; From ecc14f5532a91ff30f44e4677829e401ccd28f2b Mon Sep 17 00:00:00 2001 From: Shannon Clarke Date: Thu, 28 Mar 2019 12:31:11 -0400 Subject: [PATCH 3/4] fix(new-ui): resolve vertical alignment --- .../components/inputs/Checkbox/Checkbox.tsx | 54 +++++++++---------- .../src/components/inputs/Checkbox/styles.ts | 7 ++- 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx b/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx index ff8390266..627bda30a 100644 --- a/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx +++ b/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 = ({ } return ( - - - { - onChange(e.target.checked); - }} - style={{ border: 'red' }} + + { + onChange(e.target.checked); + }} + /> + + - - - - {label && ( - - - - )} - - + + {label && ( + + {label} + + )} + ); }; diff --git a/packages/new-polymath-ui/src/components/inputs/Checkbox/styles.ts b/packages/new-polymath-ui/src/components/inputs/Checkbox/styles.ts index 14bec58ac..7d51834cd 100644 --- a/packages/new-polymath-ui/src/components/inputs/Checkbox/styles.ts +++ b/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}; From 0d0da61f99f569a63adb1604818979b0d864d6a6 Mon Sep 17 00:00:00 2001 From: Shannon Clarke Date: Tue, 2 Apr 2019 10:40:38 -0400 Subject: [PATCH 4/4] chore(new-ui): finalize changes to checkbox component --- .../components/inputs/Checkbox/Checkbox.tsx | 56 +++++++++---------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx b/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx index 0fa1e0e0f..bb8d13cdb 100644 --- a/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx +++ b/packages/new-polymath-ui/src/components/inputs/Checkbox/Checkbox.tsx @@ -1,13 +1,12 @@ -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: boolean) => void; + onChange: (e: any) => void; /** * Specify whether the toggle should be on by default */ @@ -38,33 +37,32 @@ export const CheckboxPrimitive: FC = ({ } return ( - - - { - onChange(e.currentTarget.checked); - }} + + { + onChange(e.target.checked); + }} + /> + + - - - - {label && ( - - - - )} - - + + {label && ( + + {label} + + )} + ); };