Updates for Dash v1

[tcbegley]

This issue is for tracking changes that either need to be made, or can't be made before the release of Dash v1. Most of the changes are the result of Dash v1 (or specifically dash-renderer) supporting React 16, while the current release of Dash does not.

• Upgrade to reactstrap 8. Currently blocked from doing so as the implementation of some of the components we rely on (notably Dropdown which we use in DropdownMenu) has switched to using createPortal which is React 16 only.
• Add modals (reactstrap uses createPortal for this). Resolved by Add modals #146
• Add spinners (new in reactstrap 7). Resolved by Add spinners #161
• Add toggles (new in reactstrap 7). See Create toggle switch #136. This probably means figuring out how to provide an interface to custom inputs more generally.
• Add toasts.
• Re-enable up direction in DropdownMenu. See Re-enable direction=up on dropdowns #65
• Add right alignment option to DropdownMenu. Resolved by Add option to right align the dropdown menu #143, thanks @jmsblah!

There are pre-releases out for the v1 series of Dash libraries, so we can already build much of this and test against those then release when they are released. I have a dash-v1 branch open, I propose any of the above changes are PR'd against and merged into that branch.

[happyshows]

just curious, do you find any post / issue talking about the roadmap of Dash and when v1 will be ready?

[tcbegley]

This issue on the Dash repo is tracking progress on v1.

[tcbegley]

With the release of Dash v0.41.0, dash-renderer is now using React 16, so we are no longer blocked from implementing the items in this issue.

[happyshows]

cool, look forward to it.

[tcbegley]

There's now nothing blocking these updates, going to open individual issues for the remaining items.

[happyshows]

@tcbegley #136 is also closed, just want to highlight the visibility.

Also, regarding the toggle, is it possible to add below as well
https://getbootstrap.com/docs/4.0/components/buttons/#toggle-states

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

[tcbegley]

Hey @happyshows

The toggle switches are being tracked under #184 now, it will be part of a bigger effort to support custom inputs.

As far as I can tell, the data-toggle attribute isn't supported by reactstrap, which is what we've built dash-bootstrap-components on top of. We might be able build in support for this ourselves, though for now you could achieve the same sort of thing by writing your own callback. Something like

app.layout = dbc.Button("Toggle", id="toggle")

@app.callback(Output("toggle", "active"), [Input("toggle", "n_clicks")])
def set_toggle(n):
    if n:
        # set active if button has been pressed odd number of times
        return n % 2 == 0
    return False

or for the button group

app.layout = dbc.ButtonGroup(
    [
        dbc.Button(label.capitalize(), id=label)
        for label in ["left", "middle", "right"]
    ]
)

@app.callback(
    [Output(label, "active") for label in ["left", "middle", "right"]],
    [Input(label, "n_clicks") for label in ["left", "middle", "right"]],
)
def set_group_toggle(*args):
    ctx = dash.callback_context

    if not ctx.triggered or all(arg is None for arg in args):
        return [False, False, False]

    button_id = ctx.triggered[0]["prop_id"].split(".")[0]

    return [button_id == label for label in ["left", "middle", "right"]]