diff --git a/package.json b/package.json index 766488abefd..fe88b958399 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "generate": "yarn plop", "lint:md": "yarn eslint packages/patternfly-4 --ext md --no-eslintrc --config .eslintrc-md.json --cache", "lint:style": "stylelint \"**/sass/**/*.scss\" \"!**/dist/**/*.scss\"", - "lint:ts": "node --max-old-space-size=4096 node_modules/.bin/eslint packages/patternfly-4/react-core packages/patternfly-4/react-table packages/patternfly-4/react-topology packages/patternfly-4/react-catalog-view-extension packages/patternfly-4/react-docs packages/patternfly-4/react-inline-edit-extension packages/patternfly-4/react-charts packages/patternfly-4/react-integration --ext js,jsx,ts,tsx --cache", + "lint:ts": "node --max-old-space-size=4096 node_modules/.bin/eslint packages/patternfly-4/react-core packages/patternfly-4/react-table packages/patternfly-4/react-topology packages/patternfly-4/react-catalog-view-extension packages/patternfly-4/react-docs packages/patternfly-4/react-inline-edit-extension packages/patternfly-4/react-charts packages/patternfly-4/react-integration packages/patternfly-4/react-styled-system --ext js,jsx,ts,tsx --cache", "lint:versions": "node ./packages/patternfly-4/verifyCoreVersions.js", "prettier": "node node_modules/.bin/prettier --write \"storybook/**/*.{js,ts,tsx}\" \"packages/**/*.{js,ts,tsx}\" \"scripts/**/*.{js,ts,tsx}\"", "serve:docs": "lerna run serve", diff --git a/packages/patternfly-4/react-integration/cypress/integration/tableeditable.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/tableeditable.spec.ts index 6b879bd85a8..5c81fd85d91 100644 --- a/packages/patternfly-4/react-integration/cypress/integration/tableeditable.spec.ts +++ b/packages/patternfly-4/react-integration/cypress/integration/tableeditable.spec.ts @@ -22,121 +22,182 @@ describe('Table Simple Test', () => { }); it('Check edit', () => { - cy.get('.pf-m-inline-editable > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control') - .type('test'); - cy.get('.pf-m-inline-editable > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button') - .click(); - cy.get(':nth-child(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__value') - .should('have.text', 'Row 1 cell 1 contenttest'); + cy.get( + '.pf-m-inline-editable > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control' + ).type('test'); + cy.get( + '.pf-m-inline-editable > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button' + ).click(); + cy.get(':nth-child(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__value').should( + 'have.text', + 'Row 1 cell 1 contenttest' + ); }); it('Check can cancel edit', () => { - cy.get('.pf-c-inline-edit tbody tr:nth-of-type(2) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button') - .click(); - cy.get('.pf-m-inline-editable:nth-of-type(2) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control') - .clear().type('xyz'); - cy.get('.pf-m-inline-editable:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button') - .click(); - cy.get('.pf-c-inline-edit tbody tr:nth-of-type(2) > [data-label="Text input col 4"] .pf-c-inline-edit__value') - .should('have.text', 'Row 2 cell 4 content'); + cy.get( + '.pf-c-inline-edit tbody tr:nth-of-type(2) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button' + ).click(); + cy.get( + '.pf-m-inline-editable:nth-of-type(2) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control' + ) + .clear() + .type('xyz'); + cy.get( + '.pf-m-inline-editable:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button' + ).click(); + cy.get( + '.pf-c-inline-edit tbody tr:nth-of-type(2) > [data-label="Text input col 4"] .pf-c-inline-edit__value' + ).should('have.text', 'Row 2 cell 4 content'); }); it('Check failed validation displays error msg', () => { - cy.get('.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button') - .click(); - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control') - .clear().type('foo'); - cy.get('.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button') - .click(); - cy.get('.pf-c-inline-edit tbody tr:nth-of-type(1) > [data-label="Text input col 4"] .pf-c-inline-edit__input .pf-m-error') - .should('have.text', 'Value cannot be "foo", Value must be at least 7 characters'); - cy.get('.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button') - .click(); + cy.get( + '.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button' + ).click(); + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control' + ) + .clear() + .type('foo'); + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button' + ).click(); + cy.get( + '.pf-c-inline-edit tbody tr:nth-of-type(1) > [data-label="Text input col 4"] .pf-c-inline-edit__input .pf-m-error' + ).should('have.text', 'Value cannot be "foo", Value must be at least 7 characters'); + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button' + ).click(); }); it('Check failed validation sets aria-invalid', () => { - cy.get('.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button') - .click(); - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control') - .clear().type('xyz'); - cy.get('.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button') - .click(); - cy.get('.pf-c-inline-edit tbody tr:nth-of-type(1) > [data-label="Text input col 4"] .pf-c-inline-edit__input .pf-c-form-control') - .should('have.attr', 'aria-invalid', 'true'); - cy.get('.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button') - .click(); + cy.get( + '.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button' + ).click(); + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control' + ) + .clear() + .type('xyz'); + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button' + ).click(); + cy.get( + '.pf-c-inline-edit tbody tr:nth-of-type(1) > [data-label="Text input col 4"] .pf-c-inline-edit__input .pf-c-form-control' + ).should('have.attr', 'aria-invalid', 'true'); + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button' + ).click(); }); it('Check errors are unique per cell', () => { - cy.get('.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button') - .click(); // click the edit button - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control') - .clear().type('foo'); // enter foo into first field - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-c-form-control') - .clear(); - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control') - .clear().type('xyz'); // enter xyz into last field - cy.get('.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button') - .click(); // attempt to submit invalid entries - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-m-error') - .should('have.text', 'Value cannot be "foo", Value must be at least 7 characters'); // ensure first field receives relevant error texts - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-m-error') - .should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure second field receives relevant error texts - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-m-error') - .should('have.text', 'Value must be at least 7 characters, Value cannot be xyz'); // ensure last field receives relevant error texts - cy.get('.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button') - .click(); // cancel edit to revert row back to original state + cy.get( + '.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button' + ).click(); // click the edit button + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control' + ) + .clear() + .type('foo'); // enter foo into first field + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-c-form-control' + ).clear(); + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-c-form-control' + ) + .clear() + .type('xyz'); // enter xyz into last field + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button' + ).click(); // attempt to submit invalid entries + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-m-error' + ).should('have.text', 'Value cannot be "foo", Value must be at least 7 characters'); // ensure first field receives relevant error texts + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-m-error' + ).should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure second field receives relevant error texts + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 4"] > .pf-c-inline-edit__input > .pf-m-error' + ).should('have.text', 'Value must be at least 7 characters, Value cannot be xyz'); // ensure last field receives relevant error texts + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button' + ).click(); // cancel edit to revert row back to original state }); it('Check relevant errors updated per cell each time row edit submission attempted', () => { - cy.get('.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button') - .click(); // click the edit button - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control') - .clear().type('foo'); // enter foo into first field - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-c-form-control') - .clear(); // clear the third field text - cy.get('.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button') - .click(); // attempt to submit invalid entries - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-m-error') - .should('have.text', 'Value cannot be "foo", Value must be at least 7 characters'); // ensure first field receives relevant error texts - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-m-error') - .should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure second field receives relevant error texts - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control') - .clear().type('1234567'); // update first field to valid entry - cy.get('.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button') - .click(); // attempt to submit invalid entries - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control') - .should('have.attr', 'aria-invalid', 'false'); // ensure first field releases error text - cy.get('.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-m-error') - .should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure third field STILL has relevant error texts - cy.get('.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button') - .click(); // cancel edit to revert row back to original state + cy.get( + '.pf-c-inline-edit tbody tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button' + ).click(); // click the edit button + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control' + ) + .clear() + .type('foo'); // enter foo into first field + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-c-form-control' + ).clear(); // clear the third field text + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button' + ).click(); // attempt to submit invalid entries + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-m-error' + ).should('have.text', 'Value cannot be "foo", Value must be at least 7 characters'); // ensure first field receives relevant error texts + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-m-error' + ).should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure second field receives relevant error texts + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control' + ) + .clear() + .type('1234567'); // update first field to valid entry + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(1) > .pf-c-button' + ).click(); // attempt to submit invalid entries + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 1"] > .pf-c-inline-edit__input > .pf-c-form-control' + ).should('have.attr', 'aria-invalid', 'false'); // ensure first field releases error text + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > [data-label="Text input col 3"] > .pf-c-inline-edit__input > .pf-m-error' + ).should('have.text', 'This field is required, Value must be at least 7 characters'); // ensure third field STILL has relevant error texts + cy.get( + '.pf-m-inline-editable:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > :nth-child(2) > .pf-c-button' + ).click(); // cancel edit to revert row back to original state }); it('Check edit action buttons have default aria labels', () => { - cy.get('.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button') - .should('have.attr', 'aria-label', 'Place row 0 in edit mode'); // first row should have default aria-label for edit button - cy.get('.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button') - .click(); - cy.get('.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:first-of-type() > .pf-c-button') - .should('have.attr', 'aria-label', 'Save row edits for row 0'); // first row should have default aria-label for save button - cy.get('.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button') - .should('have.attr', 'aria-label', 'Cancel row edits for row 0'); // first row should have default aria-label for cancel button - cy.get('.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button') - .click(); // cancel edit to revert row back to original state + cy.get( + '.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button' + ).should('have.attr', 'aria-label', 'Place row 0 in edit mode'); // first row should have default aria-label for edit button + cy.get( + '.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button' + ).click(); + cy.get( + '.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:first-of-type() > .pf-c-button' + ).should('have.attr', 'aria-label', 'Save row edits for row 0'); // first row should have default aria-label for save button + cy.get( + '.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button' + ).should('have.attr', 'aria-label', 'Cancel row edits for row 0'); // first row should have default aria-label for cancel button + cy.get( + '.pf-c-inline-edit tr:nth-of-type(1) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button' + ).click(); // cancel edit to revert row back to original state }); it('Check edit action buttons can have customized aria labels', () => { - cy.get('.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button') - .should('have.attr', 'aria-label', 'Edit row 1'); // first row should have customized aria-label for edit button - cy.get('.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button') - .click(); - cy.get('.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:first-of-type() > .pf-c-button') - .should('have.attr', 'aria-label', 'Save edits for row 1'); // first row should have customized aria-label for save button - cy.get('.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button') - .should('have.attr', 'aria-label', 'Cancel edits for row 1'); // first row should have customized aria-label for cancel button - cy.get('.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button') - .click(); // cancel edit to revert row back to original state + cy.get( + '.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button' + ).should('have.attr', 'aria-label', 'Edit row 1'); // first row should have customized aria-label for edit button + cy.get( + '.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action .pf-c-inline-edit__action.pf-m-enable-editable > .pf-c-button' + ).click(); + cy.get( + '.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:first-of-type() > .pf-c-button' + ).should('have.attr', 'aria-label', 'Save edits for row 1'); // first row should have customized aria-label for save button + cy.get( + '.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button' + ).should('have.attr', 'aria-label', 'Cancel edits for row 1'); // first row should have customized aria-label for cancel button + cy.get( + '.pf-c-inline-edit tr:nth-of-type(2) > .pf-c-table__inline-edit-action > .pf-c-inline-edit__group > .pf-c-inline-edit__action:nth-of-type(2) > .pf-c-button' + ).click(); // cancel edit to revert row back to original state }); - }); diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx index 5151639a92f..6854c8b3649 100644 --- a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx +++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx @@ -1,5 +1,5 @@ +/* eslint-disable no-shadow */ import * as React from 'react'; -import { TextInput } from '@patternfly/react-core'; import { Table, TableHeader, @@ -44,12 +44,7 @@ export class TableEditableDemo extends React.Component + inputAriaLabel="Row 1 cell 1 content" + /> ), props: { value: 'Row 1 cell 1 content', @@ -79,7 +75,8 @@ export class TableEditableDemo extends React.Component + inputAriaLabel="Row 1 cell 2 content" + /> ), props: { value: 'Row 1 cell 2, disabled content', @@ -94,7 +91,8 @@ export class TableEditableDemo extends React.Component + inputAriaLabel="Row 1 cell 3 content" + /> ), props: { value: 'Row 1 cell 3 content', @@ -109,13 +107,14 @@ export class TableEditableDemo extends React.Component + inputAriaLabel="Row 1 cell 4 content" + /> ), props: { value: 'Row 1 cell 4 content', name: 'uniqueIdRow1Cell4' } - }, + } ] }, { @@ -132,7 +131,8 @@ export class TableEditableDemo extends React.Component + inputAriaLabel="Row 2 cell 1 content" + /> ), props: { value: 'Row 2 cell 1 content', @@ -148,7 +148,8 @@ export class TableEditableDemo extends React.Component + inputAriaLabel="Row 2 cell 2 content" + /> ), props: { value: 'Row 2 cell 2, disabled content', @@ -163,7 +164,8 @@ export class TableEditableDemo extends React.Component + inputAriaLabel="Row 2 cell 3 content" + /> ), props: { value: 'Row 2 cell 3 content', @@ -178,27 +180,26 @@ export class TableEditableDemo extends React.Component + inputAriaLabel="Row 2 cell 4 content" + /> ), props: { value: 'Row 2 cell 4 content', name: 'uniqueIdRow2Cell4' } - }, + } ] - }, + } ] }; - - }; + } componentDidMount() { window.scrollTo(0, 0); } updateEditableRows: OnRowEdit = (evt, type, isEditable, rowIndex, validationErrors) => { - - let newRows = Array.from(this.state.rows); + const newRows = Array.from(this.state.rows); if (validationErrors && Object.keys(validationErrors).length) { newRows[rowIndex] = validateCellEdits(newRows[rowIndex], type, validationErrors); @@ -226,7 +227,7 @@ export class TableEditableDemo extends React.Component { - let newRows = Array.from(this.state.rows); + const newRows = Array.from(this.state.rows); (newRows[rowIndex].cells[cellIndex] as IRowCell).props.editableValue = newValue; this.setState({ rows: newRows @@ -243,9 +244,10 @@ export class TableEditableDemo extends React.Component - - + rows={rows} + > + + ); } diff --git a/packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledTheme.d.ts b/packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledTheme.d.ts index 4107e295781..d8971aa709d 100644 --- a/packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledTheme.d.ts +++ b/packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledTheme.d.ts @@ -1,5 +1,6 @@ import { FunctionComponent, HTMLProps, ReactNode } from 'react'; +/* eslint-disable camelcase */ export interface Space { xs: number; sm: number; @@ -161,7 +162,7 @@ export interface StyledConstants { } export interface PatternFlyThemeProviderProps extends HTMLProps { - theme?: Object; + theme?: object; children: ReactNode; } diff --git a/packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledTheme.js b/packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledTheme.js index 790c7b16cef..5f59e87b034 100644 --- a/packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledTheme.js +++ b/packages/patternfly-4/react-styled-system/src/components/StyledSystem/StyledTheme.js @@ -102,7 +102,6 @@ import global_ZIndex_lg from '@patternfly/react-tokens/dist/js/global_ZIndex_lg' import global_ZIndex_xl from '@patternfly/react-tokens/dist/js/global_ZIndex_xl'; import global_ZIndex_2xl from '@patternfly/react-tokens/dist/js/global_ZIndex_2xl'; - /** * Maps to keys or array positions in the StyledTheme */