From a5bb1f9dda830c11e23753b55eb06df2421487aa Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Wed, 11 Jan 2017 17:12:30 +0000
Subject: [PATCH] wrapping toggle in base and removing margin on hidden label

---
 ui/src/components/toggle/index.js | 11 +++++++--
 ui/src/components/toggle/story.js | 37 ++++++++++++++++++-------------
 2 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js
index b46f2dbb..d50bc992 100644
--- a/ui/src/components/toggle/index.js
+++ b/ui/src/components/toggle/index.js
@@ -83,6 +83,13 @@ const StyledInput1 = styled.input`
   }
 `;
 
+/*
+TODO: Remove !important - it is used to overirde a global style
+ */
+const StyledLabel = styled.label`
+  margin-bottom: 0 !important;
+`;
+
 const Toggle = ({
   checked,
   className,
@@ -120,13 +127,13 @@ const Toggle = ({
         };
 
         return (
-          <label
+          <StyledLabel
             htmlFor={customProps.id}
             key={index}
           >
             {InputVarients[`input_${index}`]}
             <StyledText>{option.label}</StyledText>
-          </label>
+          </StyledLabel>
         );
       })}
     </StyledDiv>
diff --git a/ui/src/components/toggle/story.js b/ui/src/components/toggle/story.js
index 6af792bc..da5059bb 100644
--- a/ui/src/components/toggle/story.js
+++ b/ui/src/components/toggle/story.js
@@ -4,27 +4,34 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
+const Base = require('../base');
 const Toggle = require('./');
 
 storiesOf('Toggle', module)
   .add('default', () => (
-    <Toggle checked />
+    <Base>
+      <Toggle checked />
+    </Base>
   ))
   .add('checked', () => (
-    <Toggle
-      defaultChecked
-      options={[
-        {
-          label: 'Topology',
-          checked: true
-        },
-        {
-          label: 'List',
-          checked: false
-        }
-      ]}
-    />
+    <Base>
+      <Toggle
+        defaultChecked
+        options={[
+          {
+            label: 'Topology',
+            checked: true
+          },
+          {
+            label: 'List',
+            checked: false
+          }
+        ]}
+      />
+    </Base>
   ))
   .add('no props', () => (
-    <Toggle />
+    <Base>
+      <Toggle />
+    </Base>
   ));
\ No newline at end of file