[EuiPagination] Hide of text on small screens

CHANGELOG.md

@@ -7,6 +7,7 @@
 **Bug fixes**
 
 - Fixed `id` attribute to be unique across `EuiButtonGroupButton` elements ([#4657](https://github.com/elastic/eui/pull/4657))
+- Hid `of` text on small screens for compressed `EuiPagination`([#4661](https://github.com/elastic/eui/pull/4661))
 
 **Breaking changes**
 
@@ -17,7 +18,6 @@
 - Added `indexRuntime` glyph in `EuiIcon` ([#4650](https://github.com/elastic/eui/pull/4650))
 - Added `iconType`, `iconColor`, and `iconSize` props to `EuiAvatar` ([#4620](https://github.com/elastic/eui/pull/4620))
 - Added `'plain'` and `null` as `color` options of `EuiAvatar` ([#4620](https://github.com/elastic/eui/pull/4620))
-
 ## [`31.11.0`](https://github.com/elastic/eui/tree/v31.11.0)
 
 - Added `EuiNotificationEvent` component ([#4513](https://github.com/elastic/eui/pull/4513))

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -533,12 +533,12 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                       href="#__table_generated-id"
                                       isDisabled={false}
                                       onClick={[Function]}
-                                      size="xs"
+                                      size="s"
                                     >
                                       <a
                                         aria-controls="__table_generated-id"
                                         aria-label="Page 1 of 2"
-                                        className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                                        className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                                         data-test-subj="pagination-button-0"
                                         href="#__table_generated-id"
                                         onClick={[Function]}
@@ -614,13 +614,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                                       href="#__table_generated-id"
                                       isDisabled={true}
                                       onClick={[Function]}
-                                      size="xs"
+                                      size="s"
                                     >
                                       <button
                                         aria-controls="__table_generated-id"
                                         aria-current={true}
                                         aria-label="Page 2 of 2"
-                                        className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                        className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                                         data-test-subj="pagination-button-1"
                                         disabled={true}
                                         onClick={[Function]}

src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

@@ -66,7 +66,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
           <a
             aria-controls="generated-id"
             aria-label="Page 1 of 2"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-0"
             href="#generated-id"
             rel="noreferrer"
@@ -89,7 +89,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
             aria-controls="generated-id"
             aria-current="true"
             aria-label="Page 2 of 2"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-1"
             disabled=""
             type="button"

src/components/pagination/__snapshots__/pagination.test.tsx.snap

@@ -27,7 +27,7 @@ exports[`EuiPagination is rendered 1`] = `
     >
       <button
         aria-label="Page 1 of 1"
-        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+        class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
         data-test-subj="pagination-button-0"
         type="button"
       >

src/components/pagination/__snapshots__/pagination_button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiPaginationButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton testClass1 testClass2"
+  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton testClass1 testClass2"
   data-test-subj="test subject string"
   type="button"
 >

src/components/pagination/_pagination.scss

@@ -3,8 +3,10 @@
   align-items: center;
 
   &__compressedText {
+    // sass-lint:disable-block no-important
     display: inline-flex;
     align-items: center;
+    line-height: 1 !important; // Override EuiText line-height
 
     > *:first-child {
       margin-right: $euiSizeXS;
@@ -19,9 +21,3 @@
 .euiPagination__list {
   display: flex;
 }
-
-@include euiBreakpoint('xs', 's') {
-  .euiPagination__list {
-    display: none;
-  }
-}

src/components/pagination/pagination.tsx

@@ -25,6 +25,7 @@ import { EuiPaginationButton } from './pagination_button';
 import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { EuiText } from '../text';
+import { EuiHideFor } from '../responsive';
 
 const MAX_VISIBLE_PAGES = 5;
 const NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);
@@ -250,26 +251,30 @@ export const EuiPagination: FunctionComponent<Props> = ({
   );
 
   const selectablePages = pages;
+
   if (compressed) {
     const firstPageButtonCompressed = (
       <PaginationButton pageIndex={activePage} inList={false} />
     );
     const lastPageButtonCompressed = (
       <PaginationButton pageIndex={pageCount - 1} inList={false} />
     );
+
     return (
       <nav className={classes} {...rest}>
         {previousButton}
-        <EuiText size="s" className="euiPagination__compressedText">
-          <EuiI18n
-            token="euiPagination.pageOfTotalCompressed"
-            default="{page} of {total}"
-            values={{
-              page: firstPageButtonCompressed,
-              total: lastPageButtonCompressed,
-            }}
-          />
-        </EuiText>
+        <EuiHideFor sizes={['xs', 's']}>
+          <EuiText size="s" className="euiPagination__compressedText">
+            <EuiI18n
+              token="euiPagination.pageOfTotalCompressed"
+              default="{page} of {total}"
+              values={{
+                page: firstPageButtonCompressed,
+                total: lastPageButtonCompressed,
+              }}
+            />
+          </EuiText>
+        </EuiHideFor>
         {nextButton}
       </nav>
     );

src/components/pagination/pagination_button.tsx

@@ -65,7 +65,7 @@ export const EuiPaginationButton: FunctionComponent<Props> = ({
 
   const props = {
     className: classes,
-    size: 'xs',
+    size: 's',
     color: 'text',
     'data-test-subj': `pagination-button-${pageIndex}`,
     isDisabled: isPlaceholder || isActive,

src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap

@@ -64,7 +64,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         >
           <button
             aria-label="Page 1 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-0"
             type="button"
           >
@@ -85,7 +85,7 @@ exports[`EuiTablePagination is rendered 1`] = `
           <button
             aria-current="true"
             aria-label="Page 2 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-1"
             disabled=""
             type="button"
@@ -106,7 +106,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         >
           <button
             aria-label="Page 3 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-2"
             type="button"
           >
@@ -126,7 +126,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         >
           <button
             aria-label="Page 4 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-3"
             type="button"
           >
@@ -146,7 +146,7 @@ exports[`EuiTablePagination is rendered 1`] = `
         >
           <button
             aria-label="Page 5 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-4"
             type="button"
           >
@@ -215,7 +215,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         >
           <button
             aria-label="Page 1 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-0"
             type="button"
           >
@@ -236,7 +236,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
           <button
             aria-current="true"
             aria-label="Page 2 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-1"
             disabled=""
             type="button"
@@ -257,7 +257,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         >
           <button
             aria-label="Page 3 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-2"
             type="button"
           >
@@ -277,7 +277,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         >
           <button
             aria-label="Page 4 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-3"
             type="button"
           >
@@ -297,7 +297,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
         >
           <button
             aria-label="Page 5 of 5"
-            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
             data-test-subj="pagination-button-4"
             type="button"
           >