[EuiPagination] Hide of text on small screens (#4661)

* Hid `of` text on small screens * Adding CL * Moving CL to bug fixes section * Changing pagination button to S * Tests * Adding line break * Update src/components/pagination/_pagination.scss Co-authored-by: Caroline Horn <[email protected]> Co-authored-by: Caroline Horn <[email protected]>
elastic · Mar 30, 2021 · a04b2e7 · a04b2e7
1 parent 5276e66
commit a04b2e7
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 35 deletions.
diff --git a/CHANGELOG.md b/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**
 

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/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]}

diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/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"

diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/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"
       >

diff --git a/src/components/pagination/__snapshots__/pagination_button.test.tsx.snap b/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"
 >

diff --git a/src/components/pagination/_pagination.scss b/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;
@@ -18,10 +20,5 @@
 
 .euiPagination__list {
   display: flex;
-}
-
-@include euiBreakpoint('xs', 's') {
-  .euiPagination__list {
-    display: none;
-  }
+  align-items: baseline;
 }
diff --git a/src/components/pagination/pagination.tsx b/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>
     );

diff --git a/src/components/pagination/pagination_button.tsx b/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,

diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/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"
           >