disabled SegmentedControl options

[petefine]

Fixes #450

As per base mantine, allow adding a disabled state to individual SegmentedControl items.

Enabled by setting disabled on a entry in the data property.

I have zero typescript, javascript or react experience, so feel free to let me know if this is not correctly implemented. To test it, I used the following app:

import dash
import dash_mantine_components as dmc

from dash import Dash, _dash_renderer, Input, Output, dcc, html

_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

app.layout = dmc.MantineProvider(
    [
        dmc.SegmentedControl(
            id="segmented",
            data=[],
        ),
        html.Div("disable options:"),
        dmc.SegmentedControl(
            id="disabler",
            data=[
                "none",
                "a",
                "c",
                "ab",
            ],
            value="none",
        ),
    ]
)


@app.callback(
    Output("segmented", "data"),
    Input("disabler", "value"),
)
def update_disabled(choice):
    options = [
        {"label": "a", "value": "a"},
        {"label": "b", "value": "b"},
        {"label": "c", "value": "c"},
        {"label": "d", "value": "d"},
    ]
    if choice == "none":
        return options
    else:
        for option in options:
            if option["value"] in choice:
                option["disabled"] = True
    return options


if __name__ == "__main__":
    debug = True
    app.run_server(host="0.0.0.0", debug=debug, dev_tools_props_check=True)

If this work is accepted, I am happy to update the docs repository with a similar example if required.

[github-actions]

Generated link: snehilvj/dash-mantine-components-451

[AnnMarieW]

Hi @petefine

Thanks for reporting the issue and the PR! 🏆 :

Your fix works perfectly. Nice sample app too. Here it is hosted on PyCafe

To help chip away at issues #421, could you please update the docstring on line 49 so it has a better description? The Mantine docs describe it as "A linear set of two or more segments", but that's not a great description either. Maybe something like "SegmentedControl is a horizontal selector for choosing one option from multiple segments"

Also to help with issue #364, could you please add this in the /tests folder ?

test_segmented_control.py

from dash import Dash, html, Output, Input, _dash_renderer
import dash_mantine_components as dmc

_dash_renderer._set_react_version("18.2.0")


def test_001se_segmented_control(dash_duo):
    app=Dash()
    app.layout = dmc.MantineProvider(
        [
            dmc.SegmentedControl(
                id="segmented",
                data=[
                    {"label": "a", "value": "a"},
                    {"label": "b", "value": "b", "disabled": True},
                    {"label": "c", "value": "c"},
                ],
                value="a"
            ),
            html.Div(id="output"),
        ]
    )

    @app.callback(
        Output("output", "children"),
        Input("segmented", "value"),
    )
    def update(choice):
        return f"{choice=}"

    dash_duo.start_server(app)


    # Wait for the app to load
    dash_duo.wait_for_text_to_equal("#output", "choice='a'")

    option_b = dash_duo.find_element("input[value='b']")

    # Verify that "b" is disabled
    assert option_b.get_attribute("disabled") == 'true'

    option_c = dash_duo.find_element("input[value='c']").find_element_by_xpath(
        "./.."
    )
    option_c.click()
    dash_duo.wait_for_text_to_equal("#output", "choice='c'")

    assert dash_duo.get_logs() == []

[AnnMarieW]

Awesome!
Let's see if Alex has any comments before merging, but it LGTM 🙂

[petefine]

Great, thanks, having this will be very useful for my project! I have copied the maitine docs for this feature: snehilvj/dmc-docs#121

[alexcjohnson]

💃 Looks great, and thanks for including a test!

[AnnMarieW]

@petefine - Congrats on your first PR in dash-mantine-components 🏆
Thanks for adding this feature