option to add title to <Button>, use for toot buttons (#197)

app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap

@@ -112,3 +112,19 @@ exports[`<Button /> renders the props.text instead of children 1`] = `
   foo
 </button>
 `;
+
+exports[`<Button /> renders title if props.title is given 1`] = `
+<button
+  className="button"
+  disabled={undefined}
+  onClick={[Function]}
+  style={
+    Object {
+      "height": "36px",
+      "lineHeight": "36px",
+      "padding": "0 16px",
+    }
+  }
+  title="foo"
+/>
+`;

app/javascript/mastodon/components/__tests__/button-test.js

@@ -72,4 +72,11 @@ describe('<Button />', () => {
 
     expect(tree).toMatchSnapshot();
   });
+
+  it('renders title if props.title is given', () => {
+    const component = renderer.create(<Button title='foo' />);
+    const tree      = component.toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
 });

app/javascript/mastodon/components/button.js

@@ -14,6 +14,7 @@ export default class Button extends React.PureComponent {
     className: PropTypes.string,
     style: PropTypes.object,
     children: PropTypes.node,
+    title: PropTypes.string,
   };
 
   static defaultProps = {
@@ -35,26 +36,26 @@ export default class Button extends React.PureComponent {
   }
 
   render () {
-    const style = {
-      padding: `0 ${this.props.size / 2.25}px`,
-      height: `${this.props.size}px`,
-      lineHeight: `${this.props.size}px`,
-      ...this.props.style,
+    let attrs = {
+      className: classNames('button', this.props.className, {
+        'button-secondary': this.props.secondary,
+        'button--block': this.props.block,
+      }),
+      disabled: this.props.disabled,
+      onClick: this.handleClick,
+      ref: this.setRef,
+      style: {
+        padding: `0 ${this.props.size / 2.25}px`,
+        height: `${this.props.size}px`,
+        lineHeight: `${this.props.size}px`,
+        ...this.props.style,
+      },
     };
 
-    const className = classNames('button', this.props.className, {
-      'button-secondary': this.props.secondary,
-      'button--block': this.props.block,
-    });
+    if (this.props.title) attrs.title = this.props.title;
 
     return (
-      <button
-        className={className}
-        disabled={this.props.disabled}
-        onClick={this.handleClick}
-        ref={this.setRef}
-        style={style}
-      >
+      <button {...attrs}>
         {this.props.text || this.props.children}
       </button>
     );