fix(Checkbox): Fix Checkbox component styling

heydoctor · Aug 1, 2018 · 9ea8c04 · 9ea8c04
1 parent 35acc34
commit 9ea8c04
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/src/Form/Checkbox.js b/src/Form/Checkbox.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import capitalize from 'lodash/capitalize';
-import { css } from 'styled-components';
+import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import FormError from '../Form/FormError';
@@ -17,6 +17,7 @@ const CheckboxContainer = createComponent({
 
   & + & {
     margin-left: ${p => (p.horizontal ? '12px' : 0)};
+    margin-top: ${p => (p.horizontal ? 0 : '4px')};
   }
 `;
 
@@ -27,25 +28,21 @@ const StyledInput = createComponent({
   display: none;
 `;
 
-const StyledIcon = createComponent({
-  name: 'checkbox-icon',
-  as: Icon,
-}).extend`
-  ${({ variant = 'primary', theme, fill }) => {
+const StyledIcon = styled(Icon).attrs({
+  color: ({ checked, variant = 'primary', theme, fill }) => {
     const config = theme.variants[variant];
+
     if (!fill && !config) {
       throw new Error(`Refractal: variant "${variant}" not found.`);
     }
     const color = fill || config.fontColor;
 
-    return css`
-      fill: ${p => (p.checked ? color : p.theme.colors.grayMid)};
-    `;
-  }};
-`;
+    return checked ? color : theme.colors.grayMid;
+  },
+})``;
 
 const StyledLabel = createComponent({
-  name: 'checkbox-label',
+  name: 'CheckboxLabel',
   as: Flex,
 }).extend`
   margin-left: 8px;

diff --git a/src/Icon/Icon.js b/src/Icon/Icon.js
@@ -1,5 +1,11 @@
 import React from 'react';
 import Proptypes from 'prop-types';
+import { createComponent } from '../utils';
+
+const StyledIcon = createComponent({
+  name: 'Icon',
+  tag: 'i',
+});
 
 class Icon extends React.Component {
   static injected = false;
@@ -8,6 +14,7 @@ class Icon extends React.Component {
 
   constructor(props) {
     super(props);
+
     if (!this.constructor.injected) {
       const link = document.createElement('link');
       link.rel = 'stylesheet';
@@ -23,7 +30,11 @@ class Icon extends React.Component {
     const { iconPrefix } = this.constructor;
 
     return (
-      <i className={`${iconPrefix} ${iconPrefix}-${name}`} style={{ fontSize: size, color: color || 'inherit' }} />
+      <StyledIcon
+        {...this.props}
+        className={`${iconPrefix} ${iconPrefix}-${name}`}
+        style={{ fontSize: size, color: color || 'inherit' }}
+      />
     );
   }
 }