From 85336ee3bd1faf56c3930de85544f0a966fad937 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 8 Feb 2018 14:05:57 -0800 Subject: [PATCH 1/4] Slimmer pagination --- .../button/button_empty/_button_empty.scss | 6 +- .../__snapshots__/pagination.test.js.snap | 75 +----------------- .../pagination_button.test.js.snap | 8 +- .../pagination/_pagination_button.scss | 11 +-- src/components/pagination/pagination.js | 79 +++++++++---------- .../pagination/pagination_button.js | 6 +- .../table_pagination.test.js.snap | 73 +---------------- 7 files changed, 47 insertions(+), 211 deletions(-) diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss index ee2e03d12ce..5e06f644b81 100644 --- a/src/components/button/button_empty/_button_empty.scss +++ b/src/components/button/button_empty/_button_empty.scss @@ -71,11 +71,7 @@ $buttonTypes: ( } &:focus { - @if ($name == 'text') { - background-color: transparentize($euiColorPrimary, .9); - } @else { - background-color: transparentize($color, .9); - } + background-color: transparentize($color, .9); } &:hover { diff --git a/src/components/pagination/__snapshots__/pagination.test.js.snap b/src/components/pagination/__snapshots__/pagination.test.js.snap index dde43f9fa74..657dac35ec4 100644 --- a/src/components/pagination/__snapshots__/pagination.test.js.snap +++ b/src/components/pagination/__snapshots__/pagination.test.js.snap @@ -1,76 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiPagination is rendered 1`] = ` -
- - -
-`; +exports[`EuiPagination is rendered 1`] = `null`; diff --git a/src/components/pagination/__snapshots__/pagination_button.test.js.snap b/src/components/pagination/__snapshots__/pagination_button.test.js.snap index 08402f8fa53..c73cf1492ce 100644 --- a/src/components/pagination/__snapshots__/pagination_button.test.js.snap +++ b/src/components/pagination/__snapshots__/pagination_button.test.js.snap @@ -3,18 +3,14 @@ exports[`EuiPaginationButton is rendered 1`] = ` `; diff --git a/src/components/pagination/_pagination_button.scss b/src/components/pagination/_pagination_button.scss index bb934226b42..b8a3a9045ec 100644 --- a/src/components/pagination/_pagination_button.scss +++ b/src/components/pagination/_pagination_button.scss @@ -1,21 +1,14 @@ .euiPaginationButton { font-size: $euiFontSizeS; padding: 0; - height: $euiSizeL; - min-width: $euiSizeXL; text-align: center; } .euiPaginationButton-isActive { pointer-events: none; - background-color: $euiColorPrimary; - color: $euiColorEmptyShade; + color: $euiColorPrimary; border-radius: $euiBorderRadius; - - &:focus { - background-color: $euiColorPrimary; - color: $euiColorEmptyShade; - } + font-weight: $euiFontWeightBold; } .euiPaginationButton-isPlaceholder { diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js index 41ccaf9203f..4aed5fe1785 100644 --- a/src/components/pagination/pagination.js +++ b/src/components/pagination/pagination.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { EuiPaginationButton } from './pagination_button'; +import { EuiButtonIcon } from '../button'; const MAX_VISIBLE_PAGES = 5; const NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5); @@ -33,18 +34,16 @@ export const EuiPagination = ({ ); } - let previousButton; - if (activePage !== 0) { - previousButton = ( - - Previous - - ); - } + const previousButton = ( + + ); const firstPageButtons = []; @@ -65,7 +64,9 @@ export const EuiPagination = ({ key="beginningEllipsis" isPlaceholder hideOnMobile - /> + > + … + ); } } @@ -79,7 +80,9 @@ export const EuiPagination = ({ key="endingEllipsis" isPlaceholder hideOnMobile - /> + > + … + ); } @@ -94,37 +97,33 @@ export const EuiPagination = ({ ); } - let nextButton; + const nextButton = ( + + ); - if (activePage !== pageCount - 1) { - nextButton = ( - 1) { + const selectablePages = pages; + return ( +
- Next - + {previousButton} + {firstPageButtons} + {selectablePages} + {lastPageButtons} + {nextButton} +
); + } else { + return null; } - - let selectablePages; - if (pages.length > 1) { - selectablePages = pages; - } - - return ( -
- {previousButton} - {firstPageButtons} - {selectablePages} - {lastPageButtons} - {nextButton} -
- ); }; EuiPagination.propTypes = { diff --git a/src/components/pagination/pagination_button.js b/src/components/pagination/pagination_button.js index eb86751aea5..00364c383c8 100644 --- a/src/components/pagination/pagination_button.js +++ b/src/components/pagination/pagination_button.js @@ -23,7 +23,7 @@ export const EuiPaginationButton = ({ return ( @@ -39,7 +39,3 @@ EuiPaginationButton.propTypes = { isPlaceholder: PropTypes.bool, hideOnMobile: PropTypes.bool, }; - -EuiPaginationButton.defaultProps = { - children: …, -}; diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap index b42f79307c7..8b97f71bdf5 100644 --- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap +++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap @@ -48,77 +48,6 @@ exports[`EuiTablePagination is rendered 1`] = `
-
- - -
-
+ /> `; From 43dda37fc32faf4b9266108f4ff75499b56d4942 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 9 Feb 2018 10:07:46 -0800 Subject: [PATCH 2/4] compressed pagination prop --- src-docs/src/views/pagination/compressed.js | 36 ++++++++++++++ .../views/pagination/pagination_example.js | 22 ++++++++- src/components/index.js | 1 + .../__snapshots__/pagination.test.js.snap | 2 +- src/components/pagination/index.js | 4 ++ src/components/pagination/pagination.js | 49 ++++++++++++++----- .../pagination/pagination_button.js | 4 ++ .../table_pagination.test.js.snap | 4 +- 8 files changed, 106 insertions(+), 16 deletions(-) create mode 100644 src-docs/src/views/pagination/compressed.js diff --git a/src-docs/src/views/pagination/compressed.js b/src-docs/src/views/pagination/compressed.js new file mode 100644 index 00000000000..0bafe967762 --- /dev/null +++ b/src-docs/src/views/pagination/compressed.js @@ -0,0 +1,36 @@ +import React, { + Component, +} from 'react'; + +import { + EuiPagination, +} from '../../../../src/components'; + +export default class extends Component { + constructor(props) { + super(props); + + this.state = { + activePage: 0 + }; + + this.PAGE_COUNT = 4; + } + + goToPage = pageNumber => { + this.setState({ + activePage: pageNumber, + }); + } + + render() { + return ( + + ); + } +} diff --git a/src-docs/src/views/pagination/pagination_example.js b/src-docs/src/views/pagination/pagination_example.js index 759df97ac4c..c574677182d 100644 --- a/src-docs/src/views/pagination/pagination_example.js +++ b/src-docs/src/views/pagination/pagination_example.js @@ -9,6 +9,7 @@ import { import { EuiCode, EuiPagination, + EuiPaginationButton, } from '../../../../src/components'; import ManyPages from './many_pages'; @@ -27,6 +28,10 @@ import CustomizablePagination from './customizable_pagination'; const customizablePaginationSource = require('!!raw-loader!./customizable_pagination'); const customizablePaginationHtml = renderToHtml(CustomizablePagination); +import Compressed from './compressed'; +const compressedSource = require('!!raw-loader!./compressed'); +const compressedHtml = renderToHtml(Compressed); + export const PaginationExample = { title: 'Pagination', sections: [{ @@ -43,7 +48,7 @@ export const PaginationExample = { We only show at most 5 consecutive pages, with shortcuts to the first and/or last page.

), - props: { EuiPagination }, + props: { EuiPagination, EuiPaginationButton }, demo: , }, { title: 'Few pages', @@ -75,6 +80,21 @@ export const PaginationExample = {

), demo: , + }, { + title: 'Compressed display', + source: [{ + type: GuideSectionTypes.JS, + code: compressedSource, + }, { + type: GuideSectionTypes.HTML, + code: compressedHtml, + }], + text: ( +

+ Use the compressed prop to minimize the horizontal footprint. +

+ ), + demo: , }, { title: 'Customizable pagination', source: [{ diff --git a/src/components/index.js b/src/components/index.js index df3b3c30843..2039377338e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -177,6 +177,7 @@ export { export { EuiPagination, + EuiPaginationButton, } from './pagination'; export { diff --git a/src/components/pagination/__snapshots__/pagination.test.js.snap b/src/components/pagination/__snapshots__/pagination.test.js.snap index 657dac35ec4..284ef9963a2 100644 --- a/src/components/pagination/__snapshots__/pagination.test.js.snap +++ b/src/components/pagination/__snapshots__/pagination.test.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiPagination is rendered 1`] = `null`; +exports[`EuiPagination is rendered 1`] = ``; diff --git a/src/components/pagination/index.js b/src/components/pagination/index.js index 577ee472877..f962d485723 100644 --- a/src/components/pagination/index.js +++ b/src/components/pagination/index.js @@ -1,3 +1,7 @@ export { EuiPagination, } from './pagination'; + +export { + EuiPaginationButton, +} from './pagination_button'; diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js index 4aed5fe1785..70b0c7f9663 100644 --- a/src/components/pagination/pagination.js +++ b/src/components/pagination/pagination.js @@ -13,6 +13,7 @@ export const EuiPagination = ({ pageCount, activePage, onPageClick, + compressed, ...rest }) => { const classes = classNames('euiPagination', className); @@ -109,26 +110,48 @@ export const EuiPagination = ({ if (pages.length > 1) { const selectablePages = pages; - return ( -
- {previousButton} - {firstPageButtons} - {selectablePages} - {lastPageButtons} - {nextButton} -
- ); + if (compressed) { + return ( +
+ {previousButton} + {nextButton} +
+ ); + } else { + return ( +
+ {previousButton} + {firstPageButtons} + {selectablePages} + {lastPageButtons} + {nextButton} +
+ ); + } } else { - return null; + // Don't render pagination if it isn't needed. Then span is here for a docs bug. + return ; } }; EuiPagination.propTypes = { className: PropTypes.string, + + /** + * The total number of pages + */ pageCount: PropTypes.number, activePage: PropTypes.number, onPageClick: PropTypes.func, + + /** + * If true, will only show next/prev arrows instead of page numbers. + */ + compressed: PropTypes.bool, }; diff --git a/src/components/pagination/pagination_button.js b/src/components/pagination/pagination_button.js index 00364c383c8..87237dd287e 100644 --- a/src/components/pagination/pagination_button.js +++ b/src/components/pagination/pagination_button.js @@ -36,6 +36,10 @@ EuiPaginationButton.propTypes = { children: PropTypes.node, className: PropTypes.string, isActive: PropTypes.bool, + + /** + * For ellipsis or other non-clickable buttons. + */ isPlaceholder: PropTypes.bool, hideOnMobile: PropTypes.bool, }; diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap index 8b97f71bdf5..ad4604e2c6e 100644 --- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap +++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap @@ -48,6 +48,8 @@ exports[`EuiTablePagination is rendered 1`] = `
+ > + +
`; From dc121867348feab45b50b88147fee9cb2dcf72ab Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 9 Feb 2018 10:37:51 -0800 Subject: [PATCH 3/4] underline active page --- src/components/pagination/_pagination_button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/pagination/_pagination_button.scss b/src/components/pagination/_pagination_button.scss index b8a3a9045ec..d79222ed63e 100644 --- a/src/components/pagination/_pagination_button.scss +++ b/src/components/pagination/_pagination_button.scss @@ -7,6 +7,7 @@ .euiPaginationButton-isActive { pointer-events: none; color: $euiColorPrimary; + text-decoration: underline; border-radius: $euiBorderRadius; font-weight: $euiFontWeightBold; } From be975e7df43273fc7fb959595829c6ad220d63cd Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Fri, 9 Feb 2018 10:42:27 -0800 Subject: [PATCH 4/4] fix border radius on pagination, add changelog --- CHANGELOG.md | 1 + src/components/pagination/_pagination_button.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 57f4081d559..121bba2938a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ - Added component to wrap blocks of substeps `EuiSubSteps` in a shaded container. ([#375](https://github.com/elastic/eui/pull/375)) - Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375)) +- Changed look and feel of pagination. Added compressed prop for smaller footprint pagination. ([#380](https://github.com/elastic/eui/pull/380)) # [`0.0.20`](https://github.com/elastic/eui/tree/v0.0.20) diff --git a/src/components/pagination/_pagination_button.scss b/src/components/pagination/_pagination_button.scss index d79222ed63e..2801794cc87 100644 --- a/src/components/pagination/_pagination_button.scss +++ b/src/components/pagination/_pagination_button.scss @@ -2,13 +2,13 @@ font-size: $euiFontSizeS; padding: 0; text-align: center; + border-radius: $euiBorderRadius; } .euiPaginationButton-isActive { pointer-events: none; color: $euiColorPrimary; text-decoration: underline; - border-radius: $euiBorderRadius; font-weight: $euiFontWeightBold; }