Dropdown bug fixing

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(

src/components/dropdownmenu/DropdownMenu.js

@@ -1,8 +1,9 @@
 import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import Dropdown from 'react-bootstrap/Dropdown';
-import NavDropdown from 'react-bootstrap/NavDropdown';
+import RBDropdown from 'react-bootstrap/Dropdown';
+import Nav from 'react-bootstrap/Nav';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import {DropdownMenuContext} from '../../private/DropdownMenuContext';
 import {bootstrapColors} from '../../private/BootstrapColors';
 
@@ -21,8 +22,12 @@ const DropdownMenu = props => {
     addon_type,
     size,
     right,
+    align_end,
+    menu_variant,
+    direction,
     loading_state,
     color,
+    group,
     toggle_style,
     toggleClassName,
     toggle_class_name,
@@ -39,26 +44,34 @@ const DropdownMenu = props => {
     }
   };
 
-  const Tag = nav ? NavDropdown : Dropdown;
-
   return (
     <DropdownMenuContext.Provider
       value={{
         toggle: toggle,
         isOpen: dropdownOpen
       }}
     >
-      <Tag
+      <RBDropdown
+        as={nav ? Nav.Item : group ? ButtonGroup : undefined}
         show={dropdownOpen}
         disabled={disabled}
         navbar={in_navbar}
         className={class_name || className}
+        drop={
+          direction === 'left'
+            ? 'start'
+            : direction === 'right'
+            ? 'end'
+            : direction
+        }
+        align={align_end ? 'end' : right ? 'end' : 'start'}
         {...omit(['setProps'], otherProps)}
         data-dash-is-loading={
           (loading_state && loading_state.is_loading) || undefined
         }
       >
-        <Dropdown.Toggle
+        <RBDropdown.Toggle
+          as={nav ? Nav.Link : undefined}
           onClick={toggle}
           disabled={disabled}
           size={size}
@@ -71,18 +84,22 @@ const DropdownMenu = props => {
           className={toggle_class_name || toggleClassName}
         >
           {label}
-        </Dropdown.Toggle>
-        <Dropdown.Menu renderOnMount right={right}>
+        </RBDropdown.Toggle>
+        <RBDropdown.Menu
+          renderOnMount
+          variant={menu_variant === 'dark' ? 'dark' : undefined}
+        >
           {children}
-        </Dropdown.Menu>
-      </Tag>
+        </RBDropdown.Menu>
+      </RBDropdown>
     </DropdownMenuContext.Provider>
   );
 };
 
 DropdownMenu.defaultProps = {
   caret: true,
-  disabled: false
+  disabled: false,
+  menu_variant: 'light'
 };
 
 DropdownMenu.propTypes = {
@@ -128,11 +145,28 @@ DropdownMenu.propTypes = {
   label: PropTypes.string,
 
   /**
-   * Direction in which to expand the DropdownMenu. Default: 'down'.
+   * Direction in which to expand the DropdownMenu. Default: 'down'. `left`
+   * and `right` have been deprecated, and `start` and `end` should be used
+   * instead.
+   */
+  direction: PropTypes.oneOf([
+    'down',
+    'start',
+    'end',
+    'up',
+    'left',
+    'right',
+    'end'
+  ]),
+
+  /**
+   * Align the DropdownMenu along the right side of its parent. Default: False.
    */
-  direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
+  align_end: PropTypes.bool,
 
   /**
+   * **DEPRECATED** Use `align_end` instead.
+   *
    * Align the DropdownMenu along the right side of its parent. Default: False.
    */
   right: PropTypes.bool,
@@ -174,6 +208,11 @@ DropdownMenu.propTypes = {
    */
   color: PropTypes.string,
 
+  /**
+   * Set `menu_variant="dark"` to create a dark-mode drop down instead
+   */
+  menu_variant: PropTypes.oneOf(['light', 'dark']),
+
   /**
    * Defines CSS styles which will override styles previously set. The styles
    * set here apply to the DropdownMenu toggle.

src/components/dropdownmenu/DropdownMenuItem.js

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 import PropTypes from 'prop-types';
 import {omit} from 'ramda';
-import RBDropdownItem from 'react-bootstrap/DropdownItem';
+import RBDropdown from 'react-bootstrap/Dropdown';
 
 import Link, {isExternalLink} from '../../private/Link';
 import {DropdownMenuContext} from '../../private/DropdownMenuContext';
@@ -44,13 +44,13 @@ const DropdownMenuItem = props => {
   otherProps[useLink ? 'preOnClick' : 'onClick'] = e => handleClick(e);
 
   if (header) {
-    return <Dropdown.Header>{children}</Dropdown.Header>;
+    return <RBDropdown.Header>{children}</RBDropdown.Header>;
   } else if (divider) {
-    return <Dropdown.Divider />;
+    return <RBDropdown.Divider />;
   }
 
   return (
-    <RBDropdownItem
+    <RBDropdown.Item
       as={useLink ? Link : 'button'}
       // don't pass href if disabled otherwise reactstrap renders item
       // as link and the cursor becomes a pointer on hover
@@ -64,7 +64,7 @@ const DropdownMenuItem = props => {
       }
     >
       {children}
-    </RBDropdownItem>
+    </RBDropdown.Item>
   );
 };