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
+    <a
       className="dropdown-item"
+      href="https://google.com"
+      onKeyDown={[Function]}
+      role="menuitem"
     >
-      <a
-        href="https://google.com"
-        onKeyDown={[Function]}
-        role="menuitem"
-        tabIndex="-1"
-      >
-        Google
-      </a>
-    </li>
-    <li
+      Google
+    </a>
+    <a
       className="dropdown-item"
+      href="https://duckduckgo.com"
+      onKeyDown={[Function]}
+      role="menuitem"
     >
-      <a
-        href="https://duckduckgo.com"
-        onKeyDown={[Function]}
-        role="menuitem"
-        tabIndex="-1"
-      >
-        DuckDuckGo
-      </a>
-    </li>
-    <li
+      DuckDuckGo
+    </a>
+    <a
       className="dropdown-item"
+      href="https://yahoo.com"
+      onKeyDown={[Function]}
+      role="menuitem"
     >
-      <a
-        href="https://yahoo.com"
-        onKeyDown={[Function]}
-        role="menuitem"
-        tabIndex="-1"
-      >
-        Yahoo
-      </a>
-    </li>
-  </ul>
+      Yahoo
+    </a>
+  </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"
-          href={menuItem.href}
-          onKeyDown={this.handleMenuKeyDown}
-          ref={(item) => {
-            this.menuItems[i] = item;
-          }}
-          tabIndex="-1"
-        >
-          {menuItem.label}
-        </a>
-      </li>
+      <a
+        className={styles['dropdown-item']}
+        href={menuItem.href}
+        key={i}
+        onKeyDown={this.handleMenuKeyDown}
+        ref={(item) => {
+          this.menuItems[i] = item;
+        }}
+        role="menuitem"
+      >
+        {menuItem.label}
+      </a>
     ));
   }
 
@@ -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;