Fix DropdownMenu bugs (#662)

* Updated to use react-bootstrap props

* Update dropdown alignment examples

* Add dropdown autoclose examples

* Add dark dropdown examples

* Update dropdown direction examples

* Update dropdown docs for new/amended examples

* Format

* Fixed dropdown in button group

* Remove new auto_close prop in dropdown

Co-authored-by: tcbegley <[email protected]>

Author: glsdown

docs/components_page/components/dropdown.md

@@ -17,6 +17,12 @@ Each `DropdownMenuItem` can be used like `dash_core_components.Link`, as a regul
 
 {{example:components/dropdown/menu_items.py:dropdown}}
 
+## Dark Dropdown
+
+Set `menu_variant="dark"` to change the dropdown menu to a dark colour scheme.
+
+{{example:components/dropdown/dark.py:dropdown}}
+
 ## Styling the toggle
 
 You can use the `color` prop of `DropdownMenu` to set the color to one of the Bootstrap contextual colors. If you want to further customise the style you can use the `toggle_style` and `toggle_class_name` arguments.
@@ -31,13 +37,13 @@ Control the size of the `DropdownMenu` toggle using the `size` argument. You can
 
 ## DropdownMenu direction
 
-Use the `direction` argument to control where the menu is rendered relative to the toggle. The possible options are `'up'`, `'down'` (default), `'left'`, or `'right'`.
+Use the `direction` argument to control where the menu is rendered relative to the toggle. The possible options are `'up'`, `'down'` (default), `'start'`, or `'end'`.
 
 {{example:components/dropdown/direction.py:dropdown}}
 
 ## DropdownMenu alignment
 
-By default the menu is aligned with left of the toggle. Set `right=True` for a right aligned menu.
+By default the menu is aligned with left of the toggle. Set `align_end=True` for a right aligned menu.
 
 {{example:components/dropdown/alignment.py:dropdown}}
 

docs/components_page/components/dropdown/alignment.R

@@ -14,12 +14,12 @@ dropdown <- dbcRow(
       dbcDropdownMenu(
         label = "Left-aligned menu (default)",
         children = items,
-        right = FALSE
+        align_end = FALSE
       )
     ),
     dbcCol(
       dbcDropdownMenu(
-        label = "Right-aligned menu", children = items, right = TRUE
+        label = "Right-aligned menu", children = items, align_end = TRUE
       )
     )
   )

docs/components_page/components/dropdown/alignment.jl

@@ -13,8 +13,10 @@ dropdown = dbc_row([
         dbc_dropdownmenu(
             label = "Left-aligned menu (default)",
             children = items,
-            right = false,
+            align_end = false,
         ),
     ),
-    dbc_col(dbc_dropdownmenu(label = "Right-aligned menu", children = items, right = true)),
+    dbc_col(
+        dbc_dropdownmenu(label = "Right-aligned menu", children = items, align_end = true),
+    ),
 ]);

docs/components_page/components/dropdown/alignment.py

@@ -14,12 +14,12 @@
             dbc.DropdownMenu(
                 label="Left-aligned menu (default)",
                 children=items,
-                right=False,
+                align_end=False,
             )
         ),
         dbc.Col(
             dbc.DropdownMenu(
-                label="Right-aligned menu", children=items, right=True
+                label="Right-aligned menu", children=items, align_end=True
             )
         ),
     ]

docs/components_page/components/dropdown/dark.R

@@ -0,0 +1,11 @@
+library(dashBootstrapComponents)
+
+dropdown <- dbcDropdownMenu(
+  label = "Menu",
+  menu_variant = "dark",
+  children = list(
+    dbcDropdownMenuItem("Item 1"),
+    dbcDropdownMenuItem("Item 2"),
+    dbcDropdownMenuItem("Item 3")
+  )
+)

docs/components_page/components/dropdown/dark.jl

@@ -0,0 +1,11 @@
+using DashBootstrapComponents
+
+dropdown = dbc_dropdownmenu(
+    label = "Menu",
+    menu_variant = "dark",
+    children = [
+        dbc_dropdownmenuitem("Item 1"),
+        dbc_dropdownmenuitem("Item 2"),
+        dbc_dropdownmenuitem("Item 3"),
+    ],
+)

docs/components_page/components/dropdown/dark.py

@@ -0,0 +1,11 @@
+import dash_bootstrap_components as dbc
+
+dropdown = dbc.DropdownMenu(
+    label="Menu",
+    menu_variant="dark",
+    children=[
+        dbc.DropdownMenuItem("Item 1"),
+        dbc.DropdownMenuItem("Item 2"),
+        dbc.DropdownMenuItem("Item 3"),
+    ],
+)

docs/components_page/components/dropdown/direction.R

@@ -17,13 +17,13 @@ dropdown <- dbcRow(
     ),
     dbcCol(
       dbcDropdownMenu(
-        label = "Dropleft", children = items_direction, direction = "left"
+        label = "Dropstart", children = items_direction, direction = "start"
       ),
       width = "auto"
     ),
     dbcCol(
       dbcDropdownMenu(
-        label = "Dropright", children = items_direction, direction = "right"
+        label = "Dropend", children = items_direction, direction = "end"
       ),
       width = "auto"
     ),

docs/components_page/components/dropdown/direction.jl

@@ -17,11 +17,11 @@ dropdown = dbc_row(
             width = "auto",
         ),
         dbc_col(
-            dbc_dropdownmenu(label = "Dropleft", children = items, direction = "left"),
+            dbc_dropdownmenu(label = "Dropstart", children = items, direction = "start"),
             width = "auto",
         ),
         dbc_col(
-            dbc_dropdownmenu(label = "Dropright", children = items, direction = "right"),
+            dbc_dropdownmenu(label = "Dropend", children = items, direction = "end"),
             width = "auto",
         ),
         dbc_col(

docs/components_page/components/dropdown/direction.py

@@ -16,14 +16,12 @@
         ),
         dbc.Col(
             dbc.DropdownMenu(
-                label="Dropleft", children=items, direction="left"
+                label="Dropstart", children=items, direction="start"
             ),
             width="auto",
         ),
         dbc.Col(
-            dbc.DropdownMenu(
-                label="Dropright", children=items, direction="right"
-            ),
+            dbc.DropdownMenu(label="Dropend", children=items, direction="end"),
             width="auto",
         ),
         dbc.Col(