diff --git a/packages/dash-core-components/dash_core_components/metadata.json b/packages/dash-core-components/dash_core_components/metadata.json
index b032a0e766..fa15e0d65f 100644
--- a/packages/dash-core-components/dash_core_components/metadata.json
+++ b/packages/dash-core-components/dash_core_components/metadata.json
@@ -10,6 +10,58 @@
         "required": false,
         "description": ""
       },
+      "options": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "label": {
+              "name": "string",
+              "description": "The checkbox's label",
+              "required": false
+            },
+            "value": {
+              "name": "string",
+              "description": "The value of the checkbox. This value\ncorresponds to the items specified in the\n`values` property.",
+              "required": false
+            },
+            "disabled": {
+              "name": "bool",
+              "description": "If true, this checkbox is disabled and can't be clicked on.",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "An array of options",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
+      },
+      "values": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "string"
+          }
+        },
+        "required": false,
+        "description": "The currently selected value"
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "The class of the container (div)"
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "The style of the container (div)"
+      },
       "inputStyle": {
         "type": {
           "name": "object"
@@ -54,44 +106,6 @@
           "computed": false
         }
       },
-      "options": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "label": {
-              "name": "string",
-              "description": "The checkbox's label",
-              "required": false
-            },
-            "value": {
-              "name": "string",
-              "description": "The value of the checkbox. This value\ncorresponds to the items specified in the\n`values` property.",
-              "required": false
-            },
-            "disabled": {
-              "name": "bool",
-              "description": "If true, this checkbox is disabled and can't be clicked on.",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": "An array of options",
-        "defaultValue": {
-          "value": "[]",
-          "computed": false
-        }
-      },
-      "values": {
-        "type": {
-          "name": "arrayOf",
-          "value": {
-            "name": "string"
-          }
-        },
-        "required": false,
-        "description": "The currently selected value"
-      },
       "fireEvent": {
         "type": {
           "name": "func"
@@ -683,12 +697,54 @@
         "required": false,
         "description": ""
       },
+      "options": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "label": {
+              "name": "string",
+              "description": "The checkbox's label",
+              "required": false
+            },
+            "value": {
+              "name": "string",
+              "description": "The value of the checkbox. This value\ncorresponds to the items specified in the\n`values` property.",
+              "required": false
+            },
+            "disabled": {
+              "name": "bool",
+              "description": "If true, this checkbox is disabled and can't be clicked on.",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "An array of options"
+      },
+      "value": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "arrayOf",
+              "value": {
+                "name": "string"
+              }
+            }
+          ]
+        },
+        "required": false,
+        "description": "The value of the input. If `multi` is false (the default)\nthen value is just a string that corresponds to the values\nprovided in the `options` property. If `multi` is true, then\nmultiple values can be selected at once, and `value` is an\narray of items with values corresponding to those in the\n`options` prop."
+      },
       "className": {
         "type": {
           "name": "string"
         },
         "required": false,
-        "description": ""
+        "description": "className of the dropdown element"
       },
       "clearable": {
         "type": {
@@ -723,30 +779,6 @@
           "computed": false
         }
       },
-      "options": {
-        "type": {
-          "name": "arrayOf",
-          "value": {
-            "name": "shape",
-            "value": {
-              "disabled": {
-                "name": "bool",
-                "required": false
-              },
-              "label": {
-                "name": "string",
-                "required": false
-              },
-              "value": {
-                "name": "string",
-                "required": false
-              }
-            }
-          }
-        },
-        "required": false,
-        "description": ""
-      },
       "placeholder": {
         "type": {
           "name": "string"
@@ -765,24 +797,6 @@
           "computed": false
         }
       },
-      "value": {
-        "type": {
-          "name": "union",
-          "value": [
-            {
-              "name": "string"
-            },
-            {
-              "name": "arrayOf",
-              "value": {
-                "name": "string"
-              }
-            }
-          ]
-        },
-        "required": false,
-        "description": "The value of the input. If `multi` is false (the default)\nthen value is just a string that corresponds to the values\nprovided in the `options` property. If `multi` is true, then\nmultiple values can be selected at once, and `value` is an\narray of items with values corresponding to those in the\n`options` prop."
-      },
       "setProps": {
         "type": {
           "name": "func"
@@ -914,6 +928,13 @@
         "required": false,
         "description": "Generic style overrides on the plot div"
       },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "className of the parent div"
+      },
       "animate": {
         "type": {
           "name": "bool"
@@ -1698,6 +1719,55 @@
         "required": false,
         "description": ""
       },
+      "options": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "label": {
+              "name": "string",
+              "description": "The radio item's label",
+              "required": false
+            },
+            "value": {
+              "name": "string",
+              "description": "The value of the radio item. This value\ncorresponds to the items specified in the\n`values` property.",
+              "required": false
+            },
+            "disabled": {
+              "name": "bool",
+              "description": "If true, this radio item is disabled and can't be clicked on.",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "An array of options",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
+      },
+      "value": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "The currently selected value"
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "The style of the container (div)"
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "The class of the container (div)"
+      },
       "inputStyle": {
         "type": {
           "name": "object"
@@ -1742,38 +1812,6 @@
           "computed": false
         }
       },
-      "options": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "label": {
-              "name": "string",
-              "required": false
-            },
-            "value": {
-              "name": "string",
-              "required": false
-            },
-            "disabled": {
-              "name": "bool",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": "An array of options",
-        "defaultValue": {
-          "value": "[]",
-          "computed": false
-        }
-      },
-      "value": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "The currently selected value"
-      },
       "fireEvent": {
         "type": {
           "name": "func"
@@ -1814,6 +1852,47 @@
         "required": false,
         "description": ""
       },
+      "marks": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "number": {
+              "name": "union",
+              "value": [
+                {
+                  "name": "string"
+                },
+                {
+                  "name": "shape",
+                  "value": {
+                    "style": {
+                      "name": "object",
+                      "required": false
+                    },
+                    "label": {
+                      "name": "string",
+                      "required": false
+                    }
+                  }
+                }
+              ],
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "Marks on the slider.\nThe key determines the position,\nand the value determines what will show.\nIf you want to set the style of a specific mark point,\nthe value should be an object which\ncontains style and label properties."
+      },
+      "value": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "number"
+          }
+        },
+        "required": false,
+        "description": "The value of the input"
+      },
       "allowCross": {
         "type": {
           "name": "bool"
@@ -1856,37 +1935,6 @@
         "required": false,
         "description": "If the value is true, it means a continuous\nvalue is included. Otherwise, it is an independent value."
       },
-      "marks": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "number": {
-              "name": "union",
-              "value": [
-                {
-                  "name": "string"
-                },
-                {
-                  "name": "shape",
-                  "value": {
-                    "style": {
-                      "name": "object",
-                      "required": false
-                    },
-                    "label": {
-                      "name": "string",
-                      "required": false
-                    }
-                  }
-                }
-              ],
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": "Marks on the slider.\nThe key determines the position,\nand the value determines what will show.\nIf you want to set the style of a specific mark point,\nthe value should be an object which\ncontains style and label properties."
-      },
       "min": {
         "type": {
           "name": "number"
@@ -1930,16 +1978,6 @@
         "required": false,
         "description": "Key-values pairs describing the labels"
       },
-      "value": {
-        "type": {
-          "name": "arrayOf",
-          "value": {
-            "name": "number"
-          }
-        },
-        "required": false,
-        "description": "The value of the input"
-      },
       "vertical": {
         "type": {
           "name": "bool"
@@ -2008,6 +2046,26 @@
         "required": false,
         "description": ""
       },
+      "marks": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "number": {
+              "name": "string",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "Marks on the slider.\nThe key determines the position,\nand the value determines what will show.\nIf you want to set the style of a specific mark point,\nthe value should be an object which\ncontains style and label properties."
+      },
+      "value": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "The value of the input"
+      },
       "className": {
         "type": {
           "name": "string"
@@ -2036,19 +2094,6 @@
         "required": false,
         "description": "If the value is true, it means a continuous\nvalue is included. Otherwise, it is an independent value."
       },
-      "marks": {
-        "type": {
-          "name": "shape",
-          "value": {
-            "number": {
-              "name": "string",
-              "required": false
-            }
-          }
-        },
-        "required": false,
-        "description": "Marks on the slider.\nThe key determines the position,\nand the value determines what will show.\nIf you want to set the style of a specific mark point,\nthe value should be an object which\ncontains style and label properties."
-      },
       "min": {
         "type": {
           "name": "number"
@@ -2077,13 +2122,6 @@
         "required": false,
         "description": "Key-values pairs describing the labels"
       },
-      "value": {
-        "type": {
-          "name": "number"
-        },
-        "required": false,
-        "description": "The value of the input"
-      },
       "vertical": {
         "type": {
           "name": "bool"
diff --git a/packages/dash-core-components/dev-requirements.txt b/packages/dash-core-components/dev-requirements.txt
index 3ab1828a57..57bc4f39ce 100644
--- a/packages/dash-core-components/dev-requirements.txt
+++ b/packages/dash-core-components/dev-requirements.txt
@@ -1,7 +1,7 @@
 dash_html_components
 dash_renderer
 dash
-percy
+git+git://github.com/chriddyp/python-percy-client.git@print-request
 selenium
 mock
 tox
diff --git a/packages/dash-core-components/src/components/Checklist.react.js b/packages/dash-core-components/src/components/Checklist.react.js
index 175c463aa7..1c921ac4bb 100644
--- a/packages/dash-core-components/src/components/Checklist.react.js
+++ b/packages/dash-core-components/src/components/Checklist.react.js
@@ -19,6 +19,7 @@ export default class Checklist extends Component {
 
     render() {
         const {
+            className,
             fireEvent,
             id,
             inputClassName,
@@ -26,12 +27,13 @@ export default class Checklist extends Component {
             labelClassName,
             labelStyle,
             options,
-            setProps
+            setProps,
+            style
         } = this.props;
         const {values} = this.state;
 
         return (
-            <div id={id}>
+            <div id={id} style={style} className={className}>
                 {options.map(option => (
                     <label
                         key={option.value}
@@ -66,27 +68,6 @@ export default class Checklist extends Component {
 
 Checklist.propTypes = {
     id: PropTypes.string,
-    /**
-     * The style of the <input> checkbox element
-     */
-    inputStyle: PropTypes.object,
-
-    /**
-     * The class of the <input> checkbox element
-     */
-    inputClassName: PropTypes.string,
-
-    /**
-     * The style of the <label> that wraps the checkbox input
-     *  and the option's label
-     */
-    labelStyle: PropTypes.object,
-
-    /**
-     * The class of the <label> that wraps the checkbox input
-     *  and the option's label
-     */
-    labelClassName: PropTypes.string,
 
     /**
      * An array of options
@@ -115,6 +96,39 @@ Checklist.propTypes = {
      */
     values: PropTypes.arrayOf(PropTypes.string),
 
+    /**
+     * The class of the container (div)
+     */
+    className: PropTypes.string,
+
+    /**
+     * The style of the container (div)
+     */
+    style: PropTypes.object,
+
+
+    /**
+     * The style of the <input> checkbox element
+     */
+    inputStyle: PropTypes.object,
+
+    /**
+     * The class of the <input> checkbox element
+     */
+    inputClassName: PropTypes.string,
+
+    /**
+     * The style of the <label> that wraps the checkbox input
+     *  and the option's label
+     */
+    labelStyle: PropTypes.object,
+
+    /**
+     * The class of the <label> that wraps the checkbox input
+     *  and the option's label
+     */
+    labelClassName: PropTypes.string,
+
     /**
      * Dash-assigned callback that gets fired when the checkbox item gets selected.
      */
diff --git a/packages/dash-core-components/src/components/Dropdown.react.js b/packages/dash-core-components/src/components/Dropdown.react.js
index 61bbb2ac94..3b19acfe09 100644
--- a/packages/dash-core-components/src/components/Dropdown.react.js
+++ b/packages/dash-core-components/src/components/Dropdown.react.js
@@ -1,4 +1,4 @@
-import R from 'ramda';
+import R, {omit} from 'ramda';
 import React, {Component, PropTypes} from 'react';
 import ReactDropdown from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
@@ -34,7 +34,9 @@ export default class Dropdown extends Component {
     }
 
     render() {
-        const {id, fireEvent, multi, options, setProps} = this.props;
+        const {
+            id, fireEvent, multi, options, setProps, style
+        } = this.props;
         const {filterOptions, value} = this.state;
         let selectedValue;
         if (R.type(value) === 'array') {
@@ -43,7 +45,7 @@ export default class Dropdown extends Component {
             selectedValue = value;
         }
         return (
-            <div id={id}>
+            <div id={id} style={style}>
                 <ReactDropdown
                     filterOptions={filterOptions}
                     options={options}
@@ -70,7 +72,7 @@ export default class Dropdown extends Component {
                         }
                         if (fireEvent) fireEvent('change');
                     }}
-                    {...this.props}
+                    {...omit(['fireEvent', 'setProps', 'value'], this.props)}
                 />
             </div>
         );
@@ -80,8 +82,47 @@ export default class Dropdown extends Component {
 Dropdown.propTypes = {
     id: PropTypes.string,
 
+    /**
+     * An array of options
+     */
+    options: PropTypes.shape({
+        /**
+         * The checkbox's label
+         */
+        label: PropTypes.string,
+
+        /**
+         * The value of the checkbox. This value
+         * corresponds to the items specified in the
+         * `values` property.
+         */
+        value: PropTypes.string,
+
+        /**
+         * If true, this checkbox is disabled and can't be clicked on.
+         */
+        disabled: PropTypes.bool
+    }),
+
+    /**
+     * The value of the input. If `multi` is false (the default)
+     * then value is just a string that corresponds to the values
+     * provided in the `options` property. If `multi` is true, then
+     * multiple values can be selected at once, and `value` is an
+     * array of items with values corresponding to those in the
+     * `options` prop.
+     */
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string)
+    ]),
+
+    /**
+     * className of the dropdown element
+     */
     className: PropTypes.string,
 
+
     /**
      * Whether or not the dropdown is "clearable", that is, whether or
      * not a small "x" appears on the right of the dropdown that removes
@@ -99,14 +140,6 @@ Dropdown.propTypes = {
      */
     multi: PropTypes.bool,
 
-    options: PropTypes.arrayOf(
-        PropTypes.shape({
-            disabled: PropTypes.bool,
-            label: PropTypes.string,
-            value: PropTypes.string
-        })
-    ),
-
     /**
      * The grey, default text shown when no option is selected
      */
@@ -117,19 +150,6 @@ Dropdown.propTypes = {
      */
     searchable: PropTypes.bool,
 
-    /**
-     * The value of the input. If `multi` is false (the default)
-     * then value is just a string that corresponds to the values
-     * provided in the `options` property. If `multi` is true, then
-     * multiple values can be selected at once, and `value` is an
-     * array of items with values corresponding to those in the
-     * `options` prop.
-     */
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
-    ]),
-
     /**
      * Dash-assigned callback that gets fired when the input changes
      */
diff --git a/packages/dash-core-components/src/components/Graph.react.js b/packages/dash-core-components/src/components/Graph.react.js
index 7564a8343e..2c35a0d286 100644
--- a/packages/dash-core-components/src/components/Graph.react.js
+++ b/packages/dash-core-components/src/components/Graph.react.js
@@ -178,13 +178,14 @@ export default class PlotlyGraph extends Component {
     }
 
     render(){
-        const {style, id} = this.props;
+        const {className, id, style} = this.props;
 
         return (
             <div
                 key={id}
                 id={id}
                 style={style}
+                className={className}
             />
         );
 
@@ -233,6 +234,12 @@ PlotlyGraph.propTypes = {
      */
     style: PropTypes.object,
 
+    /**
+     * className of the parent div
+     */
+    className: PropTypes.string,
+
+
     /**
      * Beta: If true, animate between updates using
      * plotly.js's `animate` function
diff --git a/packages/dash-core-components/src/components/Input.react.js b/packages/dash-core-components/src/components/Input.react.js
index 653fe53bfc..f7563a2cdd 100644
--- a/packages/dash-core-components/src/components/Input.react.js
+++ b/packages/dash-core-components/src/components/Input.react.js
@@ -1,4 +1,5 @@
 import React, {Component, PropTypes} from 'react';
+import {omit} from 'ramda';
 
 /**
  * A basic HTML input control for entering text, numbers, or passwords.
@@ -19,24 +20,13 @@ export default class Input extends Component {
 
     render() {
         const {
-            className,
-            id,
             fireEvent,
-            placeholder,
-            style,
-            type,
             setProps
         } = this.props;
         const {value} = this.state;
 
         return (
             <input
-                className={className}
-                id={id}
-                type={type}
-                value={value}
-                placeholder={placeholder}
-                style={style}
                 onChange={e => {
                     this.setState({value: e.target.value});
                     if (setProps) setProps({value: e.target.value});
@@ -45,6 +35,8 @@ export default class Input extends Component {
                 onBlur={() => {
                     if (fireEvent) fireEvent({event: 'blur'});
                 }}
+                value={value}
+                {...omit(['fireEvent', 'setProps', 'value'], this.props)}
             />
         );
     }
@@ -56,27 +48,27 @@ Input.propTypes = {
      * in callbacks. The ID needs to be unique across all of the
      * components in an app.
      */
-    'id': PropTypes.string,
+    id: PropTypes.string,
 
     /**
      * The value of the input
      */
-    'value': PropTypes.string,
+    value: PropTypes.string,
 
     /**
      * The input's inline styles
      */
-    'style': PropTypes.object,
+    style: PropTypes.object,
 
     /**
      * The class of the input element
      */
-    'className': PropTypes.string,
+    className: PropTypes.string,
 
     /**
      * The type of control to render.
      */
-    'type': PropTypes.oneOf([
+    type: PropTypes.oneOf([
         // Only allowing the input types with wide browser compatability
         'text', 'number', 'password', 'email', 'range', 'search', 'tel', 'url', 'hidden'
     ]),
@@ -84,14 +76,14 @@ Input.propTypes = {
     /**
      * This attribute indicates whether the value of the control can be automatically completed by the browser.
      */
-    'autocomplete': PropTypes.string,
+    autocomplete: PropTypes.string,
 
     /**
      * The element should be automatically focused after the page loaded.
      */
-    'autofocus': PropTypes.string,
+    autofocus: PropTypes.string,
 
-    'inputmode': PropTypes.oneOf([
+    inputmode: PropTypes.oneOf([
         /**
          * Alphanumeric, non-prose content such as usernames and passwords.
          */
@@ -156,88 +148,88 @@ Input.propTypes = {
      * This attribute is ignored when the type attribute's value is
      * hidden, checkbox, radio, file, or a button type.
      */
-    'list': PropTypes.string,
+    list: PropTypes.string,
 
     /**
      * The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
      */
-    'max': PropTypes.string,
+    max: PropTypes.string,
 
     /**
      * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.
      */
-    'maxlength': PropTypes.string,
+    maxlength: PropTypes.string,
 
 
     /**
      * The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
      */
-    'min': PropTypes.string,
+    min: PropTypes.string,
 
     /**
      * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.
      */
-    'minlength': PropTypes.string,
+    minlength: PropTypes.string,
 
     /**
      * This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file, otherwise it is ignored.
      */
-    'multiple': PropTypes.string,
+    multiple: PropTypes.string,
 
     /**
      * The name of the control, which is submitted with the form data.
      */
-    'name': PropTypes.string,
+    name: PropTypes.string,
 
     /**
      * A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.
      */
-    'pattern': PropTypes.string,
+    pattern: PropTypes.string,
 
     /**
      * A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a <label> element, their purposes are different. The <label> attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
      */
-    'placeholder': PropTypes.string,
+    placeholder: PropTypes.string,
 
     /**
      * This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant. If you need read-write access to the input value, do not add the "readonly" attribute. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).
      */
-    'readonly': PropTypes.string,
+    readonly: PropTypes.string,
 
     /**
      * This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate.
      */
-    'required': PropTypes.string,
+    required: PropTypes.string,
 
     /**
      * The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. On platforms on which it's possible this value isn't known, the value can be "none"; for example, on macOS, the default direction is "none", then as the user begins to modify the selection using the keyboard, this will change to reflect the direction in which the selection is expanding.
      */
-    'selectionDirection': PropTypes.string,
+    selectionDirection: PropTypes.string,
 
     /**
      * The offset into the element's text content of the last selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).
      */
-    'selectionEnd': PropTypes.string,
+    selectionEnd: PropTypes.string,
 
     /**
      * The offset into the element's text content of the first selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).
      */
-    'selectionStart': PropTypes.string,
+    selectionStart: PropTypes.string,
 
     /**
      * The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters. Starting in, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used.' simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with x characters will not be entirely visible even if size is defined to at least x.
      */
-    'size': PropTypes.string,
+    size: PropTypes.string,
 
     /**
      * Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
      */
-    'spellcheck': PropTypes.string,
+    spellcheck: PropTypes.string,
 
     /**
      * Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
      */
-    'step': PropTypes.string,
+    step: PropTypes.string,
 
     /**
      * Dash-assigned callback that gets fired when the input changes.
diff --git a/packages/dash-core-components/src/components/RadioItems.react.js b/packages/dash-core-components/src/components/RadioItems.react.js
index d4f84453d1..b186333319 100644
--- a/packages/dash-core-components/src/components/RadioItems.react.js
+++ b/packages/dash-core-components/src/components/RadioItems.react.js
@@ -21,6 +21,8 @@ export default class RadioItems extends Component {
         const {
             fireEvent,
             id,
+            className,
+            style,
             inputClassName,
             inputStyle,
             labelClassName,
@@ -35,7 +37,7 @@ export default class RadioItems extends Component {
             ids = {id, key: id};
         }
         return (
-            <div {...ids}>
+            <div {...ids} className={className} style={style}>
                 {options.map(option => (
                     <label style={labelStyle} className={labelClassName}>
                         <input
@@ -60,6 +62,44 @@ export default class RadioItems extends Component {
 
 RadioItems.propTypes = {
     id: PropTypes.string,
+
+    /**
+     * An array of options
+     */
+    options: PropTypes.shape({
+        /**
+         * The radio item's label
+         */
+        label: PropTypes.string,
+
+        /**
+         * The value of the radio item. This value
+         * corresponds to the items specified in the
+         * `values` property.
+         */
+        value: PropTypes.string,
+
+        /**
+         * If true, this radio item is disabled and can't be clicked on.
+         */
+        disabled: PropTypes.bool
+    }),
+
+    /**
+     * The currently selected value
+     */
+    value: PropTypes.string,
+
+    /**
+     * The style of the container (div)
+     */
+    style: PropTypes.object,
+
+    /**
+     * The class of the container (div)
+     */
+    className: PropTypes.string,
+
     /**
      * The style of the <input> radio element
      */
@@ -82,20 +122,6 @@ RadioItems.propTypes = {
      */
     labelClassName: PropTypes.string,
 
-    /**
-     * An array of options
-     */
-    options: PropTypes.shape({
-        label: PropTypes.string,
-        value: PropTypes.string,
-        disabled: PropTypes.bool
-    }),
-
-    /**
-     * The currently selected value
-     */
-    value: PropTypes.string,
-
     /**
      * Dash-assigned callback that gets fired when the radio item gets selected.
      */
diff --git a/packages/dash-core-components/src/components/RangeSlider.react.js b/packages/dash-core-components/src/components/RangeSlider.react.js
index 4fd331a14b..f3398b9d01 100644
--- a/packages/dash-core-components/src/components/RangeSlider.react.js
+++ b/packages/dash-core-components/src/components/RangeSlider.react.js
@@ -35,7 +35,10 @@ export default class RangeSlider extends Component {
                     }
                 }}
                 value={value}
-                {...omit('value', this.props)}
+                {...omit(
+                    ['value', 'fireEvent', 'setProps', 'updatemode'],
+                     this.props
+                 )}
             />
         );
     }
@@ -43,6 +46,37 @@ export default class RangeSlider extends Component {
 
 RangeSlider.propTypes = {
     id: PropTypes.string,
+
+    /**
+     * Marks on the slider.
+     * The key determines the position,
+     * and the value determines what will show.
+     * If you want to set the style of a specific mark point,
+     * the value should be an object which
+     * contains style and label properties.
+     */
+    marks: PropTypes.shape({
+        number: PropTypes.oneOfType([
+            /**
+             * The label of the mark
+             */
+            PropTypes.string,
+
+            /**
+             * The style and label of the mark
+             */
+            PropTypes.shape({
+                style: PropTypes.object,
+                label: PropTypes.string
+            })
+        ])
+    }),
+
+    /**
+     * The value of the input
+     */
+    value: PropTypes.arrayOf(PropTypes.number),
+
     /**
      * allowCross could be set as true to allow those handles to cross.
      */
@@ -77,31 +111,6 @@ RangeSlider.propTypes = {
      */
     included: PropTypes.bool,
 
-    /**
-     * Marks on the slider.
-     * The key determines the position,
-     * and the value determines what will show.
-     * If you want to set the style of a specific mark point,
-     * the value should be an object which
-     * contains style and label properties.
-     */
-    marks: PropTypes.shape({
-        number: PropTypes.oneOfType([
-            /**
-             * The label of the mark
-             */
-            PropTypes.string,
-
-            /**
-             * The style and label of the mark
-             */
-            PropTypes.shape({
-                style: PropTypes.object,
-                label: PropTypes.string
-            })
-        ])
-    }),
-
     /**
      * Minimum allowed value of the slider
      */
@@ -130,11 +139,6 @@ RangeSlider.propTypes = {
      */
     labels: PropTypes.object,
 
-    /**
-     * The value of the input
-     */
-    value: PropTypes.arrayOf(PropTypes.number),
-
     /**
      * If true, the slider will be vertical
      */
diff --git a/packages/dash-core-components/src/components/Slider.react.js b/packages/dash-core-components/src/components/Slider.react.js
index 93e0df9672..8ea6e2f0e5 100644
--- a/packages/dash-core-components/src/components/Slider.react.js
+++ b/packages/dash-core-components/src/components/Slider.react.js
@@ -34,7 +34,7 @@ export default class Slider extends Component {
                     }
                 }}
                 value={value}
-                {...omit('value', this.props)}
+                {...omit(['fireEvent', 'setProps', 'updatemode', 'value'], this.props)}
             />
         );
     }
@@ -42,6 +42,22 @@ export default class Slider extends Component {
 
 Slider.propTypes = {
     id: PropTypes.string,
+
+    /**
+     * Marks on the slider.
+     * The key determines the position,
+     * and the value determines what will show.
+     * If you want to set the style of a specific mark point,
+     * the value should be an object which
+     * contains style and label properties.
+     */
+    marks: PropTypes.shape({number: PropTypes.string}),
+
+    /**
+     * The value of the input
+     */
+    value: PropTypes.number,
+
     /**
      * Additional CSS class for the root DOM node
      */
@@ -65,16 +81,6 @@ Slider.propTypes = {
      */
     included: PropTypes.bool,
 
-    /**
-     * Marks on the slider.
-     * The key determines the position,
-     * and the value determines what will show.
-     * If you want to set the style of a specific mark point,
-     * the value should be an object which
-     * contains style and label properties.
-     */
-    marks: PropTypes.shape({number: PropTypes.string}),
-
     /**
      * Minimum allowed value of the slider
      */
@@ -95,11 +101,6 @@ Slider.propTypes = {
      */
     labels: PropTypes.object,
 
-    /**
-     * The value of the input
-     */
-    value: PropTypes.number,
-
     /**
      * If true, the slider will be vertical
      */
diff --git a/packages/dash-core-components/src/components/Textarea.react.js b/packages/dash-core-components/src/components/Textarea.react.js
index 981d3d9773..91e326380f 100644
--- a/packages/dash-core-components/src/components/Textarea.react.js
+++ b/packages/dash-core-components/src/components/Textarea.react.js
@@ -1,4 +1,5 @@
 import React, {Component, PropTypes} from 'react';
+import {omit} from 'ramda'
 
 /**
  * A basic HTML textarea for entering multiline text.
@@ -35,7 +36,7 @@ export default class Textarea extends Component {
                 onClick={() => {
                     if (fireEvent) fireEvent({event: 'click'});
                 }}
-                {...this.props}
+                {...omit(['fireEvent', 'setProps', 'value'], this.props)}
             />
         );
     }
@@ -48,7 +49,7 @@ Textarea.propTypes = {
      * in callbacks. The ID needs to be unique across all of the
      * components in an app.
      */
-    'id': PropTypes.string,
+    id: PropTypes.string,
 
     /**
      * The value of the textarea
@@ -58,122 +59,122 @@ Textarea.propTypes = {
     /**
      * The element should be automatically focused after the page loaded.
      */
-    'autoFocus': PropTypes.string,
+    autoFocus: PropTypes.string,
 
     /**
      * Defines the number of columns in a textarea.
      */
-    'cols': PropTypes.string,
+    cols: PropTypes.string,
 
     /**
      * Indicates whether the user can interact with the element.
      */
-    'disabled': PropTypes.string,
+    disabled: PropTypes.string,
 
     /**
      * Indicates the form that is the owner of the element.
      */
-    'form': PropTypes.string,
+    form: PropTypes.string,
 
     /**
      * Defines the maximum number of characters allowed in the element.
      */
-    'maxLength': PropTypes.string,
+    maxLength: PropTypes.string,
 
     /**
      * Defines the minimum number of characters allowed in the element.
      */
-    'minLength': PropTypes.string,
+    minLength: PropTypes.string,
 
     /**
      * Name of the element. For example used by the server to identify the fields in form submits.
      */
-    'name': PropTypes.string,
+    name: PropTypes.string,
 
     /**
      * Provides a hint to the user of what can be entered in the field.
      */
-    'placeholder': PropTypes.string,
+    placeholder: PropTypes.string,
 
     /**
      * Indicates whether the element can be edited.
      */
-    'readOnly': PropTypes.string,
+    readOnly: PropTypes.string,
 
     /**
      * Indicates whether this element is required to fill out or not.
      */
-    'required': PropTypes.string,
+    required: PropTypes.string,
 
     /**
      * Defines the number of rows in a text area.
      */
-    'rows': PropTypes.string,
+    rows: PropTypes.string,
 
     /**
      * Indicates whether the text should be wrapped.
      */
-    'wrap': PropTypes.string,
+    wrap: PropTypes.string,
 
     /**
      * Defines a keyboard shortcut to activate or add focus to the element.
      */
-    'accessKey': PropTypes.string,
+    accessKey: PropTypes.string,
 
     /**
      * Often used with CSS to style elements with common properties.
      */
-    'className': PropTypes.string,
+    className: PropTypes.string,
 
     /**
      * Indicates whether the element's content is editable.
      */
-    'contentEditable': PropTypes.string,
+    contentEditable: PropTypes.string,
 
     /**
      * Defines the ID of a <menu> element which will serve as the element's context menu.
      */
-    'contextMenu': PropTypes.string,
+    contextMenu: PropTypes.string,
 
     /**
      * Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
      */
-    'dir': PropTypes.string,
+    dir: PropTypes.string,
 
     /**
      * Defines whether the element can be dragged.
      */
-    'draggable': PropTypes.string,
+    draggable: PropTypes.string,
 
     /**
      * Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
      */
-    'hidden': PropTypes.string,
+    hidden: PropTypes.string,
 
     /**
      * Defines the language used in the element.
      */
-    'lang': PropTypes.string,
+    lang: PropTypes.string,
 
     /**
      * Indicates whether spell checking is allowed for the element.
      */
-    'spellCheck': PropTypes.string,
+    spellCheck: PropTypes.string,
 
     /**
      * Defines CSS styles which will override styles previously set.
      */
-    'style': PropTypes.object,
+    style: PropTypes.object,
 
     /**
      * Overrides the browser's default tab order and follows the one specified instead.
      */
-    'tabIndex': PropTypes.string,
+    tabIndex: PropTypes.string,
 
     /**
      * Text to be displayed in a tooltip when hovering over the element.
      */
-    'title': PropTypes.string,
+    title: PropTypes.string,
 
     /**
      * Dash-assigned callback that gets fired when the value changes.
@@ -183,8 +184,8 @@ Textarea.propTypes = {
     /**
      * A callback for firing events to dash.
      */
-    'fireEvent': PropTypes.func,
+    fireEvent: PropTypes.func,
 
-    'dashEvents': PropTypes.oneOf(['click', 'blur', 'change'])
+    dashEvents: PropTypes.oneOf(['click', 'blur', 'change'])
 
 };
diff --git a/packages/dash-core-components/test/IntegrationTests.py b/packages/dash-core-components/test/IntegrationTests.py
index 85fb96fc38..3fc38ca061 100644
--- a/packages/dash-core-components/test/IntegrationTests.py
+++ b/packages/dash-core-components/test/IntegrationTests.py
@@ -13,8 +13,8 @@ class IntegrationTests(unittest.TestCase):
     @classmethod
     def setUpClass(cls):
         super(IntegrationTests, cls).setUpClass()
-        cls.driver = webdriver.Chrome()
 
+        cls.driver = webdriver.Chrome()
         loader = percy.ResourceLoader(webdriver=cls.driver)
         cls.percy_runner = percy.Runner(loader=loader)
         cls.percy_runner.initialize_build()
@@ -49,7 +49,7 @@ def run():
         # Run on a separate process so that it doesn't block
         self.server_process = multiprocessing.Process(target=run)
         self.server_process.start()
-        time.sleep(0.5)
+        time.sleep(5)
 
         # Visit the dash page
         self.driver.get('http://localhost:8050')
diff --git a/packages/dash-core-components/test/test_integration.py b/packages/dash-core-components/test/test_integration.py
index 23feecb3cf..8b1e88fd7b 100644
--- a/packages/dash-core-components/test/test_integration.py
+++ b/packages/dash-core-components/test/test_integration.py
@@ -2,14 +2,17 @@
 import dash_core_components as dcc
 import dash_html_components as html
 import dash
+from datetime import datetime as dt
 import importlib
 import percy
 from selenium import webdriver
 from selenium.webdriver.common.keys import Keys
 import time
 import multiprocessing
+import sys
 import unittest
 import os
+from urlparse import urlparse
 
 from .IntegrationTests import IntegrationTests
 from .utils import assert_clean_console, invincible, wait_for
@@ -25,7 +28,6 @@
 
 class Tests(IntegrationTests):
     def setUp(self):
-        self.driver = webdriver.Chrome()
         def wait_for_element_by_id(id):
             wait_for(lambda: None is not invincible(
                 lambda: self.driver.find_element_by_id(id)
@@ -107,7 +109,38 @@ def test_integration(self):
                         'y': [4, 1, 4]
                     }]
                 }
-            )
+            ),
+
+            html.Label('DatePickerSingle'),
+            dcc.DatePickerSingle(
+                id='date-picker-single',
+                date=dt(1997, 5, 10)
+            ),
+
+            html.Label('DatePickerRange'),
+            dcc.DatePickerRange(
+                id='date-picker-range',
+                start_date=dt(1997, 5, 3),
+                end_date_placeholder_text='Select a date!'
+            ),
+
+            html.Label('TextArea'),
+            dcc.Textarea(
+                placeholder='Enter a value...',
+                style={'width': '100%'}
+            ),
+
+            html.Label('Markdown'),
+            dcc.Markdown('''
+                #### Dash and Markdown
+
+                Dash supports [Markdown](http://commonmark.org/help).
+
+                Markdown is a simple way to write and format text.
+                It includes a syntax for things like **bold text** and *italics*,
+                [links](http://commonmark.org/help), inline `code` snippets, lists,
+                quotes, and more.
+            '''.replace('    ', ''))
         ])
         self.startServer(app)
 
@@ -119,4 +152,6 @@ def test_integration(self):
             raise e
 
         if 'PERCY_PROJECT' in os.environ and 'PERCY_TOKEN' in os.environ:
-            self.percy_runner.snapshot(name='dash_core_components')
+            python_version = sys.version.split(' ')[0]
+            print('Percy Snapshot {}'.format(python_version))
+            self.percy_runner.snapshot()
diff --git a/packages/dash-core-components/tox.ini b/packages/dash-core-components/tox.ini
index be1001a998..0030f32adc 100644
--- a/packages/dash-core-components/tox.ini
+++ b/packages/dash-core-components/tox.ini
@@ -8,6 +8,8 @@ deps = -rdev-requirements.txt
 passenv =
   HOME
   DISPLAY
+  PERCY_TOKEN
+  PERCY_PROJECT
 
 [testenv:py27]
 basepython={env:TOX_PYTHON_27}