Merge pull request #552 from mmartinsky/master

update Dropdown to accept optionHeight prop
plotly · May 10, 2019 · 0fc7e15 · 0fc7e15
2 parents 79b0f32 + 4b4ca7a
commit 0fc7e15
Show file tree

Hide file tree

Showing 10 changed files with 1,536 additions and 1,510 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 - `figure` prop in `dcc.Graph` now accepts a `frames` key
 - Improved the `Dropdown` options description for dash-docs #547
+- Added `optionHeight` prop to `Dropdown` #552
 
 ### Removed
 

diff --git a/dash_core_components/Dropdown.py b/dash_core_components/Dropdown.py
@@ -26,6 +26,7 @@ class Dropdown(Component):
 multiple values can be selected at once, and `value` is an
 array of items with values corresponding to those in the
 `options` prop.
+- optionHeight (number; optional): height of each option. Can be increased when label lengths would wrap around
 - className (string; optional): className of the dropdown element
 - clearable (boolean; optional): Whether or not the dropdown is "clearable", that is, whether or
 not a small "x" appears on the right of the dropdown that removes
@@ -41,12 +42,12 @@ class Dropdown(Component):
   - prop_name (string; optional): Holds which property is loading
   - component_name (string; optional): Holds the name of the component that is loading"""
     @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, options=Component.UNDEFINED, value=Component.UNDEFINED, className=Component.UNDEFINED, clearable=Component.UNDEFINED, disabled=Component.UNDEFINED, multi=Component.UNDEFINED, placeholder=Component.UNDEFINED, searchable=Component.UNDEFINED, style=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'options', 'value', 'className', 'clearable', 'disabled', 'multi', 'placeholder', 'searchable', 'style', 'loading_state']
+    def __init__(self, id=Component.UNDEFINED, options=Component.UNDEFINED, value=Component.UNDEFINED, optionHeight=Component.UNDEFINED, className=Component.UNDEFINED, clearable=Component.UNDEFINED, disabled=Component.UNDEFINED, multi=Component.UNDEFINED, placeholder=Component.UNDEFINED, searchable=Component.UNDEFINED, style=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
+        self._prop_names = ['id', 'options', 'value', 'optionHeight', 'className', 'clearable', 'disabled', 'multi', 'placeholder', 'searchable', 'style', 'loading_state']
         self._type = 'Dropdown'
         self._namespace = 'dash_core_components'
         self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'options', 'value', 'className', 'clearable', 'disabled', 'multi', 'placeholder', 'searchable', 'style', 'loading_state']
+        self.available_properties = ['id', 'options', 'value', 'optionHeight', 'className', 'clearable', 'disabled', 'multi', 'placeholder', 'searchable', 'style', 'loading_state']
         self.available_wildcard_properties =            []
 
         _explicit_args = kwargs.pop('_explicit_args')

diff --git a/dash_core_components/dash_core_components.dev.js b/dash_core_components/dash_core_components.dev.js
diff --git a/dash_core_components/dash_core_components.dev.js.map b/dash_core_components/dash_core_components.dev.js.map
diff --git a/dash_core_components/dash_core_components.min.js b/dash_core_components/dash_core_components.min.js
diff --git a/dash_core_components/dash_core_components.min.js.map b/dash_core_components/dash_core_components.min.js.map
diff --git a/dash_core_components/metadata.json b/dash_core_components/metadata.json
diff --git a/demo/Demo.react.js b/demo/Demo.react.js
@@ -132,10 +132,11 @@ const properties = {
         {'label': 'Melons', 'value': 'melons', 'disabled': false},
         {'label': 'Apples', 'value': 'apples'},
         {'label': 'Oranges', 'value': 'oranges', 'disabled': true}
-    ]
+    ],
+    optionHeight: 50
 };
 
-ReactDOM.render(<Dropdown {...properties}/>, mountNode);`
+ReactDOM.render(<Dropdown {...properties} />, mountNode);`
 
 const GraphExample = `const properties = {
     animate: true,

diff --git a/demo/index.js b/demo/index.js
@@ -7,7 +7,7 @@ import LoadingDemo from './LoadingDemo.react';
 
 ReactDOM.render(
     <div>
-        <Tabs>
+        <Tabs value={'tab-2'}>
             <Tab value="tab-1" label='Loading Demo'>
                 <LoadingDemo />
             </Tab>

diff --git a/src/components/Dropdown.react.js b/src/components/Dropdown.react.js
@@ -157,6 +157,11 @@ Dropdown.propTypes = {
         PropTypes.arrayOf(PropTypes.number),
     ]),
 
+    /**
+     * height of each option. Can be increased when label lengths would wrap around
+     */
+    optionHeight: PropTypes.number,
+
     /**
      * className of the dropdown element
      */
@@ -223,4 +228,5 @@ Dropdown.defaultProps = {
     disabled: false,
     multi: false,
     searchable: true,
+    optionHeight: 35,
 };