Add missing props

[AnnMarieW]

closes #428

open items for # 428

• added inline prop to Center and updated docstring.
• added allowedInitialsColors to Avatar
• added defaultExpanded to CodeHIghtlight
• added autoComplete to PasswordInput as requested in [Feature Request] Add autoComplete prop to PasswordInput #482

[AnnMarieW]

Here are the examples from the docs

1. dmc.Center(inline=True) Makes it easy to align icons and text

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

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

component = dmc.Box(
    dmc.Anchor(
        href="https://mantine.dev",
        target="_blank",
        children=dmc.Center(
            [
                DashIconify(
                    icon="tabler:arrow-left",  # Use the Tabler Arrow Left icon
                    width=12,
                    height=12,
                ),
                dmc.Box("Back to Mantine website", ml=5),
            ],
            inline=True,
        ),
    )
)

app.layout = dmc.MantineProvider(
    component
)

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

---

2. dmc.Avatar(allowedInitialsColors=["blue", "red"]) Can limit the number of colors to use in Avatar initials

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

app = Dash(external_stylesheets=dmc.styles.ALL)
names = [
  'John Doe',
  'Jane Mol',
  'Alex Lump',
  'Sarah Condor',
  'Mike Johnson',
  'Kate Kok',
  'Tom Smith',
]

component = dmc.Group(
    [dmc.Avatar(name=n, color="initials", allowedInitialsColors=["blue", "red"]) for n in names]
)

app.layout = dmc.MantineProvider(
    component
)

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

[AnnMarieW]

3. Added defaultExpanded prop to `CodeHighlightTabs component. Gives ability to set initial expanded state when the the expand/collapse feature is enabled.

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)


styles_css = """
.dmc-api-demo-root {
  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
  border-radius: var(--mantine-radius-md);
  font-weight: 500;
  cursor: pointer;

  &[data-checked] {
    background-color: var(--mantine-color-blue-filled);
    border-color: var(--mantine-color-blue-filled);
    color: var(--mantine-color-white);
  }
}"""

demo_py = """
import dash_mantine_components as dmc

 dmc.Checkbox(
    classNames={"root": "dmc-api-demo-root"},
    label="Checkbox button",
    w=180
)"""


code = [
    {
        "fileName": "demo.py",
        "code": demo_py,
        "language": "python",
        "icon": DashIconify(icon="vscode-icons:file-type-reactts", width=20),
    },
    {
        "fileName": "styles.css",
        "code":styles_css,
        "language": "css",
        "icon": DashIconify(icon="vscode-icons:file-type-css", width=20),
    },
]

component = dmc.CodeHighlightTabs(
    code=code,
    withExpandButton=True,
    expandCodeLabel="Show full code",
    collapseCodeLabel="Show less",
    defaultExpanded=False,
    maxCollapsedHeight=300
)


app.layout = dmc.MantineProvider(
    component,
    forceColorScheme="light"
)

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

[AnnMarieW]

Added autoComplete prop to PasswordInput

import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output, State
_dash_renderer._set_react_version("18.2.0")

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


app.layout = dmc.MantineProvider(
     dmc.PasswordInput(autoComplete="new-password")    
)

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