From 507e8cbf728e9924bfceac0dcb4a29b9da841566 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Sat, 10 Jun 2017 20:07:40 +0200
Subject: [PATCH 1/3] IMPROVE design of addon-events

---
 addons/events/src/components/Event.js | 101 ++++++++++++++++----------
 addons/events/src/components/Panel.js |   3 +-
 2 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js
index 35c93f3d607c..9e38218d5e24 100644
--- a/addons/events/src/components/Event.js
+++ b/addons/events/src/components/Event.js
@@ -4,37 +4,64 @@ import Textarea from 'react-textarea-autosize';
 import PropTypes from 'prop-types';
 
 const styles = {
-  item: {
-    padding: '10 0',
-  },
-  buttonWrapper: {
-    textAlign: 'center',
+  label: {
+    display: 'table-cell',
+    boxSizing: 'border-box',
+    verticalAlign: 'top',
+    paddingRight: '5px',
+    paddingTop: '7px',
+    textAlign: 'right',
+    width: '100px',
+    fontSize: '12px',
+    color: 'rgb(68, 68, 68)',
+    fontWeight: '600',
   },
   button: {
-    display: 'inline-block',
-    fontFamily: `
-      -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
-      "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
-    `,
-    fontSize: 14,
-    padding: 10,
-    margin: 10,
-    width: '40%',
+    display: 'table-cell',
+    textTransform: 'uppercase',
+    letterSpacing: '3.5px',
+    fontSize: 12,
+    fontWeight: 'bolder',
+    color: 'rgb(130, 130, 130)',
+    border: '1px solid rgb(193, 193, 193)',
+    textAlign: 'center',
+    borderRadius: 2,
+    padding: 5,
+    cursor: 'pointer',
+    paddingLeft: 8,
+    margin: '0 0 0 5px',
+    backgroundColor: 'inherit',
+    verticalAlign: 'top',
+    outline: 0,
   },
   textArea: {
-    display: 'block',
+    flex: '1 0 0',
     boxSizing: 'border-box',
-    margin: 0,
-    width: '100%',
-    maxWidth: '100%',
-    verticalAlign: 'middle',
+    margin: '0 0 0 5px',
+    verticalAlign: 'top',
     outline: 'none',
     border: '1px solid #c7c7c7',
     borderRadius: 2,
     fontSize: 13,
-    padding: '5px',
+    padding: '8px 5px 7px 8px',
     color: 'rgb(51, 51, 51)',
     fontFamily: 'Arial, sans-serif',
+    minHeight: '32px',
+    resize: 'vertical',
+  },
+  item: {
+    display: 'flex',
+    padding: '5px',
+    alignItems: 'flex-start',
+    boxSizing: 'border-box',
+    width: '100%',
+  },
+  hidden: {
+    display: 'none',
+  },
+  failed: {
+    border: '1px solid #fadddd',
+    backgroundColor: '#fff5f5',
   },
 };
 
@@ -100,37 +127,33 @@ export default class Item extends Component {
   };
 
   render() {
+    const { title, name } = this.props;
     const { failed, isTextAreaShowed } = this.state;
-    const extraStyle = {
-      display: isTextAreaShowed ? 'block' : 'none',
-    };
 
-    if (failed) {
-      extraStyle.border = '1px solid #fadddd';
-      extraStyle.backgroundColor = '#fff5f5';
-    }
+    const extraStyle = {};
+    Object.assign(extraStyle, isTextAreaShowed ? {} : { ...styles.hidden });
+    Object.assign(extraStyle, failed ? { ...styles.failed } : {});
 
     return (
-      <div style={{ width: '100%' }}>
-        <h3>{this.props.title}</h3>
-        <div style={styles.buttonWrapper}>
-          <button style={styles.button} onClick={this.onEmitClick} disabled={failed}>
-            Emit
-          </button>
-          <button style={styles.button} onClick={this.onToggleEditClick}>
-            {isTextAreaShowed ? 'Close' : 'Edit payload'}
-          </button>
-        </div>
-
+      <div style={styles.item}>
+        <label htmlFor={`addon-event-${name}`} style={styles.label}>{title}</label>
+        <button style={styles.button} onClick={this.onEmitClick} disabled={failed}>📡</button>
         <Textarea
+          id={`addon-event-${name}`}
           ref={ref => {
             this.input = ref;
           }}
           style={{ ...styles.textArea, ...extraStyle }}
           value={this.state.payloadString}
-          minRows={3}
           onChange={this.onChange}
         />
+        {isTextAreaShowed
+          ? <button style={styles.button} onClick={this.onToggleEditClick} title="Close">
+              ❌
+            </button>
+          : <button style={styles.button} onClick={this.onToggleEditClick} title="Edit">
+              ✏️
+            </button>}
       </div>
     );
   }
diff --git a/addons/events/src/components/Panel.js b/addons/events/src/components/Panel.js
index 3b127b7fb3c6..a243893d2ae5 100644
--- a/addons/events/src/components/Panel.js
+++ b/addons/events/src/components/Panel.js
@@ -8,13 +8,14 @@ import Event from './Event';
 
 const styles = {
   wrapper: {
-    margin: 10,
     fontFamily: `
       -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
       "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
     `,
     fontSize: 14,
     width: '100%',
+    boxSizing: 'border-box',
+    padding: '10px',
     color: 'rgb(51, 51, 51)',
     overflow: 'auto',
   },

From 64df2ee857023e9fdfd893facd7d89f9d370e140 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Sun, 11 Jun 2017 11:46:06 +0200
Subject: [PATCH 2/3] CHANGE icon per request

---
 addons/events/src/components/Event.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js
index 9e38218d5e24..1af3f8c643b5 100644
--- a/addons/events/src/components/Event.js
+++ b/addons/events/src/components/Event.js
@@ -137,7 +137,7 @@ export default class Item extends Component {
     return (
       <div style={styles.item}>
         <label htmlFor={`addon-event-${name}`} style={styles.label}>{title}</label>
-        <button style={styles.button} onClick={this.onEmitClick} disabled={failed}>📡</button>
+        <button style={styles.button} onClick={this.onEmitClick} disabled={failed}>📢</button>
         <Textarea
           id={`addon-event-${name}`}
           ref={ref => {

From b1854cf8e47158100e27c532bebb298a4e5dbb7a Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Sun, 11 Jun 2017 11:57:03 +0200
Subject: [PATCH 3/3] ADD title attributes for screenreaders && FIX linting
 rules

---
 .eslintrc.js                          |  2 ++
 addons/events/src/components/Event.js | 17 ++++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index e30a1b5fde05..27d5285d1af4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -53,6 +53,8 @@ module.exports = {
     ],
     'import/prefer-default-export': ignore,
     'react/jsx-wrap-multilines': ignore,
+    'react/jsx-indent-props': ignore,
+    'react/jsx-closing-bracket-location': ignore,
     'react/jsx-uses-react': error,
     'react/jsx-uses-vars': error,
     'react/react-in-jsx-scope': error,
diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js
index 1af3f8c643b5..df107a8b3b75 100644
--- a/addons/events/src/components/Event.js
+++ b/addons/events/src/components/Event.js
@@ -137,7 +137,14 @@ export default class Item extends Component {
     return (
       <div style={styles.item}>
         <label htmlFor={`addon-event-${name}`} style={styles.label}>{title}</label>
-        <button style={styles.button} onClick={this.onEmitClick} disabled={failed}>📢</button>
+        <button
+          style={styles.button}
+          onClick={this.onEmitClick}
+          disabled={failed}
+          title="Submit event"
+        >
+          📢
+        </button>
         <Textarea
           id={`addon-event-${name}`}
           ref={ref => {
@@ -148,10 +155,14 @@ export default class Item extends Component {
           onChange={this.onChange}
         />
         {isTextAreaShowed
-          ? <button style={styles.button} onClick={this.onToggleEditClick} title="Close">
+          ? <button style={styles.button} onClick={this.onToggleEditClick} title="Close editing">
               ❌
             </button>
-          : <button style={styles.button} onClick={this.onToggleEditClick} title="Edit">
+          : <button
+              style={styles.button}
+              onClick={this.onToggleEditClick}
+              title="Edit event payload"
+            >
               ✏️
             </button>}
       </div>