fix(dropdowns): Fixes the highlighting on hover of dropdown items

Allows for users to add borders to dropdowns by providing a border prop. [Finishes #102024260] Signed-off-by: Caroline Taymor <[email protected]> Signed-off-by: Kenny Wang <[email protected]>
pivotal-cf · Sep 9, 2015 · 718bfdd · 718bfdd
1 parent d07cb1a
commit 718bfdd
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 8 deletions.
diff --git a/src/pivotal-ui-react/dropdowns/dropdowns.js b/src/pivotal-ui-react/dropdowns/dropdowns.js
@@ -34,19 +34,21 @@ function defDropdown(props) {
       id: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]),
       buttonClassName: React.PropTypes.string,
       style: React.PropTypes.any,
-      title: React.PropTypes.any
+      title: React.PropTypes.any,
+      border: React.PropTypes.bool
     },
     render: function render() {
-      const {buttonClassName, style, title, children, ...others} = this.props;
+      const {buttonClassName, style, title, children, border, ...others} = this.props;
       const {buttonClassName: defaultBtnClassName, bsStyle} = props;
 
       const btnClass = classnames(buttonClassName, defaultBtnClassName);
+      const borderClass = border ? 'dropdown-border' : null;
       return (
         <BsDropdown {...others}>
           <BsDropdown.Toggle className={btnClass} bsStyle={bsStyle} style={style}>
             {title}
           </BsDropdown.Toggle>
-          <BsDropdown.Menu>
+          <BsDropdown.Menu className={borderClass}>
             {children}
           </BsDropdown.Menu>
         </BsDropdown>
@@ -164,7 +166,6 @@ This is the basic bootstrap dropdown:
 ```react_example_table
 <Dropdown title='DropDown'>
   <DropdownItem href="https://media.giphy.com/media/13py6c5BSnBkic/giphy.gif">Booyeah</DropdownItem>
-  <DropdownItem divider />
   <DropdownItem href="https://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</DropdownItem>
 </Dropdown>
 ```
@@ -202,10 +203,15 @@ If you want to customize the dropdown, you can use `className` to add a modifier
 To customize the dropdown button, you can add modifier classes to it
 using the `buttonClassName` property. `id` and `style` will also be applied to the dropdown button.
 
+If you want to add borders between items, you can pass a border attribute to any of our dropdown classes.
+
 ```react_example
-<DefaultAltDropdown title='DropDown' buttonClassName='btn-lg'>
+<DefaultAltDropdown title='DropDown' buttonClassName='btn-lg' border>
+  <DropdownItem href="https://media.giphy.com/media/13py6c5BSnBkic/giphy.gif">Booyeah</DropdownItem>
+  <DropdownItem href="https://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</DropdownItem>
+  <DropdownItem href="https://media.giphy.com/media/13py6c5BSnBkic/giphy.gif">Booyeah</DropdownItem>
+  <DropdownItem href="https://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</DropdownItem>
   <DropdownItem href="https://media.giphy.com/media/13py6c5BSnBkic/giphy.gif">Booyeah</DropdownItem>
-  <DropdownItem divider />
   <DropdownItem href="https://media.giphy.com/media/TlK63EQERmiAVzMEgO4/giphy.gif">Adorable</DropdownItem>
 </DefaultAltDropdown>
 ```

diff --git a/src/pivotal-ui/components/dropdowns/dropdowns.scss b/src/pivotal-ui/components/dropdowns/dropdowns.scss
@@ -137,7 +137,7 @@ Here's a crazy-complex dropdown. Not for the faint of heart.
 */
 
 .dropdown-menu {
-  @include box-shadow(0 2px 0 rgba(211,217,217,0.50));
+  @include box-shadow(0 2px 0 rgba(211, 217, 217, 0.50));
   background-color: white;
   border: 1px solid $neutral-7;
   padding: 0 0;
@@ -152,6 +152,15 @@ Here's a crazy-complex dropdown. Not for the faint of heart.
       }
     }
   }
+  &.dropdown-border {
+    > li {
+      > a {
+        padding-top: 7px;
+        padding-bottom: 7px;
+        border-bottom: 1px solid $dropdown-border;
+      }
+    }
+  }
 }
 
 /*doc

diff --git a/src/pivotal-ui/components/pui-variables.scss b/src/pivotal-ui/components/pui-variables.scss
@@ -534,7 +534,7 @@ $cursor-disabled:                not-allowed !default;
 // -------------------------
 
 $dropdown-bg:                    $neutral-10 !default;
-$dropdown-border:                transparent !default;
+$dropdown-border:                $neutral-9 !default;
 $dropdown-fallback-border:       transparent !default;
 $dropdown-divider-bg:            #e5e5e5 !default;