add className and style to more components + style updates + percy integration (plotly#60)

* add `className` and `style` to parent containers where possible

* reorder props so that `options` and `value` are among the first

these are the most common options, so they should appear first

* clean up passing props through to component

this wasn’t causing any bugs but it was passing unnecessary props into
the child components

* style fixes

* move marks and value to the first props as well

* fresh metadata.json

* Integrate Percy screenshot tests

* add the other components to the integration screenshot test

Author: chriddyp

packages/dash-core-components/dash_core_components/metadata.json

@@ -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

packages/dash-core-components/dev-requirements.txt

@@ -19,19 +19,21 @@ export default class Checklist extends Component {
 
     render() {
         const {
+            className,
             fireEvent,
             id,
             inputClassName,
             inputStyle,
             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.
      */

packages/dash-core-components/src/components/Checklist.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
      */

packages/dash-core-components/src/components/Dropdown.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