From 3eab55592f0582eb419627348ae008de2d3b2156 Mon Sep 17 00:00:00 2001
From: Austin Piel <austin.piel@airbnb.com>
Date: Mon, 20 Apr 2020 15:24:46 -0400
Subject: [PATCH] new(Tooltip): Add `onClose`  prop (#355)

* update(Tooltip): Add  prop

* add test
---
 .../core/src/components/Tooltip/index.tsx     |  4 ++
 .../core/src/components/Tooltip/story.tsx     | 42 +++++++++++++++++++
 .../core/test/components/Tooltip.test.tsx     |  7 ++++
 3 files changed, 53 insertions(+)

diff --git a/packages/core/src/components/Tooltip/index.tsx b/packages/core/src/components/Tooltip/index.tsx
index 590701f54..fe39d6bf0 100644
--- a/packages/core/src/components/Tooltip/index.tsx
+++ b/packages/core/src/components/Tooltip/index.tsx
@@ -30,6 +30,8 @@ export type TooltipProps = {
   horizontalAlign?: 'center' | 'left' | 'right';
   /** True to use a light background with dark text. */
   inverted?: boolean;
+  /** Callback fired when the tooltip is closed. */
+  onClose?: () => void;
   /** Callback fired when the tooltip is shown. */
   onShow?: () => void;
   /** True to prevent dismissmal on mouse down. */
@@ -69,6 +71,7 @@ export class Tooltip extends React.Component<TooltipProps & WithStylesProps, Too
   static defaultProps = {
     disabled: false,
     inverted: false,
+    onClose() {},
     onShow() {},
     remainOnMouseDown: false,
     toggleOnClick: false,
@@ -186,6 +189,7 @@ export class Tooltip extends React.Component<TooltipProps & WithStylesProps, Too
 
   private handleClose = () => {
     this.setState({ open: false });
+    this.props.onClose!();
   };
 
   private handleMouseEnter = () => {
diff --git a/packages/core/src/components/Tooltip/story.tsx b/packages/core/src/components/Tooltip/story.tsx
index f3263df27..6131856ea 100644
--- a/packages/core/src/components/Tooltip/story.tsx
+++ b/packages/core/src/components/Tooltip/story.tsx
@@ -35,6 +35,40 @@ class TooltipDemo extends React.Component<{}, { text: string; clicked: boolean }
   }
 }
 
+class TooltipOnCloseDemo extends React.Component<{}> {
+  state = { text: 'Closed' };
+
+  handleOnShow = () => {
+    this.setState({
+      text: 'Open',
+    });
+  };
+
+  handleOnClose = () => {
+    this.setState({
+      text: 'Closed',
+    });
+  };
+
+  render() {
+    return (
+      <div style={{ textAlign: 'center' }}>
+        <Spacing top={10}>
+          <Tooltip
+            content="Tooltip"
+            verticalAlign="above"
+            onClose={this.handleOnClose}
+            onShow={this.handleOnShow}
+          >
+            <Button>Hover me</Button>
+          </Tooltip>
+          <Text>The tooltip is {this.state.text}</Text>
+        </Spacing>
+      </div>
+    );
+  }
+}
+
 class TooltipOnShowDemo extends React.Component<{}, { text: string; count: number }> {
   state = { text: 'Hovered 0 times', count: 0 };
 
@@ -215,6 +249,14 @@ toggleWithClick.story = {
   name: 'Toggle tooltip on click',
 };
 
+export function handleOnClose() {
+  return <TooltipOnCloseDemo />;
+}
+
+handleOnClose.story = {
+  name: 'Callback fired when tooltip is shown and closed',
+};
+
 export function withAccessibilityLabel() {
   return (
     <>
diff --git a/packages/core/test/components/Tooltip.test.tsx b/packages/core/test/components/Tooltip.test.tsx
index e65ed3417..273d3ef87 100644
--- a/packages/core/test/components/Tooltip.test.tsx
+++ b/packages/core/test/components/Tooltip.test.tsx
@@ -79,6 +79,13 @@ describe('<Tooltip />', () => {
       expect(wrapper).toMatchSnapshot();
     });
 
+    it('fires onClose callback when closed', () => {
+      const onCloseSpy = jest.fn();
+      wrapper.setProps({ onClose: onCloseSpy });
+      childContainer.simulate('mouseleave');
+      expect(onCloseSpy).toHaveBeenCalled();
+    });
+
     describe('with remainOnMouseDown', () => {
       beforeEach(() => {
         wrapper.setProps({ remainOnMouseDown: true });