Camel case class name (#684)

* Fix formatting

* Use className in docs and examples

Author: tcbegley

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(