[Pagination] Fix styling for Pagination buttons with tooltips

UNRELEASED.md

@@ -30,6 +30,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Added background into media query for Microsoft high contrast to fix skeleton accessibility ([#1341](https://github.com/Shopify/polaris-react/pull/1341))
 - Added high contrast colour to `Loading` to make it visible in the high contrast mode in Windows ([#1389](https://github.com/Shopify/polaris-react/pull/1389))
 - Fixed the position calculation of the `PositionedOverlay` component after scroll ([#1382](https://github.com/Shopify/polaris-react/pull/1382))
+- Fixed styling issue for Pagination component previous/next buttons when tooltips present ([#1277](https://github.com/Shopify/polaris-react/pull/1277))
 
 ### Documentation
 

src/components/Pagination/Pagination.scss

@@ -65,18 +65,6 @@ $stacking-order: (
       box-shadow: none;
     }
 
-    &:not(:first-child) {
-      margin-left: rem(2px);
-    }
-
-    &:first-child {
-      margin-left: -1 * $plain-horizontal-adjustment;
-    }
-
-    &:last-child {
-      margin-right: -1 * $plain-horizontal-adjustment;
-    }
-
     &::after {
       content: '';
       position: absolute;
@@ -92,6 +80,15 @@ $stacking-order: (
       transition-timing-function: easing();
     }
   }
+
+  .PreviousButton {
+    margin-left: -1 * $plain-horizontal-adjustment;
+  }
+
+  .NextButton {
+    margin-right: -1 * $plain-horizontal-adjustment;
+    margin-left: rem(2px);
+  }
 }
 
 .Button {
@@ -155,18 +152,15 @@ $stacking-order: (
     cursor: default;
     box-shadow: none;
   }
+}
 
-  &:not(:first-child) {
-    margin-left: -1px;
-  }
-
-  &:first-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+.PreviousButton {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 
-  &:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
+.NextButton {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }

src/components/Pagination/Pagination.tsx

@@ -69,10 +69,12 @@ function Pagination({
   }
 
   const className = classNames(styles.Pagination, plain && styles.plain);
+  const previousClassName = classNames(styles.Button, styles.PreviousButton);
+  const nextClassName = classNames(styles.Button, styles.NextButton);
 
   const previousButton = previousURL ? (
     <UnstyledLink
-      className={styles.Button}
+      className={previousClassName}
       url={previousURL}
       onMouseUp={handleMouseUpByBlurring}
       aria-label={intl.translate('Polaris.Pagination.previous')}
@@ -85,7 +87,7 @@ function Pagination({
       onClick={onPrevious}
       type="button"
       onMouseUp={handleMouseUpByBlurring}
-      className={styles.Button}
+      className={previousClassName}
       aria-label={intl.translate('Polaris.Pagination.previous')}
       disabled={!hasPrevious}
     >
@@ -95,7 +97,7 @@ function Pagination({
 
   const nextButton = nextURL ? (
     <UnstyledLink
-      className={styles.Button}
+      className={nextClassName}
       url={nextURL}
       onMouseUp={handleMouseUpByBlurring}
       aria-label={intl.translate('Polaris.Pagination.next')}
@@ -108,7 +110,7 @@ function Pagination({
       onClick={onNext}
       type="button"
       onMouseUp={handleMouseUpByBlurring}
-      className={styles.Button}
+      className={nextClassName}
       aria-label={intl.translate('Polaris.Pagination.next')}
       disabled={!hasNext}
     >