fix(dropdown) menuAlign confers float; dropdown-menu-right wasn't

working [#141528275] Signed-off-by: Tom Chen <tochen@pivotal.io>
pivotal-cf · Mar 10, 2017 · ef1daaa · ef1daaa
1 parent 11d76db
commit ef1daaa
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/library/src/pivotal-ui-react/dropdowns/dropdowns.js b/library/src/pivotal-ui-react/dropdowns/dropdowns.js
@@ -90,7 +90,7 @@ export class Dropdown extends mixin(React.Component).with(Scrim, Transition) {
         'dropdown-border'     : border,
         'dropdown-menu-right' : (menuAlign === 'right'),
         'dropdown-menu-left'  : (menuAlign === 'left'),
-        'dropdown-menu-float' : split || flat || link || floatMenu || noTitle,
+        'dropdown-menu-float' : split || flat || link || floatMenu || noTitle || menuAlign !== 'none',
         'dropdown-menu-scroll': scroll
       }
     )

diff --git a/library/src/pivotal-ui/components/dropdowns/dropdowns.scss b/library/src/pivotal-ui/components/dropdowns/dropdowns.scss
@@ -119,6 +119,7 @@
       }
       &.dropdown-menu-right {
         right:0;
+        left: inherit;
         text-align: right;
         ul {
           float:right;

diff --git a/styleguide/docs/react/dropdowns.js b/styleguide/docs/react/dropdowns.js
@@ -103,18 +103,18 @@ exceeds the parent dropdown width.
   </div>
 
   <div className="form-group form-inline">
-   <Dropdown title='Pinned Left' floatMenu menuAlign='left'>
-     <DropdownItem href="#">Note that this option exceeds the width of the parent dropdown toggle</DropdownItem>
-     <DropdownItem href="#">lorem ipsum</DropdownItem>
-     <DropdownItem href="#">lorem ipsum</DropdownItem>
+    <Dropdown title='Pinned Left' floatMenu menuAlign='left'>
+      <DropdownItem href="#">Note that this option exceeds the width of the parent dropdown toggle</DropdownItem>
+      <DropdownItem href="#">lorem ipsum</DropdownItem>
+      <DropdownItem href="#">lorem ipsum</DropdownItem>
    </Dropdown>
   </div>
 
   <div className="form-group form-inline">
-   <Dropdown title='Pinned Right' floatMenu menuAlign='right'>
-     <DropdownItem href="#">lorem ipsum</DropdownItem>
-     <DropdownItem href="#">lorem ipsum</DropdownItem>
-     <DropdownItem href="#">lorem ipsum</DropdownItem>
+    <Dropdown title='Pinned Right' floatMenu menuAlign='right'>
+      <DropdownItem href="#">lorem ipsum</DropdownItem>
+      <DropdownItem href="#">lorem ipsum</DropdownItem>
+      <DropdownItem href="#">lorem ipsum</DropdownItem>
    </Dropdown>
   </div>
 </div>