diff --git a/vizro-core/changelog.d/20240109_183336_huong_li_nguyen_warning_bootstrap.md b/vizro-core/changelog.d/20240109_183336_huong_li_nguyen_warning_bootstrap.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240109_183336_huong_li_nguyen_warning_bootstrap.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/docs/pages/user_guides/assets.md b/vizro-core/docs/pages/user_guides/assets.md index f6383686a..05315adff 100644 --- a/vizro-core/docs/pages/user_guides/assets.md +++ b/vizro-core/docs/pages/user_guides/assets.md @@ -19,6 +19,11 @@ The user-provided `assets` folder thus always takes precedence. │  ├── favicon.ico ``` +!!! warning "Dash Bootstrap Themes" + + Please note that Vizro is currently not compatible with [Dash Bootstrap Themes](https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/). + Adding a Bootstrap stylesheet will not work properly inside the Vizro app. + ## Changing the favicon To change the default favicon (website icon appearing in the browser tab), add a file named `favicon.ico` to your `assets` folder. For more information, see the [Dash documentation](https://dash.plotly.com/external-resources#changing-the-favicon). diff --git a/vizro-core/docs/pages/user_guides/custom_components.md b/vizro-core/docs/pages/user_guides/custom_components.md index 5c8903d59..05051db34 100644 --- a/vizro-core/docs/pages/user_guides/custom_components.md +++ b/vizro-core/docs/pages/user_guides/custom_components.md @@ -9,6 +9,11 @@ This guide shows you how to create custom components that are completely new, or In general, you can create a custom component based on any dash-compatible component (e.g. [dash-core-components](https://dash.plotly.com/dash-core-components), [dash-bootstrap-components](https://dash-bootstrap-components.opensource.faculty.ai/), [dash-html-components](https://github.com/plotly/dash/tree/dev/components/dash-html-components), etc.). +!!! warning "Adding a dash-bootstrap component" + + When adding a custom component based on [dash-bootstrap components](https://dash-bootstrap-components.opensource.faculty.ai/) + it’s necessary to add custom CSS to ensure proper styling and functionality. + All our components are based on `Dash`, and they are shipped with a set of sensible defaults that can be modified. If you would like to overwrite one of those defaults, or if you would like to use additional `args` or `kwargs` of those components, then this is the correct way to include those. You can very easily use any existing attribute of any underlying Dash component with this method. @@ -274,4 +279,5 @@ vm.Page.add_type("components", Jumbotron) function or integration they write - especially with regard to leaking any sensitive information or exposing to any security threat during implementation. - By default, all Dash components in Vizro that persist client-side data set [`persistence_type="session"` to use `window.SessionStorage`](https://dash.plotly.com/persistence), which is cleared upon closing the browser. Be careful when using any custom components that persist data beyond this scope: it is your responsibility to ensure compliance with any legal requirements affecting jurisdictions in which your app operates. + By default, all Dash components in Vizro that persist client-side data set [`persistence_type="session"` to use `window.SessionStorage`](https://dash.plotly.com/persistence), which is cleared upon closing the browser. + Be careful when using any custom components that persist data beyond this scope: it is your responsibility to ensure compliance with any legal requirements affecting jurisdictions in which your app operates.