dbc-team · tcbegley · Mar 4, 2025 · Feb 4, 2025 · Feb 4, 2025 · Feb 4, 2025
diff --git a/.babelrc b/.babelrc
@@ -1,12 +1,4 @@
 {
   "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [
-    "@babel/plugin-transform-object-rest-spread",
-    "@babel/plugin-transform-runtime"
-  ],
-  "env": {
-    "test": {
-      "plugins": ["@babel/plugin-transform-class-properties"]
-    }
-  }
+  "plugins": ["@babel/plugin-transform-runtime"]
 }
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -19,7 +19,7 @@ restrictions:
 
 - Please **do not** use the issue tracker for personal support requests. Stack
   Overflow ([`plotly-dash`](https://stackoverflow.com/questions/tagged/plotly-dash) tag),
-  or the [Plotly Community Forum](https://community.plot.ly) are better places to get help.
+  or the [Plotly Community Forum](https://community.plotly.com) are better places to get help.
 
 - Please **do not** derail or troll issues. Keep the discussion on topic and
   respect the opinions of others.

diff --git a/.prettierrc b/.prettierrc
@@ -3,5 +3,8 @@
   "singleQuote": true,
   "bracketSpacing": false,
   "arrowParens": "avoid",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "importOrder": ["^react$", "<THIRD_PARTY_MODULES>", "^@/.*$", "^[./]"],
+  "importOrderSeparation": true,
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }
diff --git a/dash_bootstrap_components/__init__.py b/dash_bootstrap_components/__init__.py
@@ -1,7 +1,5 @@
 """Bootstrap themed components for use in Plotly Dash"""
 
-import os
-
 from dash_bootstrap_components import _components, icons, themes
 from dash_bootstrap_components._components import *  # noqa
 from dash_bootstrap_components._components import Table
@@ -10,9 +8,6 @@
 
 __all__ = _components.__all__ + ["icons", "themes"]
 
-_current_path = os.path.dirname(os.path.abspath(__file__))
-_METADATA_PATH = os.path.join(_current_path, "_components", "metadata.json")
-
 _js_dist = [
     {
         "relative_package_path": ("_components/dash_bootstrap_components.min.js"),

diff --git a/demo/Demo.js b/demo/Demo.js
@@ -1,4 +1,6 @@
+/* eslint-disable react/prop-types */
 import React, {useState} from 'react';
+
 import {
   Alert,
   Badge,
@@ -37,29 +39,29 @@ import {
   Tooltip
 } from '../src';
 
-const StateWrapper = ({tag: Tag, ...otherProps}) => {
+function StateWrapper({tag: Tag, ...otherProps}) {
   // helper to mimic setProps functionality
   const [state, setState] = useState(otherProps);
   return <Tag setProps={props => setState({...state, ...props})} {...state} />;
-};
+}
 
-const CollapseComponent = ({children}) => {
+function CollapseComponent({children}) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <div>
-      <Button onClick={() => setIsOpen(!isOpen)}>Toggle collapse</Button>
+      <Button setProps={() => setIsOpen(!isOpen)}>Toggle collapse</Button>
       <Collapse is_open={isOpen}>{children}</Collapse>
     </div>
   );
-};
+}
 
 const FadeComponent = ({children}) => {
   const [isIn, setIsIn] = useState(false);
 
   return (
     <div>
-      <Button onClick={() => setIsOpen(!isIn)}>Toggle fade</Button>
+      <Button setProps={() => setIsIn(!isIn)}>Toggle fade</Button>
       <Fade is_in={isIn}>{children}</Fade>
     </div>
   );
@@ -212,7 +214,7 @@ const Demo = () => (
         <Col md={3}>
           <Card>
             <CardBody>
-              <h5 className="card-title">Here's another card</h5>
+              <h5 className="card-title">Here&apos;s another card</h5>
               <p className="card-text">With some text, and a button</p>
               <Button color="success">Click here</Button>
             </CardBody>
@@ -221,7 +223,7 @@ const Demo = () => (
         <Col md={3}>
           <Card>
             <CardBody>
-              <h5 className="card-title">Here's yet another card</h5>
+              <h5 className="card-title">Here&apos;s yet another card</h5>
               <p className="card-text">With some text, and some links</p>
               <CardLink href="https://www.asidatascience.com">
                 External

diff --git a/demo/index.js b/demo/index.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+
+import {createRoot} from 'react-dom/client';
 
 import Demo from './Demo';
 
-const rootInstance = ReactDOM.render(
-    <Demo />,
-    document.getElementById('react-demo-entry-point')
-);
+const root = createRoot(document.getElementById('react-demo-entry-point'));
+
+root.render(<Demo />);
diff --git a/docs/components_page/components/carousel.md b/docs/components_page/components/carousel.md
@@ -12,7 +12,7 @@ This is a carousel with slides only.  The default cycle time is 5000ms, but here
 
 ## With controls
 
-Here we add the previous and next controls.  The default is for the slideshow to autoplay after the user manually cycles the first item. Set `ride="carousel"` to start the slideshow on page load.
+Here we add the previous and next controls.
 
 {{example:components/carousel/controls.py:carousel}}
 

diff --git a/docs/components_page/components/carousel/simple.py b/docs/components_page/components/carousel/simple.py
@@ -9,5 +9,4 @@
     controls=False,
     indicators=False,
     interval=2000,
-    ride="carousel",
 )
diff --git a/docs/components_page/components/index/simple.py b/docs/components_page/components/index/simple.py
@@ -21,4 +21,4 @@
 
 # 5. Start the Dash server
 if __name__ == "__main__":
-    app.run_server()
+    app.run()
diff --git a/docs/components_page/components/navbar/navbar.py b/docs/components_page/components/navbar/navbar.py
@@ -1,7 +1,7 @@
 import dash_bootstrap_components as dbc
 from dash import Input, Output, State, html
 
-PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"
+LOGO = "https://placehold.co/100x100"
 
 search_bar = dbc.Row(
     [
@@ -22,13 +22,13 @@
                 # Use row and col to control vertical alignment of logo / brand
                 dbc.Row(
                     [
-                        dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
+                        dbc.Col(html.Img(src=LOGO, height="30px")),
                         dbc.Col(dbc.NavbarBrand("Navbar", className="ms-2")),
                     ],
                     align="center",
                     className="g-0",
                 ),
-                href="https://plotly.com",
+                href="https://placehold.co/",
                 style={"textDecoration": "none"},
             ),
             dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),

diff --git a/docs/components_page/components/table/kwargs.py b/docs/components_page/components/table/kwargs.py
@@ -2,7 +2,7 @@
     # using the same table as in the above example
     table_header + table_body,
     bordered=True,
-    dark=True,
+    color="dark",
     hover=True,
     responsive=True,
     striped=True,

diff --git a/docs/components_page/metadata.py b/docs/components_page/metadata.py
diff --git a/docs/content/docs/quickstart.md b/docs/content/docs/quickstart.md
@@ -65,7 +65,7 @@ app.layout = dbc.Container(
 )
 
 if __name__ == "__main__":
-    app.run_server()
+    app.run()
 ```
 
 ## Examples

diff --git a/docs/demos/demo_layout.py b/docs/demos/demo_layout.py
@@ -66,4 +66,4 @@ def for_path(self, component):
 if __name__ == "__main__":
     app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
     app.layout = _layout
-    app.run_server(port=8888, debug=True)
+    app.run(port=8888, debug=True)
diff --git a/docs/demos/theme_explorer/__init__.py b/docs/demos/theme_explorer/__init__.py
@@ -134,4 +134,4 @@ def open_toast(_):
 
 
 if __name__ == "__main__":
-    app.run_server(debug=True)
+    app.run(debug=True)
diff --git a/docs/demos/theme_explorer/table.py b/docs/demos/theme_explorer/table.py
@@ -61,11 +61,11 @@
                     dbc.Table(
                         [table_header, table_body],
                         bordered=True,
-                        dark=True,
                         hover=True,
                         responsive=True,
                         striped=True,
                         className="mb-2",
+                        color="dark",
                     ),
                 ),
             ]

diff --git a/docs/requirements.txt b/docs/requirements.txt
@@ -1,5 +1,5 @@
-dash>=2.0.0
-dash_bootstrap_components==ci-fixes
+dash==3.0.0rc3
+dash_bootstrap_components==2.0.0b2
 gunicorn
 markdown
 pandas

diff --git a/docs/static/docs.css b/docs/static/docs.css
@@ -294,21 +294,6 @@ span.hljs-meta {
   }
 }
 
-.dbcd-masthead .btn-outline-secondary {
-  color: #fa7268;
-  border-color: #fa7268;
-}
-
-.dbcd-masthead .btn-outline-secondary:hover {
-  color: #fff;
-  background-color: #fa7268;
-}
-
-.dbcd-masthead .btn-secondary {
-  background-color: #fa7268;
-  border-color: #fa7268;
-}
-
 .dbcd-main.changelog h2 {
   font-size: 1.5rem;
 }

diff --git a/docs/static/images/dbciconblack128.png b/docs/static/images/dbciconblack128.png
diff --git a/docs/static/images/dbciconwhite16.png b/docs/static/images/dbciconwhite16.png
diff --git a/docs/static/images/dbclogo128.png b/docs/static/images/dbclogo128.png
diff --git a/docs/static/images/favicon.ico b/docs/static/images/favicon.ico
diff --git a/docs/static/js/v2-alert.js b/docs/static/js/v2-alert.js
@@ -0,0 +1,11 @@
+var migrationAlertContainer = document.getElementById('v2-alert-container');
+
+if (!window.localStorage.getItem('dbc-v2-alert-seen')) {
+  migrationAlertContainer.setAttribute('style', 'display:block');
+}
+
+var migrationAlert = document.getElementById('v2-alert');
+migrationAlert.addEventListener('closed.bs.alert', function () {
+  window.localStorage.setItem('dbc-v2-alert-seen', 'true');
+  migrationAlertContainer.setAttribute('style', 'display:none');
+});
diff --git a/docs/templates/base.html b/docs/templates/base.html
@@ -6,6 +6,7 @@
   </head>
   <body>
     {% block header %}{% endblock %}
+    {% include "partials/v2-alert.html" %}
     {% block body %}{% endblock %}
     {% block scripts %}{% include "partials/scripts.html" %}{% endblock %}
   </body>

diff --git a/docs/templates/index.html b/docs/templates/index.html
@@ -11,7 +11,7 @@
         <div style="width:250px;height:250px;margin:auto;padding:1rem;background-color:white;border-radius:1rem;box-sizing:content-box;">
           <object
             type="image/svg+xml"
-            data="https://cdn.opensource.faculty.ai/dbc/assets/logo.svg"
+            data="https://cdn.jsdelivr.net/gh/facultyai/dash-bootstrap-components@main/logo/logo.svg"
             style="width:100%;height:100%;"
           >
             dash-bootstrap-components logo
@@ -28,11 +28,11 @@ <h1 class="font-weight-light">Dash Bootstrap Components</h1>
           apps with complex, responsive layouts.
         </p>
         <a
-          class="btn btn-outline-secondary"
+          class="btn btn-outline-primary"
           href="https://github.com/facultyai/dash-bootstrap-components"
           >Source Code<i class="bi bi-github ms-1"></i></a
         >
-        <a class="btn btn-secondary" href="/docs">Get Started »</a>
+        <a class="btn btn-primary" href="/docs">Get Started »</a>
       </div>
     </div>
   </div>
@@ -68,7 +68,7 @@ <h2>Get started quickly</h2>
 )
 
 if __name__ == "__main__":
-    app.run_server()</code></pre>
+    app.run()</code></pre>
       </div>
     </div>
     <hr />

diff --git a/docs/templates/macros/example-navbar.html b/docs/templates/macros/example-navbar.html
@@ -3,7 +3,7 @@
   <div class="container-fluid">
     <span class="me-2 bg-white" style="padding:2px;border-radius:4px">
       <img
-        src="/static/images/dbciconblack128.png"
+        src="/static/images/dbclogo128.png"
         width="36"
         height="36"
         alt="dbc logo thumbnail"

diff --git a/docs/templates/macros/navbar.html b/docs/templates/macros/navbar.html
@@ -3,7 +3,7 @@
   <div class="container">
     <span class="me-2 bg-white" style="padding:2px;border-radius:4px">
       <img
-        src="/static/images/dbciconblack128.png"
+        src="/static/images/dbclogo128.png"
         width="36"
         height="36"
         alt="dbc logo thumbnail"

diff --git a/docs/templates/macros/theme-explorer-navbar.html b/docs/templates/macros/theme-explorer-navbar.html
@@ -1,11 +1,11 @@
 {% macro theme_explorer_navbar() -%}
 <nav class="navbar navbar-expand navbar-dark sticky-top bg-dark">
   <span
-    class="me-2 bg-white"
+    class="mx-2 bg-white"
     style="padding:2px;border-radius:4px;margin-right: 0.5rem;"
   >
     <img
-      src="/static/images/dbciconblack128.png"
+      src="/static/images/dbclogo128.png"
       width="36"
       height="36"
       alt="dbc logo thumbnail"

diff --git a/docs/templates/partials/head.html b/docs/templates/partials/head.html
@@ -6,5 +6,5 @@
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/tomorrow-night-eighties.min.css" />
 <link rel="stylesheet" href="/static/docs.css" />
-<link rel="shortcut icon" type="image/png" href="/static/images/dbciconwhite16.png" />
+<link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.ico" />
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
diff --git a/docs/templates/partials/scripts.html b/docs/templates/partials/scripts.html
@@ -1,4 +1,5 @@
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+<script src="/static/js/v2-alert.js"></script>
 <script src="/static/js/highlight.min.js"></script>
 <script>
   hljs.configure({ignoreUnescapedHTML: true})

diff --git a/docs/templates/partials/v2-alert.html b/docs/templates/partials/v2-alert.html
@@ -0,0 +1,9 @@
+<div id="v2-alert-container" style="display:none" class="mt-3 px-5">
+    <div id="v2-alert" class="alert alert-warning alert-dismissible mx-auto" style="max-width:1000px;"
+        role="alert">
+        You are viewing the documentation for
+        <i>dash-bootstrap-components</i> version 2! Please check our
+        <a href="/changelog">changelog</a> for details on breaking changes.
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+</div>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -134,4 +134,4 @@ def open_toast(_):


		if __name__ == "__main__":
		app.run_server(debug=True)
		app.run(debug=True)