From f92c33c9a3dfe917e6933e968b90802b5288acc4 Mon Sep 17 00:00:00 2001
From: Joffrey BION <joffrey.bion@gmail.com>
Date: Sun, 10 Jun 2018 15:14:38 +0200
Subject: 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
---
 frontend/src/components/shared/IconButton.jsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 frontend/src/components/shared/IconButton.jsx

(limited to 'frontend/src/components/shared/IconButton.jsx')

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