diff --git a/UNRELEASED.md b/UNRELEASED.md
index 311212f9149..23ab1bc94ac 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -47,6 +47,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
- 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 ([#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({
);
- const constructedPrevious = previousTooltip ? (
- {previousButton}
- ) : (
- previousButton
- );
-
- const constructedNext = nextTooltip ? (
- {nextButton}
- ) : (
- nextButton
- );
+ const constructedPrevious =
+ previousTooltip && hasPrevious ? (
+ {previousButton}
+ ) : (
+ previousButton
+ );
+
+ const constructedNext =
+ nextTooltip && hasNext ? (
+ {nextButton}
+ ) : (
+ 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('', () => {
removeEventListener.mockRestore();
});
- it('renders a tooltip if nextTooltip is provided', () => {
- const pagination = mountWithAppProvider();
- pagination.find(Tooltip).simulate('focus');
+ describe('tooltip', () => {
+ it('renders a tooltip if nextTooltip is provided and hasNext is true', () => {
+ const pagination = mountWithAppProvider(
+ ,
+ );
+ 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.find(Tooltip).simulate('focus');
+ it('does not render a tooltip if nextTooltip is provided and hasNext is false', () => {
+ const pagination = mountWithAppProvider(
+ ,
+ );
+ 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.find(Tooltip).simulate('focus');
- it('renders a tooltip for nextToolTip and previousToolTip when they are provided', () => {
- const pagination = mountWithAppProvider(
- ,
- );
+ expect(findByTestID(pagination, 'TooltipOverlayLabel').text()).toBe('j');
+ });
+
+ it('does not render tooltip if previousToolTip is provided and hasPrevious is false', () => {
+ const pagination = mountWithAppProvider(
+ ,
+ );
+ 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(
+ ,
+ );
+
+ expect(pagination.find(Tooltip)).toHaveLength(2);
+ });
});
it('adds a keypress event for nextKeys', () => {