Merge pull request #238 from facultyai/custom-inputs

Custom RadioItems and Checklist

docs/assets/docs.css

@@ -14,7 +14,7 @@
   margin-right: 1rem;
 }
 
-.main-header .btn+.btn {
+.main-header .btn + .btn {
   margin-right: 0;
 }
 
@@ -61,12 +61,12 @@ span.hljs-meta {
 }
 
 .docs-sidebar .nav-item {
-  padding: 0 .2rem 0 .2rem;
+  padding: 0 0.2rem 0 0.2rem;
 }
 
 .docs-sidebar .nav-link {
   color: #888;
-  padding: .3rem .5rem .3rem 1rem;
+  padding: 0.3rem 0.5rem 0.3rem 1rem;
   border-left: 2px solid transparent;
 }
 
@@ -110,14 +110,13 @@ span.hljs-meta {
 
 .layout-demo .row {
   margin-bottom: 10px;
-  background: linear-gradient(to right,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0) calc(100% - 15px),
-    #fff calc(100% - 15px)),
-    linear-gradient(to right,
-    #fff,
-    #fff 15px,
-    rgba(0, 0, 0, 0) 15px),
+  background: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0) calc(100% - 15px),
+      #fff calc(100% - 15px)
+    ),
+    linear-gradient(to right, #fff, #fff 15px, rgba(0, 0, 0, 0) 15px),
     linear-gradient(to right, #eeeeee, #eeeeee);
 }
 
@@ -129,12 +128,21 @@ span.hljs-meta {
   height: 100px;
 }
 
-.layout-demo .col>div, .layout-demo [class*="col-"]>div {
+.layout-demo .col > div,
+.layout-demo [class*='col-'] > div {
   padding: 0.75rem;
-  background-color: rgba(86, 61, 124, .15);
-  border: 1px solid rgba(86, 61, 124, .2);
+  background-color: rgba(86, 61, 124, 0.15);
+  border: 1px solid rgba(86, 61, 124, 0.2);
 }
 
 ._dash-undo-redo {
   display: none;
 }
+
+/* Custom checkbox example CSS */
+#checklist-selected-style
+  .custom-control-input:checked
+  ~ .custom-control-label::before {
+  background-color: #fa7268;
+  border-color: #ea6258;
+}

docs/components_page/components/input/__init__.py

@@ -11,6 +11,7 @@
 )
 from ...metadata import get_component_metadata
 from .radio_check_inline import inline_inputs
+from .selected_styles import checklist as input_selected_styles
 from .size import inputs as input_size
 from .text_label import text_input as input_text_label
 from .textarea import textareas as input_textarea
@@ -25,14 +26,22 @@
 input_radio_check_source = (HERE / "radio_check.py").read_text()
 input_textarea_source = (HERE / "textarea.py").read_text()
 input_radio_check_inline_source = (HERE / "radio_check_inline.py").read_text()
+input_selected_styles_source = (HERE / "selected_styles.py").read_text()
 input_radio_check_standalone_source = (
     HERE / "radio_check_standalone.py"
 ).read_text()
 
 
 def get_content(app):
     return [
-        html.H2("Input components"),
+        html.H2("Input components", className="display-4"),
+        html.P(
+            dcc.Markdown(
+                "Documentation and examples for input components in "
+                "_dash-bootstrap-components_."
+            ),
+            className="lead",
+        ),
         html.P(
             dcc.Markdown(
                 "*dash-bootstrap-components* has its own versions of some of "
@@ -59,16 +68,12 @@ def get_content(app):
         HighlightedSource(input_simple_source),
         html.H4("Labels and Text"),
         html.P(
-            [
-                dcc.Markdown(
-                    "Use the `FormGroup` component along with `Label` and "
-                    "`FormText` to control the layout of your `Input` "
-                    "components."
-                ),
-                "See the ",
-                dcc.Link("documentation for forms", href="/l/components/form"),
-                " for more details.",
-            ]
+            dcc.Markdown(
+                "Use the `FormGroup` component along with `Label` and "
+                "`FormText` to control the layout of your `Input` components. "
+                "See the [documentation for forms](/l/components/form) for "
+                "more details."
+            )
         ),
         ExampleContainer(input_text_label),
         HighlightedSource(input_text_label_source),
@@ -106,11 +111,21 @@ def get_content(app):
         html.P(
             dcc.Markdown(
                 "`RadioItems` and `Checklist` components also work like "
-                "*dash-core-components* but again with Bootstrap styles "
-                "added. In addition the `inline` keyword can be used to "
-                "easily make inline checklists or radioitems. Use these "
-                "components with `FormGroup` for automatic spacing and "
-                "padding."
+                "*dash-core-components*. Provided you specify an `id`, "
+                "_dash-bootstrap-components_ will render custom themed radio "
+                "buttons or checkboxes rather than using the native browser "
+                "buttons. When using `Checklist` you can also specify "
+                "`switch=True` to render toggle-like switches rather than "
+                "checkboxes. If you prefer to use the native buttons and "
+                "checkboxes, set `custom=False`. Note that there is no native "
+                "browser switch, so if you set `custom=False` then `switch` "
+                "will be ignored."
+            )
+        ),
+        html.P(
+            dcc.Markdown(
+                "Use these components with `FormGroup` for automatic spacing "
+                "and padding."
             )
         ),
         ExampleContainer(
@@ -127,15 +142,37 @@ def get_content(app):
         ),
         ExampleContainer(inline_inputs),
         HighlightedSource(input_radio_check_inline_source),
+        html.H4("Checked item styles"),
+        html.P(
+            dcc.Markdown(
+                "Use the `labelCheckedStyle` and `labelCheckedClassName` "
+                "arguments to apply different styles to the labels of checked "
+                "items. When using custom inputs you can override the styles "
+                "of the inputs using custom CSS. See the below example."
+            )
+        ),
+        dcc.Markdown(
+            """```css
+#checklist-selected-style
+  .custom-control-input:checked
+  ~ .custom-control-label::before {
+  background-color: #fa7268;
+  border-color: #ea6258;
+}
+
+```
+        """
+        ),
+        ExampleContainer(input_selected_styles),
+        HighlightedSource(input_selected_styles_source),
         html.P(
             dcc.Markdown(
-                "If you need more granular control over checkboxes "
-                "and radio buttons, you can also create standalone "
-                "components. Bind callbacks to the `checked` keyword "
-                "to react to changes in the input state. To attach "
-                "a label, create a FormGroup with `check=True` and "
-                "use the label's `html_for` keyword to bind it to "
-                "the checkbox."
+                "If you need more granular control over checkboxes and radio "
+                "buttons, you can also create standalone components. Bind "
+                "callbacks to the `checked` keyword to react to changes in "
+                "the input state. To attach a label, create a FormGroup with "
+                "`check=True` and use the label's `html_for` keyword to bind "
+                "it to the checkbox."
             )
         ),
         ExampleContainer(

docs/components_page/components/input/radio_check.py

@@ -9,6 +9,7 @@
             options=[
                 {"label": "Option 1", "value": 1},
                 {"label": "Option 2", "value": 2},
+                {"label": "Disabled option", "value": 3, "disabled": True},
             ],
             value=1,
             id="radioitems-input",
@@ -23,26 +24,57 @@
             options=[
                 {"label": "Option 1", "value": 1},
                 {"label": "Option 2", "value": 2},
+                {"label": "Disabled Option", "value": 3, "disabled": True},
             ],
             value=[],
             id="checklist-input",
         ),
     ]
 )
 
+switches = dbc.FormGroup(
+    [
+        dbc.Label("Toggle a bunch"),
+        dbc.Checklist(
+            options=[
+                {"label": "Option 1", "value": 1},
+                {"label": "Option 2", "value": 2},
+                {"label": "Disabled Option", "value": 3, "disabled": True},
+            ],
+            value=[],
+            id="switches-input",
+            switch=True,
+        ),
+    ]
+)
+
 inputs = html.Div(
     [
-        dbc.Form([radioitems, checklist]),
+        dbc.Form([radioitems, checklist, switches]),
         html.P(id="radioitems-checklist-output"),
     ]
 )
 
 
 @app.callback(
     Output("radioitems-checklist-output", "children"),
-    [Input("radioitems-input", "value"), Input("checklist-input", "value")],
+    [
+        Input("radioitems-input", "value"),
+        Input("checklist-input", "value"),
+        Input("switches-input", "value"),
+    ],
 )
-def on_form_change(radio_items_value, checklist_value):
-    template = "Radio button {} and {} checklist items are selected."
-    output_string = template.format(radio_items_value, len(checklist_value))
+def on_form_change(radio_items_value, checklist_value, switches_value):
+    template = "Radio button {}, {} checklist item{} and {} switch{} selected."
+
+    n_checkboxes = len(checklist_value)
+    n_switches = len(switches_value)
+
+    output_string = template.format(
+        radio_items_value,
+        n_checkboxes,
+        "s" if n_checkboxes != 1 else "",
+        n_switches,
+        "es" if n_switches != 1 else "",
+    )
     return output_string

docs/components_page/components/input/radio_check_inline.py

@@ -9,6 +9,7 @@
                 {"label": "Option 2", "value": 2},
             ],
             value=1,
+            id="radioitems-inline-input",
             inline=True,
         ),
     ]
@@ -23,9 +24,28 @@
                 {"label": "Option 2", "value": 2},
             ],
             value=[],
+            id="checklist-inline-input",
             inline=True,
         ),
     ]
 )
 
-inline_inputs = dbc.Form([inline_radioitems, inline_checklist])
+inline_switches = dbc.FormGroup(
+    [
+        dbc.Label("Toggle a bunch"),
+        dbc.Checklist(
+            options=[
+                {"label": "Option 1", "value": 1},
+                {"label": "Option 2", "value": 2},
+            ],
+            value=[],
+            id="switches-inline-input",
+            inline=True,
+            switch=True,
+        ),
+    ]
+)
+
+inline_inputs = dbc.Form(
+    [inline_radioitems, inline_checklist, inline_switches]
+)

docs/components_page/components/input/selected_styles.py

@@ -0,0 +1,11 @@
+import dash_bootstrap_components as dbc
+
+checklist = dbc.Checklist(
+    id="checklist-selected-style",
+    options=[
+        {"label": "Option 1", "value": 1},
+        {"label": "Option 2", "value": 2},
+        {"label": "Option 3", "value": 3},
+    ],
+    labelCheckedStyle={"color": "red"},
+)