From be21e03b84c9c8b6b9aee86420180bc8ebb721d9 Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@shopify.com>
Date: Wed, 14 Aug 2019 08:58:47 -0400
Subject: [PATCH] remove tooltip on disabled button

---
 UNRELEASED.md                                 |  3 +-
 src/components/Pagination/Pagination.tsx      | 24 +++++----
 .../Pagination/tests/Pagination.test.tsx      | 50 +++++++++++++------
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 157534d15d4..c02496525f8 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -46,7 +46,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed `BulkActionButton` from throwing an error in `componentDidMount` ([#1913](https://github.com/Shopify/polaris-react/pull/1913))
 - Fixed `ToastManager` from not working correctly in `React.StrictMode` ([#1741](https://github.com/Shopify/polaris-react/pull/1741))
 - Updated translation.yml with the new locales path ([#1649](https://github.com/Shopify/polaris-react/pull/1649))
-- Fixed accessibility issue with `Tabs` list item presentation role ([A#1958](https://github.com/Shopify/polaris-react/pull/1958))
+- Fixed accessibility issue with `Tabs` list item presentation role ([#1958](https://github.com/Shopify/polaris-react/pull/1958))
+- Removed `Tooltip` on disabled `Pagination` buttons ([#1963](https://github.com/Shopify/polaris-react/pull/1963))
 
 ### Documentation
 
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 12a9e20d1ae..08588611a0f 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -117,17 +117,19 @@ export default function Pagination({
     </button>
   );
 
-  const constructedPrevious = previousTooltip ? (
-    <Tooltip content={previousTooltip}>{previousButton}</Tooltip>
-  ) : (
-    previousButton
-  );
-
-  const constructedNext = nextTooltip ? (
-    <Tooltip content={nextTooltip}>{nextButton}</Tooltip>
-  ) : (
-    nextButton
-  );
+  const constructedPrevious =
+    previousTooltip && hasPrevious ? (
+      <Tooltip content={previousTooltip}>{previousButton}</Tooltip>
+    ) : (
+      previousButton
+    );
+
+  const constructedNext =
+    nextTooltip && hasNext ? (
+      <Tooltip content={nextTooltip}>{nextButton}</Tooltip>
+    ) : (
+      nextButton
+    );
 
   const previousButtonEvents =
     previousKeys &&
diff --git a/src/components/Pagination/tests/Pagination.test.tsx b/src/components/Pagination/tests/Pagination.test.tsx
index 81174ece249..496b9b68037 100644
--- a/src/components/Pagination/tests/Pagination.test.tsx
+++ b/src/components/Pagination/tests/Pagination.test.tsx
@@ -36,26 +36,46 @@ describe('<Pagination />', () => {
     removeEventListener.mockRestore();
   });
 
-  it('renders a tooltip if nextTooltip is provided', () => {
-    const pagination = mountWithAppProvider(<Pagination nextTooltip="k" />);
-    pagination.find(Tooltip).simulate('focus');
+  describe('tooltip', () => {
+    it('renders a tooltip if nextTooltip is provided and hasNext is true', () => {
+      const pagination = mountWithAppProvider(
+        <Pagination nextTooltip="k" hasNext />,
+      );
+      pagination.find(Tooltip).simulate('focus');
 
-    expect(findByTestID(pagination, 'TooltipOverlayLabel').text()).toBe('k');
-  });
+      expect(findByTestID(pagination, 'TooltipOverlayLabel').text()).toBe('k');
+    });
 
-  it('renders a tooltip if previousToolTip is provided', () => {
-    const pagination = mountWithAppProvider(<Pagination previousTooltip="j" />);
-    pagination.find(Tooltip).simulate('focus');
+    it('does not render a tooltip if nextTooltip is provided and hasNext is false', () => {
+      const pagination = mountWithAppProvider(
+        <Pagination nextTooltip="k" hasNext={false} />,
+      );
+      expect(pagination.find(Tooltip)).toHaveLength(0);
+    });
 
-    expect(findByTestID(pagination, 'TooltipOverlayLabel').text()).toBe('j');
-  });
+    it('renders a tooltip if previousToolTip is provided and hasPrevious is true', () => {
+      const pagination = mountWithAppProvider(
+        <Pagination previousTooltip="j" hasPrevious />,
+      );
+      pagination.find(Tooltip).simulate('focus');
 
-  it('renders a tooltip for nextToolTip and previousToolTip when they are provided', () => {
-    const pagination = mountWithAppProvider(
-      <Pagination previousTooltip="j" nextTooltip="k" />,
-    );
+      expect(findByTestID(pagination, 'TooltipOverlayLabel').text()).toBe('j');
+    });
+
+    it('does not render  tooltip if previousToolTip is provided and hasPrevious is false', () => {
+      const pagination = mountWithAppProvider(
+        <Pagination previousTooltip="j" hasPrevious={false} />,
+      );
+      expect(pagination.find(Tooltip)).toHaveLength(0);
+    });
 
-    expect(pagination.find(Tooltip)).toHaveLength(2);
+    it('renders a tooltip for nextToolTip and previousToolTip when they are provided and hasPrevious and hasNext are true', () => {
+      const pagination = mountWithAppProvider(
+        <Pagination previousTooltip="j" nextTooltip="k" hasPrevious hasNext />,
+      );
+
+      expect(pagination.find(Tooltip)).toHaveLength(2);
+    });
   });
 
   it('adds a keypress event for nextKeys', () => {