From 2b46f4864c585fc8a2a5237d2e92d9207de2739d Mon Sep 17 00:00:00 2001
From: Jms <37494306+jmsblah@users.noreply.github.com>
Date: Sat, 9 Mar 2019 02:17:53 -0500
Subject: [PATCH] Add option to right align the dropdown menu (#143)

* Add option to right align the dropdown menu

* Add right-aligment to docs
---
 .../components/dropdown/__init__.py           |  5 ++++
 .../components/dropdown/alignment.py          | 26 +++++++++++++++++++
 src/components/DropdownMenu.js                |  8 +++++-
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 docs/components_page/components/dropdown/alignment.py

diff --git a/docs/components_page/components/dropdown/__init__.py b/docs/components_page/components/dropdown/__init__.py
index 4e0e717e3..23157d45f 100644
--- a/docs/components_page/components/dropdown/__init__.py
+++ b/docs/components_page/components/dropdown/__init__.py
@@ -5,6 +5,7 @@
 from ...api_doc import ApiDoc
 from ...helpers import ExampleContainer, HighlightedSource
 from ...metadata import get_component_metadata
+from .alignment import dropdown as dropdown_alignment
 from .direction import dropdown as dropdown_direction
 from .simple import dropdown as dropdown_simple
 from .size import dropdown as dropdown_size
@@ -14,6 +15,7 @@
 dropdown_simple_source = (HERE / "simple.py").read_text()
 dropdown_size_source = (HERE / "size.py").read_text()
 dropdown_direction_source = (HERE / "direction.py").read_text()
+dropdown_alignment_source = (HERE / "alignment.py").read_text()
 
 content = [
     html.H2("DropdownMenu"),
@@ -25,6 +27,9 @@
     html.H4("DropdownMenu direction"),
     ExampleContainer(dropdown_direction),
     HighlightedSource(dropdown_direction_source),
+    html.H4("DropdownMenu alignment"),
+    ExampleContainer(dropdown_alignment),
+    HighlightedSource(dropdown_alignment_source),
     ApiDoc(
         get_component_metadata("src/components/DropdownMenu.js"),
         component_name="DropdownMenu",
diff --git a/docs/components_page/components/dropdown/alignment.py b/docs/components_page/components/dropdown/alignment.py
new file mode 100644
index 000000000..819eb6b0c
--- /dev/null
+++ b/docs/components_page/components/dropdown/alignment.py
@@ -0,0 +1,26 @@
+import dash_bootstrap_components as dbc
+
+items = [
+    dbc.DropdownMenuItem("Action"),
+    dbc.DropdownMenuItem("Another action"),
+    dbc.DropdownMenuItem("Something else here"),
+    dbc.DropdownMenuItem(divider=True),
+    dbc.DropdownMenuItem("Something else here after the divider"),
+]
+
+dropdown = dbc.Row(
+    [
+        dbc.Col(
+            dbc.DropdownMenu(
+                label="Left-aligned menu (default)",
+                children=items,
+                right=False,
+            )
+        ),
+        dbc.Col(
+            dbc.DropdownMenu(
+                label="Right-aligned menu", children=items, right=True
+            )
+        ),
+    ]
+)
diff --git a/src/components/DropdownMenu.js b/src/components/DropdownMenu.js
index f3e372f52..c37f13d87 100644
--- a/src/components/DropdownMenu.js
+++ b/src/components/DropdownMenu.js
@@ -31,6 +31,7 @@ class DropdownMenu extends React.Component {
       in_navbar,
       addon_type,
       bs_size,
+      right,
       loading_state,
       ...otherProps
     } = this.props;
@@ -51,7 +52,7 @@ class DropdownMenu extends React.Component {
         <DropdownToggle nav={nav} caret={caret} disabled={disabled}>
           {label}
         </DropdownToggle>
-        <RSDropdownMenu>{this.props.children}</RSDropdownMenu>
+        <RSDropdownMenu right={right}>{this.props.children}</RSDropdownMenu>
       </Dropdown>
     );
   }
@@ -103,6 +104,11 @@ DropdownMenu.propTypes = {
    */
   direction: PropTypes.oneOf(['down', 'left', 'right']),
 
+  /**
+   * Align the DropdownMenu along the right side of its parent. Default: False.
+   */
+  right: PropTypes.bool,
+
   /**
    * Set this to True if the DropdownMenu is inside a navbar. Default: False.
    */