fix(Checkbox): rid of unnessasary padding when label is empty

8base · Jan 14, 2019 · d66aaf7 · d66aaf7
1 parent c0084ec
commit d66aaf7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/src/components/Checkbox/Checkbox.test.js b/src/components/Checkbox/Checkbox.test.js
@@ -5,7 +5,9 @@ import { Checkbox } from './Checkbox';
 describe('<Checkbox />', () => {
   it('should shallow chekbox', () => {
     const onChange = jest.fn();
-    const wrapper = shallow(<Checkbox onChange={ onChange } checked />);
+    const wrapper = shallow(
+      <Checkbox onChange={ onChange } label="Label" checked />,
+    );
 
     expect(wrapper).toMatchInlineSnapshot(`
 <Styled(checkboxWrapper)
@@ -35,12 +37,13 @@ describe('<Checkbox />', () => {
   />
   <Styled(checkboxText)
     tagName="div"
-  />
+  >
+    Label
+  </Styled(checkboxText)>
 </Styled(checkboxWrapper)>
 `);
   });
 
-
   it('should call onChange callback with false', () => {
     const onChange = jest.fn();
     const wrapper = mount(<Checkbox onChange={ onChange } checked />);
@@ -49,7 +52,6 @@ describe('<Checkbox />', () => {
     expect(onChange.mock.calls[0][0]).toBe(false);
   });
 
-
   it('should call onChange callback with true', () => {
     const onChange = jest.fn();
     const wrapper = mount(<Checkbox onChange={ onChange } />);
@@ -58,7 +60,6 @@ describe('<Checkbox />', () => {
     expect(onChange.mock.calls[0][0]).toBe(true);
   });
 
-
   it('should not call onChange callback with disabled prop', () => {
     const onChange = jest.fn();
     const wrapper = mount(<Checkbox onChange={ onChange } disabled />);

diff --git a/src/components/Checkbox/Checkbox.theme.js b/src/components/Checkbox/Checkbox.theme.js
@@ -75,10 +75,10 @@ const CheckboxTag = createStyledTag(`${name}Tag`, {
   display: 'none',
 });
 
-const CheckboxTextTag = createStyledTag(`${name}Text`, {
-  paddingLeft: '12px',
+const CheckboxTextTag = createStyledTag(`${name}Text`, props => ({
+  paddingLeft: props.label ? '12px' : '0',
   cursor: 'pointer',
-});
+}));
 
 export { theme, CheckboxSquareTag, CheckboxTag, CheckboxWrapperTag, CheckboxTextTag, CheckboxIconTag };