Add IconButton component to work around Icon title issue

The issue about Buttons with icons is that the svg name appears as title
(tooltip) when hovering the icon, even if a title is specified on the
button itself:
https://github.com/palantir/blueprint/issues/2321

3 files changed, 25 insertions, 5 deletions

diff --git a/frontend/src/components/game-browser/GameList.jsx b/frontend/src/components/game-browser/GameList.jsx
index 5ec2303b..08ce92e9 100644
--- a/frontend/src/components/game-browser/GameList.jsx
+++ b/frontend/src/components/game-browser/GameList.jsx
@@ -1,10 +1,10 @@
 // @flow
-import { Button, Icon } from '@blueprintjs/core';
 import type { List } from 'immutable';
 import React from 'react';
 import { connect } from 'react-redux';
 import type { Game } from '../../models/games';
 import { actions, getAllGames } from '../../redux/games';
+import { IconButton } from '../shared/IconButton';
 import './GameList.css';
 import { GameStatus } from './GameStatus';
 import { PlayerCount } from './PlayerCount';
@@ -51,8 +51,8 @@ const GameListItemRow = ({game, joinGame}) => (
 
 const JoinButton = ({game, joinGame}) => {
   const disabled = game.state !== 'LOBBY';
-  const icon = <Icon icon='arrow-right' title={false} />;
-  return <Button minimal disabled={disabled} icon={icon} title='Join Game' onClick={() => joinGame(game.id)}/>;
+  const onClick = () => joinGame(game.id);
+  return <IconButton minimal disabled={disabled} icon='arrow-right' title='Join Game' onClick={onClick}/>;
 };
 
 const mapStateToProps = state => ({
diff --git a/frontend/src/components/home/ChooseNameForm.jsx b/frontend/src/components/home/ChooseNameForm.jsx
index 119fc851..386f249b 100644
--- a/frontend/src/components/home/ChooseNameForm.jsx
+++ b/frontend/src/components/home/ChooseNameForm.jsx
@@ -1,8 +1,9 @@
 // @flow
-import { Button, Classes, InputGroup, Intent } from '@blueprintjs/core';
+import { Classes, InputGroup, Intent } from '@blueprintjs/core';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { actions } from '../../redux/players';
+import { IconButton } from '../shared/IconButton';
 
 export type ChooseNameFormPresenterProps = {
   chooseUsername: (username: string) => void,
@@ -31,7 +32,7 @@ class ChooseNameFormPresenter extends Component<ChooseNameFormPresenterProps> {
   }
 
   renderSubmit = () => (
-    <Button className={Classes.MINIMAL} onClick={this.play} intent={Intent.PRIMARY} rightIcon="arrow-right" />
+    <IconButton className={Classes.MINIMAL} onClick={this.play} intent={Intent.PRIMARY} icon="arrow-right" />
   );
 }
 
diff --git a/frontend/src/components/shared/IconButton.jsx b/frontend/src/components/shared/IconButton.jsx
new file mode 100644
index 00000000..c417ae57
--- /dev/null
+++ b/frontend/src/components/shared/IconButton.jsx
@@ -0,0 +1,19 @@
+//@flow
+import { Button, Icon } from '@blueprintjs/core';
+import type { IconName } from '@blueprintjs/icons';
+import * as React from 'react';
+
+export type IconButtonProps = {
+  icon: IconName,
+  title?: string | false | null,
+  [string]: any,
+}
+
+export const IconButton = ({icon, title, ...props}: IconButtonProps) => {
+  if (title) {
+    // this works around https://github.com/palantir/blueprint/issues/2321
+    const iconWithoutTitle = <Icon icon={icon} title={false} />;
+    return <Button {...props} icon={iconWithoutTitle} title={title} />;
+  }
+  return <Button {...props} icon={icon} />;
+};