Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiPagination] Hide of text on small screens #4661

Merged
merged 9 commits into from
Mar 30, 2021
+38 −35
Merged

[EuiPagination] Hide of text on small screens #4661

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e12e4c2
Hid `of` text on small screens
elizabetdev Mar 23, 2021
47363b2
Adding CL
elizabetdev Mar 23, 2021
0fa7b93
Merge remote-tracking branch 'upstream/master' into pagination-hide-w…
elizabetdev Mar 29, 2021
51c757f
Moving CL to bug fixes section
elizabetdev Mar 29, 2021
b8d3275
Changing pagination button to S
elizabetdev Mar 29, 2021
ebfa3e3
Tests
elizabetdev Mar 29, 2021
a47c854
Adding line break
elizabetdev Mar 30, 2021
474f22c
Update src/components/pagination/_pagination.scss
elizabetdev Mar 30, 2021
10eae95
Merge branch 'pagination-hide-when-compressed' of https://github.com/…
elizabetdev Mar 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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**

Expand All @@ -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))
Expand Down
8 changes: 4 additions & 4 deletions src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down Expand Up @@ -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]}
Expand Down
4 changes: 2 additions & 2 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion src/components/pagination/__snapshots__/pagination.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
2 changes: 1 addition & 1 deletion src/components/pagination/__snapshots__/pagination_button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
8 changes: 2 additions & 6 deletions src/components/pagination/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -19,9 +21,3 @@
.euiPagination__list {
display: flex;
}

@include euiBreakpoint('xs', 's') {
.euiPagination__list {
display: none;
}
}
25 changes: 15 additions & 10 deletions src/components/pagination/pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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']}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! This may even open it up for consumers to be able to customize these breakpoint sizes ❤️

<EuiText size="s" className="euiPagination__compressedText">
<EuiI18n
token="euiPagination.pageOfTotalCompressed"
default="{page} of {total}"
values={{
page: firstPageButtonCompressed,
total: lastPageButtonCompressed,
}}
/>
</EuiText>
</EuiHideFor>
{nextButton}
</nav>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/pagination/pagination_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
20 changes: 10 additions & 10 deletions src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -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"
Expand All @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand All @@ -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"
Expand All @@ -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"
>
Expand All @@ -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"
>
Expand All @@ -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"
>
Expand Down