Add option to right align the dropdown menu (#143)

* Add option to right align the dropdown menu * Add right-aligment to docs
facultyai · Apr 13, 2019 · ae15cc5 · ae15cc5
1 parent f5eb0c9
commit ae15cc5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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.
    */