From c7d3de0fc8339b12ea41d5c9afe904f2cbcdfda6 Mon Sep 17 00:00:00 2001
From: Shawn Erquhart <shawn@shawn.works>
Date: Mon, 17 Apr 2017 17:56:10 -0400
Subject: [PATCH] use ToolbarButton for plugins

---
 .../MarkdownControlElements/Toolbar.css       | 17 +---------------
 .../MarkdownControlElements/Toolbar.js        |  4 ++--
 .../MarkdownControlElements/ToolbarButton.css | 13 ++++++++++++
 .../MarkdownControlElements/ToolbarButton.js  | 14 +++++++------
 .../MarkdownControlElements/ToolbarPlugins.js | 20 +++++++++----------
 5 files changed, 33 insertions(+), 35 deletions(-)
 create mode 100644 src/components/Widgets/MarkdownControlElements/ToolbarButton.css

diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar.css b/src/components/Widgets/MarkdownControlElements/Toolbar.css
index 03330e81..c7f4348b 100644
--- a/src/components/Widgets/MarkdownControlElements/Toolbar.css
+++ b/src/components/Widgets/MarkdownControlElements/Toolbar.css
@@ -6,27 +6,12 @@
   display: inline-block;
 }
 
-.Button {
-  display: inline-block;
-
-  & button {
-    padding: 6px;
-    border: none;
-    background-color: transparent;
-    cursor: pointer;
-
-    @nest .ButtonActive& {
-      background-color: var(--highlightFGAltColor);
-    }
-  }
-}
-
 .Toggle {
   position: absolute;
   top: 0;
   right: 0;
 
-  & .Button button {
+  & button {
     font-size: 12px;
     text-transform: uppercase;
     padding-top: 10px;
diff --git a/src/components/Widgets/MarkdownControlElements/Toolbar.js b/src/components/Widgets/MarkdownControlElements/Toolbar.js
index 9f23069c..eef9d294 100644
--- a/src/components/Widgets/MarkdownControlElements/Toolbar.js
+++ b/src/components/Widgets/MarkdownControlElements/Toolbar.js
@@ -7,7 +7,7 @@ import styles from './Toolbar.css';
 function Toolbar(props) {
   const { onH1, onH2, onBold, onItalic, onLink, onToggleMode, rawMode } = props;
   return (
-    <ul className={styles.Toolbar}>
+    <div className={styles.Toolbar}>
       <ToolbarButton label="Header 1" icon="h1" action={onH1}/>
       <ToolbarButton label="Header 2" icon="h2" action={onH2}/>
       <ToolbarButton label="Bold" icon="bold" action={onBold}/>
@@ -16,7 +16,7 @@ function Toolbar(props) {
       <div className={styles.Toggle}>
         <ToolbarButton label="Toggle Markdown" action={onToggleMode} active={rawMode}/>
       </div>
-    </ul>
+    </div>
   );
 }
 
diff --git a/src/components/Widgets/MarkdownControlElements/ToolbarButton.css b/src/components/Widgets/MarkdownControlElements/ToolbarButton.css
new file mode 100644
index 00000000..807f1941
--- /dev/null
+++ b/src/components/Widgets/MarkdownControlElements/ToolbarButton.css
@@ -0,0 +1,13 @@
+@import "../../UI/theme";
+
+.button {
+  display: inline-block;
+  padding: 6px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.active {
+  background-color: var(--highlightFGAltColor);
+}
diff --git a/src/components/Widgets/MarkdownControlElements/ToolbarButton.js b/src/components/Widgets/MarkdownControlElements/ToolbarButton.js
index 77035cf2..fdaf1b52 100644
--- a/src/components/Widgets/MarkdownControlElements/ToolbarButton.js
+++ b/src/components/Widgets/MarkdownControlElements/ToolbarButton.js
@@ -1,14 +1,16 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { Icon } from '../../UI';
-import styles from './Toolbar.css';
+import styles from './ToolbarButton.css';
 
 const ToolbarButton = ({ label, icon, action, active }) => (
-  <li className={classnames(styles.Button, { [styles.ButtonActive]: active })}>
-    <button className={styles[label]} onClick={action} title={label}>
-      { icon ? <Icon type={icon} /> : label }
-    </button>
-  </li>
+  <button
+    className={classnames(styles.button, { [styles.active]: active })}
+    onClick={action}
+    title={label}
+  >
+    { icon ? <Icon type={icon} /> : label }
+  </button>
 );
 
 ToolbarButton.propTypes = {
diff --git a/src/components/Widgets/MarkdownControlElements/ToolbarPlugins.js b/src/components/Widgets/MarkdownControlElements/ToolbarPlugins.js
index 15a3068f..4af1c885 100644
--- a/src/components/Widgets/MarkdownControlElements/ToolbarPlugins.js
+++ b/src/components/Widgets/MarkdownControlElements/ToolbarPlugins.js
@@ -3,6 +3,7 @@ import { fromJS } from 'immutable';
 import { Button } from 'react-toolbox/lib/button';
 import { Icon } from '../../UI';
 import { resolveWidget } from '../../Widgets';
+import ToolbarButton from './ToolbarButton';
 import toolbarStyles from './Toolbar.css';
 import styles from './ToolbarPlugins.css';
 
@@ -30,14 +31,6 @@ export default class ToolbarPlugins extends Component {
     };
   }
 
-  buttonFor(plugin) {
-    return (<li key={`plugin-${ plugin.get('id') }`} className={toolbarStyles.Button}>
-      <button className={styles[plugin.get('label')]} onClick={this.handlePlugin(plugin)} title={plugin.get('label')}>
-        <Icon type={plugin.get('icon')} />
-      </button>
-    </li>);
-  }
-
   handleSubmit = (e) => {
     e.preventDefault();
     const { openPlugin, pluginData } = this.state;
@@ -109,9 +102,14 @@ export default class ToolbarPlugins extends Component {
     }
 
     return (<div className={classNames.join(' ')}>
-      <ul className={styles.menu}>
-        {plugins.map(plugin => this.buttonFor(plugin))}
-      </ul>
+      {plugins.map(plugin => (
+        <ToolbarButton
+          key={`plugin-${plugin.get('id')}`}
+          label={plugin.get('label')}
+          icon={plugin.get('icon')}
+          action={this.handlePlugin(plugin)}
+        />
+      ))}
       {openPlugin && this.pluginForm(openPlugin)}
     </div>);
   }