Merge branch 'master' of github.com:coralproject/talk into reject-username

* 'master' of github.com:coralproject/talk:
  Typo
  Fix warnings
  Activate Websocket and add browser console logging
  çhanges
  changes and updates to the e2e
  updated yarn.lock
  Workaround RTE Button focus bug on IOS
  Use standard buttons to fix IOS bug
  add missing dependency

client/coral-framework/components/TalkProvider.js

@@ -1,5 +1,5 @@
 import React from 'react';
-const PropTypes = require('prop-types');
+import PropTypes from 'prop-types';
 import { ApolloProvider } from 'react-apollo';
 
 class TalkProvider extends React.Component {

client/coral-framework/styles/reset.css

@@ -6,6 +6,7 @@
   border: none;
   touch-action: manipulation;
   padding: 0;
+  margin: 0;
 
   overflow: hidden;
 

client/coral-ui/components/BareButton.js

@@ -7,17 +7,26 @@ import cn from 'classnames';
  *  BareButton is a button whose styling is stripped off to a minimum.
  *  Can pass anchor=true to use `a` instead of `button`
  */
-const BareButton = ({ anchor, className, ...props }) => {
-  let Element = 'button';
-  if (anchor) {
-    Element = 'a';
+export default class BareButton extends React.Component {
+  ref = null;
+
+  handleRef = ref => (this.ref = ref);
+  focus = () => this.ref.focus();
+
+  render() {
+    const { anchor, className, ...props } = this.props;
+    const Element = anchor ? 'a' : 'button';
+    return (
+      <Element
+        {...props}
+        className={cn(styles.bare, className)}
+        ref={this.handleRef}
+      />
+    );
   }
-  return <Element {...props} className={cn(styles.bare, className)} />;
-};
+}
 
 BareButton.propTypes = {
   className: PropTypes.string,
   anchor: PropTypes.bool,
 };
-
-export default BareButton;

client/coral-ui/components/Dropdown.css

@@ -1,32 +1,26 @@
 .dropdown {
   position: relative;
-  height: 34px;
-  background: #2c2c2c;
-  box-sizing: border-box;
-  color: white;
-  border-radius: 3px;
-  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
-  line-height: 20px;
-
-  font-size: 0.98em;
-  border-radius: 3px;
-  cursor: pointer;
-
-  &.disabled {
-    color: #e5e5e5;
-    background: #888;
-    cursor: default;
-    pointer-events: none;
-  }
 }
 
 .toggle {
   padding: 8px 45px 8px 15px;
   outline: none;
+  color: white;
+  background: #2c2c2c;
+  border-radius: 3px;
+  height: 34px;
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
+  line-height: 20px;
+  font-size: 0.98em;
 
   &:focus {
     background: #888;
   }
+
+  &:disabled {
+    color: #e5e5e5;
+    background: #888;
+  }
 }
 
 .toggleOpen {

client/coral-ui/components/Dropdown.js

@@ -4,6 +4,7 @@ import styles from './Dropdown.css';
 import Icon from './Icon';
 import cn from 'classnames';
 import ClickOutside from 'coral-framework/components/ClickOutside';
+import { BareButton } from 'coral-ui';
 
 class Dropdown extends React.Component {
   toggleRef = null;
@@ -88,16 +89,6 @@ class Dropdown extends React.Component {
     this.toggle();
   };
 
-  handleKeyDown = e => {
-    const code = e.which;
-
-    // 13 = Return, 32 = Space
-    if (code === 13 || code === 32) {
-      e.preventDefault();
-      this.toggle();
-    }
-  };
-
   hideMenu = () => {
     this.setState({
       isOpen: false,
@@ -155,23 +146,18 @@ class Dropdown extends React.Component {
             styles.dropdown,
             className,
             containerClassName,
-            'dd dd-container',
-            {
-              [styles.disabled]: disabled,
-            }
+            'dd dd-container'
           )}
         >
-          <div
+          <BareButton
             className={cn(styles.toggle, toggleClassName, {
               [cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen,
             })}
             onClick={this.handleClick}
-            onKeyDown={this.handleKeyDown}
-            role="button"
             aria-pressed={this.state.isOpen}
             aria-haspopup="true"
-            tabIndex={disabled ? '-1' : '0'}
             ref={this.handleToggleRef}
+            disabled={disabled}
           >
             {this.props.icon && (
               <Icon
@@ -194,7 +180,7 @@ class Dropdown extends React.Component {
                 aria-hidden="true"
               />
             )}
-          </div>
+          </BareButton>
           {this.state.isOpen && (
             <div>
               <div tabIndex="0" onFocus={this.trapFocusBegin} />

client/coral-ui/components/Option.css

@@ -1,7 +1,9 @@
 .option {
+  width: 100%;
   padding: 10px;
   outline: none;
   white-space: nowrap;
+  text-align: left;
 
   &:focus, &:hover {
     background-color: #ccc;

client/coral-ui/components/Option.js

@@ -1,13 +1,15 @@
 import React from 'react';
+import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import styles from './Option.css';
 import cn from 'classnames';
+import { BareButton } from 'coral-ui';
 
 class Option extends React.Component {
   ref = null;
 
   handleRef = ref => {
-    this.ref = ref;
+    this.ref = findDOMNode(ref);
   };
 
   focus = () => {
@@ -19,16 +21,17 @@ class Option extends React.Component {
     const { className, label = '', onClick, onKeyDown } = this.props;
     const id = this.props.id ? this.props.id : this.props.value;
     return (
-      <li
-        className={cn(styles.option, className, 'dd-option')}
-        onClick={onClick}
-        onKeyDown={onKeyDown}
-        role="option"
-        tabIndex="0"
-        ref={this.handleRef}
-        id={id}
-      >
-        {label}
+      <li>
+        <BareButton
+          className={cn(styles.option, className, 'dd-option')}
+          onClick={onClick}
+          onKeyDown={onKeyDown}
+          role="option"
+          ref={this.handleRef}
+          id={id}
+        >
+          {label}
+        </BareButton>
       </li>
     );
   }