v1

.github/workflows/tests.yml

@@ -51,7 +51,7 @@ jobs:
     strategy:
       max-parallel: 6
       matrix:
-        python-version: [2.7, 3.5, 3.6, 3.7, 3.8, 3.9]
+        python-version: [3.6, 3.7, 3.8, 3.9]
     services:
       hub:
         image: selenium/hub:3.141.59-gold

.gitignore

@@ -30,9 +30,10 @@ docs/examples/vendor
 # R build artifacts
 inst
 man
-R
+R/*
 DESCRIPTION
 NAMESPACE
+!R/icons.R
 !R/themes.R
 
 # Julia build artifacts

R/icons.R

@@ -0,0 +1,5 @@
+#' @export'
+dbcIcons <- list(
+  BOOTSTRAP = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css",
+  FONT_AWESOME = "https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+)

R/themes.R

@@ -1,12 +1,12 @@
 .prependBootswatch <- function(suffix) {
-  BOOTSWATCH_BASE <- "https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/"
+  BOOTSWATCH_BASE <- "https://cdn.jsdelivr.net/npm/bootswatch@5.1.0/dist/"
   return(paste(BOOTSWATCH_BASE, suffix, sep=""))
 }
 
 #' @export'
 dbcThemes <- list(
-  BOOTSTRAP = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css",
-  GRID = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css",
+  BOOTSTRAP = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css",
+  GRID = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap-grid.min.css",
   CERULEAN = .prependBootswatch("cerulean/bootstrap.min.css"),
   COSMO = .prependBootswatch("cosmo/bootstrap.min.css"),
   CYBORG = .prependBootswatch("cyborg/bootstrap.min.css"),
@@ -18,7 +18,9 @@ dbcThemes <- list(
   LUX = .prependBootswatch("lux/bootstrap.min.css"),
   MATERIA = .prependBootswatch("materia/bootstrap.min.css"),
   MINTY = .prependBootswatch("minty/bootstrap.min.css"),
+  MORPH = .prependBootswatch("morph/bootstrap.min.css"),
   PULSE = .prependBootswatch("pulse/bootstrap.min.css"),
+  QUARTZ = .prependBootswatch("quartz/bootstrap.min.css"),
   SANDSTONE = .prependBootswatch("sandstone/bootstrap.min.css"),
   SIMPLEX = .prependBootswatch("simplex/bootstrap.min.css"),
   SKETCHY = .prependBootswatch("sketchy/bootstrap.min.css"),
@@ -27,5 +29,7 @@ dbcThemes <- list(
   SPACELAB = .prependBootswatch("spacelab/bootstrap.min.css"),
   SUPERHERO = .prependBootswatch("superhero/bootstrap.min.css"),
   UNITED = .prependBootswatch("united/bootstrap.min.css"),
-  YETI = .prependBootswatch("yeti/bootstrap.min.css")
+  VAPOR = .prependBootswatch("vapor/bootstrap.min.css"),
+  YETI = .prependBootswatch("yeti/bootstrap.min.css"),
+  ZEPHYR = .prependBootswatch("zephyr/bootstrap.min.css")
 )

dash_bootstrap_components/__init__.py

@@ -2,6 +2,7 @@
 import os
 import sys
 
+from dash_bootstrap_components import icons  # noqa
 from dash_bootstrap_components import themes  # noqa
 from dash_bootstrap_components import _components
 from dash_bootstrap_components._components import *  # noqa
@@ -37,47 +38,3 @@
 sys.modules[__name__].Table.from_dataframe = classmethod(
     _generate_table_from_df
 )
-
-
-# DatePicker deprecation warnings
-class DatePickerSingle(object):
-    def __init__(self, *args, **kwargs):
-        raise AttributeError(
-            "DatePickerSingle has been removed from dash-bootstrap-components."
-            " Use DatePickerSingle from dash-core-components instead."
-        )
-
-
-class DatePickerRange(object):
-    def __init__(self, *args, **kwargs):
-        raise AttributeError(
-            "DatePickerRange has been removed from dash-bootstrap-components. "
-            "Use DatePickerRange from dash-core-components instead."
-        )
-
-
-class CardTitle(object):
-    def __init__(self, *args, **kwargs):
-        raise AttributeError(
-            "CardTitle has been removed from dash-bootstrap-components. Set "
-            "className='card-title' on a html.H* component instead. CardTitle "
-            "originally used H5."
-        )
-
-
-class CardSubtitle(object):
-    def __init__(self, *args, **kwargs):
-        raise AttributeError(
-            "CardSubtitle has been removed from dash-bootstrap-components. "
-            "Set className='card-subtitle' on a html.H* component instead. "
-            "CardSubtitle originally used H6."
-        )
-
-
-class CardText(object):
-    def __init__(self, *args, **kwargs):
-        raise AttributeError(
-            "CardText has been removed from dash-bootstrap-components. Set "
-            "className='card-text' on a html component such as Div, or P "
-            "instead. CardText originally used P."
-        )

dash_bootstrap_components/_table.py

@@ -2,7 +2,7 @@
 from itertools import groupby
 from operator import add
 
-import dash_html_components as html
+from dash import html
 
 
 def _generate_table_from_df(

dash_bootstrap_components/icons.py

@@ -0,0 +1,5 @@
+BOOTSTRAP = (
+    "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/"
+    "font/bootstrap-icons.css"
+)
+FONT_AWESOME = "https://use.fontawesome.com/releases/v5.15.4/css/all.css"

dash_bootstrap_components/themes.py

@@ -1,10 +1,10 @@
 BOOTSTRAP = (
-    "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+    "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
 )
 
-GRID = "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap-grid.min.css"  # noqa
+GRID = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap-grid.min.css"  # noqa
 
-_BOOTSWATCH_BASE = "https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/"
+_BOOTSWATCH_BASE = "https://cdn.jsdelivr.net/npm/bootswatch@5.1.0/dist/"
 
 CERULEAN = _BOOTSWATCH_BASE + "cerulean/bootstrap.min.css"
 COSMO = _BOOTSWATCH_BASE + "cosmo/bootstrap.min.css"
@@ -17,7 +17,9 @@
 LUX = _BOOTSWATCH_BASE + "lux/bootstrap.min.css"
 MATERIA = _BOOTSWATCH_BASE + "materia/bootstrap.min.css"
 MINTY = _BOOTSWATCH_BASE + "minty/bootstrap.min.css"
+MORPH = _BOOTSWATCH_BASE + "morph/bootstrap.min.css"
 PULSE = _BOOTSWATCH_BASE + "pulse/bootstrap.min.css"
+QUARTZ = _BOOTSWATCH_BASE + "quartz/bootstrap.min.css"
 SANDSTONE = _BOOTSWATCH_BASE + "sandstone/bootstrap.min.css"
 SIMPLEX = _BOOTSWATCH_BASE + "simplex/bootstrap.min.css"
 SKETCHY = _BOOTSWATCH_BASE + "sketchy/bootstrap.min.css"
@@ -26,4 +28,6 @@
 SPACELAB = _BOOTSWATCH_BASE + "spacelab/bootstrap.min.css"
 SUPERHERO = _BOOTSWATCH_BASE + "superhero/bootstrap.min.css"
 UNITED = _BOOTSWATCH_BASE + "united/bootstrap.min.css"
+VAPOR = _BOOTSWATCH_BASE + "vapor/bootstrap.min.css"
 YETI = _BOOTSWATCH_BASE + "yeti/bootstrap.min.css"
+ZEPHYR = _BOOTSWATCH_BASE + "zephyr/bootstrap.min.css"

demo/Demo.js

@@ -110,7 +110,7 @@ const Demo = () => (
         <DropdownMenuItem>Entry 3</DropdownMenuItem>
       </DropdownMenu>
     </NavbarSimple>
-    <Container className="mt-3">
+    <Container class_name="mt-3">
       <h1>Dash Bootstrap Components - Demo</h1>
       <p>
         This demonstrates all of the Dash Bootstrap Components as React

demo/index.html

@@ -6,8 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
-      integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
       crossorigin="anonymous"
     />
   </head>

docs/components_page/__init__.py

@@ -3,12 +3,12 @@
 
 import dash
 import dash_bootstrap_components as dbc
-import dash_html_components as html
+from dash import html
 from jinja2 import Environment, FileSystemLoader
 
-from .components.table.simple import table_body, table_header
-from .components.tabs.simple import tab1_content, tab2_content
-from .markdown_parser import parse
+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
 
 SERVE_LOCALLY = os.getenv("DBC_DOCS_MODE", "production") == "dev"
 
@@ -54,13 +54,17 @@ def _get_label(slug):
         return "InputGroup"
     if slug == "list_group":
         return "ListGroup"
+    if slug == "index":
+        return "Components"
     return slug.capitalize()
 
 
 def register_apps():
     component_bodies = {
+        "accordion": {"markdown_path": COMPONENTS / "accordion.md"},
         "alert": {"markdown_path": COMPONENTS / "alert.md"},
         "badge": {"markdown_path": COMPONENTS / "badge.md"},
+        "breadcrumb": {"markdown_path": COMPONENTS / "breadcrumb.md"},
         "button": {"markdown_path": COMPONENTS / "button.md"},
         "button_group": {"markdown_path": COMPONENTS / "button_group.md"},
         "card": {"markdown_path": COMPONENTS / "card.md"},
@@ -74,12 +78,17 @@ def register_apps():
         "jumbotron": {"markdown_path": COMPONENTS / "jumbotron.md"},
         "layout": {"markdown_path": COMPONENTS / "layout.md"},
         "list_group": {"markdown_path": COMPONENTS / "list_group.md"},
+        "index": {"markdown_path": COMPONENTS / "index.md"},
         "modal": {
             "markdown_path": COMPONENTS / "modal.md",
             "extra_env_vars": {"LOREM": LOREM},
         },
         "nav": {"markdown_path": COMPONENTS / "nav.md"},
         "navbar": {"markdown_path": COMPONENTS / "navbar.md"},
+        "offcanvas": {
+            "markdown_path": COMPONENTS / "offcanvas.md",
+        },
+        "pagination": {"markdown_path": COMPONENTS / "pagination.md"},
         "popover": {"markdown_path": COMPONENTS / "popover.md"},
         "progress": {"markdown_path": COMPONENTS / "progress.md"},
         "spinner": {"markdown_path": COMPONENTS / "spinner.md"},
@@ -109,6 +118,7 @@ def register_apps():
             "label": "Quickstart",
         },
         {"name": "themes", "href": "/docs/themes", "label": "Themes"},
+        {"name": "icons", "href": "/docs/icons", "label": "Icons"},
         {"name": "faq", "href": "/docs/faq", "label": "FAQ"},
         {
             "name": "components",
@@ -121,6 +131,7 @@ def register_apps():
                     "label": _get_label(slug),
                 }
                 for slug in component_bodies
+                if slug != "index"
             ],
         },
     ]
@@ -130,9 +141,14 @@ def register_apps():
     template = env.from_string(INDEX_STRING_TEMPLATE)
 
     for slug, kwargs in component_bodies.items():
+        requests_pathname_prefix = (
+            f"/docs/components/{slug}/"
+            if slug != "index"
+            else "/docs/components/"
+        )
         app = dash.Dash(
             external_stylesheets=["/static/loading.css"],
-            requests_pathname_prefix=f"/docs/components/{slug}/",
+            requests_pathname_prefix=requests_pathname_prefix,
             suppress_callback_exceptions=True,
             serve_locally=SERVE_LOCALLY,
             index_string=template.render(
@@ -154,6 +170,9 @@ def register_apps():
             )
         else:
             app.layout = parse(app, **kwargs)
-        routes[f"/docs/components/{slug}"] = app
+        if slug == "index":
+            routes["/docs/components"] = app
+        else:
+            routes[f"/docs/components/{slug}"] = app
 
     return routes

docs/components_page/components/__tests__/helpers.py

@@ -44,24 +44,30 @@ def rename_variable(snippet_path, suffix, variable, assign_op="="):
     for line in lines:
         if line.startswith(f"{variable} {assign_op}"):
             line = line.replace(
-                f"{variable} {assign_op}", f"{variable}_{suffix} {assign_op}"
+                f"{variable} {assign_op}", f"{variable}__{suffix} {assign_op}"
             )
         new_lines.append(line)
 
     return "\n".join(new_lines)
 
 
-def load_r_app(path, component_name):
+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=path.read_text(),
+        snippet=snippet,
         components=component_name,
         port=8050,
     )
 
 
-def load_jl_app(path, component_name):
+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=path.read_text(),
+        snippet=snippet,
         components=component_name,
         port=8050,
     )

docs/components_page/components/__tests__/test_accordion.py

@@ -0,0 +1,53 @@
+"""
+Testing of callbacks in non-Python Accordion snippets.
+"""
+from pathlib import Path
+
+import dash.testing.wait as wait
+
+from .helpers import load_jl_app, load_r_app
+
+HERE = Path(__file__).parent
+
+
+def test_r_callback(dashr):
+    r_app = load_r_app((HERE.parent / "accordion" / "callback.R"), "accordion")
+    dashr.start_server(r_app)
+    check_callback_callbacks(dashr)
+
+
+def test_jl_callback(dashjl):
+    jl_app = load_jl_app(
+        (HERE.parent / "accordion" / "callback.jl"), "accordion"
+    )
+    dashjl.start_server(jl_app)
+    check_callback_callbacks(dashjl)
+
+
+def check_callback_callbacks(runner):
+    # Find the accordion object
+    accordion_comp = runner.find_element("#accordion")
+    accordion_text = runner.find_element("#accordion-contents")
+
+    # Check it has 3 accordion-items in it
+    items = accordion_comp.find_elements_by_class_name("accordion-item")
+    wait.until(
+        lambda: len(items) == 3,
+        timeout=4,
+    )
+
+    # Click the third section
+    items[2].find_element_by_class_name("accordion-button").click()
+
+    # Check the text in contents changes to "Item selected: item-3"
+    wait.until(
+        lambda: accordion_text.text == "Item selected: item-3",
+        timeout=4,
+    )
+
+    # Check that the right section is showing
+    item = accordion_comp.find_element_by_class_name("show")
+    wait.until(
+        lambda: item.text == "This is the content of the third section",
+        timeout=4,
+    )