From 89055acc913ce923ba832ee15291c888572adc77 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 12 May 2020 12:24:06 -0700 Subject: [PATCH 1/6] fix(pagination): add pageSizeInputDisabled prop to Pagination --- .../src/components/Pagination/Pagination-story.js | 4 ++++ .../react/src/components/Pagination/Pagination.js | 13 ++++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Pagination/Pagination-story.js b/packages/react/src/components/Pagination/Pagination-story.js index 147935fc9cf7..e24bce849b25 100644 --- a/packages/react/src/components/Pagination/Pagination-story.js +++ b/packages/react/src/components/Pagination/Pagination-story.js @@ -23,6 +23,10 @@ const props = () => ({ page: number('The current page (page)', 1), totalItems: number('Total number of items (totalItems)', 103), pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false), + pageSizeInputDisabled: boolean( + 'Disable page size input (pageInputDisabled)', + false + ), pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false), backwardText: text( 'The description for the backward icon (backwardText)', diff --git a/packages/react/src/components/Pagination/Pagination.js b/packages/react/src/components/Pagination/Pagination.js index 616f7b156528..f9e6b73ed1cd 100644 --- a/packages/react/src/components/Pagination/Pagination.js +++ b/packages/react/src/components/Pagination/Pagination.js @@ -128,6 +128,11 @@ export default class Pagination extends Component { * `true` if the select box to change the page should be disabled. */ pageInputDisabled: PropTypes.bool, + + /** + * `true` if the select box to change the page size should be disabled. + */ + pageSizeInputDisabled: PropTypes.bool, }; static defaultProps = { @@ -142,6 +147,7 @@ export default class Pagination extends Component { pagesUnknown: false, isLastPage: false, pageInputDisabled: false, + pageSizeInputDisabled: false, itemText: (min, max) => `${min}–${max} items`, pageText: (page) => `page ${page}`, }; @@ -189,7 +195,10 @@ export default class Pagination extends Component { Math.max(Math.ceil(this.props.totalItems / this.state.pageSize), 1) ) { this.setState({ page }); - this.props.onChange({ page, pageSize: this.state.pageSize }); + this.props.onChange({ + page, + pageSize: this.state.pageSize, + }); } }; @@ -234,6 +243,7 @@ export default class Pagination extends Component { pagesUnknown, isLastPage, pageInputDisabled, + pageSizeInputDisabled, totalItems, onChange, // eslint-disable-line no-unused-vars page: pageNumber, // eslint-disable-line no-unused-vars @@ -279,6 +289,7 @@ export default class Pagination extends Component { noLabel inline onChange={this.handleSizeChange} + disabled={pageSizeInputDisabled} value={statePageSize}> {pageSizes.map((size) => ( From afa03571b46c20f82a18783845f0b94d5231470c Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 13 May 2020 11:10:25 -0700 Subject: [PATCH 2/6] chore(tests): update snapshots --- packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 1cd2b42b4563..b892209a1a19 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -3852,6 +3852,7 @@ Map { "pageInputDisabled": false, "pageNumberText": "Page Number", "pageRangeText": [Function], + "pageSizeInputDisabled": false, "pageText": [Function], "pagesUnknown": false, }, @@ -3911,6 +3912,9 @@ Map { "pageSize": Object { "type": "number", }, + "pageSizeInputDisabled": Object { + "type": "bool", + }, "pageSizes": Object { "args": Array [ Object { From 298eab924544ac0a84dd6da30208d031e00e5c3c Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 14 May 2020 10:34:10 -0700 Subject: [PATCH 3/6] fix(pagination): fix story prop name --- packages/react/src/components/Pagination/Pagination-story.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Pagination/Pagination-story.js b/packages/react/src/components/Pagination/Pagination-story.js index e24bce849b25..b9de3e591596 100644 --- a/packages/react/src/components/Pagination/Pagination-story.js +++ b/packages/react/src/components/Pagination/Pagination-story.js @@ -24,7 +24,7 @@ const props = () => ({ totalItems: number('Total number of items (totalItems)', 103), pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false), pageSizeInputDisabled: boolean( - 'Disable page size input (pageInputDisabled)', + 'Disable page size input (pageSizeInputDisabled)', false ), pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false), From 6eb56cd6ca44610927941a9733338bb49be058c0 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 28 May 2020 10:28:24 -0700 Subject: [PATCH 4/6] fix(pagiantion): disable page size input with existing prop --- .../react/src/components/Pagination/Pagination-story.js | 4 ---- packages/react/src/components/Pagination/Pagination.js | 9 +-------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/react/src/components/Pagination/Pagination-story.js b/packages/react/src/components/Pagination/Pagination-story.js index b9de3e591596..147935fc9cf7 100644 --- a/packages/react/src/components/Pagination/Pagination-story.js +++ b/packages/react/src/components/Pagination/Pagination-story.js @@ -23,10 +23,6 @@ const props = () => ({ page: number('The current page (page)', 1), totalItems: number('Total number of items (totalItems)', 103), pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false), - pageSizeInputDisabled: boolean( - 'Disable page size input (pageSizeInputDisabled)', - false - ), pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false), backwardText: text( 'The description for the backward icon (backwardText)', diff --git a/packages/react/src/components/Pagination/Pagination.js b/packages/react/src/components/Pagination/Pagination.js index f9e6b73ed1cd..d0e251860ac6 100644 --- a/packages/react/src/components/Pagination/Pagination.js +++ b/packages/react/src/components/Pagination/Pagination.js @@ -128,11 +128,6 @@ export default class Pagination extends Component { * `true` if the select box to change the page should be disabled. */ pageInputDisabled: PropTypes.bool, - - /** - * `true` if the select box to change the page size should be disabled. - */ - pageSizeInputDisabled: PropTypes.bool, }; static defaultProps = { @@ -147,7 +142,6 @@ export default class Pagination extends Component { pagesUnknown: false, isLastPage: false, pageInputDisabled: false, - pageSizeInputDisabled: false, itemText: (min, max) => `${min}–${max} items`, pageText: (page) => `page ${page}`, }; @@ -243,7 +237,6 @@ export default class Pagination extends Component { pagesUnknown, isLastPage, pageInputDisabled, - pageSizeInputDisabled, totalItems, onChange, // eslint-disable-line no-unused-vars page: pageNumber, // eslint-disable-line no-unused-vars @@ -289,7 +282,7 @@ export default class Pagination extends Component { noLabel inline onChange={this.handleSizeChange} - disabled={pageSizeInputDisabled} + disabled={pageInputDisabled} value={statePageSize}> {pageSizes.map((size) => ( From 95c351b640693eea156bdcbe51a4a7f9a12029d3 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 9 Jun 2020 11:49:53 -0400 Subject: [PATCH 5/6] feat(pagination): tie all inputs to disabled prop --- .../__snapshots__/PublicAPI-test.js.snap | 8 +------- .../components/Pagination/Pagination-story.js | 7 +++++-- .../src/components/Pagination/Pagination.js | 20 +++++++++++-------- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index b892209a1a19..f1ed74c17b10 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -3852,7 +3852,6 @@ Map { "pageInputDisabled": false, "pageNumberText": "Page Number", "pageRangeText": [Function], - "pageSizeInputDisabled": false, "pageText": [Function], "pagesUnknown": false, }, @@ -3900,9 +3899,7 @@ Map { "page": Object { "type": "number", }, - "pageInputDisabled": Object { - "type": "bool", - }, + "pageInputDisabled": [Function], "pageNumberText": Object { "type": "string", }, @@ -3912,9 +3909,6 @@ Map { "pageSize": Object { "type": "number", }, - "pageSizeInputDisabled": Object { - "type": "bool", - }, "pageSizes": Object { "args": Array [ Object { diff --git a/packages/react/src/components/Pagination/Pagination-story.js b/packages/react/src/components/Pagination/Pagination-story.js index 147935fc9cf7..68a0ac429c85 100644 --- a/packages/react/src/components/Pagination/Pagination-story.js +++ b/packages/react/src/components/Pagination/Pagination-story.js @@ -19,11 +19,14 @@ import { import Pagination from '../Pagination'; const props = () => ({ - disabled: boolean('Disable backward/forward buttons (disabled)', false), + disabled: boolean('Disable page inputs (disabled)', false), page: number('The current page (page)', 1), totalItems: number('Total number of items (totalItems)', 103), pagesUnknown: boolean('Total number of items unknown (pagesUnknown)', false), - pageInputDisabled: boolean('Disable page input (pageInputDisabled)', false), + pageInputDisabled: boolean( + '[Deprecated]: Disable page input (pageInputDisabled)', + false + ), backwardText: text( 'The description for the backward icon (backwardText)', 'Previous page' diff --git a/packages/react/src/components/Pagination/Pagination.js b/packages/react/src/components/Pagination/Pagination.js index d0e251860ac6..750cb62f7cc0 100644 --- a/packages/react/src/components/Pagination/Pagination.js +++ b/packages/react/src/components/Pagination/Pagination.js @@ -14,6 +14,7 @@ import Select from '../Select'; import SelectItem from '../SelectItem'; import { equals } from '../../tools/array'; import Button from '../Button'; +import deprecate from '../../prop-types/deprecate'; const { prefix } = settings; @@ -99,7 +100,7 @@ export default class Pagination extends Component { totalItems: PropTypes.number, /** - * `true` if the backward/forward buttons should be disabled. + * `true` if the backward/forward buttons, as well as the page select elements, should be disabled. */ disabled: PropTypes.bool, @@ -125,9 +126,12 @@ export default class Pagination extends Component { isLastPage: PropTypes.bool, /** - * `true` if the select box to change the page should be disabled. + * Deprecated; `true` if the select box to change the page should be disabled. */ - pageInputDisabled: PropTypes.bool, + pageInputDisabled: deprecate( + PropTypes.bool, + `\nThe prop \`pageInputDisabled\` for Pagination has been deprecated, as the feature of \`pageInputDisabled\` has been combined with the general \`disabled\` prop.` + ), }; static defaultProps = { @@ -236,6 +240,7 @@ export default class Pagination extends Component { pageNumberText, // eslint-disable-line no-unused-vars pagesUnknown, isLastPage, + disabled, pageInputDisabled, totalItems, onChange, // eslint-disable-line no-unused-vars @@ -247,7 +252,7 @@ export default class Pagination extends Component { const inputId = id || this.uniqueId; const { page: statePage, pageSize: statePageSize } = this.state; const totalPages = Math.max(Math.ceil(totalItems / statePageSize), 1); - const backButtonDisabled = this.props.disabled || statePage === 1; + const backButtonDisabled = disabled || statePage === 1; const backButtonClasses = classnames( `${prefix}--pagination__button`, `${prefix}--pagination__button--backward`, @@ -255,8 +260,7 @@ export default class Pagination extends Component { [`${prefix}--pagination__button--no-index`]: backButtonDisabled, } ); - const forwardButtonDisabled = - this.props.disabled || statePage === totalPages; + const forwardButtonDisabled = disabled || statePage === totalPages; const forwardButtonClasses = classnames( `${prefix}--pagination__button`, `${prefix}--pagination__button--forward`, @@ -282,7 +286,7 @@ export default class Pagination extends Component { noLabel inline onChange={this.handleSizeChange} - disabled={pageInputDisabled} + disabled={pageInputDisabled || disabled} value={statePageSize}> {pageSizes.map((size) => ( @@ -310,7 +314,7 @@ export default class Pagination extends Component { hideLabel onChange={this.handlePageInputChange} value={statePage} - disabled={pageInputDisabled}> + disabled={pageInputDisabled || disabled}> {selectItems} From c84a15dc5dd0bec01025656301e794d0c971e203 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 10 Jun 2020 12:17:44 -0400 Subject: [PATCH 6/6] Update packages/react/src/components/Pagination/Pagination.js Co-authored-by: Josh Black --- packages/react/src/components/Pagination/Pagination.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Pagination/Pagination.js b/packages/react/src/components/Pagination/Pagination.js index 750cb62f7cc0..374e165b110e 100644 --- a/packages/react/src/components/Pagination/Pagination.js +++ b/packages/react/src/components/Pagination/Pagination.js @@ -130,7 +130,7 @@ export default class Pagination extends Component { */ pageInputDisabled: deprecate( PropTypes.bool, - `\nThe prop \`pageInputDisabled\` for Pagination has been deprecated, as the feature of \`pageInputDisabled\` has been combined with the general \`disabled\` prop.` + `The prop \`pageInputDisabled\` for Pagination has been deprecated, as the feature of \`pageInputDisabled\` has been combined with the general \`disabled\` prop.` ), };