From c70ad1ec5f3cee5c614e30b835ce37fc93ae0237 Mon Sep 17 00:00:00 2001
From: workaholicpanda <802931+workaholicpanda@users.noreply.github.com>
Date: Sat, 18 Sep 2021 14:27:34 -0400
Subject: [PATCH 1/9] internal PR for squashing (#7)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* update Checklist, Dropdown, RangeSlider to accept optional shorthands

* update Checklist, RadioItems - added inline props and shorthand options data,
update DataTable - params order changed for shorthand support, added TODO

* fill component id if not given

* fix Dropdown props to accept array of string

* remove comments

* fix lint issues

* generating seed for component id

* lint fix in dash-table

* lint fix

* remove inline props and lint fix

* broken eslint :grimacing:

* prettier fix

* set random id inside dash dependency

* lint fixes

* bug fix

* add inline styling support

* fix bugs

* add column populating in dash-table

* disable restricting dependency type

* fix radio options type check

* add comments to inline props

* add tests for shorthands

* remove unused imports

* remove tests, refactor assign

* use ramda.type instead of typeof

* backup commit

* add auto generating marks to RangeSlider & Slider

* add number support for shorthanded options - Checklist, Dropdown

* some refactor to get react-docgen working, slider props re-arrange

* fix unit test - remove outdated part

* update props comment

Co-authored-by: Chris Parmer <chris@plot.ly>

* fix feedback comments

* fix some issues in Checklist, DataTable props

* pylint fix

* Apply suggestions from code review

Co-authored-by: Chris Parmer <chris@plot.ly>

* copy paste ProTypes to get doc-gen working

* Test Slider and RangeSlider shorthand properties

* Test Dropdown shorthand properties

* Remove unnecessary imports

* random seed moved out to global scope, the test for set_random_id was implemented

* fix slider markers - respect steps given

* assert comparision is fixed

* fix slider issues

* Add dropdown option sanitization to some additional required places

* Convert  labels to strings when an Ojbect is passed as options

* Add more variants to Dropdown shorthand test

* Extend Slider tests

* Add test for Dropdown array value type

* fix: update inline description & style

* chore: pass black format

* chore: react doc-gen fix & flake fix

* chore: rename test file names to avoid conflict

* Handle undefined options in Dropdown

* fix: the case when truncated out input marks handled

* fix: correct step calculations implemented for sliders

* fix: removed Start and End prefix / suffix from labels on Slider

* chore: add labels to dropdown tests

* chore: lint fix

* fix: dropdown options for test

* chore: prettier :sleepy:

* bump dash-renderer to v1.11.0
This new version is not important for most dash users, only dash-embedded,
and they get the renderer elsewhere; but as is there's a mismatch
between the local and CDN versions of the renderer

* fix: removed a test file which was causing percy tests fail

* fix: defining emptiness of dictionary implemented correctly, which fixes the disappearing of explicitely given marks

* fix: omit 'step' from props

* chore: update props description

* chore: remove unnecessary prop type checker

* fix: range slider test corrected, formatted to have some margins

* fix: the test_ddsh001_dropdown_shorthand_properties test restored back and the DropDowns propTypes are fixed

* fix: added bool type to CheckList label/value and RadioItem label/value

* fix: the edited JS files are reformatted using lint

* feat: implemented SI Units format for unit values of slider

* feat: added tests to cover slider SI Units format for unit values

* chore: eslint fix

* fix: the test adopted to propsTypes which now accepts bool for several components

* fix: slider numbers whose ten factor is less than 3 and bigger than -3 are not formatted, so that they can have floating numebrs

* fix: lint issue fixed

* fix: explicit null prevents auto generating marks in sliders

* fix: add snapshot for set_auto_id dependency link and asserts

* fix: test marks=None and SI units format

* fix: test_persistence - give step=1 to expect integer value output, otherwise 0.1 will be auto assigned

* fix: checking RadioItems and Checklist to accept new propTypes added in tests

Co-authored-by: workaholicpanda <>
Co-authored-by: Chris Parmer <chris@plot.ly>
Co-authored-by: Szabolcs Markó <akksi@akksi.eu>
Co-authored-by: alexcjohnson <alex@plot.ly>
---
 .../dash-core-components/package-lock.json    |   1 +
 .../src/components/Checklist.react.js         | 170 +++++++++++------
 .../src/components/Dropdown.react.js          | 105 ++++++----
 .../src/components/RadioItems.react.js        | 112 ++++++++---
 .../src/components/RangeSlider.react.js       |  30 +--
 .../src/components/Slider.react.js            |  30 +--
 .../src/components/css/Dropdown.css           |   2 +-
 .../src/fragments/Dropdown.react.js           |  15 +-
 .../src/fragments/RangeSlider.react.js        |  25 +--
 .../src/fragments/Slider.react.js             |  18 +-
 .../src/utils/computeSliderMarkers.js         | 164 ++++++++++++++++
 .../src/utils/optionTypes.js                  |  25 +++
 ...ropdown_radioitems_checklist_shorthands.py |  82 ++++++++
 .../dropdown/test_dynamic_options.py          |  25 ++-
 .../integration/misc/test_bcdp_auto_id.py     |  46 +++++
 .../integration/misc/test_persistence.py      |   4 +-
 .../sliders/test_sliders_shorthands.py        | 180 ++++++++++++++++++
 .../dash-html-components/package-lock.json    |   1 +
 components/dash-table/package-lock.json       |   1 +
 .../src/dash-table/components/Table/props.ts  |  20 ++
 .../src/dash-table/dash/DataTable.js          |  52 ++---
 .../src/dash-table/dash/Sanitizer.ts          |  16 +-
 dash/_dash_renderer.py                        |   4 +-
 dash/dash-renderer/package-lock.json          |   5 +-
 dash/dash-renderer/package.json               |   2 +-
 dash/dependencies.py                          |   8 +-
 dash/development/base_component.py            |  10 +
 dash/development/component_generator.py       |   1 +
 .../integration/devtools/test_props_check.py  |  12 +-
 tests/unit/development/test_base_component.py |  37 +++-
 30 files changed, 981 insertions(+), 222 deletions(-)
 create mode 100644 components/dash-core-components/src/utils/computeSliderMarkers.js
 create mode 100644 components/dash-core-components/src/utils/optionTypes.js
 create mode 100644 components/dash-core-components/tests/integration/dropdown/test_dropdown_radioitems_checklist_shorthands.py
 create mode 100644 components/dash-core-components/tests/integration/misc/test_bcdp_auto_id.py
 create mode 100644 components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py

diff --git a/components/dash-core-components/package-lock.json b/components/dash-core-components/package-lock.json
index 24f0f878f0..6f0df2e9b3 100644
--- a/components/dash-core-components/package-lock.json
+++ b/components/dash-core-components/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "dash-core-components",
       "version": "2.0.0",
       "license": "MIT",
       "dependencies": {
diff --git a/components/dash-core-components/src/components/Checklist.react.js b/components/dash-core-components/src/components/Checklist.react.js
index 22f3d68af5..fc9a207982 100644
--- a/components/dash-core-components/src/components/Checklist.react.js
+++ b/components/dash-core-components/src/components/Checklist.react.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import {append, includes, without} from 'ramda';
 import React, {Component} from 'react';
+import {sanitizeOptions} from '../utils/optionTypes';
 
 /**
  * Checklist is a component that encapsulates several checkboxes.
@@ -22,8 +23,8 @@ export default class Checklist extends Component {
             style,
             loading_state,
             value,
+            inline,
         } = this.props;
-
         return (
             <div
                 data-dash-is-loading={
@@ -33,77 +34,126 @@ export default class Checklist extends Component {
                 style={style}
                 className={className}
             >
-                {options.map(option => (
-                    <label
-                        key={option.value}
-                        style={labelStyle}
-                        className={labelClassName}
-                    >
-                        <input
-                            checked={includes(option.value, value)}
-                            className={inputClassName}
-                            disabled={Boolean(option.disabled)}
-                            style={inputStyle}
-                            type="checkbox"
-                            onChange={() => {
-                                let newValue;
-                                if (includes(option.value, value)) {
-                                    newValue = without([option.value], value);
-                                } else {
-                                    newValue = append(option.value, value);
-                                }
-                                setProps({value: newValue});
-                            }}
-                        />
-                        {option.label}
-                    </label>
-                ))}
+                {sanitizeOptions(options).map(option => {
+                    return (
+                        <label
+                            key={option.value}
+                            style={Object.assign(
+                                {},
+                                labelStyle,
+                                inline ? {display: 'inline-block'} : {}
+                            )}
+                            className={labelClassName}
+                        >
+                            <input
+                                checked={includes(option.value, value)}
+                                className={inputClassName}
+                                disabled={Boolean(option.disabled)}
+                                style={inputStyle}
+                                type="checkbox"
+                                onChange={() => {
+                                    let newValue;
+                                    if (includes(option.value, value)) {
+                                        newValue = without(
+                                            [option.value],
+                                            value
+                                        );
+                                    } else {
+                                        newValue = append(option.value, value);
+                                    }
+                                    setProps({value: newValue});
+                                }}
+                            />
+                            {option.label}
+                        </label>
+                    );
+                })}
             </div>
         );
     }
 }
 
 Checklist.propTypes = {
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
     /**
      * An array of options
      */
-    options: PropTypes.arrayOf(
-        PropTypes.exact({
-            /**
-             * The checkbox's label
-             */
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * The value of the checkbox. This value
-             * corresponds to the items specified in the
-             * `value` property.
-             */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * If true, this checkbox is disabled and can't be clicked on.
-             */
-            disabled: PropTypes.bool,
-        })
-    ),
+    options: PropTypes.oneOfType([
+        /**
+         * Array of options where the label and the value are the same thing - [string|number|bool]
+         */
+        PropTypes.arrayOf(
+            PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number,
+                PropTypes.bool,
+            ])
+        ),
+        /**
+         * Simpler `options` representation in dictionary format. The order is not guaranteed.
+         * {`value1`: `label1`, `value2`: `label2`, ... }
+         * which is equal to
+         * [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
+         */
+        PropTypes.object,
+        /**
+         * An array of options {label: [string|number], value: [string|number]},
+         * an optional disabled field can be used for each option
+         */
+        PropTypes.arrayOf(
+            PropTypes.exact({
+                /**
+                 * The option's label
+                 */
+                label: PropTypes.oneOfType([
+                    PropTypes.string,
+                    PropTypes.number,
+                    PropTypes.bool,
+                ]).isRequired,
+
+                /**
+                 * The value of the option. This value
+                 * corresponds to the items specified in the
+                 * `value` property.
+                 */
+                value: PropTypes.oneOfType([
+                    PropTypes.string,
+                    PropTypes.number,
+                    PropTypes.bool,
+                ]).isRequired,
+
+                /**
+                 * If true, this option is disabled and cannot be selected.
+                 */
+                disabled: PropTypes.bool,
+
+                /**
+                 * The HTML 'title' attribute for the option. Allows for
+                 * information on hover. For more information on this attribute,
+                 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
+                 */
+                title: PropTypes.string,
+            })
+        ),
+    ]),
 
     /**
      * The currently selected value
      */
     value: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+        PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+            PropTypes.bool,
+        ])
     ),
 
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: PropTypes.string,
+
     /**
      * The class of the container (div)
      */
@@ -187,6 +237,13 @@ Checklist.propTypes = {
      * session: window.sessionStorage, data is cleared once the browser quit.
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+    /**
+     * Indicates whether labelStyle should be inline or not
+     * True: Automatically set { 'display': 'inline-block' } to labelStyle
+     * False: No additional styles are passed into labelStyle.
+     */
+    inline: PropTypes.bool,
 };
 
 Checklist.defaultProps = {
@@ -198,4 +255,5 @@ Checklist.defaultProps = {
     value: [],
     persisted_props: ['value'],
     persistence_type: 'local',
+    inline: false,
 };
diff --git a/components/dash-core-components/src/components/Dropdown.react.js b/components/dash-core-components/src/components/Dropdown.react.js
index 604cebfe7c..f329443b8d 100644
--- a/components/dash-core-components/src/components/Dropdown.react.js
+++ b/components/dash-core-components/src/components/Dropdown.react.js
@@ -25,46 +25,65 @@ export default class Dropdown extends Component {
 }
 
 Dropdown.propTypes = {
-    /**
-     * The ID of this component, used to identify dash components
-     * in callbacks. The ID needs to be unique across all of the
-     * components in an app.
-     */
-    id: PropTypes.string,
-
     /**
      * An array of options {label: [string|number], value: [string|number]},
      * an optional disabled field can be used for each option
      */
-    options: PropTypes.arrayOf(
-        PropTypes.exact({
-            /**
-             * The dropdown's label
-             */
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * The value of the dropdown. This value
-             * corresponds to the items specified in the
-             * `value` property.
-             */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * If true, this option is disabled and cannot be selected.
-             */
-            disabled: PropTypes.bool,
-
-            /**
-             * The HTML 'title' attribute for the option. Allows for
-             * information on hover. For more information on this attribute,
-             * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
-             */
-            title: PropTypes.string,
-        })
-    ),
+    options: PropTypes.oneOfType([
+        /**
+         * Array of options where the label and the value are the same thing - [string|number|bool]
+         */
+        PropTypes.arrayOf(
+            PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number,
+                PropTypes.bool,
+            ])
+        ),
+        /**
+         * Simpler `options` representation in dictionary format. The order is not guaranteed.
+         * {`value1`: `label1`, `value2`: `label2`, ... }
+         * which is equal to
+         * [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
+         */
+        PropTypes.object,
+        /**
+         * An array of options {label: [string|number], value: [string|number]},
+         * an optional disabled field can be used for each option
+         */
+        PropTypes.arrayOf(
+            PropTypes.exact({
+                /**
+                 * The option's label
+                 */
+                label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+                    .isRequired,
+
+                /**
+                 * The value of the option. This value
+                 * corresponds to the items specified in the
+                 * `value` property.
+                 */
+                value: PropTypes.oneOfType([
+                    PropTypes.string,
+                    PropTypes.number,
+                    PropTypes.bool,
+                ]).isRequired,
+
+                /**
+                 * If true, this option is disabled and cannot be selected.
+                 */
+                disabled: PropTypes.bool,
+
+                /**
+                 * The HTML 'title' attribute for the option. Allows for
+                 * information on hover. For more information on this attribute,
+                 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
+                 */
+                title: PropTypes.string,
+            })
+        ),
+    ]),
 
     /**
      * The value of the input. If `multi` is false (the default)
@@ -77,11 +96,23 @@ Dropdown.propTypes = {
     value: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.number,
+        PropTypes.bool,
         PropTypes.arrayOf(
-            PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+            PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number,
+                PropTypes.bool,
+            ])
         ),
     ]),
 
+    /**
+     * The ID of this component, used to identify dash components
+     * in callbacks. The ID needs to be unique across all of the
+     * components in an app.
+     */
+    id: PropTypes.string,
+
     /**
      * height of each option. Can be increased when label lengths would wrap around
      */
diff --git a/components/dash-core-components/src/components/RadioItems.react.js b/components/dash-core-components/src/components/RadioItems.react.js
index 8c2ef151b1..fe6d8e42c1 100644
--- a/components/dash-core-components/src/components/RadioItems.react.js
+++ b/components/dash-core-components/src/components/RadioItems.react.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import './css/react-select@1.0.0-rc.3.min.css';
+import {sanitizeOptions} from '../utils/optionTypes';
 
 /**
  * RadioItems is a component that encapsulates several radio item inputs.
@@ -23,6 +24,7 @@ export default class RadioItems extends Component {
             setProps,
             loading_state,
             value,
+            inline,
         } = this.props;
 
         let ids = {};
@@ -38,9 +40,13 @@ export default class RadioItems extends Component {
                 className={className}
                 style={style}
             >
-                {options.map(option => (
+                {sanitizeOptions(options).map(option => (
                     <label
-                        style={labelStyle}
+                        style={Object.assign(
+                            {},
+                            labelStyle,
+                            inline ? {display: 'inline-block'} : {}
+                        )}
                         className={labelClassName}
                         key={option.value}
                     >
@@ -63,6 +69,68 @@ export default class RadioItems extends Component {
 }
 
 RadioItems.propTypes = {
+    /**
+     * An array of options, or inline dictionary of options
+     */
+    options: PropTypes.oneOfType([
+        /**
+         * Array of options where the label and the value are the same thing - [string|number|bool]
+         */
+        PropTypes.arrayOf(
+            PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number,
+                PropTypes.bool,
+            ])
+        ),
+        /**
+         * Simpler `options` representation in dictionary format. The order is not guaranteed.
+         * {`value1`: `label1`, `value2`: `label2`, ... }
+         * which is equal to
+         * [{label: `label1`, value: `value1`}, {label: `label2`, value: `value2`}, ...]
+         */
+        PropTypes.object,
+        /**
+         * An array of options {label: [string|number], value: [string|number]},
+         * an optional disabled field can be used for each option
+         */
+        PropTypes.arrayOf(
+            PropTypes.exact({
+                /**
+                 * The option's label
+                 */
+                label: PropTypes.oneOfType([
+                    PropTypes.string,
+                    PropTypes.number,
+                    PropTypes.bool,
+                ]).isRequired,
+
+                /**
+                 * The value of the option. This value
+                 * corresponds to the items specified in the
+                 * `value` property.
+                 */
+                value: PropTypes.oneOfType([
+                    PropTypes.string,
+                    PropTypes.number,
+                    PropTypes.bool,
+                ]).isRequired,
+
+                /**
+                 * If true, this option is disabled and cannot be selected.
+                 */
+                disabled: PropTypes.bool,
+
+                /**
+                 * The HTML 'title' attribute for the option. Allows for
+                 * information on hover. For more information on this attribute,
+                 * see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title
+                 */
+                title: PropTypes.string,
+            })
+        ),
+    ]),
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
@@ -70,36 +138,14 @@ RadioItems.propTypes = {
      */
     id: PropTypes.string,
 
-    /**
-     * An array of options
-     */
-    options: PropTypes.arrayOf(
-        PropTypes.exact({
-            /**
-             * The radio item's label
-             */
-            label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * The value of the radio item. This value
-             * corresponds to the items specified in the
-             * `value` property.
-             */
-            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-                .isRequired,
-
-            /**
-             * If true, this radio item is disabled and can't be clicked on.
-             */
-            disabled: PropTypes.bool,
-        })
-    ),
-
     /**
      * The currently selected value
      */
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.bool,
+    ]),
 
     /**
      * The style of the container (div)
@@ -184,6 +230,13 @@ RadioItems.propTypes = {
      * session: window.sessionStorage, data is cleared once the browser quit.
      */
     persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
+
+    /**
+     * Indicates whether labelStyle should be inline or not
+     * True: Automatically set { 'display': 'inline-block' } to labelStyle
+     * False: No additional styles are passed into labelStyle.
+     */
+    inline: PropTypes.bool,
 };
 
 RadioItems.defaultProps = {
@@ -194,4 +247,5 @@ RadioItems.defaultProps = {
     options: [],
     persisted_props: ['value'],
     persistence_type: 'local',
+    inline: false,
 };
diff --git a/components/dash-core-components/src/components/RangeSlider.react.js b/components/dash-core-components/src/components/RangeSlider.react.js
index 2b293044b5..61cc795b38 100644
--- a/components/dash-core-components/src/components/RangeSlider.react.js
+++ b/components/dash-core-components/src/components/RangeSlider.react.js
@@ -19,6 +19,21 @@ export default class RangeSlider extends Component {
 }
 
 RangeSlider.propTypes = {
+    /**
+     * Minimum allowed value of the slider
+     */
+    min: PropTypes.number,
+
+    /**
+     * Maximum allowed value of the slider
+     */
+    max: PropTypes.number,
+
+    /**
+     * Value by which increments or decrements are made
+     */
+    step: PropTypes.number,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
@@ -88,16 +103,6 @@ RangeSlider.propTypes = {
      */
     included: PropTypes.bool,
 
-    /**
-     * Minimum allowed value of the slider
-     */
-    min: PropTypes.number,
-
-    /**
-     * Maximum allowed value of the slider
-     */
-    max: PropTypes.number,
-
     /**
      * pushable could be set as true to allow pushing of
      * surrounding handles when moving an handle.
@@ -134,11 +139,6 @@ RangeSlider.propTypes = {
         ]),
     }),
 
-    /**
-     * Value by which increments or decrements are made
-     */
-    step: PropTypes.number,
-
     /**
      * If true, the slider will be vertical
      */
diff --git a/components/dash-core-components/src/components/Slider.react.js b/components/dash-core-components/src/components/Slider.react.js
index 116180dd6d..566e3e8b9f 100644
--- a/components/dash-core-components/src/components/Slider.react.js
+++ b/components/dash-core-components/src/components/Slider.react.js
@@ -18,6 +18,21 @@ export default class Slider extends Component {
 }
 
 Slider.propTypes = {
+    /**
+     * Minimum allowed value of the slider
+     */
+    min: PropTypes.number,
+
+    /**
+     * Maximum allowed value of the slider
+     */
+    max: PropTypes.number,
+
+    /**
+     * Value by which increments or decrements are made
+     */
+    step: PropTypes.number,
+
     /**
      * The ID of this component, used to identify dash components
      * in callbacks. The ID needs to be unique across all of the
@@ -76,16 +91,6 @@ Slider.propTypes = {
      */
     included: PropTypes.bool,
 
-    /**
-     * Minimum allowed value of the slider
-     */
-    min: PropTypes.number,
-
-    /**
-     * Maximum allowed value of the slider
-     */
-    max: PropTypes.number,
-
     /**
      * Configuration for tooltips describing the current slider value
      */
@@ -114,11 +119,6 @@ Slider.propTypes = {
         ]),
     }),
 
-    /**
-     * Value by which increments or decrements are made
-     */
-    step: PropTypes.number,
-
     /**
      * If true, the slider will be vertical
      */
diff --git a/components/dash-core-components/src/components/css/Dropdown.css b/components/dash-core-components/src/components/css/Dropdown.css
index ac8d7a9bdb..50f413fab7 100644
--- a/components/dash-core-components/src/components/css/Dropdown.css
+++ b/components/dash-core-components/src/components/css/Dropdown.css
@@ -1,3 +1,3 @@
 .dash-dropdown .Select-menu-outer {
     z-index: 1000;
-}
\ No newline at end of file
+}
diff --git a/components/dash-core-components/src/fragments/Dropdown.react.js b/components/dash-core-components/src/fragments/Dropdown.react.js
index 2f819b353d..43dd15e006 100644
--- a/components/dash-core-components/src/fragments/Dropdown.react.js
+++ b/components/dash-core-components/src/fragments/Dropdown.react.js
@@ -7,6 +7,7 @@ import '../components/css/react-virtualized@9.9.0.css';
 import '../components/css/Dropdown.css';
 
 import {propTypes, defaultProps} from '../components/Dropdown.react';
+import {sanitizeOptions} from '../utils/optionTypes';
 
 // Custom tokenizer, see https://github.com/bvaughn/js-search/issues/43
 // Split on spaces
@@ -20,14 +21,14 @@ const TOKENIZER = {
     },
 };
 
-const DELIMETER = ',';
+const DELIMITER = ',';
 
 export default class Dropdown extends Component {
     constructor(props) {
         super(props);
         this.state = {
             filterOptions: createFilterOptions({
-                options: props.options,
+                options: sanitizeOptions(props.options),
                 tokenizer: TOKENIZER,
             }),
         };
@@ -37,7 +38,7 @@ export default class Dropdown extends Component {
         if (newProps.options !== this.props.options) {
             this.setState({
                 filterOptions: createFilterOptions({
-                    options: newProps.options,
+                    options: sanitizeOptions(newProps.options),
                     tokenizer: TOKENIZER,
                 }),
             });
@@ -57,8 +58,8 @@ export default class Dropdown extends Component {
         } = this.props;
         const {filterOptions} = this.state;
         let selectedValue;
-        if (type(value) === 'array') {
-            selectedValue = value.join(DELIMETER);
+        if (type(value) === 'Array') {
+            selectedValue = value.join(DELIMITER);
         } else {
             selectedValue = value;
         }
@@ -73,7 +74,7 @@ export default class Dropdown extends Component {
             >
                 <ReactDropdown
                     filterOptions={filterOptions}
-                    options={options}
+                    options={sanitizeOptions(options)}
                     value={selectedValue}
                     onChange={selectedOption => {
                         if (multi) {
@@ -98,7 +99,7 @@ export default class Dropdown extends Component {
                     backspaceRemoves={clearable}
                     deleteRemoves={clearable}
                     inputProps={{autoComplete: 'off'}}
-                    {...omit(['setProps', 'value'], this.props)}
+                    {...omit(['setProps', 'value', 'options'], this.props)}
                 />
             </div>
         );
diff --git a/components/dash-core-components/src/fragments/RangeSlider.react.js b/components/dash-core-components/src/fragments/RangeSlider.react.js
index a8f4e8c81d..facd97d6e4 100644
--- a/components/dash-core-components/src/fragments/RangeSlider.react.js
+++ b/components/dash-core-components/src/fragments/RangeSlider.react.js
@@ -1,10 +1,14 @@
 import React, {Component} from 'react';
-import {assoc, omit, pickBy} from 'ramda';
+import {assoc, omit} from 'ramda';
 import {Range, createSliderWithTooltip} from 'rc-slider';
 import computeSliderStyle from '../utils/computeSliderStyle';
 
 import 'rc-slider/assets/index.css';
-
+import {
+    calcValue,
+    sanitizeMarks,
+    calcStep,
+} from '../utils/computeSliderMarkers';
 import {propTypes, defaultProps} from '../components/RangeSlider.react';
 
 export default class RangeSlider extends Component {
@@ -46,6 +50,10 @@ export default class RangeSlider extends Component {
             updatemode,
             vertical,
             verticalHeight,
+            min,
+            max,
+            marks,
+            step,
         } = this.props;
         const value = this.state.value;
 
@@ -62,13 +70,6 @@ export default class RangeSlider extends Component {
             tipProps = tooltip;
         }
 
-        const truncatedMarks =
-            this.props.marks &&
-            pickBy(
-                (k, mark) => mark >= this.props.min && mark <= this.props.max,
-                this.props.marks
-            );
-
         return (
             <div
                 id={id}
@@ -101,8 +102,9 @@ export default class RangeSlider extends Component {
                         getTooltipContainer: node => node,
                     }}
                     style={{position: 'relative'}}
-                    value={value}
-                    marks={truncatedMarks}
+                    value={value ? value : calcValue(min, max, value)}
+                    marks={sanitizeMarks({min, max, marks, step})}
+                    step={calcStep(min, max, step)}
                     {...omit(
                         [
                             'className',
@@ -112,6 +114,7 @@ export default class RangeSlider extends Component {
                             'marks',
                             'updatemode',
                             'verticalHeight',
+                            'step',
                         ],
                         this.props
                     )}
diff --git a/components/dash-core-components/src/fragments/Slider.react.js b/components/dash-core-components/src/fragments/Slider.react.js
index 178014e395..8bdf569230 100644
--- a/components/dash-core-components/src/fragments/Slider.react.js
+++ b/components/dash-core-components/src/fragments/Slider.react.js
@@ -1,10 +1,11 @@
 import React, {Component} from 'react';
 import ReactSlider, {createSliderWithTooltip} from 'rc-slider';
-import {assoc, omit, pickBy} from 'ramda';
+import {assoc, omit} from 'ramda';
 import computeSliderStyle from '../utils/computeSliderStyle';
 
 import 'rc-slider/assets/index.css';
 
+import {sanitizeMarks, calcStep} from '../utils/computeSliderMarkers';
 import {propTypes, defaultProps} from '../components/Slider.react';
 
 /**
@@ -47,6 +48,10 @@ export default class Slider extends Component {
             setProps,
             tooltip,
             updatemode,
+            min,
+            max,
+            marks,
+            step,
             vertical,
             verticalHeight,
         } = this.props;
@@ -65,13 +70,6 @@ export default class Slider extends Component {
             tipProps = tooltip;
         }
 
-        const truncatedMarks = this.props.marks
-            ? pickBy(
-                  (k, mark) => mark >= this.props.min && mark <= this.props.max,
-                  this.props.marks
-              )
-            : this.props.marks;
-
         return (
             <div
                 id={id}
@@ -105,7 +103,8 @@ export default class Slider extends Component {
                     }}
                     style={{position: 'relative'}}
                     value={value}
-                    marks={truncatedMarks}
+                    marks={sanitizeMarks({min, max, marks, step})}
+                    step={calcStep(min, max, step)}
                     {...omit(
                         [
                             'className',
@@ -115,6 +114,7 @@ export default class Slider extends Component {
                             'drag_value',
                             'marks',
                             'verticalHeight',
+                            'step',
                         ],
                         this.props
                     )}
diff --git a/components/dash-core-components/src/utils/computeSliderMarkers.js b/components/dash-core-components/src/utils/computeSliderMarkers.js
new file mode 100644
index 0000000000..34fca54560
--- /dev/null
+++ b/components/dash-core-components/src/utils/computeSliderMarkers.js
@@ -0,0 +1,164 @@
+import {pickBy, isEmpty} from 'ramda';
+import {formatPrefix} from 'd3-format';
+
+/**
+ * Truncate marks if they are out of Slider interval
+ */
+const truncateMarks = (min, max, marks) =>
+    pickBy((k, mark) => mark >= min && mark <= max, marks);
+
+const truncateNumber = num =>
+    parseInt(num.toString().match(/^-?\d+(?:\.\d{0,0})?/)[0], 10);
+
+const decimalCount = d =>
+    String(d).split('.').length > 1 ? String(d).split('.')[1].length : 0;
+const alignIntValue = (v, d) =>
+    d < 10
+        ? v
+        : parseInt((truncateNumber(v / d) * d).toFixed(decimalCount(d)), 10);
+const alignDecimalValue = (v, d) =>
+    d < 10
+        ? parseFloat(v.toFixed(decimalCount(d)))
+        : parseFloat(((v / d).toFixed(0) * d).toFixed(decimalCount(d)));
+
+const alignValue = (v, d) =>
+    decimalCount(d) < 1 ? alignIntValue(v, d) : alignDecimalValue(v, d);
+
+const log = v => Math.floor(Math.log10(v));
+
+const getNearByStep = v =>
+    v < 10
+        ? [v]
+        : [
+              Math.pow(10, Math.floor(Math.log10(v))),
+              Math.pow(10, Math.ceil(Math.log10(v))) / 2,
+              alignValue(v, Math.pow(10, log(v))),
+              Math.pow(10, Math.ceil(Math.log10(v))),
+          ].sort((a, b) => Math.abs(a - v) - Math.abs(b - v));
+
+const estimateBestSteps = (minValue, maxValue, stepValue) => {
+    const desiredCountMin = 2 + (maxValue / stepValue <= 10 ? 3 : 3); // including start, end
+    const desiredCountMax = 2 + (maxValue / stepValue <= 10 ? 4 : 6);
+
+    const min = minValue / stepValue;
+    const max = maxValue / stepValue;
+
+    const rangeLength = max - min;
+
+    const leastMarksInterval = Math.max(
+        Math.round(rangeLength / (desiredCountMin - 1)),
+        1
+    );
+    const possibleValues = getNearByStep(leastMarksInterval);
+
+    const finalStep =
+        possibleValues.find(step => {
+            const expectedSteps = Math.ceil(rangeLength / step) + 1;
+            return (
+                expectedSteps >= desiredCountMin - 1 &&
+                expectedSteps <= desiredCountMax + 1
+            );
+        }) || possibleValues[0];
+    return [
+        alignValue(min, finalStep) * stepValue,
+        alignValue(finalStep * stepValue, stepValue),
+        stepValue,
+    ];
+};
+
+/**
+ * Calculate default step if not defined
+ */
+export const calcStep = (min, max, step) => {
+    if (step) {
+        return step;
+    }
+
+    const diff = max > min ? max - min : min - max;
+
+    const v = (Math.abs(diff) + Number.EPSILON) / 100;
+    const N = Math.floor(Math.log10(v));
+    return [
+        Number(Math.pow(10, N)),
+        2 * Math.pow(10, N),
+        5 * Math.pow(10, N),
+    ].sort((a, b) => Math.abs(a - v) - Math.abs(b - v))[0];
+};
+
+export const applyD3Format = (mark, min, max) => {
+    const mu_ten_factor = -3;
+    const k_ten_factor = 3;
+
+    const ten_factor = Math.log10(Math.abs(mark));
+    if (ten_factor > mu_ten_factor && ten_factor < k_ten_factor) {
+        return String(mark);
+    }
+    const max_min_mean = (Math.abs(max) + Math.abs(min)) / 2;
+    const si_formatter = formatPrefix(',.0', max_min_mean);
+    return String(si_formatter(mark));
+};
+
+export const autoGenerateMarks = (min, max, step) => {
+    const marks = [];
+    const [start, interval, chosenStep] = step
+        ? [min, step, step]
+        : estimateBestSteps(min, max, calcStep(min, max, step));
+    let cursor = start + interval;
+
+    // make sure we don't step into infinite loop
+    if ((max - cursor) / interval > 0) {
+        do {
+            marks.push(alignValue(cursor, chosenStep));
+            cursor += interval;
+        } while (cursor < max);
+
+        // do some cosmetic
+        const discardThreshold = 1.5;
+        if (
+            marks.length >= 2 &&
+            max - marks[marks.length - 2] <= interval * discardThreshold
+        ) {
+            marks.pop();
+        }
+    }
+
+    const marksObject = {};
+    marks.forEach(mark => {
+        marksObject[mark] = applyD3Format(mark, min, max);
+    });
+    marksObject[min] = applyD3Format(min, min, max);
+    marksObject[max] = applyD3Format(max, min, max);
+    return marksObject;
+};
+
+/**
+ * - Auto generate marks if not given,
+ * - Not generate anything at all when explicit null is given to marks
+ * - Then truncate marks so no out of range marks
+ */
+export const sanitizeMarks = ({min, max, marks, step}) => {
+    if (marks === null) {
+        return undefined;
+    }
+
+    const truncated_marks =
+        marks && isEmpty(marks) === false
+            ? truncateMarks(min, max, marks)
+            : marks;
+
+    if (truncated_marks && isEmpty(truncated_marks) === false) {
+        return truncated_marks;
+    }
+    return autoGenerateMarks(min, max, step);
+};
+
+/**
+ * Calculate default value if not defined
+ */
+export const calcValue = (min, max, value) => {
+    if (value !== undefined) {
+        return value;
+    }
+
+    return [min, max];
+};
diff --git a/components/dash-core-components/src/utils/optionTypes.js b/components/dash-core-components/src/utils/optionTypes.js
new file mode 100644
index 0000000000..4af9208adc
--- /dev/null
+++ b/components/dash-core-components/src/utils/optionTypes.js
@@ -0,0 +1,25 @@
+import {type} from 'ramda';
+
+export const sanitizeOptions = options => {
+    if (type(options) === 'Object') {
+        return Object.entries(options).map(([value, label]) => ({
+            label: String(label),
+            value,
+        }));
+    }
+
+    if (type(options) === 'Array') {
+        if (
+            options.length > 0 &&
+            ['String', 'Number', 'Bool'].includes(type(options[0]))
+        ) {
+            return options.map(option => ({
+                label: String(option),
+                value: option,
+            }));
+        }
+        return options;
+    }
+
+    return options;
+};
diff --git a/components/dash-core-components/tests/integration/dropdown/test_dropdown_radioitems_checklist_shorthands.py b/components/dash-core-components/tests/integration/dropdown/test_dropdown_radioitems_checklist_shorthands.py
new file mode 100644
index 0000000000..12257072fa
--- /dev/null
+++ b/components/dash-core-components/tests/integration/dropdown/test_dropdown_radioitems_checklist_shorthands.py
@@ -0,0 +1,82 @@
+from dash import Dash, dcc, html
+
+
+def test_ddsh001_test_dropdown_radioitems_checklist_shorthands(dash_dcc):
+    app = Dash(__name__)
+
+    TEST_OPTIONS_N_VALUES = [
+        [["a", "b", "c"]],
+        [["a", "b", "c"], "b"],
+        [["a", 3, "c"]],
+        [["a", 3, "c"], 3],
+        [["a", True, "c"]],
+        [["a", True, "c"], True],
+        [["a", 3, "c", True, False]],
+        [["a", 3, "c", True, False], False],
+        # {`value1`: `label1`, `value2`, `label2`, ...}
+        [{"one": "One", "two": "Two", "three": "Three"}],
+        [{"one": "One", "two": "Two", "three": "Three"}, "two"],
+        [{"one": 1, "two": 2, "three": False}],
+        [{"one": 1, "two": 2, "three": False}, "three"],
+        [{"one": 1, "two": True, "three": 3}],
+        [{"one": 1, "two": True, "three": 3}, "two"],
+        # original options format
+        [
+            [
+                {"label": "one", "value": 1},
+                {"label": "two", "value": True},
+                {"label": "three", "value": 3},
+            ]
+        ],
+        [
+            [
+                {"label": "one", "value": 1},
+                {"label": "two", "value": True},
+                {"label": "three", "value": 3},
+            ],
+            True,
+        ],
+    ]
+
+    layout = []
+    for definition in TEST_OPTIONS_N_VALUES:
+        (option, value) = definition if len(definition) > 1 else [definition[0], None]
+        layout.extend(
+            [
+                html.Div(
+                    [
+                        html.Div(
+                            f"Options={option}, Value={value}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.Dropdown(option, value),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"Options={option}, Value={value}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.RadioItems(option, value=value),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"Options={option}, Value={value}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.Checklist(option, value=[value]),
+                    ]
+                ),
+            ]
+        )
+
+    app.layout = html.Div(layout)
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element(".dash-dropdown")
+    dash_dcc.percy_snapshot(
+        "ddsh001 - test_ddsh001_test_dropdown_radioitems_checklist_shorthands"
+    )
diff --git a/components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py b/components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py
index fd4d00560e..85d9985579 100644
--- a/components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py
+++ b/components/dash-core-components/tests/integration/dropdown/test_dynamic_options.py
@@ -1,4 +1,4 @@
-from dash import Dash, Input, Output, dcc
+from dash import Dash, Input, Output, dcc, html
 from dash.exceptions import PreventUpdate
 
 
@@ -51,3 +51,26 @@ def update_options(search_value):
     assert options[0].text == "Montreal"
 
     assert dash_dcc.get_logs() == []
+
+
+def test_dddo002_array_value(dash_dcc):
+    dropdown_options = [
+        {"label": "New York City", "value": "New,York,City"},
+        {"label": "Montreal", "value": "Montreal"},
+        {"label": "San Francisco", "value": "San,Francisco"},
+    ]
+
+    app = Dash(__name__)
+    arrayValue = ["San", "Francisco"]
+
+    dropdown = dcc.Dropdown(
+        options=dropdown_options,
+        value=arrayValue,
+    )
+    app.layout = html.Div([dropdown])
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.wait_for_text_to_equal("#react-select-2--value-item", "San Francisco")
+
+    assert dash_dcc.get_logs() == []
diff --git a/components/dash-core-components/tests/integration/misc/test_bcdp_auto_id.py b/components/dash-core-components/tests/integration/misc/test_bcdp_auto_id.py
new file mode 100644
index 0000000000..6fe4e441eb
--- /dev/null
+++ b/components/dash-core-components/tests/integration/misc/test_bcdp_auto_id.py
@@ -0,0 +1,46 @@
+from dash import Dash, Input, Output, dcc, html
+
+
+def test_msps002_auto_id_assert(dash_dcc):
+    app = Dash(__name__)
+
+    input1 = dcc.Input(value="Hello")
+    input2 = dcc.Input(value="Hello")
+    input3 = dcc.Input(value=3)
+    output1 = html.Div()
+    output2 = html.Div()
+    output3 = html.Div(id="output-3")
+    slider = dcc.Slider(0, 10, value=9)
+
+    app.layout = html.Div([input1, input2, output1, output2, output3, input3, slider])
+
+    @app.callback(Output(output1, "children"), Input(input1, "value"))
+    def update(v):
+        return f"Output1: Input1={v}"
+
+    @app.callback(Output(output2, "children"), Input(input2, "value"))
+    def update(v):
+        return f"Output2: Input2={v}"
+
+    @app.callback(
+        Output("output-3", "children"), Input(input1, "value"), Input(input2, "value")
+    )
+    def update(v1, v2):
+        return f"Output3: Input1={v1}, Input2={v2}"
+
+    @app.callback(Output(slider, "value"), Input(input3, "value"))
+    def update(v):
+        return v
+
+    # Verify the auto-generated IDs are stable
+    assert output1.id == "e3e70682-c209-4cac-629f-6fbed82c07cd"
+    assert input1.id == "82e2e662-f728-b4fa-4248-5e3a0a5d2f34"
+    assert output2.id == "d4713d60-c8a7-0639-eb11-67b367a9c378"
+    assert input2.id == "23a7711a-8133-2876-37eb-dcd9e87a1613"
+    # we make sure that the if the id is set explicitly, then it is not replaced by random id
+    assert output3.id == "output-3"
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.wait_for_element(".rc-slider")
+    dash_dcc.percy_snapshot("component_auto_id - test_msps002_auto_id_assert", True)
diff --git a/components/dash-core-components/tests/integration/misc/test_persistence.py b/components/dash-core-components/tests/integration/misc/test_persistence.py
index 8435a6a6b8..1559d57815 100644
--- a/components/dash-core-components/tests/integration/misc/test_persistence.py
+++ b/components/dash-core-components/tests/integration/misc/test_persistence.py
@@ -65,9 +65,9 @@ def test_msps001_basic_persistence(dash_dcc):
                 persistence=True,
             ),
             dcc.RangeSlider(
-                id="rangeslider", min=0, max=10, value=[3, 7], persistence=True
+                id="rangeslider", min=0, max=10, step=1, value=[3, 7], persistence=True
             ),
-            dcc.Slider(id="slider", min=20, max=30, value=25, persistence=True),
+            dcc.Slider(id="slider", min=20, max=30, step=1, value=25, persistence=True),
             dcc.Tabs(
                 id="tabs",
                 children=[
diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
new file mode 100644
index 0000000000..79bad9df0e
--- /dev/null
+++ b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
@@ -0,0 +1,180 @@
+from dash import Dash, dcc, html
+import numpy as np
+import math
+
+
+def test_slsh001_rangeslider_shorthand_props(dash_dcc):
+    NUMBERS = [10 * N for N in np.arange(1, 2, 0.5)]
+    # TEST_RANGES = []
+    LAYOUT = []
+    TEST_CASES = []
+
+    for n in NUMBERS:
+        TEST_CASES.extend(
+            [
+                [n, n * 1.5, abs(n * 1.5 - n) / 5],
+                [-n, 0, n / 10],
+                [-n, n, n / 10],
+                [-1.5 * n, -1 * n, n / 7],
+            ]
+        )
+
+    for t in TEST_CASES:
+        min, max, steps = t
+        marks = {
+            i: "Label {}".format(i) if i == 1 else str(i)
+            for i in range(math.ceil(min), math.floor(max))
+        }
+
+        LAYOUT.extend(
+            [
+                html.Div(
+                    [
+                        html.Div(
+                            f"{min} - {max}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.Slider(min, max),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"{min} - {max}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.RangeSlider(min, max),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"{min} - {max}, {steps}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.Slider(min, max, steps),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"{min} - {max}, {steps}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.RangeSlider(min, max, steps),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"{min} - {max}, {steps}, value={min + steps}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.Slider(min, max, steps, value=min + steps),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"{min} - {max}, {steps}, value=[{min + steps},{min + steps * 3}]",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.RangeSlider(
+                            min, max, steps, value=[min + steps, min + steps * 3]
+                        ),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"{min} - {max}, {steps}, value={min + steps}, marks={marks}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.Slider(
+                            min,
+                            max,
+                            steps,
+                            value=min + steps,
+                            marks=marks,
+                        ),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"{min} - {max}, {steps},value=[{min + steps},{min + steps * 3}], marks={marks}",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.RangeSlider(
+                            min,
+                            max,
+                            steps,
+                            value=[min + steps, min + steps * 3],
+                            marks=marks,
+                        ),
+                    ]
+                ),
+                html.Div(
+                    [
+                        html.Div(
+                            f"{min} - {max}, {steps},value=[{min + steps},{min + steps * 3}], marks=None",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.RangeSlider(
+                            min,
+                            max,
+                            steps,
+                            value=[min + steps, min + steps * 3],
+                            marks=None,
+                        ),
+                    ]
+                ),
+            ]
+        )
+
+    app = Dash(__name__)
+    app.layout = html.Div(LAYOUT)
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element(".rc-slider")
+    dash_dcc.percy_snapshot("slsh001 - test_slsh001_rangeslider_shorthand_props", True)
+
+
+def test_slsh002_sliders_marks_si_unit_format(dash_dcc):
+
+    LAYOUT = []
+
+    # Showing SI Units
+    LAYOUT.extend(
+        [
+            html.Div(
+                "Testing SI units",
+                style={"marginBottom": 10, "marginTop": 30},
+            ),
+        ]
+    )
+
+    for n in range(-20, 20):
+        min = 0
+        max = pow(10, n)
+        LAYOUT.extend(
+            [
+                html.Div(
+                    [
+                        html.Div(
+                            f"min={min}, max={max}(=10^{n})",
+                            style={"marginBottom": 15, "marginTop": 25},
+                        ),
+                        dcc.Slider(min, max),
+                        dcc.RangeSlider(min, max),
+                    ]
+                )
+            ]
+        )
+
+    app = Dash(__name__)
+    app.layout = html.Div(LAYOUT)
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_element(".rc-slider")
+    dash_dcc.percy_snapshot("slsh002 - test_slsh002_sliders_marks_si_unit_format", True)
diff --git a/components/dash-html-components/package-lock.json b/components/dash-html-components/package-lock.json
index 1b6d4b9d39..94fb69d614 100644
--- a/components/dash-html-components/package-lock.json
+++ b/components/dash-html-components/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "dash-html-components",
       "version": "2.0.0",
       "license": "MIT",
       "dependencies": {
diff --git a/components/dash-table/package-lock.json b/components/dash-table/package-lock.json
index f842e95d7b..eacb4a8fab 100644
--- a/components/dash-table/package-lock.json
+++ b/components/dash-table/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "dash-table",
       "version": "5.0.0",
       "license": "MIT",
       "devDependencies": {
diff --git a/components/dash-table/src/dash-table/components/Table/props.ts b/components/dash-table/src/dash-table/components/Table/props.ts
index 71aef18941..93e48b6821 100644
--- a/components/dash-table/src/dash-table/components/Table/props.ts
+++ b/components/dash-table/src/dash-table/components/Table/props.ts
@@ -97,6 +97,26 @@ export interface ICellCoordinates {
     column_id: ColumnId;
 }
 
+export class Column implements IBaseColumn {
+    clearable?: boolean | boolean[] | 'first' | 'last' | undefined;
+    deletable?: boolean | boolean[] | 'first' | 'last' | undefined;
+    editable = false;
+    filter_options!: IFilterOptions;
+    hideable?: boolean | boolean[] | 'first' | 'last' | undefined;
+    renamable?: boolean | boolean[] | 'first' | 'last' | undefined;
+    selectable?: boolean | boolean[] | 'first' | 'last' | undefined;
+    sort_as_null: SortAsNull = [];
+    id!: string;
+    name: string | string[] = [];
+
+    constructor(initialValues: any) {
+        if (Object.keys(initialValues).includes('name'))
+            this.name = initialValues.name;
+        if (Object.keys(initialValues).includes('id'))
+            this.id = initialValues.id;
+    }
+}
+
 export type ColumnId = string;
 export type Columns = IColumn[];
 export type Data = Datum[];
diff --git a/components/dash-table/src/dash-table/dash/DataTable.js b/components/dash-table/src/dash-table/dash/DataTable.js
index 0132fb62bc..61cc68656e 100644
--- a/components/dash-table/src/dash-table/dash/DataTable.js
+++ b/components/dash-table/src/dash-table/dash/DataTable.js
@@ -110,15 +110,26 @@ export const defaultProps = {
 
 export const propTypes = {
     /**
-     * The row and column indices and IDs of the currently active cell.
-     * `row_id` is only returned if the data rows have an `id` key.
+     * The contents of the table.
+     * The keys of each item in data should match the column IDs.
+     * Each item can also have an 'id' key, whose value is its row ID. If there
+     * is a column with ID='id' this will display the row ID, otherwise it is
+     * just used to reference the row for selections, filtering, etc.
+     * Example:
+     * [
+     *      {'column-1': 4.5, 'column-2': 'montreal', 'column-3': 'canada'},
+     *      {'column-1': 8, 'column-2': 'boston', 'column-3': 'america'}
+     * ]
      */
-    active_cell: PropTypes.exact({
-        row: PropTypes.number,
-        column: PropTypes.number,
-        row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        column_id: PropTypes.string
-    }),
+    data: PropTypes.arrayOf(
+        PropTypes.objectOf(
+            PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number,
+                PropTypes.bool
+            ])
+        )
+    ),
 
     /**
      * Columns describes various aspects about each individual column.
@@ -427,6 +438,17 @@ export const propTypes = {
         })
     ),
 
+    /**
+     * The row and column indices and IDs of the currently active cell.
+     * `row_id` is only returned if the data rows have an `id` key.
+     */
+    active_cell: PropTypes.exact({
+        row: PropTypes.number,
+        column: PropTypes.number,
+        row_id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        column_id: PropTypes.string
+    }),
+
     /**
      * If true, headers are included when copying from the table to different
      * tabs and elsewhere. Note that headers are ignored when copying from the table onto itself and
@@ -510,20 +532,6 @@ export const propTypes = {
         })
     ),
 
-    /**
-     * The contents of the table.
-     * The keys of each item in data should match the column IDs.
-     * Each item can also have an 'id' key, whose value is its row ID. If there
-     * is a column with ID='id' this will display the row ID, otherwise it is
-     * just used to reference the row for selections, filtering, etc.
-     * Example:
-     * [
-     *      {'column-1': 4.5, 'column-2': 'montreal', 'column-3': 'canada'},
-     *      {'column-1': 8, 'column-2': 'boston', 'column-3': 'america'}
-     * ]
-     */
-    data: PropTypes.arrayOf(PropTypes.object),
-
     /**
      * The previous state of `data`. `data_previous`
      * has the same structure as `data` and it will be updated
diff --git a/components/dash-table/src/dash-table/dash/Sanitizer.ts b/components/dash-table/src/dash-table/dash/Sanitizer.ts
index c3d4e8f1a2..7198e4bced 100644
--- a/components/dash-table/src/dash-table/dash/Sanitizer.ts
+++ b/components/dash-table/src/dash-table/dash/Sanitizer.ts
@@ -2,7 +2,6 @@ import * as R from 'ramda';
 
 import {memoizeOne} from 'core/memoizer';
 import {
-    Columns,
     ColumnType,
     Fixed,
     IColumn,
@@ -18,11 +17,13 @@ import {
     FilterLogicalOperator,
     SelectedCells,
     FilterCase,
-    IFilterOptions
+    IFilterOptions,
+    Data
 } from 'dash-table/components/Table/props';
 import headerRows from 'dash-table/derived/header/headerRows';
 import resolveFlag from 'dash-table/derived/cell/resolveFlag';
 import dataLoading from 'dash-table/derived/table/data_loading';
+import {Column, Columns} from '../components/Table/props';
 
 const D3_DEFAULT_LOCALE: INumberLocale = {
     symbol: ['$', ''],
@@ -65,6 +66,11 @@ const getFixedRows = (
           (filter_action !== TableAction.None ? 1 : 0) +
           data2number(fixed.data);
 
+const populateColumnsFromData = (data: Data) =>
+    data.length > 0
+        ? Object.keys(data[0]).map(key => new Column({name: key, id: key}))
+        : [];
+
 const applyDefaultsToColumns = (
     defaultLocale: INumberLocale,
     defaultSort: SortAsNull,
@@ -112,6 +118,7 @@ const getVisibleColumns = (
 export default class Sanitizer {
     sanitize(props: PropsWithDefaults): SanitizedProps {
         const locale_format = this.applyDefaultToLocale(props.locale_format);
+        const data = props.data ?? [];
         const columns = props.columns
             ? this.applyDefaultsToColumns(
                   locale_format,
@@ -120,8 +127,7 @@ export default class Sanitizer {
                   props.editable,
                   props.filter_options
               )
-            : [];
-        const data = props.data ?? [];
+            : this.populateColumnsFrom(data);
         const visibleColumns = this.getVisibleColumns(
             columns,
             props.hidden_columns
@@ -171,6 +177,8 @@ export default class Sanitizer {
         });
     }
 
+    private readonly populateColumnsFrom = memoizeOne(populateColumnsFromData);
+
     private readonly applyDefaultToLocale = memoizeOne(applyDefaultToLocale);
 
     private readonly applyDefaultsToColumns = memoizeOne(
diff --git a/dash/_dash_renderer.py b/dash/_dash_renderer.py
index a5a155be6b..876a4ba5e8 100644
--- a/dash/_dash_renderer.py
+++ b/dash/_dash_renderer.py
@@ -1,4 +1,4 @@
-__version__ = "1.10.0"
+__version__ = "1.11.0"
 
 _js_dist_dependencies = [
     {
@@ -39,7 +39,7 @@
     {
         "relative_package_path": "dash-renderer/build/dash_renderer.min.js",
         "dev_package_path": "dash-renderer/build/dash_renderer.dev.js",
-        "external_url": "https://unpkg.com/dash-renderer@1.10.0"
+        "external_url": "https://unpkg.com/dash-renderer@1.11.0"
         "/build/dash_renderer.min.js",
         "namespace": "dash",
     },
diff --git a/dash/dash-renderer/package-lock.json b/dash/dash-renderer/package-lock.json
index 0c0a0ecf0a..9fa0b38679 100644
--- a/dash/dash-renderer/package-lock.json
+++ b/dash/dash-renderer/package-lock.json
@@ -1,11 +1,12 @@
 {
   "name": "dash-renderer",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.10.0",
+      "name": "dash-renderer",
+      "version": "1.11.0",
       "license": "MIT",
       "dependencies": {
         "@babel/polyfill": "^7.12.1",
diff --git a/dash/dash-renderer/package.json b/dash/dash-renderer/package.json
index 530f671cfa..b58361861f 100644
--- a/dash/dash-renderer/package.json
+++ b/dash/dash-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "render dash components in react",
   "main": "build/dash_renderer.min.js",
   "scripts": {
diff --git a/dash/dependencies.py b/dash/dependencies.py
index 1b2cc6f7f9..12cd4a59be 100644
--- a/dash/dependencies.py
+++ b/dash/dependencies.py
@@ -1,4 +1,5 @@
 import json
+from dash.development.base_component import Component
 
 from ._validate import validate_callback
 from ._grouping import flatten_grouping, make_grouping_by_index
@@ -27,7 +28,12 @@ def to_json(self):
 
 class DashDependency:  # pylint: disable=too-few-public-methods
     def __init__(self, component_id, component_property):
-        self.component_id = component_id
+
+        if isinstance(component_id, Component):
+            self.component_id = component_id.set_random_id()
+        else:
+            self.component_id = component_id
+
         self.component_property = component_property
 
     def __str__(self):
diff --git a/dash/development/base_component.py b/dash/development/base_component.py
index 7b63dccc5f..4cde39805f 100644
--- a/dash/development/base_component.py
+++ b/dash/development/base_component.py
@@ -1,11 +1,15 @@
 import abc
 import inspect
 import sys
+import uuid
+import random
 
 from .._utils import patch_collections_abc, stringify_id
 
 MutableSequence = patch_collections_abc("MutableSequence")
 
+rd = random.Random(0)
+
 
 # pylint: disable=no-init,too-few-public-methods
 class ComponentRegistry:
@@ -163,6 +167,12 @@ def __init__(self, **kwargs):
 
             setattr(self, k, v)
 
+    def set_random_id(self):
+        if not hasattr(self, "id"):
+            v = str(uuid.UUID(int=rd.randint(0, 2 ** 128)))
+            setattr(self, "id", v)
+        return getattr(self, "id")
+
     def to_plotly_json(self):
         # Add normal properties
         props = {
diff --git a/dash/development/component_generator.py b/dash/development/component_generator.py
index 3d8a8632a8..79b95315aa 100644
--- a/dash/development/component_generator.py
+++ b/dash/development/component_generator.py
@@ -25,6 +25,7 @@
     "UNDEFINED",
     "REQUIRED",
     "to_plotly_json",
+    "set_random_id",
     "available_properties",
     "available_wildcard_properties",
     "_.*",
diff --git a/tests/integration/devtools/test_props_check.py b/tests/integration/devtools/test_props_check.py
index 603909158e..23211ed3dd 100644
--- a/tests/integration/devtools/test_props_check.py
+++ b/tests/integration/devtools/test_props_check.py
@@ -15,12 +15,6 @@
         "component": dcc.Checklist,
         "props": {"options": [{"label": "hello"}], "value": ["test"]},
     },
-    "invalid-nested-prop": {
-        "fail": True,
-        "name": "invalid nested prop",
-        "component": dcc.Checklist,
-        "props": {"options": [{"label": "hello", "value": True}], "value": ["test"]},
-    },
     "invalid-arrayOf": {
         "fail": True,
         "name": "invalid arrayOf",
@@ -113,6 +107,12 @@
             "columns": [{"id": "id", "name": "name", "format": {"prefix": "asdf"}}]
         },
     },
+    "allow-nested-prop": {
+        "fail": False,
+        "name": "allow nested prop",
+        "component": dcc.Checklist,
+        "props": {"options": [{"label": "hello", "value": True}], "value": ["test"]},
+    },
     "allow-null": {
         "fail": False,
         "name": "nested null",
diff --git a/tests/unit/development/test_base_component.py b/tests/unit/development/test_base_component.py
index 7b1ed62f9a..4a3a8fd446 100644
--- a/tests/unit/development/test_base_component.py
+++ b/tests/unit/development/test_base_component.py
@@ -3,9 +3,10 @@
 import plotly
 import pytest
 
-from dash import __version__
+from dash import __version__, Dash
 from dash import html
 from dash.development.base_component import Component
+from dash import dcc, Input, Output
 
 Component._prop_names = ("id", "a", "children", "style")
 Component._type = "TestComponent"
@@ -473,3 +474,37 @@ def test_debc027_component_error_message():
         + "keyword argument: `asdf`\n"
         + "Allowed arguments: {}".format(", ".join(sorted(html.Div()._prop_names)))
     )
+
+
+def test_set_random_id():
+    app = Dash(__name__)
+
+    input1 = dcc.Input(value="Hello")
+    input2 = dcc.Input(value="Hello")
+    output1 = html.Div()
+    output2 = html.Div()
+    output3 = html.Div(id="output-3")
+
+    app.layout = html.Div([input1, input2, output1, output2, output3])
+
+    @app.callback(Output(output1, "children"), Input(input1, "value"))
+    def update(v):
+        return f"Input 1 {v}"
+
+    @app.callback(Output(output2, "children"), Input(input2, "value"))
+    def update(v):
+        return f"Input 2 {v}"
+
+    @app.callback(
+        Output("output-3", "children"), Input(input1, "value"), Input(input2, "value")
+    )
+    def update(v1, v2):
+        return f"Output 3 - Input 1: {v1}, Input 2: {v2}"
+
+    # Verify the auto-generated IDs are stable
+    assert output1.id == "e3e70682-c209-4cac-629f-6fbed82c07cd"
+    assert input1.id == "82e2e662-f728-b4fa-4248-5e3a0a5d2f34"
+    assert output2.id == "d4713d60-c8a7-0639-eb11-67b367a9c378"
+    assert input2.id == "23a7711a-8133-2876-37eb-dcd9e87a1613"
+    # we make sure that the if the id is set explicitly, then it is not replaced by random id
+    assert output3.id == "output-3"

From 1de8a13b9b97ecd93597d8c040b703ad0f9a58d0 Mon Sep 17 00:00:00 2001
From: workaholicpanda <802931+workaholicpanda@users.noreply.github.com>
Date: Mon, 20 Sep 2021 14:41:04 -0400
Subject: [PATCH 2/9] Update
 components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py

Co-authored-by: Chris Parmer <chris@plot.ly>
---
 .../sliders/test_sliders_shorthands.py           | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
index 79bad9df0e..5f1cfe8620 100644
--- a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
+++ b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
@@ -157,16 +157,30 @@ def test_slsh002_sliders_marks_si_unit_format(dash_dcc):
     for n in range(-20, 20):
         min = 0
         max = pow(10, n)
+        
         LAYOUT.extend(
             [
                 html.Div(
                     [
-                        html.Div(
+                       
+                        html.B(
                             f"min={min}, max={max}(=10^{n})",
                             style={"marginBottom": 15, "marginTop": 25},
                         ),
+                        (html.Div(
+                            '(Known issue: Slider does not seem to work for precision below 10^(-6))'
+                        ) if n <= -6 else None),
+                        html.Div('value is undefined'),
                         dcc.Slider(min, max),
                         dcc.RangeSlider(min, max),
+                        
+                        html.Div(f'value=0.4 * 10^{n}'),
+                        dcc.Slider(min, max, value=0.4*max),
+                        dcc.RangeSlider(min, max, value[0.2 * max, 0.4 * max]),
+
+                        html.Div(f'value=0.5 * 10^{n}'),
+                        dcc.Slider(min, max, value=0.4*max),
+                        dcc.RangeSlider(min, max, value[0.2 * max, 0.5 * max]),
                     ]
                 )
             ]

From abfdaaa4e3a49442a8b44cb1b1d03cc51f004446 Mon Sep 17 00:00:00 2001
From: workaholicpanda <802931+workaholicpanda@users.noreply.github.com>
Date: Mon, 20 Sep 2021 14:44:48 -0400
Subject: [PATCH 3/9] Update tests/unit/development/test_base_component.py

Co-authored-by: Chris Parmer <chris@plot.ly>
---
 tests/unit/development/test_base_component.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/unit/development/test_base_component.py b/tests/unit/development/test_base_component.py
index 4a3a8fd446..b5ef62d229 100644
--- a/tests/unit/development/test_base_component.py
+++ b/tests/unit/development/test_base_component.py
@@ -479,8 +479,8 @@ def test_debc027_component_error_message():
 def test_set_random_id():
     app = Dash(__name__)
 
-    input1 = dcc.Input(value="Hello")
-    input2 = dcc.Input(value="Hello")
+    input1 = dcc.Input(value="Hello Input 1")
+    input2 = dcc.Input(value="Hello Input 2")
     output1 = html.Div()
     output2 = html.Div()
     output3 = html.Div(id="output-3")

From a363691d71a85f08286bcfb43820340bc6418d1d Mon Sep 17 00:00:00 2001
From: workaholicpanda <>
Date: Mon, 20 Sep 2021 23:23:46 +0300
Subject: [PATCH 4/9] fix: changelog updated, disabled SI formatting zero marks
 for Slider, RangeSlider, lint issues fixed

---
 CHANGELOG.md                                  | 142 ++++++++++++++
 .../src/utils/computeSliderMarkers.js         |   5 +-
 .../sliders/test_sliders_shorthands.py        |  25 +--
 tests/unit/development/metadata_test.py       | 180 ++++++++++++------
 4 files changed, 283 insertions(+), 69 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 967700d49a..7f0a78b5f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,148 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [Unreleased]
+
+- [#1763](https://github.com/plotly/dash/pull/1763):
+    ## Dash and Dash Renderer
+
+    - `Input`, `State`, and `Output` now accept components instead of ID strings and Dash `callback` will auto-generate the component's ID under-the-hood if not supplied. This allows usage like:
+
+    ```python
+    my_input = dcc.Input()
+    my_output = html.Div()
+    app.layout = html.Div([my_input, my_output])
+
+    @dash.callback(Output(my_output, 'children'), Input(my_input, 'value'))
+    def update(value):
+      return f'You have entered {value}'
+    ```
+
+    Or, if using Python >=3.8 you can use the `:=` walrus operator:
+    ```python
+    app.layout = html.Div([
+      my_input := dcc.Input(),
+      my_output := html.Div()
+    ])
+
+    @dash.callback(Output(my_output, 'children'), Input(my_input, 'value'))
+    def update(value):
+      return f'You have entered {value}'
+      
+    ```
+    ## Dash Core Components
+
+    ### Rearranged Keyword Arguments & Flexible Types
+    **`Dropdown`, `RadioItem`, and `Checklist`**
+    - Rearranged Keyword Arguments - `options` & `value` are now the first two keywords which means they can be supplied as positional arguments without the keyword. Supplying the keywords (`options=` and `value=`) is still supported.
+    - Flexible Types - `options` can be supplied in two new forms:
+      1. An array of `string|number|bool` where `label` and `value` are equal to the items in the list.
+      2. A dictionary where the keys and values set as `value` and `label` respectively.
+
+    Before:
+
+    ```python
+    dcc.Dropdown(
+      options=[
+        {'label': 'New York', 'value': 'New York'},
+        {'label': 'Montreal', 'value': 'Montreal'},
+      ],
+      value='New York'
+    )
+      ```
+    or
+
+    ```python
+    dcc.Dropdown(
+      options=[
+        {'label': 'New York', 'value': 'NYC'},
+        {'label': 'Montreal', 'value': 'MTL'},
+      ],
+      value='New York'
+    )
+    ```
+
+    After:
+
+    ```python
+    dcc.Dropdown(['New York', 'Montreal'], 'New York')
+    ```
+    Or
+
+    ```python
+    dcc.Dropdown({'NYC': 'New York', 'MTL': 'Montreal'}, 'New York')
+    ```
+
+    **`RangeSlider` & `Slider`**
+    - Rearranged Keyword Arugments - `min`, `max`, and `step` are now the first three keyword arguments which means they can be supplied as positional arguments without the keyword.
+    - Flexible Types
+      - `step` will be calculated implicitly if not given.
+      - `marks` will be auto generated if not given. It will use `min` and `max` and will respect `step` if supplied. Auto generated marks labels are SI unit formatted. Around 5 human-readable marks will be created.
+      - To remove the Slider's marks, set `marks=None`.
+
+    Before:
+
+    ```python
+    dcc.Slider(marks={1: 2, 2: 2, 3: 3})
+    ```
+
+    After:
+    ```python
+    dcc.Slider(min=1, max=3, step=1)
+    ```
+    Or equivalently:
+    ```python
+    dcc.Slider(1, 3, 1)
+    ```
+    Step can also be omitted and the `Slider` will attempt to create a nice, human readable  step with SI units and around 5 marks:
+    ```python
+    dcc.Slider(0, 100)
+    ```
+
+    The SI units used in `marks` are:
+
+    * `z` - zepto, 10⁻²¹
+    * `a` - atto, 10⁻¹⁸
+    * `f` - femto, 10⁻¹⁵
+    * `p` - pico, 10⁻¹²
+    * `n` - nano, 10⁻⁹
+    * `µ` - micro, 10⁻⁶
+    * `m` - milli, 10⁻³
+    * `​` (none) - 10⁰
+    * `k` - kilo, 10³
+    * `M` - mega, 10⁶
+    * `G` - giga, 10⁹
+    * `T` - tera, 10¹²
+    * `P` - peta, 10¹⁵
+    * `E` - exa, 10¹⁸
+    * `Z` - zetta, 10²¹
+
+    **`DataTable`**
+
+    - Rearranged Keyword Arguments - `data` and `columns` the first twokeyword arguments which means they can be supplied as positional arguments without the keyword.
+    - Inferred Properties - If `columns` isn't supplied then it is extracted from the the first row in `data`
+
+    Before:
+
+    ```python
+    dash_table.DataTable(data=df.to_dict('records'), columns=[{'name': i, 'id': i} for i in df.columns])
+    ```
+    After:
+
+    ```python
+    dash_table.DataTable(data=df.to_dict('records'))
+    ```
+
+    ### New Component Properties
+
+    **`Checklist` & `RadioItems`**
+
+    - A new property `inline` appends `display: inline-block` to `labelStyle`.
+
+    ```python
+    dcc.Checklist(inline=True)
+    ```
+  
 ## [2.0.0] - 2021-08-03
 
 ## Dash and Dash Renderer
diff --git a/components/dash-core-components/src/utils/computeSliderMarkers.js b/components/dash-core-components/src/utils/computeSliderMarkers.js
index 34fca54560..006bb76810 100644
--- a/components/dash-core-components/src/utils/computeSliderMarkers.js
+++ b/components/dash-core-components/src/utils/computeSliderMarkers.js
@@ -90,7 +90,10 @@ export const applyD3Format = (mark, min, max) => {
     const k_ten_factor = 3;
 
     const ten_factor = Math.log10(Math.abs(mark));
-    if (ten_factor > mu_ten_factor && ten_factor < k_ten_factor) {
+    if (
+        mark === 0 ||
+        (ten_factor > mu_ten_factor && ten_factor < k_ten_factor)
+    ) {
         return String(mark);
     }
     const max_min_mean = (Math.abs(max) + Math.abs(min)) / 2;
diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
index 5f1cfe8620..56233d41f2 100644
--- a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
+++ b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
@@ -157,29 +157,30 @@ def test_slsh002_sliders_marks_si_unit_format(dash_dcc):
     for n in range(-20, 20):
         min = 0
         max = pow(10, n)
-        
+
         LAYOUT.extend(
             [
                 html.Div(
                     [
-                       
                         html.B(
                             f"min={min}, max={max}(=10^{n})",
                             style={"marginBottom": 15, "marginTop": 25},
                         ),
-                        (html.Div(
-                            '(Known issue: Slider does not seem to work for precision below 10^(-6))'
-                        ) if n <= -6 else None),
-                        html.Div('value is undefined'),
+                        (
+                            html.Div(
+                                "(Known issue: Slider does not seem to work for precision below 10^(-6))"
+                            )
+                            if n <= -6
+                            else None
+                        ),
+                        html.Div("value is undefined"),
                         dcc.Slider(min, max),
                         dcc.RangeSlider(min, max),
-                        
-                        html.Div(f'value=0.4 * 10^{n}'),
-                        dcc.Slider(min, max, value=0.4*max),
+                        html.Div(f"value=0.4 * 10^{n}"),
+                        dcc.Slider(min, max, value=0.4 * max),
                         dcc.RangeSlider(min, max, value[0.2 * max, 0.4 * max]),
-
-                        html.Div(f'value=0.5 * 10^{n}'),
-                        dcc.Slider(min, max, value=0.4*max),
+                        html.Div(f"value=0.5 * 10^{n}"),
+                        dcc.Slider(min, max, value=0.4 * max),
                         dcc.RangeSlider(min, max, value[0.2 * max, 0.5 * max]),
                     ]
                 )
diff --git a/tests/unit/development/metadata_test.py b/tests/unit/development/metadata_test.py
index c7440d2090..62b4ff285f 100644
--- a/tests/unit/development/metadata_test.py
+++ b/tests/unit/development/metadata_test.py
@@ -5,101 +5,169 @@
 
 class Table(Component):
     """A Table component.
-This is a description of the component.
-It's multiple lines long.
+    This is a description of the component.
+    It's multiple lines long.
 
-Keyword arguments:
+    Keyword arguments:
 
-- children (a list of or a singular dash component, string or number; optional)
+    - children (a list of or a singular dash component, string or number; optional)
 
-- id (string; optional)
+    - id (string; optional)
 
-- aria-* (string; optional)
+    - aria-* (string; optional)
 
-- customArrayProp (list; optional)
+    - customArrayProp (list; optional)
 
-- customProp (optional)
+    - customProp (optional)
 
-- data-* (string; optional)
+    - data-* (string; optional)
 
-- in (string; optional)
+    - in (string; optional)
 
-- optionalAny (boolean | number | string | dict | list; optional)
+    - optionalAny (boolean | number | string | dict | list; optional)
 
-- optionalArray (list; optional):
-    Description of optionalArray.
+    - optionalArray (list; optional):
+        Description of optionalArray.
 
-- optionalArrayOf (list of numbers; optional)
+    - optionalArrayOf (list of numbers; optional)
 
-- optionalBool (boolean; optional)
+    - optionalBool (boolean; optional)
 
-- optionalElement (dash component; optional)
+    - optionalElement (dash component; optional)
 
-- optionalEnum (a value equal to: 'News', 'Photos'; optional)
+    - optionalEnum (a value equal to: 'News', 'Photos'; optional)
 
-- optionalNode (a list of or a singular dash component, string or number; optional)
+    - optionalNode (a list of or a singular dash component, string or number; optional)
 
-- optionalNumber (number; default 42)
+    - optionalNumber (number; default 42)
 
-- optionalObject (dict; optional)
+    - optionalObject (dict; optional)
 
-- optionalObjectOf (dict with strings as keys and values of type number; optional)
+    - optionalObjectOf (dict with strings as keys and values of type number; optional)
 
-- optionalObjectWithExactAndNestedDescription (dict; optional)
+    - optionalObjectWithExactAndNestedDescription (dict; optional)
 
-    `optionalObjectWithExactAndNestedDescription` is a dict with keys:
+        `optionalObjectWithExactAndNestedDescription` is a dict with keys:
 
-    - color (string; optional)
+        - color (string; optional)
 
-    - figure (dict; optional):
-        Figure is a plotly graph object.
+        - figure (dict; optional):
+            Figure is a plotly graph object.
 
-        `figure` is a dict with keys:
+            `figure` is a dict with keys:
 
-        - data (list of dicts; optional):
-            data is a collection of traces.
+            - data (list of dicts; optional):
+                data is a collection of traces.
 
-        - layout (dict; optional):
-            layout describes the rest of the figure.
+            - layout (dict; optional):
+                layout describes the rest of the figure.
 
-    - fontSize (number; optional)
+        - fontSize (number; optional)
 
-- optionalObjectWithShapeAndNestedDescription (dict; optional)
+    - optionalObjectWithShapeAndNestedDescription (dict; optional)
 
-    `optionalObjectWithShapeAndNestedDescription` is a dict with keys:
+        `optionalObjectWithShapeAndNestedDescription` is a dict with keys:
 
-    - color (string; optional)
+        - color (string; optional)
 
-    - figure (dict; optional):
-        Figure is a plotly graph object.
+        - figure (dict; optional):
+            Figure is a plotly graph object.
 
-        `figure` is a dict with keys:
+            `figure` is a dict with keys:
 
-        - data (list of dicts; optional):
-            data is a collection of traces.
+            - data (list of dicts; optional):
+                data is a collection of traces.
 
-        - layout (dict; optional):
-            layout describes the rest of the figure.
+            - layout (dict; optional):
+                layout describes the rest of the figure.
 
-    - fontSize (number; optional)
+        - fontSize (number; optional)
 
-- optionalString (string; default 'hello world')
+    - optionalString (string; default 'hello world')
+
+    - optionalUnion (string | number; optional)"""
 
-- optionalUnion (string | number; optional)"""
     @_explicitize_args
-    def __init__(self, children=None, optionalArray=Component.UNDEFINED, optionalBool=Component.UNDEFINED, optionalFunc=Component.UNDEFINED, optionalNumber=Component.UNDEFINED, optionalObject=Component.UNDEFINED, optionalString=Component.UNDEFINED, optionalSymbol=Component.UNDEFINED, optionalNode=Component.UNDEFINED, optionalElement=Component.UNDEFINED, optionalMessage=Component.UNDEFINED, optionalEnum=Component.UNDEFINED, optionalUnion=Component.UNDEFINED, optionalArrayOf=Component.UNDEFINED, optionalObjectOf=Component.UNDEFINED, optionalObjectWithExactAndNestedDescription=Component.UNDEFINED, optionalObjectWithShapeAndNestedDescription=Component.UNDEFINED, optionalAny=Component.UNDEFINED, customProp=Component.UNDEFINED, customArrayProp=Component.UNDEFINED, id=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['children', 'id', 'aria-*', 'customArrayProp', 'customProp', 'data-*', 'in', 'optionalAny', 'optionalArray', 'optionalArrayOf', 'optionalBool', 'optionalElement', 'optionalEnum', 'optionalNode', 'optionalNumber', 'optionalObject', 'optionalObjectOf', 'optionalObjectWithExactAndNestedDescription', 'optionalObjectWithShapeAndNestedDescription', 'optionalString', 'optionalUnion']
-        self._type = 'Table'
-        self._namespace = 'TableComponents'
-        self._valid_wildcard_attributes =            ['data-', 'aria-']
-        self.available_properties = ['children', 'id', 'aria-*', 'customArrayProp', 'customProp', 'data-*', 'in', 'optionalAny', 'optionalArray', 'optionalArrayOf', 'optionalBool', 'optionalElement', 'optionalEnum', 'optionalNode', 'optionalNumber', 'optionalObject', 'optionalObjectOf', 'optionalObjectWithExactAndNestedDescription', 'optionalObjectWithShapeAndNestedDescription', 'optionalString', 'optionalUnion']
-        self.available_wildcard_properties =            ['data-', 'aria-']
-        _explicit_args = kwargs.pop('_explicit_args')
+    def __init__(
+        self,
+        children=None,
+        optionalArray=Component.UNDEFINED,
+        optionalBool=Component.UNDEFINED,
+        optionalFunc=Component.UNDEFINED,
+        optionalNumber=Component.UNDEFINED,
+        optionalObject=Component.UNDEFINED,
+        optionalString=Component.UNDEFINED,
+        optionalSymbol=Component.UNDEFINED,
+        optionalNode=Component.UNDEFINED,
+        optionalElement=Component.UNDEFINED,
+        optionalMessage=Component.UNDEFINED,
+        optionalEnum=Component.UNDEFINED,
+        optionalUnion=Component.UNDEFINED,
+        optionalArrayOf=Component.UNDEFINED,
+        optionalObjectOf=Component.UNDEFINED,
+        optionalObjectWithExactAndNestedDescription=Component.UNDEFINED,
+        optionalObjectWithShapeAndNestedDescription=Component.UNDEFINED,
+        optionalAny=Component.UNDEFINED,
+        customProp=Component.UNDEFINED,
+        customArrayProp=Component.UNDEFINED,
+        id=Component.UNDEFINED,
+        **kwargs
+    ):
+        self._prop_names = [
+            "children",
+            "id",
+            "aria-*",
+            "customArrayProp",
+            "customProp",
+            "data-*",
+            "in",
+            "optionalAny",
+            "optionalArray",
+            "optionalArrayOf",
+            "optionalBool",
+            "optionalElement",
+            "optionalEnum",
+            "optionalNode",
+            "optionalNumber",
+            "optionalObject",
+            "optionalObjectOf",
+            "optionalObjectWithExactAndNestedDescription",
+            "optionalObjectWithShapeAndNestedDescription",
+            "optionalString",
+            "optionalUnion",
+        ]
+        self._type = "Table"
+        self._namespace = "TableComponents"
+        self._valid_wildcard_attributes = ["data-", "aria-"]
+        self.available_properties = [
+            "children",
+            "id",
+            "aria-*",
+            "customArrayProp",
+            "customProp",
+            "data-*",
+            "in",
+            "optionalAny",
+            "optionalArray",
+            "optionalArrayOf",
+            "optionalBool",
+            "optionalElement",
+            "optionalEnum",
+            "optionalNode",
+            "optionalNumber",
+            "optionalObject",
+            "optionalObjectOf",
+            "optionalObjectWithExactAndNestedDescription",
+            "optionalObjectWithShapeAndNestedDescription",
+            "optionalString",
+            "optionalUnion",
+        ]
+        self.available_wildcard_properties = ["data-", "aria-"]
+        _explicit_args = kwargs.pop("_explicit_args")
         _locals = locals()
         _locals.update(kwargs)  # For wildcard attrs
-        args = {k: _locals[k] for k in _explicit_args if k != 'children'}
+        args = {k: _locals[k] for k in _explicit_args if k != "children"}
         for k in []:
             if k not in args:
-                raise TypeError(
-                    'Required argument `' + k + '` was not specified.')
+                raise TypeError("Required argument `" + k + "` was not specified.")
         super(Table, self).__init__(children=children, **args)

From 97dca5a5f622bd609a10f021e7ef56a8608aa907 Mon Sep 17 00:00:00 2001
From: workaholicpanda <>
Date: Mon, 20 Sep 2021 16:50:16 -0400
Subject: [PATCH 5/9] Revert "fix: changelog updated, disabled SI formatting
 zero marks for Slider, RangeSlider, lint issues fixed"

This reverts commit a363691d71a85f08286bcfb43820340bc6418d1d.
---
 CHANGELOG.md                                  | 142 --------------
 .../src/utils/computeSliderMarkers.js         |   5 +-
 .../sliders/test_sliders_shorthands.py        |  25 ++-
 tests/unit/development/metadata_test.py       | 180 ++++++------------
 4 files changed, 69 insertions(+), 283 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f0a78b5f8..967700d49a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,148 +2,6 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
-## [Unreleased]
-
-- [#1763](https://github.com/plotly/dash/pull/1763):
-    ## Dash and Dash Renderer
-
-    - `Input`, `State`, and `Output` now accept components instead of ID strings and Dash `callback` will auto-generate the component's ID under-the-hood if not supplied. This allows usage like:
-
-    ```python
-    my_input = dcc.Input()
-    my_output = html.Div()
-    app.layout = html.Div([my_input, my_output])
-
-    @dash.callback(Output(my_output, 'children'), Input(my_input, 'value'))
-    def update(value):
-      return f'You have entered {value}'
-    ```
-
-    Or, if using Python >=3.8 you can use the `:=` walrus operator:
-    ```python
-    app.layout = html.Div([
-      my_input := dcc.Input(),
-      my_output := html.Div()
-    ])
-
-    @dash.callback(Output(my_output, 'children'), Input(my_input, 'value'))
-    def update(value):
-      return f'You have entered {value}'
-      
-    ```
-    ## Dash Core Components
-
-    ### Rearranged Keyword Arguments & Flexible Types
-    **`Dropdown`, `RadioItem`, and `Checklist`**
-    - Rearranged Keyword Arguments - `options` & `value` are now the first two keywords which means they can be supplied as positional arguments without the keyword. Supplying the keywords (`options=` and `value=`) is still supported.
-    - Flexible Types - `options` can be supplied in two new forms:
-      1. An array of `string|number|bool` where `label` and `value` are equal to the items in the list.
-      2. A dictionary where the keys and values set as `value` and `label` respectively.
-
-    Before:
-
-    ```python
-    dcc.Dropdown(
-      options=[
-        {'label': 'New York', 'value': 'New York'},
-        {'label': 'Montreal', 'value': 'Montreal'},
-      ],
-      value='New York'
-    )
-      ```
-    or
-
-    ```python
-    dcc.Dropdown(
-      options=[
-        {'label': 'New York', 'value': 'NYC'},
-        {'label': 'Montreal', 'value': 'MTL'},
-      ],
-      value='New York'
-    )
-    ```
-
-    After:
-
-    ```python
-    dcc.Dropdown(['New York', 'Montreal'], 'New York')
-    ```
-    Or
-
-    ```python
-    dcc.Dropdown({'NYC': 'New York', 'MTL': 'Montreal'}, 'New York')
-    ```
-
-    **`RangeSlider` & `Slider`**
-    - Rearranged Keyword Arugments - `min`, `max`, and `step` are now the first three keyword arguments which means they can be supplied as positional arguments without the keyword.
-    - Flexible Types
-      - `step` will be calculated implicitly if not given.
-      - `marks` will be auto generated if not given. It will use `min` and `max` and will respect `step` if supplied. Auto generated marks labels are SI unit formatted. Around 5 human-readable marks will be created.
-      - To remove the Slider's marks, set `marks=None`.
-
-    Before:
-
-    ```python
-    dcc.Slider(marks={1: 2, 2: 2, 3: 3})
-    ```
-
-    After:
-    ```python
-    dcc.Slider(min=1, max=3, step=1)
-    ```
-    Or equivalently:
-    ```python
-    dcc.Slider(1, 3, 1)
-    ```
-    Step can also be omitted and the `Slider` will attempt to create a nice, human readable  step with SI units and around 5 marks:
-    ```python
-    dcc.Slider(0, 100)
-    ```
-
-    The SI units used in `marks` are:
-
-    * `z` - zepto, 10⁻²¹
-    * `a` - atto, 10⁻¹⁸
-    * `f` - femto, 10⁻¹⁵
-    * `p` - pico, 10⁻¹²
-    * `n` - nano, 10⁻⁹
-    * `µ` - micro, 10⁻⁶
-    * `m` - milli, 10⁻³
-    * `​` (none) - 10⁰
-    * `k` - kilo, 10³
-    * `M` - mega, 10⁶
-    * `G` - giga, 10⁹
-    * `T` - tera, 10¹²
-    * `P` - peta, 10¹⁵
-    * `E` - exa, 10¹⁸
-    * `Z` - zetta, 10²¹
-
-    **`DataTable`**
-
-    - Rearranged Keyword Arguments - `data` and `columns` the first twokeyword arguments which means they can be supplied as positional arguments without the keyword.
-    - Inferred Properties - If `columns` isn't supplied then it is extracted from the the first row in `data`
-
-    Before:
-
-    ```python
-    dash_table.DataTable(data=df.to_dict('records'), columns=[{'name': i, 'id': i} for i in df.columns])
-    ```
-    After:
-
-    ```python
-    dash_table.DataTable(data=df.to_dict('records'))
-    ```
-
-    ### New Component Properties
-
-    **`Checklist` & `RadioItems`**
-
-    - A new property `inline` appends `display: inline-block` to `labelStyle`.
-
-    ```python
-    dcc.Checklist(inline=True)
-    ```
-  
 ## [2.0.0] - 2021-08-03
 
 ## Dash and Dash Renderer
diff --git a/components/dash-core-components/src/utils/computeSliderMarkers.js b/components/dash-core-components/src/utils/computeSliderMarkers.js
index 006bb76810..34fca54560 100644
--- a/components/dash-core-components/src/utils/computeSliderMarkers.js
+++ b/components/dash-core-components/src/utils/computeSliderMarkers.js
@@ -90,10 +90,7 @@ export const applyD3Format = (mark, min, max) => {
     const k_ten_factor = 3;
 
     const ten_factor = Math.log10(Math.abs(mark));
-    if (
-        mark === 0 ||
-        (ten_factor > mu_ten_factor && ten_factor < k_ten_factor)
-    ) {
+    if (ten_factor > mu_ten_factor && ten_factor < k_ten_factor) {
         return String(mark);
     }
     const max_min_mean = (Math.abs(max) + Math.abs(min)) / 2;
diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
index 56233d41f2..5f1cfe8620 100644
--- a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
+++ b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
@@ -157,30 +157,29 @@ def test_slsh002_sliders_marks_si_unit_format(dash_dcc):
     for n in range(-20, 20):
         min = 0
         max = pow(10, n)
-
+        
         LAYOUT.extend(
             [
                 html.Div(
                     [
+                       
                         html.B(
                             f"min={min}, max={max}(=10^{n})",
                             style={"marginBottom": 15, "marginTop": 25},
                         ),
-                        (
-                            html.Div(
-                                "(Known issue: Slider does not seem to work for precision below 10^(-6))"
-                            )
-                            if n <= -6
-                            else None
-                        ),
-                        html.Div("value is undefined"),
+                        (html.Div(
+                            '(Known issue: Slider does not seem to work for precision below 10^(-6))'
+                        ) if n <= -6 else None),
+                        html.Div('value is undefined'),
                         dcc.Slider(min, max),
                         dcc.RangeSlider(min, max),
-                        html.Div(f"value=0.4 * 10^{n}"),
-                        dcc.Slider(min, max, value=0.4 * max),
+                        
+                        html.Div(f'value=0.4 * 10^{n}'),
+                        dcc.Slider(min, max, value=0.4*max),
                         dcc.RangeSlider(min, max, value[0.2 * max, 0.4 * max]),
-                        html.Div(f"value=0.5 * 10^{n}"),
-                        dcc.Slider(min, max, value=0.4 * max),
+
+                        html.Div(f'value=0.5 * 10^{n}'),
+                        dcc.Slider(min, max, value=0.4*max),
                         dcc.RangeSlider(min, max, value[0.2 * max, 0.5 * max]),
                     ]
                 )
diff --git a/tests/unit/development/metadata_test.py b/tests/unit/development/metadata_test.py
index 62b4ff285f..c7440d2090 100644
--- a/tests/unit/development/metadata_test.py
+++ b/tests/unit/development/metadata_test.py
@@ -5,169 +5,101 @@
 
 class Table(Component):
     """A Table component.
-    This is a description of the component.
-    It's multiple lines long.
+This is a description of the component.
+It's multiple lines long.
 
-    Keyword arguments:
+Keyword arguments:
 
-    - children (a list of or a singular dash component, string or number; optional)
+- children (a list of or a singular dash component, string or number; optional)
 
-    - id (string; optional)
+- id (string; optional)
 
-    - aria-* (string; optional)
+- aria-* (string; optional)
 
-    - customArrayProp (list; optional)
+- customArrayProp (list; optional)
 
-    - customProp (optional)
+- customProp (optional)
 
-    - data-* (string; optional)
+- data-* (string; optional)
 
-    - in (string; optional)
+- in (string; optional)
 
-    - optionalAny (boolean | number | string | dict | list; optional)
+- optionalAny (boolean | number | string | dict | list; optional)
 
-    - optionalArray (list; optional):
-        Description of optionalArray.
+- optionalArray (list; optional):
+    Description of optionalArray.
 
-    - optionalArrayOf (list of numbers; optional)
+- optionalArrayOf (list of numbers; optional)
 
-    - optionalBool (boolean; optional)
+- optionalBool (boolean; optional)
 
-    - optionalElement (dash component; optional)
+- optionalElement (dash component; optional)
 
-    - optionalEnum (a value equal to: 'News', 'Photos'; optional)
+- optionalEnum (a value equal to: 'News', 'Photos'; optional)
 
-    - optionalNode (a list of or a singular dash component, string or number; optional)
+- optionalNode (a list of or a singular dash component, string or number; optional)
 
-    - optionalNumber (number; default 42)
+- optionalNumber (number; default 42)
 
-    - optionalObject (dict; optional)
+- optionalObject (dict; optional)
 
-    - optionalObjectOf (dict with strings as keys and values of type number; optional)
+- optionalObjectOf (dict with strings as keys and values of type number; optional)
 
-    - optionalObjectWithExactAndNestedDescription (dict; optional)
+- optionalObjectWithExactAndNestedDescription (dict; optional)
 
-        `optionalObjectWithExactAndNestedDescription` is a dict with keys:
+    `optionalObjectWithExactAndNestedDescription` is a dict with keys:
 
-        - color (string; optional)
+    - color (string; optional)
 
-        - figure (dict; optional):
-            Figure is a plotly graph object.
+    - figure (dict; optional):
+        Figure is a plotly graph object.
 
-            `figure` is a dict with keys:
+        `figure` is a dict with keys:
 
-            - data (list of dicts; optional):
-                data is a collection of traces.
+        - data (list of dicts; optional):
+            data is a collection of traces.
 
-            - layout (dict; optional):
-                layout describes the rest of the figure.
+        - layout (dict; optional):
+            layout describes the rest of the figure.
 
-        - fontSize (number; optional)
+    - fontSize (number; optional)
 
-    - optionalObjectWithShapeAndNestedDescription (dict; optional)
+- optionalObjectWithShapeAndNestedDescription (dict; optional)
 
-        `optionalObjectWithShapeAndNestedDescription` is a dict with keys:
+    `optionalObjectWithShapeAndNestedDescription` is a dict with keys:
 
-        - color (string; optional)
+    - color (string; optional)
 
-        - figure (dict; optional):
-            Figure is a plotly graph object.
+    - figure (dict; optional):
+        Figure is a plotly graph object.
 
-            `figure` is a dict with keys:
+        `figure` is a dict with keys:
 
-            - data (list of dicts; optional):
-                data is a collection of traces.
+        - data (list of dicts; optional):
+            data is a collection of traces.
 
-            - layout (dict; optional):
-                layout describes the rest of the figure.
+        - layout (dict; optional):
+            layout describes the rest of the figure.
 
-        - fontSize (number; optional)
+    - fontSize (number; optional)
 
-    - optionalString (string; default 'hello world')
-
-    - optionalUnion (string | number; optional)"""
+- optionalString (string; default 'hello world')
 
+- optionalUnion (string | number; optional)"""
     @_explicitize_args
-    def __init__(
-        self,
-        children=None,
-        optionalArray=Component.UNDEFINED,
-        optionalBool=Component.UNDEFINED,
-        optionalFunc=Component.UNDEFINED,
-        optionalNumber=Component.UNDEFINED,
-        optionalObject=Component.UNDEFINED,
-        optionalString=Component.UNDEFINED,
-        optionalSymbol=Component.UNDEFINED,
-        optionalNode=Component.UNDEFINED,
-        optionalElement=Component.UNDEFINED,
-        optionalMessage=Component.UNDEFINED,
-        optionalEnum=Component.UNDEFINED,
-        optionalUnion=Component.UNDEFINED,
-        optionalArrayOf=Component.UNDEFINED,
-        optionalObjectOf=Component.UNDEFINED,
-        optionalObjectWithExactAndNestedDescription=Component.UNDEFINED,
-        optionalObjectWithShapeAndNestedDescription=Component.UNDEFINED,
-        optionalAny=Component.UNDEFINED,
-        customProp=Component.UNDEFINED,
-        customArrayProp=Component.UNDEFINED,
-        id=Component.UNDEFINED,
-        **kwargs
-    ):
-        self._prop_names = [
-            "children",
-            "id",
-            "aria-*",
-            "customArrayProp",
-            "customProp",
-            "data-*",
-            "in",
-            "optionalAny",
-            "optionalArray",
-            "optionalArrayOf",
-            "optionalBool",
-            "optionalElement",
-            "optionalEnum",
-            "optionalNode",
-            "optionalNumber",
-            "optionalObject",
-            "optionalObjectOf",
-            "optionalObjectWithExactAndNestedDescription",
-            "optionalObjectWithShapeAndNestedDescription",
-            "optionalString",
-            "optionalUnion",
-        ]
-        self._type = "Table"
-        self._namespace = "TableComponents"
-        self._valid_wildcard_attributes = ["data-", "aria-"]
-        self.available_properties = [
-            "children",
-            "id",
-            "aria-*",
-            "customArrayProp",
-            "customProp",
-            "data-*",
-            "in",
-            "optionalAny",
-            "optionalArray",
-            "optionalArrayOf",
-            "optionalBool",
-            "optionalElement",
-            "optionalEnum",
-            "optionalNode",
-            "optionalNumber",
-            "optionalObject",
-            "optionalObjectOf",
-            "optionalObjectWithExactAndNestedDescription",
-            "optionalObjectWithShapeAndNestedDescription",
-            "optionalString",
-            "optionalUnion",
-        ]
-        self.available_wildcard_properties = ["data-", "aria-"]
-        _explicit_args = kwargs.pop("_explicit_args")
+    def __init__(self, children=None, optionalArray=Component.UNDEFINED, optionalBool=Component.UNDEFINED, optionalFunc=Component.UNDEFINED, optionalNumber=Component.UNDEFINED, optionalObject=Component.UNDEFINED, optionalString=Component.UNDEFINED, optionalSymbol=Component.UNDEFINED, optionalNode=Component.UNDEFINED, optionalElement=Component.UNDEFINED, optionalMessage=Component.UNDEFINED, optionalEnum=Component.UNDEFINED, optionalUnion=Component.UNDEFINED, optionalArrayOf=Component.UNDEFINED, optionalObjectOf=Component.UNDEFINED, optionalObjectWithExactAndNestedDescription=Component.UNDEFINED, optionalObjectWithShapeAndNestedDescription=Component.UNDEFINED, optionalAny=Component.UNDEFINED, customProp=Component.UNDEFINED, customArrayProp=Component.UNDEFINED, id=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['children', 'id', 'aria-*', 'customArrayProp', 'customProp', 'data-*', 'in', 'optionalAny', 'optionalArray', 'optionalArrayOf', 'optionalBool', 'optionalElement', 'optionalEnum', 'optionalNode', 'optionalNumber', 'optionalObject', 'optionalObjectOf', 'optionalObjectWithExactAndNestedDescription', 'optionalObjectWithShapeAndNestedDescription', 'optionalString', 'optionalUnion']
+        self._type = 'Table'
+        self._namespace = 'TableComponents'
+        self._valid_wildcard_attributes =            ['data-', 'aria-']
+        self.available_properties = ['children', 'id', 'aria-*', 'customArrayProp', 'customProp', 'data-*', 'in', 'optionalAny', 'optionalArray', 'optionalArrayOf', 'optionalBool', 'optionalElement', 'optionalEnum', 'optionalNode', 'optionalNumber', 'optionalObject', 'optionalObjectOf', 'optionalObjectWithExactAndNestedDescription', 'optionalObjectWithShapeAndNestedDescription', 'optionalString', 'optionalUnion']
+        self.available_wildcard_properties =            ['data-', 'aria-']
+        _explicit_args = kwargs.pop('_explicit_args')
         _locals = locals()
         _locals.update(kwargs)  # For wildcard attrs
-        args = {k: _locals[k] for k in _explicit_args if k != "children"}
+        args = {k: _locals[k] for k in _explicit_args if k != 'children'}
         for k in []:
             if k not in args:
-                raise TypeError("Required argument `" + k + "` was not specified.")
+                raise TypeError(
+                    'Required argument `' + k + '` was not specified.')
         super(Table, self).__init__(children=children, **args)

From ab2c60718e2d86901aae7928213b642750b7b409 Mon Sep 17 00:00:00 2001
From: workaholicpanda <>
Date: Mon, 20 Sep 2021 16:55:32 -0400
Subject: [PATCH 6/9] chore: CHANGELOG updated, disabled SI formatting zero
 marks for Slider, RangeSlider, tests updated

---
 CHANGELOG.md                                  | 142 ++++++++++++++++++
 .../src/utils/computeSliderMarkers.js         |   5 +-
 .../sliders/test_sliders_shorthands.py        |  29 ++--
 3 files changed, 161 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 967700d49a..7f0a78b5f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,148 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [Unreleased]
+
+- [#1763](https://github.com/plotly/dash/pull/1763):
+    ## Dash and Dash Renderer
+
+    - `Input`, `State`, and `Output` now accept components instead of ID strings and Dash `callback` will auto-generate the component's ID under-the-hood if not supplied. This allows usage like:
+
+    ```python
+    my_input = dcc.Input()
+    my_output = html.Div()
+    app.layout = html.Div([my_input, my_output])
+
+    @dash.callback(Output(my_output, 'children'), Input(my_input, 'value'))
+    def update(value):
+      return f'You have entered {value}'
+    ```
+
+    Or, if using Python >=3.8 you can use the `:=` walrus operator:
+    ```python
+    app.layout = html.Div([
+      my_input := dcc.Input(),
+      my_output := html.Div()
+    ])
+
+    @dash.callback(Output(my_output, 'children'), Input(my_input, 'value'))
+    def update(value):
+      return f'You have entered {value}'
+      
+    ```
+    ## Dash Core Components
+
+    ### Rearranged Keyword Arguments & Flexible Types
+    **`Dropdown`, `RadioItem`, and `Checklist`**
+    - Rearranged Keyword Arguments - `options` & `value` are now the first two keywords which means they can be supplied as positional arguments without the keyword. Supplying the keywords (`options=` and `value=`) is still supported.
+    - Flexible Types - `options` can be supplied in two new forms:
+      1. An array of `string|number|bool` where `label` and `value` are equal to the items in the list.
+      2. A dictionary where the keys and values set as `value` and `label` respectively.
+
+    Before:
+
+    ```python
+    dcc.Dropdown(
+      options=[
+        {'label': 'New York', 'value': 'New York'},
+        {'label': 'Montreal', 'value': 'Montreal'},
+      ],
+      value='New York'
+    )
+      ```
+    or
+
+    ```python
+    dcc.Dropdown(
+      options=[
+        {'label': 'New York', 'value': 'NYC'},
+        {'label': 'Montreal', 'value': 'MTL'},
+      ],
+      value='New York'
+    )
+    ```
+
+    After:
+
+    ```python
+    dcc.Dropdown(['New York', 'Montreal'], 'New York')
+    ```
+    Or
+
+    ```python
+    dcc.Dropdown({'NYC': 'New York', 'MTL': 'Montreal'}, 'New York')
+    ```
+
+    **`RangeSlider` & `Slider`**
+    - Rearranged Keyword Arugments - `min`, `max`, and `step` are now the first three keyword arguments which means they can be supplied as positional arguments without the keyword.
+    - Flexible Types
+      - `step` will be calculated implicitly if not given.
+      - `marks` will be auto generated if not given. It will use `min` and `max` and will respect `step` if supplied. Auto generated marks labels are SI unit formatted. Around 5 human-readable marks will be created.
+      - To remove the Slider's marks, set `marks=None`.
+
+    Before:
+
+    ```python
+    dcc.Slider(marks={1: 2, 2: 2, 3: 3})
+    ```
+
+    After:
+    ```python
+    dcc.Slider(min=1, max=3, step=1)
+    ```
+    Or equivalently:
+    ```python
+    dcc.Slider(1, 3, 1)
+    ```
+    Step can also be omitted and the `Slider` will attempt to create a nice, human readable  step with SI units and around 5 marks:
+    ```python
+    dcc.Slider(0, 100)
+    ```
+
+    The SI units used in `marks` are:
+
+    * `z` - zepto, 10⁻²¹
+    * `a` - atto, 10⁻¹⁸
+    * `f` - femto, 10⁻¹⁵
+    * `p` - pico, 10⁻¹²
+    * `n` - nano, 10⁻⁹
+    * `µ` - micro, 10⁻⁶
+    * `m` - milli, 10⁻³
+    * `​` (none) - 10⁰
+    * `k` - kilo, 10³
+    * `M` - mega, 10⁶
+    * `G` - giga, 10⁹
+    * `T` - tera, 10¹²
+    * `P` - peta, 10¹⁵
+    * `E` - exa, 10¹⁸
+    * `Z` - zetta, 10²¹
+
+    **`DataTable`**
+
+    - Rearranged Keyword Arguments - `data` and `columns` the first twokeyword arguments which means they can be supplied as positional arguments without the keyword.
+    - Inferred Properties - If `columns` isn't supplied then it is extracted from the the first row in `data`
+
+    Before:
+
+    ```python
+    dash_table.DataTable(data=df.to_dict('records'), columns=[{'name': i, 'id': i} for i in df.columns])
+    ```
+    After:
+
+    ```python
+    dash_table.DataTable(data=df.to_dict('records'))
+    ```
+
+    ### New Component Properties
+
+    **`Checklist` & `RadioItems`**
+
+    - A new property `inline` appends `display: inline-block` to `labelStyle`.
+
+    ```python
+    dcc.Checklist(inline=True)
+    ```
+  
 ## [2.0.0] - 2021-08-03
 
 ## Dash and Dash Renderer
diff --git a/components/dash-core-components/src/utils/computeSliderMarkers.js b/components/dash-core-components/src/utils/computeSliderMarkers.js
index 34fca54560..006bb76810 100644
--- a/components/dash-core-components/src/utils/computeSliderMarkers.js
+++ b/components/dash-core-components/src/utils/computeSliderMarkers.js
@@ -90,7 +90,10 @@ export const applyD3Format = (mark, min, max) => {
     const k_ten_factor = 3;
 
     const ten_factor = Math.log10(Math.abs(mark));
-    if (ten_factor > mu_ten_factor && ten_factor < k_ten_factor) {
+    if (
+        mark === 0 ||
+        (ten_factor > mu_ten_factor && ten_factor < k_ten_factor)
+    ) {
         return String(mark);
     }
     const max_min_mean = (Math.abs(max) + Math.abs(min)) / 2;
diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
index 5f1cfe8620..cc5d3d3594 100644
--- a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
+++ b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
@@ -157,30 +157,31 @@ def test_slsh002_sliders_marks_si_unit_format(dash_dcc):
     for n in range(-20, 20):
         min = 0
         max = pow(10, n)
-        
+
         LAYOUT.extend(
             [
                 html.Div(
                     [
-                       
                         html.B(
                             f"min={min}, max={max}(=10^{n})",
                             style={"marginBottom": 15, "marginTop": 25},
                         ),
-                        (html.Div(
-                            '(Known issue: Slider does not seem to work for precision below 10^(-6))'
-                        ) if n <= -6 else None),
-                        html.Div('value is undefined'),
+                        (
+                            html.Div(
+                                "(Known issue: Slider does not seem to work for precision below 10^(-6))"
+                            )
+                            if n <= -6
+                            else None
+                        ),
+                        html.Div("value is undefined"),
                         dcc.Slider(min, max),
                         dcc.RangeSlider(min, max),
-                        
-                        html.Div(f'value=0.4 * 10^{n}'),
-                        dcc.Slider(min, max, value=0.4*max),
-                        dcc.RangeSlider(min, max, value[0.2 * max, 0.4 * max]),
-
-                        html.Div(f'value=0.5 * 10^{n}'),
-                        dcc.Slider(min, max, value=0.4*max),
-                        dcc.RangeSlider(min, max, value[0.2 * max, 0.5 * max]),
+                        html.Div(f"value=0.4 * 10^{n}"),
+                        dcc.Slider(min, max, value=0.4 * max),
+                        dcc.RangeSlider(min, max, value=[0.2 * max, 0.4 * max]),
+                        html.Div(f"value=0.5 * 10^{n}"),
+                        dcc.Slider(min, max, value=0.4 * max),
+                        dcc.RangeSlider(min, max, value=[0.2 * max, 0.5 * max]),
                     ]
                 )
             ]

From a5e7f8dee7c4389e8bc4ed2043ac9aa8e085d54c Mon Sep 17 00:00:00 2001
From: workaholicpanda <>
Date: Mon, 20 Sep 2021 17:56:04 -0400
Subject: [PATCH 7/9] chore: fix typos and update CHANGELOG to specify the
 acceptable value range for slider

---
 CHANGELOG.md                                          | 11 +++--------
 .../tests/integration/misc/test_bcdp_auto_id.py       |  4 ++--
 .../integration/sliders/test_sliders_shorthands.py    |  2 +-
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7f0a78b5f8..b41c37c8e7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -100,13 +100,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
     dcc.Slider(0, 100)
     ```
 
-    The SI units used in `marks` are:
-
-    * `z` - zepto, 10⁻²¹
-    * `a` - atto, 10⁻¹⁸
-    * `f` - femto, 10⁻¹⁵
-    * `p` - pico, 10⁻¹²
-    * `n` - nano, 10⁻⁹
+    The SI units and ranges supported in `marks` are:
     * `µ` - micro, 10⁻⁶
     * `m` - milli, 10⁻³
     * `​` (none) - 10⁰
@@ -116,7 +110,8 @@ This project adheres to [Semantic Versioning](https://semver.org/).
     * `T` - tera, 10¹²
     * `P` - peta, 10¹⁵
     * `E` - exa, 10¹⁸
-    * `Z` - zetta, 10²¹
+
+    _Ranges below 10µ are not supported by the Slider. This is a bug: https://github.com/plotly/dash/issues/1766_
 
     **`DataTable`**
 
diff --git a/components/dash-core-components/tests/integration/misc/test_bcdp_auto_id.py b/components/dash-core-components/tests/integration/misc/test_bcdp_auto_id.py
index 6fe4e441eb..1529bb4cac 100644
--- a/components/dash-core-components/tests/integration/misc/test_bcdp_auto_id.py
+++ b/components/dash-core-components/tests/integration/misc/test_bcdp_auto_id.py
@@ -4,8 +4,8 @@
 def test_msps002_auto_id_assert(dash_dcc):
     app = Dash(__name__)
 
-    input1 = dcc.Input(value="Hello")
-    input2 = dcc.Input(value="Hello")
+    input1 = dcc.Input(value="Hello Input 1")
+    input2 = dcc.Input(value="Hello Input 2")
     input3 = dcc.Input(value=3)
     output1 = html.Div()
     output2 = html.Div()
diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
index cc5d3d3594..3ce1f3c161 100644
--- a/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
+++ b/components/dash-core-components/tests/integration/sliders/test_sliders_shorthands.py
@@ -180,7 +180,7 @@ def test_slsh002_sliders_marks_si_unit_format(dash_dcc):
                         dcc.Slider(min, max, value=0.4 * max),
                         dcc.RangeSlider(min, max, value=[0.2 * max, 0.4 * max]),
                         html.Div(f"value=0.5 * 10^{n}"),
-                        dcc.Slider(min, max, value=0.4 * max),
+                        dcc.Slider(min, max, value=0.5 * max),
                         dcc.RangeSlider(min, max, value=[0.2 * max, 0.5 * max]),
                     ]
                 )

From a438015c42de371959d1b216fa25cb4e07d4ea34 Mon Sep 17 00:00:00 2001
From: workaholicpanda <>
Date: Mon, 20 Sep 2021 20:00:40 -0400
Subject: [PATCH 8/9] fix: table column header less

---
 .../dash-table/src/dash-table/components/Table/Table.less    | 5 +++++
 .../dash-table/src/dash-table/derived/header/content.tsx     | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/dash-table/src/dash-table/components/Table/Table.less b/components/dash-table/src/dash-table/components/Table/Table.less
index 4118a020a5..d6928de8de 100644
--- a/components/dash-table/src/dash-table/components/Table/Table.less
+++ b/components/dash-table/src/dash-table/components/Table/Table.less
@@ -512,6 +512,11 @@
                     .not-selectable();
                     cursor: pointer;
                 }
+
+                .column-header-wrapper {
+                    display: flex;
+                    justify-content: space-between;
+                }
             }
 
             tr {
diff --git a/components/dash-table/src/dash-table/derived/header/content.tsx b/components/dash-table/src/dash-table/derived/header/content.tsx
index 629b44512e..8fc1cd69d3 100644
--- a/components/dash-table/src/dash-table/derived/header/content.tsx
+++ b/components/dash-table/src/dash-table/derived/header/content.tsx
@@ -283,7 +283,7 @@ function getter(
                         );
 
                     return (
-                        <div>
+                        <div className='column-header-wrapper'>
                             {!column_selectable || !selectable ? null : (
                                 <span className='column-header--select'>
                                     <input

From 348964129f1fc8127d4a6b8a09ec33a9cfd94c0c Mon Sep 17 00:00:00 2001
From: workaholicpanda <>
Date: Mon, 20 Sep 2021 21:28:12 -0400
Subject: [PATCH 9/9] Revert "fix: table column header less"

This reverts commit a438015c42de371959d1b216fa25cb4e07d4ea34.
---
 .../dash-table/src/dash-table/components/Table/Table.less    | 5 -----
 .../dash-table/src/dash-table/derived/header/content.tsx     | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/components/dash-table/src/dash-table/components/Table/Table.less b/components/dash-table/src/dash-table/components/Table/Table.less
index d6928de8de..4118a020a5 100644
--- a/components/dash-table/src/dash-table/components/Table/Table.less
+++ b/components/dash-table/src/dash-table/components/Table/Table.less
@@ -512,11 +512,6 @@
                     .not-selectable();
                     cursor: pointer;
                 }
-
-                .column-header-wrapper {
-                    display: flex;
-                    justify-content: space-between;
-                }
             }
 
             tr {
diff --git a/components/dash-table/src/dash-table/derived/header/content.tsx b/components/dash-table/src/dash-table/derived/header/content.tsx
index 8fc1cd69d3..629b44512e 100644
--- a/components/dash-table/src/dash-table/derived/header/content.tsx
+++ b/components/dash-table/src/dash-table/derived/header/content.tsx
@@ -283,7 +283,7 @@ function getter(
                         );
 
                     return (
-                        <div className='column-header-wrapper'>
+                        <div>
                             {!column_selectable || !selectable ? null : (
                                 <span className='column-header--select'>
                                     <input