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

1 files changed, 19 insertions, 0 deletions

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} />;
+};