Minor clean-up and change Theme explorer class_name to className

docs/components_page/components/layout/order_offset.R

@@ -21,7 +21,7 @@ row <- htmlDiv(
         ),
         dbcCol(
           htmlDiv("The second of three columns"),
-          width = list(size = 3, order = 12)
+          width = list(size = 3, order = 5)
         )
       )
     )

docs/components_page/components/layout/order_offset.jl

@@ -18,7 +18,7 @@ row = html_div([
         ),
         dbc_col(
             html_div("The second of three columns"),
-            width = Dict("size" => 3, "order" => 12),
+            width = Dict("size" => 3, "order" => 5),
         ),
     ]),
 ]);

docs/components_page/components/layout/order_offset.py

@@ -21,7 +21,7 @@
                 ),
                 dbc.Col(
                     html.Div("The second of three columns"),
-                    width={"size": 3, "order": 12},
+                    width={"size": 3, "order": 5},
                 ),
             ]
         ),

docs/components_page/markdown_parser.py

@@ -35,7 +35,7 @@ def parse(app, markdown_path, extra_env_vars=None):
 
     content = [
         html.H1(meta["title"][0]),
-        html.Div(dcc.Markdown(meta["lead"][0]), class_name="lead"),
+        html.Div(dcc.Markdown(meta["lead"][0]), className="lead"),
     ]
 
     raw = HEADER_PATTERN.sub("", raw).strip()
@@ -96,7 +96,7 @@ def _parse_code_example(data):
     source = (HERE / source_path).read_text().strip()
     return html.Div(
         dcc.Markdown(f"```{language}\n{source}\n```"),
-        class_name="source-container",
+        className="source-container",
     )
 
 
@@ -139,4 +139,4 @@ def component_reference(component_name):
     docs = docs.replace("\n-", "\n")
 
     return_div.append(dcc.Markdown(docs))
-    return html.Div(return_div, class_name="reference")
+    return html.Div(return_div, className="reference")

docs/content/docs/quickstart.md

@@ -74,7 +74,7 @@ _dash-bootstrap-components_ is a component library for use with Plotly Dash. If
 
 To use _dash-bootstrap-components_ you must do two things:
 
-- Link a Bootstrap v4 compatible stylesheet
+- Link a Bootstrap v5 compatible stylesheet
 - Incorporate _dash-bootstrap-components_ into the layout of your app.
 
 ### Linking a stylesheet

docs/content/docs/themes.md

@@ -115,7 +115,7 @@ The easiest way to link a local stylesheet is to place it in a folder named `ass
 
 There are numerous free to use Bootstrap stylesheets available on the web. The `dash_bootstrap_components.themes` module contains CDN links for Bootstrap and all of the [Bootswatch themes][bootswatch-themes]. Bootstrap also maintains its own [themes website][bootstrap-themes] which lists a number of free and premium themes that you could incorporate into your apps.
 
-To start with, we recommend experimenting with some of the Bootswatch themes available in the `dash_bootstrap_components.themes` module. The full list of available themes is [`CERULEAN`](https://bootswatch.com/cerulean/), [`COSMO`](https://bootswatch.com/cosmo/), [`CYBORG`](https://bootswatch.com/cyborg/), [`DARKLY`](https://bootswatch.com/darkly/), [`FLATLY`](https://bootswatch.com/flatly/), [`JOURNAL`](https://bootswatch.com/journal/), [`LITERA`](https://bootswatch.com/litera/), [`LUMEN`](https://bootswatch.com/lumen/), [`LUX`](https://bootswatch.com/lux/), [`MATERIA`](https://bootswatch.com/materia/), [`MINTY`](https://bootswatch.com/minty/), [`PULSE`](https://bootswatch.com/pulse/), [`SANDSTONE`](https://bootswatch.com/sandstone/), [`SIMPLEX`](https://bootswatch.com/simplex/), [`SKETCHY`](https://bootswatch.com/sketchy/), [`SLATE`](https://bootswatch.com/slate/), [`SOLAR`](https://bootswatch.com/solar/), [`SPACELAB`](https://bootswatch.com/spacelab/), [`SUPERHERO`](https://bootswatch.com/superhero/), [`UNITED`](https://bootswatch.com/united/), [`YETI`](https://bootswatch.com/yeti/).
+To start with, we recommend experimenting with some of the Bootswatch themes available in the `dash_bootstrap_components.themes` module. The full list of available themes is [`CERULEAN`](https://bootswatch.com/cerulean/), [`COSMO`](https://bootswatch.com/cosmo/), [`CYBORG`](https://bootswatch.com/cyborg/), [`DARKLY`](https://bootswatch.com/darkly/), [`FLATLY`](https://bootswatch.com/flatly/), [`JOURNAL`](https://bootswatch.com/journal/), [`LITERA`](https://bootswatch.com/litera/), [`LUMEN`](https://bootswatch.com/lumen/), [`LUX`](https://bootswatch.com/lux/), [`MATERIA`](https://bootswatch.com/materia/), [`MINTY`](https://bootswatch.com/minty/), [`MORPH`](https://bootswatch.com/morph/), [`PULSE`](https://bootswatch.com/pulse/), [`SANDSTONE`](https://bootswatch.com/sandstone/), [`SIMPLEX`](https://bootswatch.com/simplex/), [`SKETCHY`](https://bootswatch.com/sketchy/), [`SLATE`](https://bootswatch.com/slate/), [`SOLAR`](https://bootswatch.com/solar/), [`SPACELAB`](https://bootswatch.com/spacelab/), [`SUPERHERO`](https://bootswatch.com/superhero/), [`UNITED`](https://bootswatch.com/united/), [`VAPOR`](https://bootswatch.com/vapor/), [`YETI`](https://bootswatch.com/yeti/), [`ZEPHYR`](https://bootswatch.com/zephyr/).
 
 Check out the [theme explorer](/docs/themes/explorer/) for a live demo of dash-bootstrap-components using all of the different available themes. You may also like to check out the [dash-bootstrap-css](https://github.com/tcbegley/dash-bootstrap-css) project which contains Bootstrap stylesheets that apply consistent styling to various components from dash-core-components.
 

docs/demos/demo_layout.py

@@ -54,7 +54,7 @@
             ]
         )
     ],
-    class_name="mt-4",
+    className="mt-4",
 )
 
 _layout = html.Div([_navbar, _body])

docs/demos/theme_explorer/__init__.py

@@ -57,7 +57,7 @@
         tooltip,
     ],
     fluid=True,
-    class_name="px-4",
+    className="px-4",
 )
 
 

docs/demos/theme_explorer/alert.py

@@ -27,5 +27,5 @@
 
 alerts = html.Div(
     [make_subheading("Alert", "alert"), dbc.Row([alerts1, alerts2])],
-    class_name="mb-4",
+    className="mb-4",
 )

docs/demos/theme_explorer/badge.py

@@ -5,34 +5,32 @@
 
 badge = html.Div(
     [
-        dbc.Badge("Primary", color="primary", class_name="me-1"),
-        dbc.Badge("Secondary", color="secondary", class_name="me-1"),
-        dbc.Badge("Success", color="success", class_name="me-1"),
-        dbc.Badge("Warning", color="warning", class_name="me-1"),
-        dbc.Badge("Danger", color="danger", class_name="me-1"),
-        dbc.Badge("Info", color="info", class_name="me-1"),
-        dbc.Badge("Light", color="light", class_name="me-1"),
+        dbc.Badge("Primary", color="primary", className="me-1"),
+        dbc.Badge("Secondary", color="secondary", className="me-1"),
+        dbc.Badge("Success", color="success", className="me-1"),
+        dbc.Badge("Warning", color="warning", className="me-1"),
+        dbc.Badge("Danger", color="danger", className="me-1"),
+        dbc.Badge("Info", color="info", className="me-1"),
+        dbc.Badge("Light", color="light", className="me-1"),
         dbc.Badge("Dark", color="dark"),
     ],
-    class_name="mb-2",
+    className="mb-2",
 )
 
 badge_pills = html.Div(
     [
-        dbc.Badge("Primary", color="primary", class_name="me-1", pill=True),
-        dbc.Badge(
-            "Secondary", color="secondary", class_name="me-1", pill=True
-        ),
-        dbc.Badge("Success", color="success", class_name="me-1", pill=True),
-        dbc.Badge("Warning", color="warning", class_name="me-1", pill=True),
-        dbc.Badge("Danger", color="danger", class_name="me-1", pill=True),
-        dbc.Badge("Info", color="info", class_name="me-1", pill=True),
-        dbc.Badge("Light", color="light", class_name="me-1", pill=True),
+        dbc.Badge("Primary", color="primary", className="me-1", pill=True),
+        dbc.Badge("Secondary", color="secondary", className="me-1", pill=True),
+        dbc.Badge("Success", color="success", className="me-1", pill=True),
+        dbc.Badge("Warning", color="warning", className="me-1", pill=True),
+        dbc.Badge("Danger", color="danger", className="me-1", pill=True),
+        dbc.Badge("Info", color="info", className="me-1", pill=True),
+        dbc.Badge("Light", color="light", className="me-1", pill=True),
         dbc.Badge("Dark", color="dark", pill=True),
     ],
 )
 
 badges = html.Div(
     [make_subheading("Badge", "badge"), badge, badge_pills],
-    class_name="mb-4",
+    className="mb-4",
 )

docs/demos/theme_explorer/button.py

@@ -8,80 +8,80 @@
         make_subheading("Button", "button"),
         html.Div(
             [
-                dbc.Button("Primary", color="primary", class_name="me-1 mt-1"),
+                dbc.Button("Primary", color="primary", className="me-1 mt-1"),
                 dbc.Button(
-                    "Secondary", color="secondary", class_name="me-1 mt-1"
+                    "Secondary", color="secondary", className="me-1 mt-1"
                 ),
-                dbc.Button("Success", color="success", class_name="me-1 mt-1"),
-                dbc.Button("Warning", color="warning", class_name="me-1 mt-1"),
-                dbc.Button("Danger", color="danger", class_name="me-1 mt-1"),
-                dbc.Button("Info", color="info", class_name="me-1 mt-1"),
+                dbc.Button("Success", color="success", className="me-1 mt-1"),
+                dbc.Button("Warning", color="warning", className="me-1 mt-1"),
+                dbc.Button("Danger", color="danger", className="me-1 mt-1"),
+                dbc.Button("Info", color="info", className="me-1 mt-1"),
             ],
-            class_name="mb-2",
+            className="mb-2",
         ),
         html.Div(
             [
                 dbc.Button(
                     "Primary",
                     outline=True,
                     color="primary",
-                    class_name="me-1 mt-1",
+                    className="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Secondary",
                     outline=True,
                     color="secondary",
-                    class_name="me-1 mt-1",
+                    className="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Success",
                     outline=True,
                     color="success",
-                    class_name="me-1 mt-1",
+                    className="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Warning",
                     outline=True,
                     color="warning",
-                    class_name="me-1 mt-1",
+                    className="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Danger",
                     outline=True,
                     color="danger",
-                    class_name="me-1 mt-1",
+                    className="me-1 mt-1",
                 ),
                 dbc.Button(
-                    "Info", outline=True, color="info", class_name="me-1 mt-1"
+                    "Info", outline=True, color="info", className="me-1 mt-1"
                 ),
             ],
-            class_name="mb-2",
+            className="mb-2",
         ),
         html.Div(
             [
-                dbc.Button("Regular", color="primary", class_name="me-1 mt-1"),
+                dbc.Button("Regular", color="primary", className="me-1 mt-1"),
                 dbc.Button(
                     "Active",
                     color="primary",
                     active=True,
-                    class_name="me-1 mt-1",
+                    className="me-1 mt-1",
                 ),
                 dbc.Button(
                     "Disabled",
                     color="primary",
                     disabled=True,
-                    class_name="me-1 mt-1",
+                    className="me-1 mt-1",
                 ),
             ],
-            class_name="mb-2",
+            className="mb-2",
         ),
         html.Div(
             [
-                dbc.Button("Large button", size="lg", class_name="me-1 mt-1"),
-                dbc.Button("Regular button", class_name="me-1 mt-1"),
-                dbc.Button("Small button", size="sm", class_name="me-1 mt-1"),
+                dbc.Button("Large button", size="lg", className="me-1 mt-1"),
+                dbc.Button("Regular button", className="me-1 mt-1"),
+                dbc.Button("Small button", size="sm", className="me-1 mt-1"),
             ],
-            class_name="mb-2",
+            className="mb-2",
         ),
     ],
     lg=6,
@@ -99,7 +99,7 @@
                     dbc.Button("Danger", color="danger"),
                 ]
             ),
-            class_name="mb-2",
+            className="mb-2",
         ),
         html.Div(
             dbc.ButtonGroup(
@@ -117,11 +117,11 @@
                 ],
                 vertical=True,
             ),
-            class_name="mb-2",
+            className="mb-2",
         ),
     ],
     lg=6,
     xs=12,
 )
 
-buttons = dbc.Row([buttons1, buttons2], class_name="mb-4")
+buttons = dbc.Row([buttons1, buttons2], className="mb-4")

docs/demos/theme_explorer/card.py

@@ -15,11 +15,9 @@
                             [
                                 html.H5(
                                     "This card has a title",
-                                    class_name="card-title",
-                                ),
-                                html.P(
-                                    "And some text", class_name="card-text"
+                                    className="card-title",
                                 ),
+                                html.P("And some text", className="card-text"),
                             ]
                         ),
                     ]
@@ -30,11 +28,11 @@
                             [
                                 html.H5(
                                     "This card has a title",
-                                    class_name="card-title",
+                                    className="card-title",
                                 ),
                                 html.P(
                                     "and some text, but no header",
-                                    class_name="card-text",
+                                    className="card-text",
                                 ),
                             ]
                         )
@@ -48,11 +46,11 @@
                             [
                                 html.H5(
                                     "This card has a title",
-                                    class_name="card-title",
+                                    className="card-title",
                                 ),
                                 html.P(
                                     "and some text, and a footer!",
-                                    class_name="card-text",
+                                    className="card-text",
                                 ),
                             ]
                         ),
@@ -64,5 +62,5 @@
             ]
         ),
     ],
-    class_name="mb-4",
+    className="mb-4",
 )

docs/demos/theme_explorer/collapse.py

@@ -9,7 +9,7 @@
         html.Div(
             [
                 dbc.Button(
-                    "Open collapse", id="collapse-button", class_name="mb-2"
+                    "Open collapse", id="collapse-button", className="mb-2"
                 ),
                 dbc.Collapse(
                     dbc.Card(
@@ -20,5 +20,5 @@
             ]
         ),
     ],
-    class_name="mb-4",
+    className="mb-4",
 )

docs/demos/theme_explorer/fade.py

@@ -18,7 +18,7 @@
                         dbc.CardBody(
                             html.P(
                                 "This content fades in and out",
-                                class_name="card-text",
+                                className="card-text",
                             )
                         )
                     ),

docs/demos/theme_explorer/form.py

@@ -21,7 +21,7 @@
                                 html.A(
                                     "Click here.",
                                     href="#",
-                                    class_name="text-muted",
+                                    className="text-muted",
                                     style={"textDecoration": "underline"},
                                 ),
                             ]
@@ -41,7 +41,7 @@
                                 html.A(
                                     "Click here.",
                                     href="#",
-                                    class_name="text-muted",
+                                    className="text-muted",
                                     style={"textDecoration": "underline"},
                                 ),
                             ]
@@ -51,5 +51,5 @@
             ]
         ),
     ],
-    class_name="mb-4",
+    className="mb-4",
 )