V1 Themes Documentation includes reference to Bootstrap V4

glsdown commented 2 years ago

Currently the v1 documentation states:

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.

As v1 is using Bootstrap 5, this should be updated.

AnnMarieW commented 2 years ago

While someone is in the neighborhood, here are a couple more minor docs updates:

In the Icons section, we should make it really clear which version is used. I've noticed that there are many changes between FontAwesome versions -- and the icons just don't appear if you use the wrong syntax or try to use an icon that is not in the version we link to.

In the first paragraph in the layout section it says:

The Bootstrap grid has twelve columns, and five responsive tiers (allowing you to specify different behaviours on different screen sizes, see below).

But there are six responsive tiers now with the new XXL tier

glsdown commented 2 years ago

Doing a deep-dive to catch any more of these ready for a clear up. I haven't checked the props documentation though if anyone wants to take that beast on!

General

[x] ~All examples use className but in the props, this is marked as deprecated.~ - yep, waiting for Dash to follow suit. Examples with changes are on the class_name branch

Homepage

[x] ❗ Dash Bootstrap Components is compatible with any Bootstrap v4 stylesheet of your choice

Quickstart

[x] ~Inconsistency with python installation - R and Julia installation talks about needing to install Dash for R/Julia, but Python doesn't - is this intentional?~ - yep, pip automatically picks up dash as a dependency for Python but not for R or Julia (I think anyway)
[x] Link for R installation now at https://dash.plotly.com/r/installation
[x] Links for Julia installation now at https://dash.plotly.com/julia/installation
[x] ❗ This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice.
[x] Inconsistency when talking about Julia themes - there is no text to explain how the themes are imported into Julia.

Examples

[x] All examples only have python source code available in the documentation, although the source code exists for other languages. These should also be included. - agree, let's open a separate issue though because it will be non-trivial to do #735
[x] ❗ All three examples GH links are broken

Themes

[x] ❗ This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice
[x] Manually linking to a CDN example uses the v4 link as an example
[x] Manually linking to a CDN - does it have to be v5 Bootstrap? I'm assuming so, but might be worth being explicit.
[x] ❗ You can download a stylesheet link should be to https://getbootstrap.com/docs/5.0/getting-started/download/
[x] ❗ or even compile your own link should be to https://getbootstrap.com/docs/5.0/customize/overview/

Theme Explorer

[x] ❗ This is missing a number of the new components: - let's open a separate issue for this #736
- [x] Accordion
- [x] Breadcrumb
- [x] Carousel
- [x] DropdownMenu
- [x] Nav
- [x] ~NavbarSimple~
- [x] Offcanvas
- [x] Pagination

Icons

[x] ❗ As above - include details of which version of FA and BI we are using
[x] Add an FAQ about my icon isn't appearing - see note above

Components

[x] please refer to the official Dash documentation for Python, R, or Julia. - the links for R and Julia have been updated and should be https://dash.plotly.com/julia/ and https://dash.plotly.com/r
[x] Is it worth adding a note that the comments for the components are based on python syntax e.g. set is_open=True?

Breadcrumb

[x] can optionally specify href to add a link, external_link to determine whether the link should be treated as a Dash style link or whether it should reload the page, and finally active to determine whether the item has the "active" style applied to indicate that it corresponds to the current location. this is awkwardly phrased.

Buttons

[x] ❗ Chooose
[x] Create a Bootstrap 4 style block level button for clarity perhaps should say Create a legacy Bootstrap 4 style...

Card

[x] ❗ Card images talks about removing borders from top and bottom but doesn't look like that's working?
[x] Image Overlay looks messy - is there a better image that could be used?
[x] ❗ Utility sizing link should be https://getbootstrap.com/docs/5.0/utilities/sizing/
[x] Horizontal card image should be portrait and not landscape

DropdownMenu

[x] There is descriptive text before the Examples heading - this is inconsistent with previous components
[x] Inconsistency - there is no title for the second example
[x] If you want to further customise the style you can use the toggle_style and toggleClassName arguments. - there is no example given though.
[x] You can also use the header or divider arguments to create headers and dividers to help structure the menu. You can also include custom content such as text. repetition of you can also.

Fade

[x] It would be good if the first example starts faded out, as otherwise I spent a while waiting for it to fade by itself...

Form

[x] There is descriptive text before the Examples heading - this is inconsistent with previous components
[x] ❗ First example talks about FormGroup but this isn't used in the code snippet
[x] ❗ The Form and FormGroup components can also be used with dash-core-components. - FormGroup again is not used here

Input

[x] Description is simply Documentation and examples for input components in dash-bootstrap-components. rather than describing what the component is
[x] There is descriptive text before the Examples heading - this is inconsistent with previous components
[x] Set inline=True to make the radio items or checklists fit next to each other on a line. - has no title for this section
[x] Color picker has no Julia or R example - create a separate issue for this #746
[x] Add explanation about multi-select and to use dropdown instead

Layout

[x] ❗ and five responsive tiers should be six (as above)
[x] ❗ Bootstrap documentation link should be updated to https://getbootstrap.com/docs/5.1/layout/grid/
[x] ❗ Vertical alignment example doesn't appear to be doing what it ought to do
[x] ~Vertical alignment also should include stretch - check react-bootstrap support~ Don't include this as it's complicated for the examples given - it will stretch the cols and not the coloured divs.
[x] Horizontal alignment also should include evenly - check react-bootstrap support
[x] ❗ Grid components only section - need to update the Bootstrap page link to https://getbootstrap.com/docs/5.1/getting-started/download/

Navs

[x] Description is simply Documentation and examples for how to use Bootstrap's navigation components with dash-bootstrap-components. rather than describing what the component is.
[x] Second example doesn't have a title.
[x] ❗ Horizontal alignment - not sure this is doing what it's meant to be doing?
[x] ~Tabs section doesn't have an example~ Wording was ambiguous - I have updated.

Spinner

[x] There is descriptive text before the Examples heading - this is inconsistent with previous components

Tabs

[x] At the very bottom it mentions active class names and styles, but no title or example

Toasts

[x] There is descriptive text before the Examples heading - this is inconsistent with previous components
[x] Icons and dismissing example should start with the toast closed

FAQs

[x] Add FAQ about multi-select in dbc.Select component as this is a common request

tcbegley commented 2 years ago

With the icons, I'm not sure adding a version number to the docs is any more discoverable than someone just doing

print(dbc.icons.BOOTSTRAP)

or similar? What do you think? Happy to be convinced otherwise but I might defer this change to a later PR.

glsdown commented 2 years ago

@tcbegley I think that people wouldn't really know to do that though - I certainly wouldn't. Also, including in the docs makes it something people think about rather than spending ages on debugging why it isn't working.

AnnMarieW commented 2 years ago

I agree with @glsdown - print(dbc.icons.BOOTSTRAP) is a neat trick that not everyone knows about. Then, once you do that, you need to know to go to the correct version of the FontAwesome (or Bootstrap icons) docs to check on the icon.

This is helpful to add to the dbc docs because if the the icons aren't showing up, people are likely to go to the icon section of the dbc docs to get some help.

tcbegley commented 2 years ago

Ok, you've convinced me, let's add it in 👍

facultyai / dash-bootstrap-components