diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap
index c3f018d90..707cbf673 100644
--- a/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap
+++ b/app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap
@@ -112,3 +112,19 @@ exports[` renders the props.text instead of children 1`] = `
foo
`;
+
+exports[` renders title if props.title is given 1`] = `
+
+`;
diff --git a/app/javascript/mastodon/components/__tests__/button-test.js b/app/javascript/mastodon/components/__tests__/button-test.js
index 160cd3cbc..924ba39dc 100644
--- a/app/javascript/mastodon/components/__tests__/button-test.js
+++ b/app/javascript/mastodon/components/__tests__/button-test.js
@@ -72,4 +72,11 @@ describe('', () => {
expect(tree).toMatchSnapshot();
});
+
+ it('renders title if props.title is given', () => {
+ const component = renderer.create();
+ const tree = component.toJSON();
+
+ expect(tree).toMatchSnapshot();
+ });
});
diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js
index 51e2e6a7a..16868010c 100644
--- a/app/javascript/mastodon/components/button.js
+++ b/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 (
-