Feedback on Dash 4.0.0rc3

[AnnMarieW]

There were big improvements in the latest pre release! (4.0.0rc3)

Here is more feedback for this version:

Input

The Input has a width of 170px, which is too small given the change in font size and format of the input. For example, the type="number" now only displays 10 characters. In the dash 3 version, it displayed about 20 . It would be better to set the width to 100% so it's responsive in the same way as the other components such as TextArea, Dropdown, Slider and Date picker components.

The autoComplete default is on in this version. In V3 it was off, even though the defaultProps for autoComplete was not set. (This might be browser related? I'm using Chrome)

RangeSlider

Responsive behavior works when starting on a large viewport and resizing smaller. However, when the page starts on a small viewport (or after refresh), the mobile layout is not applied. The regular Slider does not have the same issue.

Tabs

The .tabs--selected colors are set as black or white. Using CSS variables (like all the other colors) would make it easier to style - especially for dark mode.

---

To demonstrate, this sample app is a collection of DCC components in a Dash Mantine Components grid layout. (This is similar to a Dash Bootstrap Components layout with Rows and columns)

This app is temporarily hosted on Plotly Cloud: https://dmc-dcc4.plotly.app/

Here are some screen shots. Note that the Inputs are not responsive like the other components, and the RangeSlider issue on the small screen.

Code for this example here

import dash_mantine_components as dmc
from dash import Dash, dcc, html
from dash_iconify import DashIconify

app = Dash()

dcc_components = dmc.SimpleGrid(
cols=4,
spacing="md",
verticalSpacing=25,
style={"alignItems": "flex-start"},
children=[
dcc.Input(placeholder="Text input"),
dcc.Input(
placeholder="Number input",
value=30712,
type="number",
),
dcc.Textarea(
id='textarea-example',
value='Textarea content initialized\nwith multiple lines of text',
),
dcc.Dropdown([f"Option {i}" for i in range(100)], value="Option 1", ),
dcc.DatePickerSingle(placeholder="Pick date"),
dcc.DatePickerRange(),
dcc.Dropdown([f"Option {i}" for i in range(100)], value="Option 1", ),
dcc.Dropdown([f"Option {i}" for i in range(100)], multi=True, value=["Option 0", "Option 1"]),

    dcc.Slider(0, 20, 5, value=10),
    dcc.RangeSlider(0, 100, 5, value=[10, 20]),
    dcc.Checklist(
        ['New York City', 'Montréal', 'San Francisco'],
        ['New York City', 'Montréal']
    ),
    dcc.RadioItems(['New York City', 'Montreal','San Francisco'], 'Montreal'),
]

)

tabs = dcc.Tabs([
dcc.Tab(
label=html.Div([
DashIconify(icon='mdi:home', width=20),
html.Span('Home', style={'marginLeft': '8px'})
], style={'display': 'flex', 'alignItems': 'center'}),
children=[html.Div('Home content')]
),
dcc.Tab(
label=html.Div([
DashIconify(icon='mdi:chart-bar', width=20),
html.Span('Charts', style={'marginLeft': '8px'})
], style={'display': 'flex', 'alignItems': 'center'}),
children=[html.Div('Charts content')]
),
dcc.Tab(
label=html.Div([
DashIconify(icon='mdi:cog', width=20),
html.Span('Settings', style={'marginLeft': '8px'})
], style={'display': 'flex', 'alignItems': 'center'}),
children=[html.Div('Settings content')]
),
], style={"marginTop": 48})

app.layout = dmc.MantineProvider(dmc.Container([
dmc.Title("Dash 4 DCC components with a Mantine Grid layout", order=4, mb="lg"),
dmc.Card(dcc_components, withBorder=True),
tabs
], fluid=True), forceColorScheme="light")

if name == "main":
app.run(debug=True)