fix closeButtonProps and clearButtonProps

[AnnMarieW]

closes #492

• fix modal closeButtonProps
• fix clearButtonProps

sample app on PyCafe

[github-actions]

Test Environment for snehilvj/dash-mantine-components-493
Updated on: 2025-01-28 20:58:10 UTC

[AnnMarieW]

Here's a minimal example for the modal:

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

from dash_iconify import DashIconify
_dash_renderer._set_react_version("18.2.0")

app = Dash(__name__)

component = html.Div(
    [
        dmc.Button("Open Modal", id="modal-demo-button"),
        dmc.Modal(
            title="New Modal",
            id="modal-simple",
            closeButtonProps={
                "children": html.Div(" close", id="my-component"),
                "icon": DashIconify(icon="radix-icons:cross-circled", color="red"),
                "style": {"width": 60},
            },
            children=[
                dmc.Text("I am in a modal component."),
            ],
        ),
    ]
)

app.layout = dmc.MantineProvider(component)

@callback(
    Output("modal-simple", "opened"),
    Input("modal-demo-button", "n_clicks"),
    State("modal-simple", "opened"),
    prevent_initial_call=True,
)
def modal_demo(nc1, opened):
    return not opened


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

Here's an example showing that you can set an icon and children to component. Not that typically the children should not be used except for adding labels for screen readers.

https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/CloseButton/CloseButton.tsx#L40

import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Dash, _dash_renderer
_dash_renderer._set_react_version("18.2.0")

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

component = dmc.DatePickerInput(
    label="Date clearable",
    value="2025-01-01",
    w=300,
    clearable=True,
    clearButtonProps={
        "children" : dmc.Text("C"),
        "icon": DashIconify(icon="radix-icons:cross-circled", color="red", width=30),
        "size": 24
    }
)

app.layout = dmc.MantineProvider(
    component
)

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

[alexcjohnson]

Clear buttons still have a default "close" icon?

[AnnMarieW]

I'm kinda guessing on the clear button props because they aren't listed in their docs

https://mantine.dev/core/input/#inputclearbutton-component
https://mantine.dev/core/input/?t=props

Looking at their source code, it looks like they are taking the CloseButton and just updating it for the calculated size:
https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/components/Input/InputClearButton/InputClearButton.tsx

[alexcjohnson]

💃