From 11389365d32776c0f2ddf23fb6a0d185dbf480d2 Mon Sep 17 00:00:00 2001
From: ChiFeng <34206801+ga021396@users.noreply.github.com>
Date: Fri, 8 Mar 2019 14:05:53 +0800
Subject: [PATCH] Checkbox fix props (#452)

* add props can change size & icon size

* fix checkbox props

* save yarnlock

* remove props size

* let line-height === checkbox size

* update snap
---
 packages/form/src/checkbox/CheckIcon.tsx      | 37 +++++++++++--------
 packages/form/src/checkbox/Checkbox.tsx       | 12 ++----
 .../__snapshots__/Checkbox.spec.tsx.snap      |  9 +++--
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/packages/form/src/checkbox/CheckIcon.tsx b/packages/form/src/checkbox/CheckIcon.tsx
index 3481508b2..a799af773 100644
--- a/packages/form/src/checkbox/CheckIcon.tsx
+++ b/packages/form/src/checkbox/CheckIcon.tsx
@@ -1,24 +1,29 @@
 import React from 'react';
+import { defaultTheme } from '@vital-ui/react-theme';
+import { ThemeConsumer } from 'styled-components';
 
 type Props = {
   fontSize?: number | string;
   color?: string;
-  size?: string;
 };
 
-export const CheckIcon = ({ size, fontSize, ...props }: Props) => (
-  <svg
-    role="img"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    width={size}
-    height={size}
-    fontSize={fontSize}
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-    />
-  </svg>
+export const CheckIcon = ({ fontSize, ...props }: Props) => (
+  <ThemeConsumer>
+    {(theme = defaultTheme) => (
+      <svg
+        role="img"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        width={theme.checkbox.icon.size}
+        height={theme.checkbox.icon.size}
+        fontSize={fontSize}
+        {...props}
+      >
+        <path
+          fill="currentColor"
+          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        />
+      </svg>
+    )}
+  </ThemeConsumer>
 );
diff --git a/packages/form/src/checkbox/Checkbox.tsx b/packages/form/src/checkbox/Checkbox.tsx
index d0cf972fa..70643f3f8 100644
--- a/packages/form/src/checkbox/Checkbox.tsx
+++ b/packages/form/src/checkbox/Checkbox.tsx
@@ -15,6 +15,7 @@ const Root = styled.label`
   font-size: 15px;
   cursor: pointer;
   margin-right: 5px;
+  line-height: ${({ theme }) => theme.checkbox.size};
   display: inline-block;
   &:hover {
     > span:first-child {
@@ -53,8 +54,8 @@ const CheckWrapper = styled('span')<CheckWrapper>`
     checked
       ? theme.checkbox.checkedBg
       : round
-        ? theme.checkbox.roundBg
-        : theme.checkbox.bg};
+      ? theme.checkbox.roundBg
+      : theme.checkbox.bg};
   transition: ${({ theme }) => theme.defaultTransition};
   margin: -2px 0.6em 0 0;
   vertical-align: middle;
@@ -195,12 +196,7 @@ export class Checkbox extends React.Component<CheckboxProps> {
               round={contextRound || round}
             >
               <IconWrapper checked={this.props.checked}>
-                {contextIcon ||
-                  icon || (
-                    <CheckIcon
-                      size={this.props.theme.checkbox.icon.size}
-                    />
-                  )}
+                {contextIcon || icon || <CheckIcon />}
               </IconWrapper>
             </CheckWrapper>
             <Label>
diff --git a/packages/form/src/checkbox/__snapshots__/Checkbox.spec.tsx.snap b/packages/form/src/checkbox/__snapshots__/Checkbox.spec.tsx.snap
index a2b73b4b2..b3f32219a 100644
--- a/packages/form/src/checkbox/__snapshots__/Checkbox.spec.tsx.snap
+++ b/packages/form/src/checkbox/__snapshots__/Checkbox.spec.tsx.snap
@@ -8,6 +8,7 @@ Object {
   font-size: 15px;
   cursor: pointer;
   margin-right: 5px;
+  line-height: 1.066rem;
   display: inline-block;
 }
 
@@ -91,7 +92,7 @@ Object {
   </body>,
   "container": <div>
     <label
-      class="vital__checkbox sc-bdVaJa ddktzo"
+      class="vital__checkbox sc-bdVaJa cwScPZ"
     >
       <span
         class="sc-htpNat cUzqxB"
@@ -178,6 +179,7 @@ Object {
   font-size: 15px;
   cursor: pointer;
   margin-right: 5px;
+  line-height: 1.066rem;
   display: inline-block;
 }
 
@@ -263,7 +265,7 @@ Object {
   </body>,
   "container": <div>
     <label
-      class="vital__checkbox sc-bdVaJa ddktzo"
+      class="vital__checkbox sc-bdVaJa cwScPZ"
     >
       <span
         class="sc-htpNat deAzeE"
@@ -350,6 +352,7 @@ Object {
   font-size: 15px;
   cursor: pointer;
   margin-right: 5px;
+  line-height: 1.066rem;
   display: inline-block;
 }
 
@@ -436,7 +439,7 @@ Object {
   </body>,
   "container": <div>
     <label
-      class="vital__checkbox sc-bdVaJa ddktzo"
+      class="vital__checkbox sc-bdVaJa cwScPZ"
     >
       <span
         class="sc-htpNat deAzeE"