From e12e4c29514dddfe87edfd6976cdd4a97ce1114a Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 23 Mar 2021 16:57:58 +0000 Subject: [PATCH 1/7] Hid `of` text on small screens --- src/components/pagination/_pagination.scss | 8 ++----- src/components/pagination/pagination.tsx | 25 +++++++++++++--------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss index 41df60e88c5f..b6e92ffe4565 100644 --- 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; @@ -19,9 +21,3 @@ .euiPagination__list { display: flex; } - -@include euiBreakpoint('xs', 's') { - .euiPagination__list { - display: none; - } -} diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 984efa27932b..15f0329eb7cc 100644 --- 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,6 +251,7 @@ export const EuiPagination: FunctionComponent = ({ ); const selectablePages = pages; + if (compressed) { const firstPageButtonCompressed = ( @@ -257,19 +259,22 @@ export const EuiPagination: FunctionComponent = ({ const lastPageButtonCompressed = ( ); + return ( ); From 47363b22531936beacb3bc42ff100836b89fe85a Mon Sep 17 00:00:00 2001 From: miukimiu Date: Tue, 23 Mar 2021 17:28:33 +0000 Subject: [PATCH 2/7] Adding CL --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f581c17acfd5..1dfd09169d96 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - 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)) +- Hid `of` text on small screens for compressed `EuiPagination`([#4661](https://github.com/elastic/eui/pull/4661)) ## [`31.11.0`](https://github.com/elastic/eui/tree/v31.11.0) From 51c757f9124882e36fa4808bc14771a297c4489b Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 29 Mar 2021 11:03:37 +0100 Subject: [PATCH 3/7] Moving CL to bug fixes section --- CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e80a27af6675..a714583268fa 100644 --- 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** @@ -17,8 +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)) -- Hid `of` text on small screens for compressed `EuiPagination`([#4661](https://github.com/elastic/eui/pull/4661)) - ## [`31.11.0`](https://github.com/elastic/eui/tree/v31.11.0) - Added `EuiNotificationEvent` component ([#4513](https://github.com/elastic/eui/pull/4513)) From b8d3275f2cf05183931020cd3ac0121576bfef32 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 29 Mar 2021 13:23:31 +0100 Subject: [PATCH 4/7] Changing pagination button to S --- src/components/pagination/pagination_button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/pagination/pagination_button.tsx b/src/components/pagination/pagination_button.tsx index a25ae8c7a260..5d44008bb665 100644 --- a/src/components/pagination/pagination_button.tsx +++ b/src/components/pagination/pagination_button.tsx @@ -65,7 +65,7 @@ export const EuiPaginationButton: FunctionComponent = ({ const props = { className: classes, - size: 'xs', + size: 's', color: 'text', 'data-test-subj': `pagination-button-${pageIndex}`, isDisabled: isPlaceholder || isActive, From ebfa3e377f8cd1d5c0006df5adb6069df3d73c23 Mon Sep 17 00:00:00 2001 From: miukimiu Date: Mon, 29 Mar 2021 13:26:32 +0100 Subject: [PATCH 5/7] Tests --- .../in_memory_table.test.tsx.snap | 8 ++++---- .../__snapshots__/data_grid.test.tsx.snap | 4 ++-- .../__snapshots__/pagination.test.tsx.snap | 2 +- .../pagination_button.test.tsx.snap | 2 +- .../table_pagination.test.tsx.snap | 20 +++++++++---------- 5 files changed, 18 insertions(+), 18 deletions(-) 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 index bae3db9bbde6..5e4f2a166d4b 100644 --- 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" >