Merge pull request #557 from AnnMarieW/colorpicker

Added color picker example to docs

Author: tcbegley

docs/components_page/components/input.md

@@ -92,10 +92,25 @@ If you need more granular control over checkboxes and radio buttons, you can als
 
 {{example:components/input/radio_check_standalone.py:standalone_radio_check}}
 
+## Color picker
+
+When using `Input` with `type="color"`, the user may specify a color, either by using a visual color picker or by entering the color in a text field in #rrggbb format.
+
+Note that the color picker presentation may vary substantially from one browser and/or platform to another.
+
+As you drag the selector around the color picker, notice that the text color is smoothly updated.   While this is a nice feature, it may  cause a performance issue in your app, because the callback fires continuously.  
+
+This is a great use-case for a [Dash clientside callback](https://dash.plotly.com/clientside-callbacks).  This example uses a clientside callback so the callback runs directly in the browser instead of making requests to the Dash server.  For your reference, the regular Dash callback is shown as a comment.  
+
+{{example:components/input/colorpicker.py:colorpicker}}
+
+
 {{apidoc:src/components/input/Input.js}}
 
 {{apidoc:src/components/input/Textarea.js}}
 
+{{apidoc:src/components/input/Select.js}}
+
 {{apidoc:src/components/input/RadioItems.js}}
 
 {{apidoc:src/components/input/Checklist.js}}

docs/components_page/components/input/colorpicker.py

@@ -0,0 +1,31 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+from dash.dependencies import Input, Output
+
+colorpicker = dbc.FormGroup(
+    [
+        dbc.Label(["Select a ", html.Span("color", id="color")]),
+        dbc.Input(
+            type="color",
+            id="colorpicker",
+            value="#000000",
+            style={"width": 75, "height": 50},
+        ),
+    ]
+)
+
+app.clientside_callback(
+    """
+    function(color) {                                      
+        return {"color": color}
+    }
+    """,
+    Output("color", "style"),
+    Input("colorpicker", "value"),
+)
+
+
+# Regular Dash callback
+# @app.callback(Output("color", "style"), Input("colorpicker", "value"))
+# def update_text(color):
+#     return {"color": color}

setup.cfg

@@ -15,6 +15,7 @@ exclude =
     docs/components_page/components/input/simple.py,
     docs/components_page/components/input/radio_check_standalone.py,
     docs/components_page/components/input/radio_check.py,
+    docs/components_page/components/input/colorpicker.py,
     docs/components_page/components/input_group/button.py,
     docs/components_page/components/input_group/dropdown.py,
     docs/components_page/components/list_group/links.py,