Use newest styles / patterns for dropdowns

ui/src/dashboards/components/DashboardHeader.js

@@ -32,10 +32,10 @@ const DashboardHeader = ({
                   type="button"
                   data-toggle="dropdown"
                 >
-                  <span className="button-text">{buttonText}</span>
+                  <span>{buttonText}</span>
                   <span className="caret" />
                 </button>
-                <ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
+                <ul className="dropdown-menu">
                   {children}
                 </ul>
               </div>}

ui/src/dashboards/containers/DashboardPage.js

@@ -293,10 +293,7 @@ class DashboardPage extends Component {
               {dashboards
                 ? dashboards.map((d, i) => (
                     <li className="dropdown-item" key={i}>
-                      <Link
-                        to={`/sources/${sourceID}/dashboards/${d.id}`}
-                        className="role-option"
-                      >
+                      <Link to={`/sources/${sourceID}/dashboards/${d.id}`}>
                         {d.name}
                       </Link>
                     </li>

ui/src/hosts/containers/HostPage.js

@@ -190,21 +190,20 @@ export const HostPage = React.createClass({
         >
           {Object.keys(hosts).map((host, i) => {
             return (
-              <li key={i}>
-                <Link
-                  to={`/sources/${id}/hosts/${host + appParam}`}
-                  className="role-option"
-                >
+              <li className="dropdown-item" key={i}>
+                <Link to={`/sources/${id}/hosts/${host + appParam}`}>
                   {host}
                 </Link>
               </li>
             )
           })}
         </DashboardHeader>
-        <FancyScrollbar className={classnames({
-          'page-contents': true,
-          'presentation-mode': inPresentationMode,
-        })}>
+        <FancyScrollbar
+          className={classnames({
+            'page-contents': true,
+            'presentation-mode': inPresentationMode,
+          })}
+        >
           <div className="container-fluid full-width dashboard">
             {layouts.length > 0 ? this.renderLayouts(layouts) : ''}
           </div>

ui/src/shared/components/AutoRefreshDropdown.js

@@ -46,7 +46,7 @@ const AutoRefreshDropdown = React.createClass({
     return (
       <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
         <div
-          className="btn btn-sm btn-info dropdown-toggle"
+          className="btn btn-sm btn-default dropdown-toggle"
           onClick={() => self.toggleMenu()}
         >
           <span

ui/src/shared/components/CustomTimeRangeDropdown.js

@@ -46,15 +46,15 @@ class CustomTimeRangeDropdown extends Component {
 
     return (
       <div
-        className={classnames('custom-time-range', {show: isVisible})}
+        className={classnames('custom-time-range', {open: isVisible})}
         style={{display: 'flex'}}
       >
         <button
-          className="btn btn-sm btn-info custom-time-range--btn"
+          className="btn btn-sm btn-default dropdown-toggle"
           onClick={onToggle}
         >
           <span className="icon clock" />
-          {`${moment(lower).format('MMM Do HH:mm')} — ${moment(upper).format('MMM Do HH:mm')}`}
+          <span className="dropdown-selected">{`${moment(lower).format('MMM Do HH:mm')} — ${moment(upper).format('MMM Do HH:mm')}`}</span>
           <span className="caret" />
         </button>
         <div className="custom-time--container">

ui/src/shared/components/Dropdown.js

@@ -3,7 +3,10 @@ import {Link} from 'react-router'
 import classnames from 'classnames'
 import OnClickOutside from 'shared/components/OnClickOutside'
 import FancyScrollbar from 'shared/components/FancyScrollbar'
-import {DROPDOWN_MENU_MAX_HEIGHT, DROPDOWN_MENU_ITEM_THRESHOLD} from 'shared/constants/index'
+import {
+  DROPDOWN_MENU_MAX_HEIGHT,
+  DROPDOWN_MENU_ITEM_THRESHOLD,
+} from 'shared/constants/index'
 
 class Dropdown extends Component {
   constructor(props) {
@@ -22,7 +25,7 @@ class Dropdown extends Component {
   static defaultProps = {
     actions: [],
     buttonSize: 'btn-sm',
-    buttonColor: 'btn-info',
+    buttonColor: 'btn-default',
     menuWidth: '100%',
   }
 
@@ -55,13 +58,14 @@ class Dropdown extends Component {
   }
 
   renderShortMenu() {
-    const {actions, addNew, items, menuWidth, menuLabel} = this.props
+    const {actions, addNew, items, menuWidth, menuLabel, menuClass} = this.props
+
     return (
-      <ul className="dropdown-menu" style={{width: menuWidth}}>
-        {menuLabel
-          ? <li className="dropdown-header">{menuLabel}</li>
-          : null
-        }
+      <ul
+        className={classnames('dropdown-menu', {[menuClass]: menuClass})}
+        style={{width: menuWidth}}
+      >
+        {menuLabel ? <li className="dropdown-header">{menuLabel}</li> : null}
         {items.map((item, i) => {
           if (item.text === 'SEPARATOR') {
             return <li key={i} role="separator" className="divider" />
@@ -72,14 +76,13 @@ class Dropdown extends Component {
                 {item.text}
               </a>
               {actions.length > 0
-                ? <div className="dropdown-item__actions">
+                ? <div className="dropdown-actions">
                     {actions.map(action => {
                       return (
                         <button
                           key={action.text}
-                          className="dropdown-item__action"
-                          onClick={e =>
-                            this.handleAction(e, action, item)}
+                          className="dropdown-action"
+                          onClick={e => this.handleAction(e, action, item)}
                         >
                           <span
                             title={action.text}
@@ -105,17 +108,17 @@ class Dropdown extends Component {
   }
 
   renderLongMenu() {
-    const {actions, addNew, items, menuWidth, menuLabel} = this.props
+    const {actions, addNew, items, menuWidth, menuLabel, menuClass} = this.props
     return (
-      <ul className="dropdown-menu" style={{width: menuWidth, height: DROPDOWN_MENU_MAX_HEIGHT}}>
+      <ul
+        className={classnames('dropdown-menu', {[menuClass]: menuClass})}
+        style={{width: menuWidth, height: DROPDOWN_MENU_MAX_HEIGHT}}
+      >
         <FancyScrollbar autoHide={false}>
-          {menuLabel
-            ? <li className="dropdown-header">{menuLabel}</li>
-            : null
-          }
+          {menuLabel ? <li className="dropdown-header">{menuLabel}</li> : null}
           {items.map((item, i) => {
             if (item.text === 'SEPARATOR') {
-              return <li key={i} role="separator" className="divider" />
+              return <li key={i} className="dropdown-divider" />
             }
             return (
               <li className="dropdown-item" key={i}>
@@ -123,14 +126,13 @@ class Dropdown extends Component {
                   {item.text}
                 </a>
                 {actions.length > 0
-                  ? <div className="dropdown-item__actions">
+                  ? <div className="dropdown-actions">
                       {actions.map(action => {
                         return (
                           <button
                             key={action.text}
-                            className="dropdown-item__action"
-                            onClick={e =>
-                              this.handleAction(e, action, item)}
+                            className="dropdown-action"
+                            onClick={e => this.handleAction(e, action, item)}
                           >
                             <span
                               title={action.text}
@@ -179,10 +181,10 @@ class Dropdown extends Component {
           <span className="dropdown-selected">{selected}</span>
           <span className="caret" />
         </div>
-        {(isOpen && items.length < DROPDOWN_MENU_ITEM_THRESHOLD)
+        {isOpen && items.length < DROPDOWN_MENU_ITEM_THRESHOLD
           ? this.renderShortMenu()
           : null}
-        {(isOpen && items.length >= DROPDOWN_MENU_ITEM_THRESHOLD)
+        {isOpen && items.length >= DROPDOWN_MENU_ITEM_THRESHOLD
           ? this.renderLongMenu()
           : null}
       </div>
@@ -218,6 +220,7 @@ Dropdown.propTypes = {
   buttonColor: string,
   menuWidth: string,
   menuLabel: string,
+  menuClass: string,
 }
 
 export default OnClickOutside(Dropdown)

ui/src/shared/components/TimeRangeDropdown.js

@@ -58,7 +58,7 @@ const TimeRangeDropdown = React.createClass({
     return (
       <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
         <div
-          className="btn btn-sm btn-info dropdown-toggle"
+          className="btn btn-sm btn-default dropdown-toggle"
           onClick={() => self.toggleMenu()}
         >
           <span className="icon clock" />

ui/src/style/components/custom-time-range.scss

@@ -6,16 +6,6 @@
 .custom-time-range {
   position: relative;
 }
-.btn.btn-sm.btn-info.custom-time-range--btn {
-  padding: 0 30px 0 9px !important;
-
-  .caret {
-    position: absolute;
-    right: 9px;
-    top: calc(50% + 1px);
-    transform: translateY(-50%);
-  }
-}
 .custom-time--container {
   display: none;
   position: absolute;
@@ -242,8 +232,8 @@ $rd-cell-size: 30px;
 }
 
 
-/* Show State */
-.custom-time-range.show {
+/* Open State */
+.custom-time-range.open {
   .custom-time--container {
     display: flex;
   }
@@ -251,4 +241,4 @@ $rd-cell-size: 30px;
     color: $g20-white !important;
     background-color: $g6-smoke;
   }
-}
+}