Merge pull request #33 from edx/ari/fix-dropdown

patch dropdown for bootstrap v4

.storybook/__snapshots__/Storyshots.test.js.snap

@@ -91,7 +91,7 @@ exports[`Storyshots Dropdown basic usage 1`] = `
   <button
     aria-expanded={false}
     aria-haspopup="true"
-    className="btn-borderless dropdown-toggle btn btn-secondary"
+    className="dropdown-toggle btn btn-light"
     onBlur={[Function]}
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -99,49 +99,37 @@ exports[`Storyshots Dropdown basic usage 1`] = `
   >
     Search Engines
   </button>
-  <ul
+  <div
     aria-hidden={true}
     aria-label="Search Engines"
     className="dropdown-menu"
     role="menu"
   >
-    <li
-      className="dropdown-item"
-    >
     <a
+      className="dropdown-item"
       href="https://google.com"
       onKeyDown={[Function]}
       role="menuitem"
-        tabIndex="-1"
     >
       Google
     </a>
-    </li>
-    <li
-      className="dropdown-item"
-    >
     <a
+      className="dropdown-item"
       href="https://duckduckgo.com"
       onKeyDown={[Function]}
       role="menuitem"
-        tabIndex="-1"
     >
       DuckDuckGo
     </a>
-    </li>
-    <li
-      className="dropdown-item"
-    >
     <a
+      className="dropdown-item"
       href="https://yahoo.com"
       onKeyDown={[Function]}
       role="menuitem"
-        tabIndex="-1"
     >
       Yahoo
     </a>
-    </li>
-  </ul>
+  </div>
 </div>
 `;
 

src/Dropdown/Dropdown.scss

 @import "~bootstrap/scss/_dropdown";
 
-.btn-borderless {
-    border: 0 !important;
+// Trying to patch this upstream, then this can
+// be removed.
+// https://github.com/twbs/bootstrap/pull/23990
+.show {
+  > a:focus {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: Highlight;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
 }

src/Dropdown/Dropdown.test.jsx

@@ -26,14 +26,14 @@ describe('<Dropdown />', () => {
         {...props}
       />,
     );
-    const menu = wrapper.find('ul');
+    const menu = wrapper.find('.dropdown-menu');
     const button = wrapper.find('[type="button"]');
 
     it('with menu and toggle', () => {
       expect(button.exists()).toEqual(true);
       expect(menu.prop('aria-label')).toEqual(props.title);
       expect(menu.exists()).toEqual(true);
-      expect(menu.find('li')).toHaveLength(props.menuItems.length);
+      expect(menu.find('a')).toHaveLength(props.menuItems.length);
     });
 
     it('with menu closed', () => {
@@ -110,7 +110,7 @@ describe('<Dropdown />', () => {
       { attachTo: div },
     );
     wrapper.find('[type="button"]').simulate('click');
-    document.querySelector('ul').click();
+    document.querySelector('.dropdown-menu').click();
     menuOpen(true, wrapper);
   });
 

src/Dropdown/index.jsx

@@ -98,19 +98,18 @@ class Dropdown extends React.Component {
 
   generateMenuItems(menuItems) {
     return menuItems.map((menuItem, i) => (
-      <li className={styles['dropdown-item']} key={i}>
       <a
-          role="menuitem"
+        className={styles['dropdown-item']}
         href={menuItem.href}
+        key={i}
         onKeyDown={this.handleMenuKeyDown}
         ref={(item) => {
           this.menuItems[i] = item;
         }}
-          tabIndex="-1"
+        role="menuitem"
       >
         {menuItem.label}
       </a>
-      </li>
     ));
   }
 
@@ -127,36 +126,43 @@ class Dropdown extends React.Component {
         <Button
           aria-expanded={this.state.open}
           aria-haspopup="true"
-          buttonType="secondary"
+          buttonType={this.props.buttonType}
           display={this.props.title}
           onClick={this.toggle}
           onKeyDown={this.handleToggleKeyDown}
           className={[
-            styles['btn-borderless'],
             styles['dropdown-toggle'],
           ]}
           type="button"
           inputRef={(toggleElem) => { this.toggleElem = toggleElem; }}
         />
-        <ul
+        <div
           aria-label={this.props.title}
           aria-hidden={!this.state.open}
-          className={styles['dropdown-menu']}
+          className={classNames([
+            styles['dropdown-menu'],
+            { [styles.show]: this.state.open },
+          ])}
           role="menu"
         >
           {menuItems}
-        </ul>
+        </div>
       </div>
     );
   }
 }
 
 Dropdown.propTypes = {
-  title: PropTypes.string.isRequired,
+  buttonType: PropTypes.string,
   menuItems: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     href: PropTypes.string,
   })).isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+Dropdown.defaultProps = {
+  buttonType: 'light',
 };
 
 export default Dropdown;