Updates for React 16

docs/components_page/components/dropdown/__init__.py

@@ -5,6 +5,7 @@
 from ...api_doc import ApiDoc
 from ...helpers import ExampleContainer, HighlightedSource
 from ...metadata import get_component_metadata
+from .alignment import dropdown as dropdown_alignment
 from .direction import dropdown as dropdown_direction
 from .simple import dropdown as dropdown_simple
 from .size import dropdown as dropdown_size
@@ -14,6 +15,7 @@
 dropdown_simple_source = (HERE / "simple.py").read_text()
 dropdown_size_source = (HERE / "size.py").read_text()
 dropdown_direction_source = (HERE / "direction.py").read_text()
+dropdown_alignment_source = (HERE / "alignment.py").read_text()
 
 content = [
     html.H2("DropdownMenu"),
@@ -25,6 +27,9 @@
     html.H4("DropdownMenu direction"),
     ExampleContainer(dropdown_direction),
     HighlightedSource(dropdown_direction_source),
+    html.H4("DropdownMenu alignment"),
+    ExampleContainer(dropdown_alignment),
+    HighlightedSource(dropdown_alignment_source),
     ApiDoc(
         get_component_metadata("src/components/DropdownMenu.js"),
         component_name="DropdownMenu",

docs/components_page/components/dropdown/alignment.py

@@ -0,0 +1,26 @@
+import dash_bootstrap_components as dbc
+
+items = [
+    dbc.DropdownMenuItem("Action"),
+    dbc.DropdownMenuItem("Another action"),
+    dbc.DropdownMenuItem("Something else here"),
+    dbc.DropdownMenuItem(divider=True),
+    dbc.DropdownMenuItem("Something else here after the divider"),
+]
+
+dropdown = dbc.Row(
+    [
+        dbc.Col(
+            dbc.DropdownMenu(
+                label="Left-aligned menu (default)",
+                children=items,
+                right=False,
+            )
+        ),
+        dbc.Col(
+            dbc.DropdownMenu(
+                label="Right-aligned menu", children=items, right=True
+            )
+        ),
+    ]
+)

docs/components_page/components/modal/__init__.py

@@ -0,0 +1,127 @@
+from pathlib import Path
+
+import dash_core_components as dcc
+import dash_html_components as html
+
+from ...api_doc import ApiDoc
+from ...helpers import (
+    ExampleContainer,
+    HighlightedSource,
+    load_source_with_environment,
+)
+from ...metadata import get_component_metadata
+
+HERE = Path(__file__).parent
+LOREM = (HERE / "lorem.txt").read_text()
+
+modal_simple_source = (HERE / "simple.py").read_text()
+modal_size_source = (HERE / "size.py").read_text()
+modal_backdrop_source = (HERE / "backdrop.py").read_text()
+modal_scrollable = (HERE / "scrollable.py").read_text()
+modal_centered_source = (HERE / "centered.py").read_text()
+
+
+def get_content(app):
+    return [
+        html.H2("Modal", className="display-4"),
+        html.P(
+            dcc.Markdown(
+                "Use the `Modal` component to add dialogs to your app for "
+                "lightboxes, user notifications, or completely custom content."
+            ),
+            className="lead",
+        ),
+        html.P(
+            dcc.Markdown(
+                "Modals are built up using the `Modal`, `ModalHeader`, "
+                "`ModalBody` and `ModalFooter` components. Set the `is_open` "
+                "prop of the `Modal` to `True` to open the modal. By default, "
+                "the modal can be dismissed by clicking outside the modal "
+                "or by pressing the escape key (these behaviours can both be "
+                "overridden, see below), though you can also write your own "
+                "callbacks that set `is_open` to `False`."
+            )
+        ),
+        ExampleContainer(
+            load_source_with_environment(
+                modal_simple_source, "modal", {"app": app}
+            )
+        ),
+        HighlightedSource(modal_simple_source),
+        html.H4("Modal size"),
+        html.P(
+            dcc.Markdown(
+                "Set the size of the modal using the `size` prop. The options "
+                'are `"sm"`, `"lg"`, or `"xl"` for a small, large or extra '
+                "large modal. If you don't specify anything, or specify "
+                "`size=False`, you will get the default modal size."
+            )
+        ),
+        ExampleContainer(
+            load_source_with_environment(
+                modal_size_source, "modal", {"app": app}
+            )
+        ),
+        HighlightedSource(modal_size_source),
+        html.H4("Backdrop"),
+        html.P(
+            dcc.Markdown(
+                "By default the modal will render with a backdrop that "
+                "dismisses the modal on click. Set `backdrop=False` to render "
+                'the modal without a backdrop, or `backdrop="static"` to '
+                "render a backdrop that doesn't dismiss the modal when "
+                "clicked."
+            )
+        ),
+        ExampleContainer(
+            load_source_with_environment(
+                modal_backdrop_source, "modal", {"app": app}
+            )
+        ),
+        HighlightedSource(modal_backdrop_source),
+        html.H4("Scrolling long content"),
+        html.P(
+            dcc.Markdown(
+                "When modals become too long for the user’s viewport or "
+                "device, they scroll independently of the page itself. By "
+                "default, the entire modal (including its header and footer) "
+                "scrolls. If you prefer you can specify `scrollable=True` to "
+                "scroll only the body of the modal."
+            )
+        ),
+        ExampleContainer(
+            load_source_with_environment(
+                modal_scrollable, "modal", {"app": app, "LOREM": LOREM}
+            )
+        ),
+        HighlightedSource(modal_scrollable),
+        html.H4("Vertically centered modal"),
+        html.P(
+            dcc.Markdown(
+                "To vertically center the modal on the page, set "
+                "`centered=True`."
+            )
+        ),
+        ExampleContainer(
+            load_source_with_environment(
+                modal_centered_source, "modal", {"app": app}
+            )
+        ),
+        HighlightedSource(modal_centered_source),
+        ApiDoc(
+            get_component_metadata("src/components/modal/Modal.js"),
+            component_name="Modal",
+        ),
+        ApiDoc(
+            get_component_metadata("src/components/modal/ModalHeader.js"),
+            component_name="ModalHeader",
+        ),
+        ApiDoc(
+            get_component_metadata("src/components/modal/ModalBody.js"),
+            component_name="ModalBody",
+        ),
+        ApiDoc(
+            get_component_metadata("src/components/modal/ModalFooter.js"),
+            component_name="ModalFooter",
+        ),
+    ]

docs/components_page/components/modal/backdrop.py

@@ -0,0 +1,56 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+from dash.dependencies import Input, Output, State
+
+modal = html.Div(
+    [
+        dbc.FormGroup(
+            [
+                dbc.Label("Backdrop:"),
+                dbc.RadioItems(
+                    id="backdrop-selector",
+                    options=[
+                        {"label": "True (default)", "value": True},
+                        {"label": "False", "value": False},
+                        {"label": "'static'", "value": "static"},
+                    ],
+                    inline=True,
+                    value=True,
+                ),
+            ]
+        ),
+        dbc.Button("Open modal", id="open-backdrop"),
+        dbc.Modal(
+            [
+                dbc.ModalHeader("Header"),
+                dbc.ModalBody(
+                    "Change the backdrop of this modal with the radio buttons"
+                ),
+                dbc.ModalFooter(
+                    dbc.Button(
+                        "Close", id="close-backdrop", className="ml-auto"
+                    )
+                ),
+            ],
+            id="modal-backdrop",
+        ),
+    ]
+)
+
+
+@app.callback(
+    Output("modal-backdrop", "backdrop"), [Input("backdrop-selector", "value")]
+)
+def select_backdrop(backdrop):
+    return backdrop
+
+
+@app.callback(
+    Output("modal-backdrop", "is_open"),
+    [Input("open-backdrop", "n_clicks"), Input("close-backdrop", "n_clicks")],
+    [State("modal-backdrop", "is_open")],
+)
+def toggle_modal(n1, n2, is_open):
+    if n1 or n2:
+        return not is_open
+    return is_open

docs/components_page/components/modal/centered.py

@@ -0,0 +1,33 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+from dash.dependencies import Input, Output, State
+
+modal = html.Div(
+    [
+        dbc.Button("Open", id="open-centered"),
+        dbc.Modal(
+            [
+                dbc.ModalHeader("Header"),
+                dbc.ModalBody("This modal is vertically centered"),
+                dbc.ModalFooter(
+                    dbc.Button(
+                        "Close", id="close-centered", className="ml-auto"
+                    )
+                ),
+            ],
+            id="modal-centered",
+            centered=True,
+        ),
+    ]
+)
+
+
+@app.callback(
+    Output("modal-centered", "is_open"),
+    [Input("open-centered", "n_clicks"), Input("close-centered", "n_clicks")],
+    [State("modal-centered", "is_open")],
+)
+def toggle_modal(n1, n2, is_open):
+    if n1 or n2:
+        return not is_open
+    return is_open

docs/components_page/components/modal/lorem.txt

@@ -0,0 +1,9 @@
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

docs/components_page/components/modal/scrollable.py

@@ -0,0 +1,55 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+from dash.dependencies import Input, Output, State
+
+modal = html.Div(
+    [
+        dbc.Button("Scrolling modal", id="open-scroll", className="mr-1"),
+        dbc.Button("Modal with scrollable body", id="open-body-scroll"),
+        dbc.Modal(
+            [
+                dbc.ModalHeader("Header"),
+                dbc.ModalBody(LOREM),
+                dbc.ModalFooter(
+                    dbc.Button("Close", id="close-scroll", className="ml-auto")
+                ),
+            ],
+            id="modal-scroll",
+        ),
+        dbc.Modal(
+            [
+                dbc.ModalHeader("Header"),
+                dbc.ModalBody(LOREM),
+                dbc.ModalFooter(
+                    dbc.Button(
+                        "Close", id="close-body-scroll", className="ml-auto"
+                    )
+                ),
+            ],
+            id="modal-body-scroll",
+            scrollable=True,
+        ),
+    ]
+)
+
+
+def toggle_modal(n1, n2, is_open):
+    if n1 or n2:
+        return not is_open
+    return is_open
+
+
+app.callback(
+    Output("modal-scroll", "is_open"),
+    [Input("open-scroll", "n_clicks"), Input("close-scroll", "n_clicks")],
+    [State("modal-scroll", "is_open")],
+)(toggle_modal)
+
+app.callback(
+    Output("modal-body-scroll", "is_open"),
+    [
+        Input("open-body-scroll", "n_clicks"),
+        Input("close-body-scroll", "n_clicks"),
+    ],
+    [State("modal-body-scroll", "is_open")],
+)(toggle_modal)

docs/components_page/components/modal/simple.py

@@ -0,0 +1,30 @@
+import dash_bootstrap_components as dbc
+import dash_html_components as html
+from dash.dependencies import Input, Output, State
+
+modal = html.Div(
+    [
+        dbc.Button("Open modal", id="open"),
+        dbc.Modal(
+            [
+                dbc.ModalHeader("Header"),
+                dbc.ModalBody("This is the content of the modal"),
+                dbc.ModalFooter(
+                    dbc.Button("Close", id="close", className="ml-auto")
+                ),
+            ],
+            id="modal",
+        ),
+    ]
+)
+
+
+@app.callback(
+    Output("modal", "is_open"),
+    [Input("open", "n_clicks"), Input("close", "n_clicks")],
+    [State("modal", "is_open")],
+)
+def toggle_modal(n1, n2, is_open):
+    if n1 or n2:
+        return not is_open
+    return is_open