Camel case class name

docs/components_page/__init__.py

@@ -3,42 +3,9 @@
 
 import dash
 import dash_bootstrap_components as dbc
-from dash import dcc, html
+from dash import html
 from jinja2 import Environment, FileSystemLoader
 
-
-# TODO: delete once Dash 2.0 is released
-def class_name_shim(fn):
-    def new_init(self, *args, **kwargs):
-        kwargs["className"] = kwargs.get("class_name", kwargs.get("className"))
-        return fn(
-            self,
-            *args,
-            **{k: v for k, v in kwargs.items() if k != "class_name"},
-        )
-
-    return new_init
-
-
-for component in [
-    dcc.Markdown,
-    html.A,
-    html.Blockquote,
-    html.Div,
-    html.H1,
-    html.H2,
-    html.H3,
-    html.H4,
-    html.H5,
-    html.H6,
-    html.Hr,
-    html.I,
-    html.P,
-    html.Small,
-]:
-    component.__init__ = class_name_shim(component.__init__)
-
-
 from .components.table.simple import table_body, table_header  # noqa
 from .components.tabs.simple import tab1_content, tab2_content  # noqa
 from .markdown_parser import parse  # noqa
@@ -195,11 +162,11 @@ def register_apps():
 
         if slug == "layout":
             app.layout = html.Div(
-                parse(app, **kwargs), class_name="layout-demo"
+                parse(app, **kwargs), className="layout-demo"
             )
         elif slug == "button_group":
             app.layout = html.Div(
-                parse(app, **kwargs), class_name="button-group-demo"
+                parse(app, **kwargs), className="button-group-demo"
             )
         else:
             app.layout = parse(app, **kwargs)

docs/components_page/components/__tests__/helpers.py

@@ -8,13 +8,7 @@ def py_source_to_app(py_source, env):
     Create a Dash app from a string defining the app.
     """
     env = env or {}
-    # TODO: remove class_name modifiers
-    exec(
-        py_source.replace("class_name", "className").replace(
-            "_className", "_class_name"
-        ),
-        env,
-    )
+    exec(py_source, env)
     return env["app"]
 
 
@@ -61,27 +55,19 @@ def load_r_app(path, component_name, extra_args=""):
     snippet = path.read_text()
     if extra_args:
         snippet = f"{extra_args}\n{snippet}"
-    return (
-        R_WRAPPER.format(
-            snippet=snippet,
-            components=component_name,
-            port=8050,
-        )
-        .replace("class_name", "className")
-        .replace("_className", "_class_name")
-    )  # TODO: remove this in future
+    return R_WRAPPER.format(
+        snippet=snippet,
+        components=component_name,
+        port=8050,
+    )
 
 
 def load_jl_app(path, component_name, extra_args=""):
     snippet = path.read_text()
     if extra_args:
         snippet = f"{extra_args}\n{snippet}"
-    return (
-        JL_WRAPPER.format(
-            snippet=snippet,
-            components=component_name,
-            port=8050,
-        )
-        .replace("class_name", "className")
-        .replace("_className", "_class_name")
-    )  # TODO: remove this in future
+    return JL_WRAPPER.format(
+        snippet=snippet,
+        components=component_name,
+        port=8050,
+    )

docs/components_page/components/__tests__/test_snippets.py

@@ -141,8 +141,6 @@ def assert_layouts_equal(
             components=", ".join(x[2] for x in compare),
             port=port,
         )
-        .replace("class_name", "className")
-        .replace("_className", "_class_name")  # TODO: remove
     )
     layout = requests.get(f"{runner.url}/_dash-layout").json()
 

docs/components_page/components/__tests__/test_tabs.py

@@ -23,7 +23,6 @@ def test_jl_tabs_card(dashjl):
 
 
 def check_tabs_card_callbacks(runner):
-
     tab_links = runner.find_elements("#card-tabs > div.nav-item > a.nav-link")
     wait.until(lambda: tab_links[1].text == "Tab 2", timeout=4)
 
@@ -43,45 +42,44 @@ def check_tabs_card_callbacks(runner):
 tab1_content <- dbcCard(
     dbcCardBody(
         list(
-            htmlP("This is tab 1!", class_name = "card-text"),
+            htmlP("This is tab 1!", className = "card-text"),
             dbcButton("Click here", color = "success")
         )
     ),
-    class_name = "mt-3"
+    className = "mt-3"
 )
 
 tab2_content <- dbcCard(
     dbcCardBody(
         list(
-            htmlP("This is tab 2!", class_name = "card-text"),
+            htmlP("This is tab 2!", className = "card-text"),
             dbcButton("Don't click here", color = "danger")
         )
     ),
-    class_name = "mt-3",
+    className = "mt-3",
 )
 """
 
 active_tab_content_jl = """
 tab1_content = dbc_card(
     dbc_cardbody([
-        html_p("This is tab 1!", class_name="card-text"),
+        html_p("This is tab 1!", className="card-text"),
         dbc_button("Click here", color="success"),
     ]),
-    class_name="mt-3",
+    className="mt-3",
 );
 
 tab2_content = dbc_card(
     dbc_cardbody([
-        html_p("This is tab 2!", class_name="card-text"),
+        html_p("This is tab 2!", className="card-text"),
         dbc_button("Don't click here", color="danger"),
     ]),
-    class_name="mt-3",
+    className="mt-3",
 );
 """
 
 
 def test_r_tabs_active_tab(dashr):
-
     r_app = load_r_app(
         (HERE.parent / "tabs" / "active_tab.R"),
         "tabs",
@@ -92,7 +90,6 @@ def test_r_tabs_active_tab(dashr):
 
 
 def test_jl_tabs_active_tab(dashjl):
-
     jl_app = load_jl_app(
         (HERE.parent / "tabs" / "active_tab.jl"),
         "tabs",
@@ -103,7 +100,6 @@ def test_jl_tabs_active_tab(dashjl):
 
 
 def check_tabs_active_tab_callbacks(runner):
-
     # Get julia to wait until it's loaded
     wait.until(lambda: len(runner.find_elements(".card")) > 0, timeout=4)
 

docs/components_page/components/accordion/callback.R

@@ -25,7 +25,7 @@ accordion <- htmlDiv(
       id = "accordion",
       active_item = "item-1"
     ),
-    htmlDiv(id = "accordion-contents", class_name = "mt-3")
+    htmlDiv(id = "accordion-contents", className = "mt-3")
   )
 )
 

docs/components_page/components/accordion/callback.jl

@@ -22,7 +22,7 @@ accordion = html_div([
         id = "accordion",
         active_item = "item-1",
     ),
-    html_div(id = "accordion-contents", class_name = "mt-3"),
+    html_div(id = "accordion-contents", className = "mt-3"),
 ])
 
 

docs/components_page/components/accordion/callback.py

@@ -24,7 +24,7 @@
             id="accordion",
             active_item="item-1",
         ),
-        html.Div(id="accordion-contents", class_name="mt-3"),
+        html.Div(id="accordion-contents", className="mt-3"),
     ]
 )
 

docs/components_page/components/alert/auto_dismiss.R

@@ -4,7 +4,7 @@ library(dashHtmlComponents)
 alert <- htmlDiv(
   list(
     dbcButton("Toggle",
-      id = "alert-toggle-auto", class_name = "me-1",
+      id = "alert-toggle-auto", className = "me-1",
       n_clicks = 0
     ),
     htmlHr(),

docs/components_page/components/alert/auto_dismiss.jl

@@ -1,7 +1,7 @@
 using DashBootstrapComponents, DashHtmlComponents
 
 alert = html_div([
-    dbc_button("Toggle", id = "alert-toggle-auto", class_name = "me-1", n_clicks = 0),
+    dbc_button("Toggle", id = "alert-toggle-auto", className = "me-1", n_clicks = 0),
     html_hr(),
     dbc_alert(
         "Hello! I am an auto-dismissing alert!",

docs/components_page/components/alert/auto_dismiss.py

@@ -4,7 +4,7 @@
 alert = html.Div(
     [
         dbc.Button(
-            "Toggle", id="alert-toggle-auto", class_name="me-1", n_clicks=0
+            "Toggle", id="alert-toggle-auto", className="me-1", n_clicks=0
         ),
         html.Hr(),
         dbc.Alert(

docs/components_page/components/alert/content.R

@@ -3,7 +3,7 @@ library(dashHtmlComponents)
 
 alert <- dbcAlert(
   list(
-    htmlH4("Well done!", class_name = "alert-heading"),
+    htmlH4("Well done!", className = "alert-heading"),
     htmlP(
       paste(
         "This is a success alert with loads of extra text in it. So much",
@@ -14,7 +14,7 @@ alert <- dbcAlert(
     htmlHr(),
     htmlP(
       "Let's put some more text down here, but remove the bottom margin",
-      class_name = "mb-0",
+      className = "mb-0",
     )
   )
 )

docs/components_page/components/alert/content.jl

@@ -1,7 +1,7 @@
 using DashBootstrapComponents, DashHtmlComponents
 
 alert = dbc_alert([
-    html_h4("Well done!", class_name = "alert-heading"),
+    html_h4("Well done!", className = "alert-heading"),
     html_p(
         "This is a success alert with loads of extra text in it. So much " *
         "that you can see how spacing within an alert works with this " *
@@ -10,6 +10,6 @@ alert = dbc_alert([
     html_hr(),
     html_p(
         "Let's put some more text down here, but remove the bottom margin",
-        class_name = "mb-0",
+        className = "mb-0",
     ),
 ]);

docs/components_page/components/alert/content.py

@@ -3,7 +3,7 @@
 
 alert = dbc.Alert(
     [
-        html.H4("Well done!", class_name="alert-heading"),
+        html.H4("Well done!", className="alert-heading"),
         html.P(
             "This is a success alert with loads of extra text in it. So much "
             "that you can see how spacing within an alert works with this "
@@ -12,7 +12,7 @@
         html.Hr(),
         html.P(
             "Let's put some more text down here, but remove the bottom margin",
-            class_name="mb-0",
+            className="mb-0",
         ),
     ]
 )

docs/components_page/components/alert/dismiss.R

@@ -6,7 +6,7 @@ alert <- htmlDiv(
     dbcButton(
       "Toggle alert with fade",
       id = "alert-toggle-fade", n_clicks = 0,
-      class_name = "me-1"
+      className = "me-1"
     ),
     dbcButton("Toggle alert without fade",
       id = "alert-toggle-no-fade",

docs/components_page/components/alert/dismiss.jl

@@ -4,7 +4,7 @@ alert = html_div([
     dbc_button(
         "Toggle alert with fade",
         id = "alert-toggle-fade",
-        class_name = "me-1",
+        className = "me-1",
         n_clicks = 0,
     ),
     dbc_button("Toggle alert without fade", id = "alert-toggle-no-fade", n_clicks = 0),

docs/components_page/components/alert/dismiss.py

@@ -6,7 +6,7 @@
         dbc.Button(
             "Toggle alert with fade",
             id="alert-toggle-fade",
-            class_name="me-1",
+            className="me-1",
             n_clicks=0,
         ),
         dbc.Button(

docs/components_page/components/alert/icon.R

@@ -5,35 +5,35 @@ alerts <- htmlDiv(
   list(
     dbcAlert(
       list(
-        htmlI(class_name = "bi bi-info-circle-fill me-2"),
+        htmlI(className = "bi bi-info-circle-fill me-2"),
         "An example info alert with an icon"
       ),
       color = "info",
-      class_name = "d-flex align-items-center"
+      className = "d-flex align-items-center"
     ),
     dbcAlert(
       list(
-        htmlI(class_name = "bi bi-check-circle-fill me-2"),
+        htmlI(className = "bi bi-check-circle-fill me-2"),
         "An example success alert with an icon"
       ),
       color = "success",
-      class_name = "d-flex align-items-center"
+      className = "d-flex align-items-center"
     ),
     dbcAlert(
       list(
-        htmlI(class_name = "bi bi-exclamation-triangle-fill me-2"),
+        htmlI(className = "bi bi-exclamation-triangle-fill me-2"),
         "An example warning alert with an icon"
       ),
       color = "warning",
-      class_name = "d-flex align-items-center"
+      className = "d-flex align-items-center"
     ),
     dbcAlert(
       list(
-        htmlI(class_name = "bi bi-x-octagon-fill me-2"),
+        htmlI(className = "bi bi-x-octagon-fill me-2"),
         "An example danger alert with an icon"
       ),
       color = "danger",
-      class_name = "d-flex align-items-center"
+      className = "d-flex align-items-center"
     )
   )
 )