chore: add lineSize prop to Burger

[ChinoUkaegbu]

Part of #428

I tried using this code for the example:

import dash
from dash import Dash, Input, Output, callback, html
from dash.exceptions import PreventUpdate

import dash_mantine_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

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

app.layout = dmc.MantineProvider(
    [
        html.Div(
            [dmc.Burger(id="burger-button", opened=False, lineSize="xl"), dmc.Text(id="burger-state", mt="md")]
        )
    ]
)

@callback(Output("burger-state", "children"), Input("burger-button", "opened"))
def is_open(opened):
    return str(opened)

if __name__ == "__main__":
    app.run_server(debug=True)

But I'm getting this error:

[ChinoUkaegbu]

Also kind of related but the example in the README brings up an error until you change DatePicker to DatePickerInput

[AnnMarieW]

Also kind of related but the example in the README brings up an error until you change DatePicker to DatePickerInput

Nice catch - can you please update the README too? 🙏

[ChinoUkaegbu]

Updated! I'm still getting the error though for some reason.

[AnnMarieW]

If you are getting the error, it's probably because it's not using the local build. After installing the requirments.txt be sure to install in editable mode:

pip install -e . 

Then when you do pip list | grep dash it should looks something like:

dash_mantine_components         0.15.0         /path/to/my/dash-mantine-components

[github-actions]

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

[AnnMarieW]

Here's your sample app hosted on PyCafe

Based on the Mantine Docs, the lineSize prop is a number. For example lineSize=5 or as text lineSize="5" but the Mantine named sizes like xl is not valid

[ChinoUkaegbu]

Ah I see, it's working now!

[AnnMarieW]

I added a couple more requests to the issue since you started. Would you be up fo updating the component description and adding a test?
Your sample app would make a nice test. I can help you get started if you like.

[ChinoUkaegbu]

Sure thing! I'm not quite sure how to add the tests though😅

[AnnMarieW]

Cool - check out the Contributing Guide for how to get started with testing, and see if you get get the current tests to run locally.

This test will be very similar to the Popover test

[AnnMarieW]

Hi @ChinoUkaegbu

Just checking in. Let me know if you would like help getting the tests to run locally. If not, to finish up this pr, please add this file to the tests folder

test_burger.py

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

_dash_renderer._set_react_version("18.2.0")


def test_001bu_burger(dash_duo):
    app = Dash(__name__)

    app.layout = dmc.MantineProvider(
        html.Div(
            [dmc.Burger(id="burger-button", opened=False, lineSize=2, ), dmc.Text(id="burger-state", mt="md")]
        )
    )

    @callback(Output("burger-state", "children"), Input("burger-button", "opened"))
    def is_open(opened):
        return str(opened)

    dash_duo.start_server(app)

    # Wait for the app to load
    dash_duo.wait_for_text_to_equal("#burger-state", "False")

    # Open Burger
    burger = dash_duo.find_element("#burger-button")
    burger.click()

    # Verify the Burger opens when clicking the button
    dash_duo.wait_for_text_to_equal("#burger-state", "True")

    # Close Popover
    burger.click()

    # Verify the Burger closes when clicked again
    dash_duo.wait_for_text_to_equal("#burger-state", "False")

    assert dash_duo.get_logs() == []

[ChinoUkaegbu]

Hi! Sorry, I did run into some errors installing ChromeDriver and never got round to resolving it. I've added the test file!

[alexcjohnson]

As @AnnMarieW commented:

Based on the Mantine Docs, the lineSize prop is a number. For example lineSize=5 or as text lineSize="5" but the Mantine named sizes like xl is not valid

If named sizes like xl are in fact valid, let's put one in the test. If not, let's remove string | here.

[AnnMarieW]

It doesn't work with the named sizes. I tried it in a code sandbox with the Mantine react component too, and it can either be lineSize={5} or lineSize="5" but nothing renders if you do lineSize="sm"

@ChinoUkaegbu would you like to update to the prop so it's just

 lineSize?: number;