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

4 files changed, 50 insertions, 17 deletions

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[`<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"
+/>
+`;
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('<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();
+  });
 });
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 (
-      <button
-        className={className}
-        disabled={this.props.disabled}
-        onClick={this.handleClick}
-        ref={this.setRef}
-        style={style}
-      >
+      <button {...attrs}>
         {this.props.text || this.props.children}
       </button>
     );
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index 4b393bf8b..2da656fc0 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@@ -164,6 +164,8 @@ export default class ComposeForm extends ImmutablePureComponent {
 
     let publishText = '';
     let publishText2 = '';
+    let title = '';
+    let title2 = '';
 
     const privacyIcons = {
       none: '',
@@ -173,7 +175,10 @@ export default class ComposeForm extends ImmutablePureComponent {
       direct: 'envelope',
     };
 
+    title = `${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${this.props.privacy}.short` })}`;
+
     if (showSideArm) {
+      // Enhanced behavior with dual toot buttons
       publishText = (
         <span>
           {
@@ -185,13 +190,15 @@ export default class ComposeForm extends ImmutablePureComponent {
         </span>
       );
 
+      title2 = `${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${secondaryVisibility}.short` })}`;
       publishText2 = (
         <i
           className={`fa fa-${privacyIcons[secondaryVisibility]}`}
-          aria-label={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${secondaryVisibility}.short` })}`}
+          aria-label={title2}
         />
       );
     } else {
+      // Original vanilla behavior - no icon if public or unlisted
       if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
         publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
       } else {
@@ -256,6 +263,7 @@ export default class ComposeForm extends ImmutablePureComponent {
                 <Button
                   className='compose-form__publish__side-arm'
                   text={publishText2}
+                  title={title2}
                   onClick={this.handleSubmit2}
                   disabled={submitDisabled}
                 /> : ''
@@ -263,6 +271,7 @@ export default class ComposeForm extends ImmutablePureComponent {
             <Button
               className='compose-form__publish__primary'
               text={publishText}
+              title={title}
               onClick={this.handleSubmit}
               disabled={submitDisabled}
             />