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
GSS-FED · Mar 8, 2019 · 1138936 · 1138936
1 parent 6a6c2b7
commit 1138936
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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"