Fixed EuiPagination vertical alignment of text when is compressed (#3152

) * Centering pagination text * Improving styles * Adding changelog
elastic · Mar 23, 2020 · bccf4e1 · bccf4e1
1 parent 0a201b2
commit bccf4e1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - Improved `EuiButtonEmpty` focus state when the `color` type is `text` ([#3135](https://github.com/elastic/eui/pull/3135))
 - Added `EuiLoadingElastic` component ([#3017](https://github.com/elastic/eui/pull/3017))
 - Upgraded `react-beautiful-dnd` to v13 ([#3064](https://github.com/elastic/eui/pull/3064))
+- Fixed `EuiPagination` vertical alignment of the text when used as `compressed` ([#3152](https://github.com/elastic/eui/pull/3152))
 - Added `showTooltip` prop for `EuiSuperUpdateButton` to show tooltip and showing only once popovers are closed ([#3127](https://github.com/elastic/eui/pull/3127))
 
 **Bug Fixes**

diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss
@@ -1,4 +1,17 @@
 .euiPagination {
   display: flex;
   align-items: center;
-}
+
+  &__compressedText {
+    display: inline-flex;
+    align-items: center;
+
+    > *:first-child {
+      margin-right: $euiSizeXS;
+    }
+
+    > *:last-child {
+      margin-left: $euiSizeXS;
+    }
+  }
+}
diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx
@@ -208,7 +208,7 @@ export const EuiPagination: FunctionComponent<Props> = ({
     return (
       <div className={classes} {...rest}>
         {previousButton}
-        <EuiText size="s">
+        <EuiText size="s" className="euiPagination__compressedText">
           <EuiI18n
             token="euiPagination.pageOfTotalCompressed"
             default="{page} of {total}"