From 756d2e429dca283cbb47ac7a4b73b68d8a3f6cf3 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 1 Nov 2021 15:25:34 -0400 Subject: [PATCH 01/21] Fix console error of Custom table example --- src-docs/src/views/tables/custom/custom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/tables/custom/custom.js b/src-docs/src/views/tables/custom/custom.js index a906a22b0da..e48bf46e856 100644 --- a/src-docs/src/views/tables/custom/custom.js +++ b/src-docs/src/views/tables/custom/custom.js @@ -756,7 +756,7 @@ export default class extends Component { Date: Mon, 1 Nov 2021 17:01:15 -0400 Subject: [PATCH 02/21] [EuiPagination] Allowing `null` if `pageCount` is unknown --- .../in_memory_table.test.tsx.snap | 150 ++--- .../__snapshots__/pagination.test.tsx.snap | 543 ++++++++++++++++++ src/components/pagination/pagination.test.tsx | 34 ++ src/components/pagination/pagination.tsx | 390 ++++++++----- 4 files changed, 891 insertions(+), 226 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 43e8529e7a3..3b1af414703 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 @@ -485,56 +485,64 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` aria-label="Pagination for table: " className="euiPagination" > - - - - - - + type="arrowLeft" + > + - +
- - - - + type="arrowRight" + > + - + diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap index 4e4fcc5c9f4..606a7c2bc47 100644 --- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap +++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap @@ -63,3 +63,546 @@ exports[`EuiPagination is rendered 1`] = ` `; + +exports[`EuiPagination props activePage is rendered 1`] = ` + +`; + +exports[`EuiPagination props aria-controls is rendered 1`] = ` + +`; + +exports[`EuiPagination props compressed is rendered 1`] = ` + +`; + +exports[`EuiPagination props pageCount can be null 1`] = ` + +`; + +exports[`EuiPagination props pageCount is rendered 1`] = ` + +`; diff --git a/src/components/pagination/pagination.test.tsx b/src/components/pagination/pagination.test.tsx index 9a817f8eb1f..4afed958c97 100644 --- a/src/components/pagination/pagination.test.tsx +++ b/src/components/pagination/pagination.test.tsx @@ -18,4 +18,38 @@ describe('EuiPagination', () => { expect(component).toMatchSnapshot(); }); + + describe('props', () => { + describe('pageCount', () => { + test('is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('can be null', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + + test('activePage is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('compressed is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + test('aria-controls is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); }); diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 9d52aa4f156..130e3f3d4f3 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -25,8 +25,9 @@ type SafeClickHandler = (e: MouseEvent, pageIndex: number) => void; export interface EuiPaginationProps { /** * The total number of pages. + * Pass `null` if total count in unknown. */ - pageCount?: number; + pageCount?: number | null; /** * The current page using a zero based index. @@ -42,7 +43,7 @@ export interface EuiPaginationProps { compressed?: boolean; /** - * If passed in, passes value through to each button to set aria-controls + * If passed in, passes value through to each button to set aria-controls. */ 'aria-controls'?: string; } @@ -72,40 +73,230 @@ export const EuiPagination: FunctionComponent = ({ onPageClick(pageIndex); }; - const sharedButtonProps = { activePage, pageCount, ariaControls, safeClick }; - const classes = classNames('euiPagination', className); const hasControl = ariaControls !== undefined; - const pages = []; - const firstPageInRange = Math.max( - 0, - Math.min( - activePage - NUMBER_SURROUNDING_PAGES, - pageCount - MAX_VISIBLE_PAGES - ) + + const nextButton = ( + ); - const lastPageInRange = Math.min( - pageCount, - firstPageInRange + MAX_VISIBLE_PAGES + + const previousButton = ( + ); - for (let i = firstPageInRange, index = 0; i < lastPageInRange; i++, index++) { - pages.push( - - ); + let centerPageCount; + + if (pageCount) { + const sharedButtonProps = { + activePage, + ariaControls, + safeClick, + pageCount, + }; + + if (compressed) { + centerPageCount = ( + + + + ), + total: ( + + ), + }} + /> + + + ); + } else { + const pages = []; + + const firstPageInRange = Math.max( + 0, + Math.min( + activePage - NUMBER_SURROUNDING_PAGES, + pageCount - MAX_VISIBLE_PAGES + ) + ); + const lastPageInRange = Math.min( + pageCount, + firstPageInRange + MAX_VISIBLE_PAGES + ); + + for ( + let i = firstPageInRange, index = 0; + i < lastPageInRange; + i++, index++ + ) { + pages.push( + + ); + } + + const firstPageButtons = []; + + if (firstPageInRange > 0) { + firstPageButtons.push( + + ); + + if (firstPageInRange > 1 && firstPageInRange !== 2) { + firstPageButtons.push( + + {(firstRangeAriaLabel: string) => ( +
  • + … +
    • + )} +     + ); + } else if (firstPageInRange === 2) { + firstPageButtons.push( + + ); + } + } + + const lastPageButtons = []; + + if (lastPageInRange < pageCount) { + if (lastPageInRange + 1 === pageCount - 1) { + lastPageButtons.push( + + ); + } else if (lastPageInRange < pageCount - 1) { + lastPageButtons.push( + + {(lastRangeAriaLabel: string) => ( +
  • + … +
    • + )} +     + ); + } + + lastPageButtons.push( + + ); + } + + const selectablePages = pages; + + const accessibleName = { + ...(rest['aria-label'] && { 'aria-label': rest['aria-label'] }), + ...(rest['aria-labelledby'] && { + 'aria-labelledby': rest['aria-labelledby'], + }), + }; + + centerPageCount = ( +
      + {firstPageButtons} + {selectablePages} + {lastPageButtons} +
    + ); + } } + return ( + + ); +}; + +const PaginationButtonPrevious = ({ + hasControl, + activePage, + disabled, + ariaControls, + safeClick, +}: { + hasControl?: boolean; + activePage: number; + disabled?: boolean; + ariaControls?: string; + safeClick: SafeClickHandler; +}) => { let prevPageButtonProps = {}; - if (hasControl && activePage !== 0) { + if (hasControl && !disabled) { prevPageButtonProps = { 'aria-controls': ariaControls, href: `#${ariaControls}`, }; } else { - prevPageButtonProps = { disabled: activePage === 0 }; + prevPageButtonProps = { disabled }; } - const previousButton = ( + return ( = ({ onClick={(e: MouseEvent) => safeClick(e, activePage - 1)} iconType="arrowLeft" color="text" - aria-label={ - activePage === 0 ? disabledPreviousPage : previousPage - } + aria-label={disabled ? disabledPreviousPage : previousPage} data-test-subj="pagination-button-previous" {...prevPageButtonProps} /> @@ -132,90 +321,32 @@ export const EuiPagination: FunctionComponent = ({ )} ); +}; - const firstPageButtons = []; - - if (firstPageInRange > 0) { - firstPageButtons.push( - - ); - - if (firstPageInRange > 1 && firstPageInRange !== 2) { - firstPageButtons.push( - - {(firstRangeAriaLabel: string) => ( -
  • - … -
    • - )} -     - ); - } else if (firstPageInRange === 2) { - firstPageButtons.push( - - ); - } - } - - const lastPageButtons = []; - - if (lastPageInRange < pageCount) { - if (lastPageInRange + 1 === pageCount - 1) { - lastPageButtons.push( - - ); - } else if (lastPageInRange < pageCount - 1) { - lastPageButtons.push( - - {(lastRangeAriaLabel: string) => ( -
  • - … -
    • - )} -     - ); - } - - lastPageButtons.push( - - ); - } - +const PaginationButtonNext = ({ + hasControl, + activePage, + disabled, + ariaControls, + safeClick, +}: { + hasControl?: boolean; + activePage: number; + disabled?: boolean; + ariaControls?: string; + safeClick: SafeClickHandler; +}) => { let nextPageButtonProps = {}; - if (hasControl && activePage !== pageCount - 1) { + if (hasControl && !disabled) { nextPageButtonProps = { 'aria-controls': ariaControls, href: `#${ariaControls}`, }; } else { - nextPageButtonProps = { disabled: activePage === pageCount - 1 }; + nextPageButtonProps = { disabled }; } - const nextButton = ( + return ( = ({ safeClick(e, activePage + 1)} iconType="arrowRight" - aria-label={ - activePage === pageCount - 1 ? disabledNextPage : nextPage - } + aria-label={disabled ? disabledNextPage : nextPage} color="text" data-test-subj="pagination-button-next" {...nextPageButtonProps} @@ -239,63 +368,6 @@ export const EuiPagination: FunctionComponent = ({ )} ); - - const selectablePages = pages; - - if (compressed) { - const firstPageButtonCompressed = ( - - ); - const lastPageButtonCompressed = ( - - ); - - return ( - - ); - } - - const accessibleName = { - ...(rest['aria-label'] && { 'aria-label': rest['aria-label'] }), - ...(rest['aria-labelledby'] && { - 'aria-labelledby': rest['aria-labelledby'], - }), - }; - - return ( - - ); }; const PaginationButtonWrapper = ({ From faf9b6dcf8f3de210adb2eb732778015ef96e0f4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 1 Nov 2021 17:18:10 -0400 Subject: [PATCH 03/21] =?UTF-8?q?[EuiPagination]=20Added=20tooltip=20aroun?= =?UTF-8?q?d=20prev/next=20buttons=20and=20added=20`'arrows=E2=80=99`=20op?= =?UTF-8?q?tion=20for=20`compressed`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../in_memory_table.test.tsx.snap | 157 ++++--- .../__snapshots__/data_grid.test.tsx.snap | 62 +-- .../__snapshots__/pagination.test.tsx.snap | 397 +++++++++++------- src/components/pagination/pagination.test.tsx | 13 +- src/components/pagination/pagination.tsx | 46 +- .../table_pagination.test.tsx.snap | 112 ++--- 6 files changed, 475 insertions(+), 312 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 3b1af414703..79f680958a4 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 @@ -505,41 +505,58 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` default="Previous page" token="euiPagination.disabledPreviousPage" > - - - - - + + + + + +     @@ -740,39 +757,55 @@ exports[`EuiInMemoryTable behavior pagination 1`] = ` default="Next page" token="euiPagination.disabledNextPage" > - - - + + + +     diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 27962a9b854..8321d16cf54 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -43,21 +43,25 @@ exports[`EuiDataGrid pagination renders 1`] = ` aria-label="Pagination for preceding grid: test grid" class="euiPagination" > - - + + +
    - + + diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap index 606a7c2bc47..04ee83b25aa 100644 --- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap +++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap @@ -6,20 +6,24 @@ exports[`EuiPagination is rendered 1`] = ` class="euiPagination testClass1 testClass2" data-test-subj="test subject string" > - + +
    - + + `; @@ -68,19 +76,23 @@ exports[`EuiPagination props activePage is rendered 1`] = ` `; @@ -273,20 +289,24 @@ exports[`EuiPagination props aria-controls is rendered 1`] = ` `; -exports[`EuiPagination props compressed is rendered 1`] = ` +exports[`EuiPagination props compressed is rendered 1`] = ` +`; + +exports[`EuiPagination props compressed arrows is rendered 1`] = ` + `; @@ -411,33 +486,41 @@ exports[`EuiPagination props pageCount can be null 1`] = ` `; @@ -445,20 +528,24 @@ exports[`EuiPagination props pageCount is rendered 1`] = ` `; diff --git a/src/components/pagination/pagination.test.tsx b/src/components/pagination/pagination.test.tsx index 4afed958c97..0f3fe573594 100644 --- a/src/components/pagination/pagination.test.tsx +++ b/src/components/pagination/pagination.test.tsx @@ -40,10 +40,17 @@ describe('EuiPagination', () => { expect(component).toMatchSnapshot(); }); - test('compressed is rendered', () => { - const component = render(); + describe('compressed', () => { + test(' is rendered', () => { + const component = render(); - expect(component).toMatchSnapshot(); + expect(component).toMatchSnapshot(); + }); + test('arrows is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); }); test('aria-controls is rendered', () => { diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 130e3f3d4f3..14403926199 100644 --- a/src/components/pagination/pagination.tsx +++ b/src/components/pagination/pagination.tsx @@ -15,6 +15,7 @@ import { EuiButtonIcon } from '../button'; import { EuiI18n } from '../i18n'; import { EuiText } from '../text'; import { EuiHideFor } from '../responsive'; +import { EuiToolTip } from '../tool_tip'; const MAX_VISIBLE_PAGES = 5; const NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5); @@ -40,7 +41,7 @@ export interface EuiPaginationProps { /** * If true, will only show next/prev arrows instead of page numbers. */ - compressed?: boolean; + compressed?: boolean | 'arrows'; /** * If passed in, passes value through to each button to set aria-controls. @@ -106,7 +107,7 @@ export const EuiPagination: FunctionComponent = ({ pageCount, }; - if (compressed) { + if (compressed === true) { centerPageCount = ( @@ -133,7 +134,7 @@ export const EuiPagination: FunctionComponent = ({ ); - } else { + } else if (compressed !== 'arrows') { const pages = []; const firstPageInRange = Math.max( @@ -308,14 +309,19 @@ const PaginationButtonPrevious = ({ default="Previous page" > {(disabledPreviousPage: string) => ( - safeClick(e, activePage - 1)} - iconType="arrowLeft" - color="text" - aria-label={disabled ? disabledPreviousPage : previousPage} - data-test-subj="pagination-button-previous" - {...prevPageButtonProps} - /> + + safeClick(e, activePage - 1)} + iconType="arrowLeft" + color="text" + aria-label={disabled ? disabledPreviousPage : previousPage} + data-test-subj="pagination-button-previous" + {...prevPageButtonProps} + /> + )} )} @@ -355,14 +361,16 @@ const PaginationButtonNext = ({ {(nextPage: string) => ( {(disabledNextPage: string) => ( - safeClick(e, activePage + 1)} - iconType="arrowRight" - aria-label={disabled ? disabledNextPage : nextPage} - color="text" - data-test-subj="pagination-button-next" - {...nextPageButtonProps} - /> + + safeClick(e, activePage + 1)} + iconType="arrowRight" + aria-label={disabled ? disabledNextPage : nextPage} + color="text" + data-test-subj="pagination-button-next" + {...nextPageButtonProps} + /> + )} )} 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 index 0fa07f8016b..54fb2e4b40d 100644 --- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap +++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap @@ -44,19 +44,23 @@ exports[`EuiTablePagination is rendered 1`] = ` class="euiPagination testClass1 testClass2" data-test-subj="test subject string" > - + +
    - + + @@ -197,19 +205,23 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = ` class="euiPagination testClass1 testClass2" data-test-subj="test subject string" > - + +
    - + + From ddf394088d7d70f412f2d38d24ab562ea4f3a508 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 1 Nov 2021 17:35:12 -0400 Subject: [PATCH 04/21] [EuiIcon] Added `doubleArrowLeft` and `doubleArrowRight` while also updating the other `arrow` icons to a thicker weight --- src-docs/src/views/icon/icons.js | 2 + .../icon/__snapshots__/icon.test.tsx.snap | 66 ++++++++++++++++--- src/components/icon/assets/arrow_down.tsx | 7 +- src/components/icon/assets/arrow_left.tsx | 7 +- src/components/icon/assets/arrow_right.tsx | 7 +- src/components/icon/assets/arrow_up.tsx | 7 +- .../icon/assets/doubleArrowLeft.tsx | 43 ++++++++++++ .../icon/assets/doubleArrowRight.tsx | 43 ++++++++++++ src/components/icon/icon.tsx | 2 + src/components/icon/svgs/arrow_down.svg | 6 +- src/components/icon/svgs/arrow_left.svg | 6 +- src/components/icon/svgs/arrow_right.svg | 6 +- src/components/icon/svgs/arrow_up.svg | 6 +- src/components/icon/svgs/doubleArrowLeft.svg | 4 ++ src/components/icon/svgs/doubleArrowRight.svg | 4 ++ 15 files changed, 180 insertions(+), 36 deletions(-) create mode 100644 src/components/icon/assets/doubleArrowLeft.tsx create mode 100644 src/components/icon/assets/doubleArrowRight.tsx create mode 100644 src/components/icon/svgs/doubleArrowLeft.svg create mode 100644 src/components/icon/svgs/doubleArrowRight.svg diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js index abf1f690a4d..75196ac4407 100644 --- a/src-docs/src/views/icon/icons.js +++ b/src-docs/src/views/icon/icons.js @@ -64,6 +64,8 @@ export const iconTypes = [ 'documentEdit', 'documents', 'dot', + 'doubleArrowLeft', + 'doubleArrowRight', 'download', 'email', 'empty', diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap index c182fddcced..f532637cab8 100644 --- a/src/components/icon/__snapshots__/icon.test.tsx.snap +++ b/src/components/icon/__snapshots__/icon.test.tsx.snap @@ -704,6 +704,7 @@ exports[`EuiIcon props type arrowDown is rendered 1`] = ` `; @@ -722,6 +723,7 @@ exports[`EuiIcon props type arrowLeft is rendered 1`] = ` `; @@ -740,6 +742,7 @@ exports[`EuiIcon props type arrowRight is rendered 1`] = ` `; @@ -758,6 +761,7 @@ exports[`EuiIcon props type arrowUp is rendered 1`] = ` `; @@ -1819,6 +1823,52 @@ exports[`EuiIcon props type dot is rendered 1`] = ` `; +exports[`EuiIcon props type doubleArrowLeft is rendered 1`] = ` + +`; + +exports[`EuiIcon props type doubleArrowRight is rendered 1`] = ` + +`; + exports[`EuiIcon props type download is rendered 1`] = ` - - - - - - - - - - + aria-hidden="true" + className="euiButtonIcon__icon" + color="inherit" + data-euiicon-type="arrowLeft" + size="m" + /> + + +     +
    - - - - - - - + aria-hidden="true" + className="euiButtonIcon__icon" + color="inherit" + data-euiicon-type="arrowRight" + size="m" + /> + + + +     diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx index 4e9ad1ee1ca..752e260f229 100644 --- a/src/components/button/button_icon/button_icon.tsx +++ b/src/components/button/button_icon/button_icon.tsx @@ -73,7 +73,7 @@ export interface EuiButtonIconProps extends CommonProps { display?: EuiButtonIconDisplay; } -type EuiButtonIconPropsForAnchor = { +export type EuiButtonIconPropsForAnchor = { type?: string; } & PropsForAnchor< EuiButtonIconProps, diff --git a/src/components/button/button_icon/index.ts b/src/components/button/button_icon/index.ts index b2e4516914f..6c54524adfb 100644 --- a/src/components/button/button_icon/index.ts +++ b/src/components/button/button_icon/index.ts @@ -11,4 +11,5 @@ export { EuiButtonIconColor, EuiButtonIconProps, EuiButtonIconPropsForButton, + EuiButtonIconPropsForAnchor, } from './button_icon'; diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index e1ab897ee36..5d77da95c89 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -43,25 +43,22 @@ exports[`EuiDataGrid pagination renders 1`] = ` aria-label="Pagination for preceding grid: test grid" class="euiPagination" > - - - - +