Checklist: rename values prop to value

CHANGELOG.md

@@ -2,11 +2,15 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Changed
+- Changed `dcc.Checklist` prop `values` to `value`, to match all the other input components [#558](https://github.com/plotly/dash-core-components/pull/558). Also improved prop types for `Dropdown` and `RadioItems` `value` props to consistently accept both strings and numbers.
+
 ## [0.48.0] - 2019-05-15
 ### Added
 - `figure` prop in `dcc.Graph` now accepts a `frames` key
-- Improved the `Dropdown` options description for dash-docs #547
-- Added `optionHeight` prop to `Dropdown` #552
+- Improved the `Dropdown` options description for dash-docs [#547](https://github.com/plotly/dash-core-components/pull/547)
+- Added `optionHeight` prop to `Dropdown` [#552](https://github.com/plotly/dash-core-components/pull/552)
 
 ### Removed
 - Removed unused `key` prop from `dcc.ConfirmDialog`

demo/Demo.react.js

@@ -279,7 +279,7 @@ class Controller extends Component {
     constructor() {
         super();
         this.state = {
-            values: ['melons', 'apples']
+            value: ['melons', 'apples']
         };
     }
 
@@ -288,7 +288,7 @@ class Controller extends Component {
             setProps={(props) => {
                 this.setState(props);
             }}
-            values={this.state.values}
+            value={this.state.value}
             {...properties}
         />);
     }

jest.config.js

@@ -71,7 +71,9 @@ module.exports = {
   // ],
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
-  // moduleNameMapper: {},
+  moduleNameMapper: {
+      "\\.(css|less)$": "identity-obj-proxy"
+  },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
   // modulePathIgnorePatterns: [],

package.json

@@ -54,6 +54,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.5.0",
     "babel-loader": "^8.0.5",
+    "check-prop-types": "^1.1.2",
     "component-playground": "^3.0.0",
     "copyfiles": "^2.0.0",
     "css-loader": "^1.0.1",
@@ -64,6 +65,7 @@
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-react": "^7.11.1",
     "exec-sh": "^0.3.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^24.5.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.14.2",

src/components/Checklist.react.js

@@ -4,8 +4,8 @@ import React, {Component} from 'react';
 
 /**
  * Checklist is a component that encapsulates several checkboxes.
- * The values and labels of the checklist is specified in the `options`
- * property and the checked items are specified with the `values` property.
+ * The values and labels of the checklist are specified in the `options`
+ * property and the checked items are specified with the `value` property.
  * Each checkbox is rendered as an input with a surrounding label.
  */
 export default class Checklist extends Component {
@@ -21,7 +21,7 @@ export default class Checklist extends Component {
             setProps,
             style,
             loading_state,
-            values,
+            value,
         } = this.props;
 
         return (
@@ -40,19 +40,19 @@ export default class Checklist extends Component {
                         className={labelClassName}
                     >
                         <input
-                            checked={contains(option.value, values)}
+                            checked={contains(option.value, value)}
                             className={inputClassName}
                             disabled={Boolean(option.disabled)}
                             style={inputStyle}
                             type="checkbox"
                             onChange={() => {
-                                let newValues;
-                                if (contains(option.value, values)) {
-                                    newValues = without([option.value], values);
+                                let newValue;
+                                if (contains(option.value, value)) {
+                                    newValue = without([option.value], value);
                                 } else {
-                                    newValues = append(option.value, values);
+                                    newValue = append(option.value, value);
                                 }
-                                setProps({values: newValues});
+                                setProps({value: newValue});
                             }}
                         />
                         {option.label}
@@ -85,7 +85,7 @@ Checklist.propTypes = {
             /**
              * The value of the checkbox. This value
              * corresponds to the items specified in the
-             * `values` property.
+             * `value` property.
              */
             value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
                 .isRequired,
@@ -100,7 +100,7 @@ Checklist.propTypes = {
     /**
      * The currently selected value
      */
-    values: PropTypes.arrayOf(
+    value: PropTypes.arrayOf(
         PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     ),
 
@@ -166,4 +166,5 @@ Checklist.defaultProps = {
     labelStyle: {},
     labelClassName: '',
     options: [],
+    value: [],
 };

src/components/Dropdown.react.js

@@ -130,13 +130,13 @@ Dropdown.propTypes = {
             /**
              * The value of the dropdown. This value
              * corresponds to the items specified in the
-             * `values` property.
+             * `value` property.
              */
             value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
                 .isRequired,
 
             /**
-             * If true, this dropdown is disabled and items can't be selected.
+             * If true, this option is disabled and cannot be selected.
              */
             disabled: PropTypes.bool,
         })
@@ -152,9 +152,10 @@ Dropdown.propTypes = {
      */
     value: PropTypes.oneOfType([
         PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string),
         PropTypes.number,
-        PropTypes.arrayOf(PropTypes.number),
+        PropTypes.arrayOf(
+            PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        ),
     ]),
 
     /**
@@ -175,7 +176,7 @@ Dropdown.propTypes = {
     clearable: PropTypes.bool,
 
     /**
-     * If true, the option is disabled
+     * If true, this dropdown is disabled and the selection cannot be changed.
      */
     disabled: PropTypes.bool,
 

src/components/RadioItems.react.js

@@ -84,7 +84,7 @@ RadioItems.propTypes = {
             /**
              * The value of the radio item. This value
              * corresponds to the items specified in the
-             * `values` property.
+             * `value` property.
              */
             value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
                 .isRequired,
@@ -99,7 +99,7 @@ RadioItems.propTypes = {
     /**
      * The currently selected value
      */
-    value: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
      * The style of the container (div)

test/test_integration.py

@@ -838,7 +838,7 @@ def test_gallery(self):
                     {'label': 'San Francisco', 'value': 'SF'},
                     {'label': u'北京', 'value': u'北京'}
                 ],
-                values=['MTL', 'SF']
+                value=['MTL', 'SF']
             ),
 
             html.Label('Text Input'),