Adjust layout of Knobs && remove hardcoded fontsizes

addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap

@@ -40,8 +40,8 @@ Array [
 
 .emotion-0 {
   min-width: 100px;
-  min-height: 32px;
-  margin-right: 16px;
+  font-weight: 700;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -135,8 +135,8 @@ Array [
 
 .emotion-0 {
   min-width: 100px;
-  min-height: 32px;
-  margin-right: 16px;
+  font-weight: 700;
+  margin-right: 15px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;

addons/knobs/src/components/types/Checkboxes.js

@@ -2,6 +2,19 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
+const CheckboxesWrapper = styled.div(({ isInline }) =>
+  isInline
+    ? {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        '> * + *': {
+          marginLeft: 10,
+        },
+      }
+    : {}
+);
+
 const CheckboxFieldset = styled.fieldset({
   border: 0,
   padding: 0,
@@ -9,24 +22,11 @@ const CheckboxFieldset = styled.fieldset({
 });
 
 const CheckboxLabel = styled.label({
-  fontSize: 11,
-  padding: '5px',
+  padding: '3px 0 3px 5px',
+  lineHeight: '18px',
+  display: 'inline-block',
 });
 
-const flex = ({ isInline }) => {
-  if (isInline) {
-    return {
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-      height: '100%',
-    };
-  }
-  return null;
-};
-
-const FlexWrapper = styled.div(flex);
-
 class CheckboxesType extends Component {
   constructor(props) {
     super(props);
@@ -82,7 +82,7 @@ class CheckboxesType extends Component {
 
     return (
       <CheckboxFieldset>
-        <FlexWrapper isInline={isInline}>{this.renderCheckboxList(knob)}</FlexWrapper>
+        <CheckboxesWrapper isInline={isInline}>{this.renderCheckboxList(knob)}</CheckboxesWrapper>
       </CheckboxFieldset>
     );
   }

addons/knobs/src/components/types/Options.js

@@ -6,6 +6,8 @@ import { styled } from '@storybook/theming';
 import RadiosType from './Radio';
 import CheckboxesType from './Checkboxes';
 
+// TODO: Apply the Storybook theme to react-select
+
 const OptionsSelect = styled(ReactSelect)({
   width: '100%',
   maxWidth: '300px',

addons/knobs/src/components/types/Radio.js

@@ -2,22 +2,23 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
-const flex = ({ isInline }) => {
-  if (isInline) {
-    return {
-      display: 'flex',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-    };
-  }
-  return null;
-};
-
-const RadiosWrapper = styled.div(flex);
+const RadiosWrapper = styled.div(({ isInline }) =>
+  isInline
+    ? {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        '> * + *': {
+          marginLeft: 10,
+        },
+      }
+    : {}
+);
 
 const RadioLabel = styled.label({
-  fontSize: 11,
-  padding: '5px',
+  padding: '3px 0 3px 5px',
+  lineHeight: '18px',
+  display: 'inline-block',
 });
 
 class RadiosType extends Component {

lib/components/src/form/field/field.js

@@ -13,15 +13,15 @@ const Wrapper = styled.label(({ theme }) => ({
   },
 }));
 
-const Label = styled.span({
+const Label = styled.span(({ theme }) => ({
   minWidth: 100,
-  minHeight: 32,
-  marginRight: 16,
+  fontWeight: theme.typography.weight.bold,
+  marginRight: 15,
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
   lineHeight: '16px',
-});
+}));
 
 const Field = ({ label, children }) => (
   <Wrapper>