Documentation improvements (#747)

* Add details about icon CDN versions

* Include info on python as default

* Improve clarity

* Improve dropdown documentation

* Change fade to start faded

* Fixed card image top bottom

* Added justify evenly

* Fixed form docs styling

* Fixed input docs styling

* Fixed spinner docs styling

* Improved nav example

* Added active style tab styling example

* Make toast start closed

* Improved card examples

* Added faqs

* Improved layout examples

* Fix test

* Restructure horizontal example

* Format R and JL doc examples

* Dash for R v1 changes

* Fix R tests

* Run CI

Co-authored-by: tcbegley <tomcbegley@gmail.com>

Author: glsdown

docs/components_page/components/__tests__/test_fade.py

@@ -23,8 +23,28 @@ def test_jl_fade(dashjl):
 
 
 def check_fade_callbacks(runner):
+    # Check the fade element is present
     assert runner.find_element("#fade") != []
+
+    # Make sure it starts hidden
+    wait.until(
+        lambda: runner.find_element("#fade").get_attribute("style")
+        == "visibility: hidden;",
+        timeout=4,
+    )
+
+    # Click the button and it should show
     runner.find_element("#fade-button").click()
+
+    wait.until(
+        lambda: runner.find_element("#fade").get_attribute("style")
+        != "visibility: hidden;",
+        timeout=4,
+    )
+
+    # Click the button and it should hide
+    runner.find_element("#fade-button").click()
+
     wait.until(
         lambda: runner.find_element("#fade").get_attribute("style")
         == "visibility: hidden;",

docs/components_page/components/__tests__/test_tabs.py

@@ -42,7 +42,7 @@ def check_tabs_card_callbacks(runner):
 tab1_content <- dbcCard(
     dbcCardBody(
         list(
-            htmlP("This is tab 1!", className = "card-text"),
+            p("This is tab 1!", className = "card-text"),
             dbcButton("Click here", color = "success")
         )
     ),
@@ -52,7 +52,7 @@ def check_tabs_card_callbacks(runner):
 tab2_content <- dbcCard(
     dbcCardBody(
         list(
-            htmlP("This is tab 2!", className = "card-text"),
+            p("This is tab 2!", className = "card-text"),
             dbcButton("Don't click here", color = "danger")
         )
     ),

docs/components_page/components/__tests__/test_toast.py

@@ -52,6 +52,15 @@ def test_jl_toast_icon(dashjl):
 
 def check_toast_icon_callbacks(runner):
 
+    # Click the button to show the toast
+    runner.find_element("#simple-toast-toggle").click()
+
+    wait.until(
+        lambda: len(runner.find_elements("#simple-toast")) > 0,
+        timeout=4,
+    )
+
+    # Check the right classes are showing
     wait.until(
         lambda: len(
             {"toast", "fade", "show"}
@@ -65,16 +74,10 @@ def check_toast_icon_callbacks(runner):
         timeout=4,
     )
 
+    # Click the button to dismiss the toast
     runner.find_element("button.btn-close").click()
 
     wait.until(
         lambda: len(runner.find_elements("#simple-toast")) == 0,
         timeout=4,
     )
-
-    runner.find_element("#simple-toast-toggle").click()
-
-    wait.until(
-        lambda: len(runner.find_elements("#simple-toast")) > 0,
-        timeout=4,
-    )

docs/components_page/components/__tests__/wrappers.py

@@ -13,13 +13,12 @@
 R_WRAPPER = """
 library(dash)
 library(dashBootstrapComponents)
-library(dashHtmlComponents)
 
 app <- Dash$new(external_stylesheets = dbcThemes$BOOTSTRAP)
 
 {snippet}
 
-app$layout(htmlDiv(list({components})))
+app$layout(div(list({components})))
 app$run_server(port = {port})
 """
 

docs/components_page/components/accordion/callback.R

@@ -1,8 +1,6 @@
 library(dashBootstrapComponents)
-library(dashCoreComponents)
-library(dashHtmlComponents)
 
-accordion <- htmlDiv(
+accordion <- div(
   list(
     dbcAccordion(
       list(
@@ -25,7 +23,7 @@ accordion <- htmlDiv(
       id = "accordion",
       active_item = "item-1"
     ),
-    htmlDiv(id = "accordion-contents", className = "mt-3")
+    div(id = "accordion-contents", className = "mt-3")
   )
 )
 

docs/components_page/components/accordion/collapsed.R

@@ -1,7 +1,6 @@
 library(dashBootstrapComponents)
-library(dashHtmlComponents)
 
-accordion <- htmlDiv(
+accordion <- div(
   dbcAccordion(
     list(
       dbcAccordionItem(

docs/components_page/components/accordion/flush.R

@@ -1,7 +1,6 @@
 library(dashBootstrapComponents)
-library(dashHtmlComponents)
 
-accordion <- htmlDiv(
+accordion <- div(
   dbcAccordion(
     list(
       dbcAccordionItem(

docs/components_page/components/accordion/simple.R

@@ -1,20 +1,18 @@
 library(dashBootstrapComponents)
-library(dashCoreComponents)
-library(dashHtmlComponents)
 
-accordion <- htmlDiv(
+accordion <- div(
   dbcAccordion(
     list(
       dbcAccordionItem(
         list(
-          htmlP("This is the content of the first section"),
+          p("This is the content of the first section"),
           dbcButton("Click here")
         ),
         title = "Item 1"
       ),
       dbcAccordionItem(
         list(
-          htmlP("This is the content of the second section"),
+          p("This is the content of the second section"),
           dbcButton("Don't click me!", color = "danger")
         ),
         title = "Item 2"

docs/components_page/components/alert/auto_dismiss.R

@@ -1,13 +1,12 @@
 library(dashBootstrapComponents)
-library(dashHtmlComponents)
 
-alert <- htmlDiv(
+alert <- div(
   list(
     dbcButton("Toggle",
       id = "alert-toggle-auto", className = "me-1",
       n_clicks = 0
     ),
-    htmlHr(),
+    html$hr(),
     dbcAlert(
       "Hello! I am an auto-dismissing alert!",
       id = "alert-auto",

docs/components_page/components/alert/content.R

@@ -1,20 +1,19 @@
 library(dashBootstrapComponents)
-library(dashHtmlComponents)
 
 alert <- dbcAlert(
   list(
-    htmlH4("Well done!", className = "alert-heading"),
-    htmlP(
+    h4("Well done!", className = "alert-heading"),
+    p(
       paste(
         "This is a success alert with loads of extra text in it. So much",
         "that you can see how spacing within an alert works with this",
         "kind of content."
       )
     ),
-    htmlHr(),
-    htmlP(
+    html$hr(),
+    p(
       "Let's put some more text down here, but remove the bottom margin",
-      className = "mb-0",
+      className = "mb-0"
     )
   )
 )