From 0a25b038316b7f23eff1ff7ebf6be01774a08c05 Mon Sep 17 00:00:00 2001 From: Tom Begley Date: Tue, 19 Oct 2021 22:37:58 +0100 Subject: [PATCH] Release 1.0.0 (#734) * Release 1.0.0 * Update changelog * remove references to Bootstrap 4 * rerun CI --- dash_bootstrap_components/_version.py | 2 +- docs/components_page/components/button.md | 2 +- docs/components_page/components/card.md | 4 ++-- docs/components_page/components/form.md | 4 ++-- docs/components_page/components/index.md | 2 +- docs/components_page/components/layout.md | 6 +++--- docs/content/changelog.md | 12 +++++++++--- docs/content/docs/quickstart.md | 14 +++++++++----- docs/content/docs/themes.md | 19 +++++++++---------- docs/examples/__init__.py | 2 +- docs/templates/index.html | 2 +- package.json | 2 +- tests/test_version.py | 2 +- 13 files changed, 41 insertions(+), 32 deletions(-) diff --git a/dash_bootstrap_components/_version.py b/dash_bootstrap_components/_version.py index 6c7936ab..5becc17c 100644 --- a/dash_bootstrap_components/_version.py +++ b/dash_bootstrap_components/_version.py @@ -1 +1 @@ -__version__ = "1.0.0-dev" +__version__ = "1.0.0" diff --git a/docs/components_page/components/button.md b/docs/components_page/components/button.md index a0bc7320..17571a9d 100644 --- a/docs/components_page/components/button.md +++ b/docs/components_page/components/button.md @@ -5,7 +5,7 @@ lead: Documentation and examples for Bootstrap's button styles with _dash-bootst ## Examples -Bootstrap includes several predefined button styles based on the predefined contextual colors. Chooose between them using the `color` argument. +Bootstrap includes several predefined button styles based on the predefined contextual colors. Choose between them using the `color` argument. {{example:components/button/simple.py:buttons}} diff --git a/docs/components_page/components/card.md b/docs/components_page/components/card.md index a9d40ae6..65a23435 100644 --- a/docs/components_page/components/card.md +++ b/docs/components_page/components/card.md @@ -57,13 +57,13 @@ As mentioned previously, cards assume no specific width, so they will expand to ### Using grid components -Wrap cards in `Row` and `Col` components to control their width and layout. In this example we use the `width` argument of `Col` to make the first card take up a third of the available width, and the second card two thirds. See the [layout documentation](/l/components/layout) for more details on `Row` and `Col`. +Wrap cards in `Row` and `Col` components to control their width and layout. In this example we use the `width` argument of `Col` to make the first card take up a third of the available width, and the second card two thirds. See the [layout documentation](/docs/components/layout) for more details on `Row` and `Col`. {{example:components/card/sizing/grid.py:cards}} ### Using Bootstrap utility classes -Bootstrap comes with several CSS utility classes built in, including some for sizing. For example, the class `w-50` sets `width:50%`. We can can apply these classes to quickly set the desired width of the cards. See the [Bootstrap documentation](https://getbootstrap.com/docs/4.3/utilities/sizing/) for more details. +Bootstrap comes with several CSS utility classes built in, including some for sizing. For example, the class `w-50` sets `width:50%`. We can can apply these classes to quickly set the desired width of the cards. See the [Bootstrap documentation](https://getbootstrap.com/docs/5.0/utilities/sizing/) for more details. {{example:components/card/sizing/utility.py:cards}} diff --git a/docs/components_page/components/form.md b/docs/components_page/components/form.md index 88980569..36239451 100644 --- a/docs/components_page/components/form.md +++ b/docs/components_page/components/form.md @@ -7,7 +7,7 @@ When building Dash apps we rarely make use of HTML forms, instead attaching call ## Examples -The `FormGroup` is the easiest way to add structure to forms. It encourages proper grouping of labels, controls, optional help text, and form validation messaging. See this simple example. +Bootstrap's form components can be used to group labels, controls, optional help text, and form validation messaging. See this simple example. {{example:components/form/simple.py:form}} @@ -47,7 +47,7 @@ The `FormFeedback` component should be added to a `html.Div` containing the `Inp ## Dash Core Components -The `Form` and `FormGroup` components can also be used with _dash-core-components_. +`Form` and other components can also be used with _dash-core-components_. {{example:components/form/dash_core.py:form}} diff --git a/docs/components_page/components/index.md b/docs/components_page/components/index.md index 27960fb3..b5d4d5b9 100644 --- a/docs/components_page/components/index.md +++ b/docs/components_page/components/index.md @@ -24,4 +24,4 @@ For example, a simple application incorporating example above could look like th There is more detail on this in the [Quickstart](/docs/quickstart/) instructions for creating a basic app. Additionally, the [examples](https://github.com/facultyai/dash-bootstrap-components/tree/main/examples) in our GitHub repository demonstrate how multiple components can be combined to create a feature rich application. -For more details on Dash in general, please refer to the official Dash documentation for [Python](https://dash.plotly.com/), [R](https://dashr.plotly.com/), or [Julia](https://dash-julia.plotly.com/). +For more details on Dash in general, please refer to the official Dash documentation for [Python](https://dash.plotly.com/), [R](https://dash.plotly.com/r/), or [Julia](https://dash.plotly.com/julia/). diff --git a/docs/components_page/components/layout.md b/docs/components_page/components/layout.md index 062a020a..7f855107 100644 --- a/docs/components_page/components/layout.md +++ b/docs/components_page/components/layout.md @@ -5,7 +5,7 @@ lead: Components for laying out your Dash app, including wrapping containers, an ## Examples -Layout in Bootstrap is controlled using the grid system. The Bootstrap grid has twelve columns, and five responsive tiers (allowing you to specify different behaviours on different screen sizes, see below). The width of your columns can be specified in terms of how many of the twelve grid columns it should span, or you can allow the columns to expand or shrink to fit either their content or the available space in the row. +Layout in Bootstrap is controlled using the grid system. The Bootstrap grid has twelve columns, and six responsive tiers (allowing you to specify different behaviours on different screen sizes, see below). The width of your columns can be specified in terms of how many of the twelve grid columns it should span, or you can allow the columns to expand or shrink to fit either their content or the available space in the row. There are three main layout components in _dash-bootstrap-components_: `Container`, `Row`, and `Col`. @@ -20,7 +20,7 @@ For best results, make sure you adhere to the following two rules when construct 1. Only use `Row` and `Col` inside a `Container`. A single `Container` wrapping your entire app's content is fine. Set `fluid=True` if you don't want the margins that `Container` adds by default. Since the content of this page is wrapped with a `Container`, the snippets below don't explicitly include them. 2. The immediate children of any `Row` component should always be `Col` components. Your content should go inside the `Col` components. -For much more detail on the Bootstrap grid system, see the [Bootstrap documentation](https://getbootstrap.com/docs/4.2/layout/grid/). +For much more detail on the Bootstrap grid system, see the [Bootstrap documentation](https://getbootstrap.com/docs/5.1/layout/grid/). ## Row with columns @@ -84,7 +84,7 @@ Sometimes you may wish to use Bootstrap's grid system for specifying the layout {{code-example:components/layout/grid_only.py}} -Alternatively download `bootstrap-grid.css` from the [Bootstrap website](https://getbootstrap.com/docs/4.2/getting-started/download/) and place it in your app's `assets/` directory. See the [Plotly Dash documentation](https://dash.plot.ly/external-resources) for details. +Alternatively download `bootstrap-grid.css` from the [Bootstrap website](https://getbootstrap.com/docs/5.1/getting-started/download/) and place it in your app's `assets/` directory. See the [Plotly Dash documentation](https://dash.plotly.com/external-resources) for details. {{apidoc:src/components/layout/Container.js}} diff --git a/docs/content/changelog.md b/docs/content/changelog.md index 929c0180..c3fc5e53 100644 --- a/docs/content/changelog.md +++ b/docs/content/changelog.md @@ -6,12 +6,12 @@ title: Changelog This page documents notable changes in dash-bootstrap-components releases. -## 1.0.0 - 2021/XX/XX +## 1.0.0 - 2021/10/19 -v1 of _dash-bootstrap-components_! This release contains loads of new features, but also breaking changes. Please read the changelog carefully for full details. +v1 of _dash-bootstrap-components_! This release contains loads of new features, but also breaking changes. Please read the changelog carefully, and refer to the [migration guide](/migration-guide/) for full details of the changes. ### Added -- Six new components! [Accordion](/docs/components/accordion), [Breadcrumb](/docs/components/breadcrumb), [FormFloating](/docs/components/form), [Offcanvas](/docs/components/offcanvas), [Pagination](/docs/components/pagination), and [Switch](/docs/components/input) ([PR 646](https://github.com/facultyai/dash-bootstrap-components/pull/646)) ([PR 689](https://github.com/facultyai/dash-bootstrap-components/pull/689)) +- Seven new components! [Accordion](/docs/components/accordion), [Breadcrumb](/docs/components/breadcrumb), [FormFloating](/docs/components/form), [ModalTitle](/docs/components/modal), [Offcanvas](/docs/components/offcanvas), [Pagination](/docs/components/pagination), and [Switch](/docs/components/input) ([PR 646](https://github.com/facultyai/dash-bootstrap-components/pull/646)) ([PR 689](https://github.com/facultyai/dash-bootstrap-components/pull/689)) - New CDN links for icons from Bootstrap Icons and Font Awesome ([PR 661](https://github.com/facultyai/dash-bootstrap-components/pull/661)) - CDN Links for four new Bootswatch themes: `QUARTZ`, `MORPH`, `VAPOR` and `ZEPHYR`. - All components now accept `class_name` as an alternative to `className`. If both are specified then `class_name` will take precedence. `class_name` should be preferred from now on. ([PR 642](https://github.com/facultyai/dash-bootstrap-components/pull/642)) @@ -23,6 +23,12 @@ v1 of _dash-bootstrap-components_! This release contains loads of new features, ### Changed - Components are all now built for Bootstrap 5. CDN links have all been updated. There are multiple breaking changes in the component props. Please see the [migration-guide](/migration-guide) for full details on the changes ([PR 646](https://github.com/facultyai/dash-bootstrap-components/pull/646)). +## 0.13.1 - 2021/9/22 + +### Fixed + +- Fix cursor jump issue in `Input` component. ([PR 707](https://github.com/facultyai/dash-bootstrap-components/pull/707)) + ## 0.13.0 - 2021/7/31 ### Added diff --git a/docs/content/docs/quickstart.md b/docs/content/docs/quickstart.md index 6854cfee..15c1fd8b 100644 --- a/docs/content/docs/quickstart.md +++ b/docs/content/docs/quickstart.md @@ -30,7 +30,7 @@ conda install -c conda-forge dash-bootstrap-components ``` ----- R -To get started make sure you have [installed Dash for R](https://dashr.plotly.com/installation). If you didn't already install it in order to install Dash for R, we also need to make sure that the _devtools_ library is installed. +To get started make sure you have [installed Dash for R](https://dash.plotly.com/r/installation). If you didn't already install it in order to install Dash for R, we also need to make sure that the _devtools_ library is installed. ```r install.packages("devtools") @@ -51,7 +51,7 @@ install_github('facultyai/dash-bootstrap-components@r0.10.0') ``` ----- Julia -To get started make sure you have [installed Dash.jl](https://dash-julia.plotly.com/installation). You can then install `DashBootstrapComponents` as follows +To get started make sure you have [installed Dash.jl](https://dash.plotly.com/julia/installation). You can then install `DashBootstrapComponents` as follows ```julia-repl pkg> add DashBootstrapComponents @@ -79,12 +79,13 @@ To use _dash-bootstrap-components_ you must do two things: ### Linking a stylesheet -_dash-bootstrap-components_ doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself. +_dash-bootstrap-components_ doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v5 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself. -For convenience, links to [BootstrapCDN][bootstrapcdn] for standard Bootstrap and each Bootswatch theme are available as part of _dash-bootstrap-components_ and can be used as follows +For convenience, CDN links to [JSDelivr][jsdelivr] for standard Bootstrap and each Bootswatch theme are available as part of _dash-bootstrap-components_ and can be used as follows ~~~bootstrap-tabs Python + In Python, each CDN link is available within the `dbc.themes` submodule and can be used when instantiating the `app` object. @@ -96,6 +97,7 @@ app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP]) ``` ----- R + Once you have imported _dash-bootstrap-components_ with `library(dashBootstrapComponents)`, the `dbcThemes` list will be loaded into your global namespace and can be used when instantiating the `app` object. @@ -110,6 +112,8 @@ app <- Dash$new(external_stylesheets = dbcThemes$BOOTSTRAP) ----- Julia +Once you have imported _dash-bootstrap-components_ with `using DashBootstrapComponents`, you can access CDN links through the `dbc_themes` named tuple. + ```julia using Dash, DashBootstrapComponents @@ -183,5 +187,5 @@ Check out these [example apps][examples] made with _dash-bootstrap-components_. [docs-themes]: /docs/themes [docs-icons]: /docs/icons [docs-components]: /docs/components -[bootstrapcdn]: https://www.bootstrapcdn.com/ +[jsdelivr]: https://www.jsdelivr.com/ [examples]: /examples diff --git a/docs/content/docs/themes.md b/docs/content/docs/themes.md index 0424d037..11d23fae 100644 --- a/docs/content/docs/themes.md +++ b/docs/content/docs/themes.md @@ -6,13 +6,13 @@ title: Themes

Customise your app by choosing from different Bootstrap and Bootswatch themes.

-_dash-bootstrap-components_ doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice, so you can achieve the look you want in your app. +_dash-bootstrap-components_ doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v5 stylesheet of your choice, so you can achieve the look you want in your app. You can link to a stylesheet served over a CDN, or serve CSS locally depending on your needs. ## Packaged CDN links -_dash-bootstrap-components_ contains links to Bootstrap and Bootswatch stylesheets hosted on [BootstrapCDN][bootstrapcdn] so you can conveniently link to one of them in your app. The easiest way to do so is to use the `external_stylesheets` argument when instantiating your app. +_dash-bootstrap-components_ contains links to Bootstrap and Bootswatch stylesheets hosted on [JSDelivr][jsdelivr] so you can conveniently link to one of them in your app. The easiest way to do so is to use the `external_stylesheets` argument when instantiating your app. ~~~bootstrap-tabs Python @@ -84,21 +84,21 @@ Each theme such as is simply a BootstrapCDN URL stored as a string, so using the Python ```python -BS = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" +BS = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" app = dash.Dash(external_stylesheets=[BS]) ``` ----- R ```r -BS <- "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" +BS <- "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" app <- Dash$new(external_stylesheets = BS) ``` ----- Julia ```julia -BS = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" +BS = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" app = dash(external_stylesheets=[BS]) ``` ~~~ @@ -113,17 +113,16 @@ The easiest way to link a local stylesheet is to place it in a folder named `ass

Available themes

-There are numerous free to use Bootstrap stylesheets available on the web. The `dash_bootstrap_components.themes` module contains CDN links for Bootstrap and all of the [Bootswatch themes][bootswatch-themes]. Bootstrap also maintains its own [themes website][bootstrap-themes] which lists a number of free and premium themes that you could incorporate into your apps. +There are numerous free to use Bootstrap stylesheets available on the web. The `dash_bootstrap_components.themes` module contains CDN links for Bootstrap and all of the [Bootswatch themes][bootswatch]. Bootstrap also maintains its own [themes website][bootstrap-themes] which lists a number of free and premium themes that you could incorporate into your apps. To start with, we recommend experimenting with some of the Bootswatch themes available in the `dash_bootstrap_components.themes` module. The full list of available themes is [`CERULEAN`](https://bootswatch.com/cerulean/), [`COSMO`](https://bootswatch.com/cosmo/), [`CYBORG`](https://bootswatch.com/cyborg/), [`DARKLY`](https://bootswatch.com/darkly/), [`FLATLY`](https://bootswatch.com/flatly/), [`JOURNAL`](https://bootswatch.com/journal/), [`LITERA`](https://bootswatch.com/litera/), [`LUMEN`](https://bootswatch.com/lumen/), [`LUX`](https://bootswatch.com/lux/), [`MATERIA`](https://bootswatch.com/materia/), [`MINTY`](https://bootswatch.com/minty/), [`MORPH`](https://bootswatch.com/morph/), [`PULSE`](https://bootswatch.com/pulse/), [`QUARTZ`](https://bootswatch.com/quartz/), [`SANDSTONE`](https://bootswatch.com/sandstone/), [`SIMPLEX`](https://bootswatch.com/simplex/), [`SKETCHY`](https://bootswatch.com/sketchy/), [`SLATE`](https://bootswatch.com/slate/), [`SOLAR`](https://bootswatch.com/solar/), [`SPACELAB`](https://bootswatch.com/spacelab/), [`SUPERHERO`](https://bootswatch.com/superhero/), [`UNITED`](https://bootswatch.com/united/), [`VAPOR`](https://bootswatch.com/vapor/), [`YETI`](https://bootswatch.com/yeti/), [`ZEPHYR`](https://bootswatch.com/zephyr/). Check out the [theme explorer](/docs/themes/explorer/) for a live demo of dash-bootstrap-components using all of the different available themes. You may also like to check out the [dash-bootstrap-css](https://github.com/tcbegley/dash-bootstrap-css) project which contains Bootstrap stylesheets that apply consistent styling to various components from dash-core-components. [dash-docs-external]: https://dash.plotly.com/external-resources/ -[bootstrapcdn]: https://www.bootstrapcdn.com/ [bootstrap]:https://getbootstrap.com/ -[bootstrap-download]: https://getbootstrap.com/docs/4.6/getting-started/download/ -[bootstrap-compile]: https://getbootstrap.com/docs/4.6/getting-started/theming/ -[bootstrap-themes]: https://themes.getbootstrap.com/ +[bootstrap-download]: https://getbootstrap.com/docs/5.0/getting-started/download/ +[bootstrap-compile]: https://getbootstrap.com/docs/5.0/customize/overview/ [bootswatch]: https://bootswatch.com/ [bootswatch-themes]: https://www.bootstrapcdn.com/bootswatch/ +[jsdelivr]: https://www.jsdelivr.com/ diff --git a/docs/examples/__init__.py b/docs/examples/__init__.py index efbdd4ad..65d6c61a 100644 --- a/docs/examples/__init__.py +++ b/docs/examples/__init__.py @@ -19,7 +19,7 @@ GITHUB_EXAMPLES = ( "https://github.com/" - "facultyai/dash-bootstrap-components/blob/main/examples/" + "facultyai/dash-bootstrap-components/blob/main/examples/python" ) INDEX_STRING_TEMPLATE = """{% extends "example.html" %} diff --git a/docs/templates/index.html b/docs/templates/index.html index f6bdb2e4..e24485b9 100644 --- a/docs/templates/index.html +++ b/docs/templates/index.html @@ -98,7 +98,7 @@

Highly customisable

- Dash Bootstrap Components is compatible with any Bootstrap v4 + Dash Bootstrap Components is compatible with any Bootstrap v5 stylesheet of your choice. Learn how to customise the look of your app using the bundled themes or your own custom themes.

diff --git a/package.json b/package.json index 367b875a..91fd2912 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dash-bootstrap-components", - "version": "1.0.0-dev", + "version": "1.0.0", "description": "Bootstrap components for Plotly Dash", "repository": "github:facultyai/dash-bootstrap-components", "main": "lib/dash-bootstrap-components.min.js", diff --git a/tests/test_version.py b/tests/test_version.py index e94c0816..bd9fa34e 100644 --- a/tests/test_version.py +++ b/tests/test_version.py @@ -2,4 +2,4 @@ def test_version(): - assert __version__ == "1.0.0-dev" + assert __version__ == "1.0.0"